Hints as a classes
This commit is contained in:
		
							parent
							
								
									8cef5981b8
								
							
						
					
					
						commit
						fb8b4d28ce
					
				
					 7 changed files with 318 additions and 177 deletions
				
			
		| 
						 | 
				
			
			@ -1,57 +0,0 @@
 | 
			
		|||
import Hint from 'content/components/common/hint';
 | 
			
		||||
 | 
			
		||||
describe('Hint class', () => {
 | 
			
		||||
  beforeEach(() => {
 | 
			
		||||
    document.body.innerHTML = __html__['test/content/components/common/hint.html'];
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  describe('#constructor', () => {
 | 
			
		||||
    it('creates a hint element with tag name', () => {
 | 
			
		||||
      let link = document.getElementById('test-link');
 | 
			
		||||
      let hint = new Hint(link, 'abc');
 | 
			
		||||
      expect(hint.element.textContent.trim()).to.be.equal('abc');
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    it('throws an exception when non-element given', () => {
 | 
			
		||||
      expect(() => new Hint(window, 'abc')).to.throw(TypeError);
 | 
			
		||||
    });
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  describe('#show', () => {
 | 
			
		||||
    it('shows an element', () => {
 | 
			
		||||
      let link = document.getElementById('test-link');
 | 
			
		||||
      let hint = new Hint(link, 'abc');
 | 
			
		||||
      hint.hide();
 | 
			
		||||
      hint.show();
 | 
			
		||||
 | 
			
		||||
      expect(hint.element.style.display).to.not.equal('none');
 | 
			
		||||
    });
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  describe('#hide', () => {
 | 
			
		||||
    it('hides an element', () => {
 | 
			
		||||
      let link = document.getElementById('test-link');
 | 
			
		||||
      let hint = new Hint(link, 'abc');
 | 
			
		||||
      hint.hide();
 | 
			
		||||
 | 
			
		||||
      expect(hint.element.style.display).to.equal('none');
 | 
			
		||||
    });
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  describe('#remove', () => {
 | 
			
		||||
    it('removes an element', () => {
 | 
			
		||||
      let link = document.getElementById('test-link');
 | 
			
		||||
      let hint = new Hint(link, 'abc');
 | 
			
		||||
 | 
			
		||||
      expect(hint.element.parentElement).to.not.be.null;
 | 
			
		||||
      hint.remove();
 | 
			
		||||
      expect(hint.element.parentElement).to.be.null;
 | 
			
		||||
    });
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  describe('#activate', () => {
 | 
			
		||||
    // TODO test activations
 | 
			
		||||
  });
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										158
									
								
								test/content/presenters/Hint.test.ts
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										158
									
								
								test/content/presenters/Hint.test.ts
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -0,0 +1,158 @@
 | 
			
		|||
import AbstractHint, { LinkHint, InputHint } from '../../../src/content/presenters/Hint';
 | 
			
		||||
import { expect } from 'chai';
 | 
			
		||||
 | 
			
		||||
class Hint extends AbstractHint {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
describe('Hint', () => {
 | 
			
		||||
  beforeEach(() => {
 | 
			
		||||
    document.body.innerHTML = `<a id='test-link' href='#'>link</a>`;
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  describe('#constructor', () => {
 | 
			
		||||
    it('creates a hint element with tag name', () => {
 | 
			
		||||
      let link = document.getElementById('test-link');
 | 
			
		||||
      let hint = new Hint(link, 'abc');
 | 
			
		||||
 | 
			
		||||
      let elem = document.querySelector('.vimvixen-hint');
 | 
			
		||||
      expect(elem.textContent.trim()).to.be.equal('abc');
 | 
			
		||||
    });
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  describe('#show', () => {
 | 
			
		||||
    it('shows an element', () => {
 | 
			
		||||
      let link = document.getElementById('test-link');
 | 
			
		||||
      let hint = new Hint(link, 'abc');
 | 
			
		||||
      hint.hide();
 | 
			
		||||
      hint.show();
 | 
			
		||||
 | 
			
		||||
      let elem = document.querySelector('.vimvixen-hint') as HTMLElement;
 | 
			
		||||
      expect(elem.style.display).to.not.equal('none');
 | 
			
		||||
    });
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  describe('#hide', () => {
 | 
			
		||||
    it('hides an element', () => {
 | 
			
		||||
      let link = document.getElementById('test-link') as HTMLElement;
 | 
			
		||||
      let hint = new Hint(link, 'abc');
 | 
			
		||||
      hint.hide();
 | 
			
		||||
 | 
			
		||||
      let elem = document.querySelector('.vimvixen-hint') as HTMLElement;
 | 
			
		||||
      expect(elem.style.display).to.equal('none');
 | 
			
		||||
    });
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  describe('#remove', () => {
 | 
			
		||||
    it('removes an element', () => {
 | 
			
		||||
      let link = document.getElementById('test-link');
 | 
			
		||||
      let hint = new Hint(link, 'abc');
 | 
			
		||||
 | 
			
		||||
      let elem = document.querySelector('.vimvixen-hint');
 | 
			
		||||
      expect(elem.parentElement).to.not.be.null;
 | 
			
		||||
      hint.remove();
 | 
			
		||||
      expect(elem.parentElement).to.be.null;
 | 
			
		||||
    });
 | 
			
		||||
  });
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
describe('LinkHint', () => {
 | 
			
		||||
  beforeEach(() => {
 | 
			
		||||
    document.body.innerHTML = `
 | 
			
		||||
<a id='test-link1' href='https://google.com/'>link</a>
 | 
			
		||||
<a id='test-link2' href='https://yahoo.com/' target='_blank'>link</a>
 | 
			
		||||
<a id='test-link3' href='#' target='_blank'>link</a>
 | 
			
		||||
`;
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  describe('#getLink()', () => {
 | 
			
		||||
    it('returns value of "href" attribute', () => {
 | 
			
		||||
      let link = document.getElementById('test-link1') as HTMLAnchorElement;
 | 
			
		||||
      let hint = new LinkHint(link, 'abc');
 | 
			
		||||
 | 
			
		||||
      expect(hint.getLink()).to.equal('https://google.com/');
 | 
			
		||||
    });
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  describe('#getLinkTarget()', () => {
 | 
			
		||||
    it('returns value of "target" attribute', () => {
 | 
			
		||||
      let link = document.getElementById('test-link1') as HTMLAnchorElement;
 | 
			
		||||
      let hint = new LinkHint(link, 'abc');
 | 
			
		||||
 | 
			
		||||
      expect(hint.getLinkTarget()).to.be.null;
 | 
			
		||||
 | 
			
		||||
      link = document.getElementById('test-link2') as HTMLAnchorElement;
 | 
			
		||||
      hint = new LinkHint(link, 'abc');
 | 
			
		||||
 | 
			
		||||
      expect(hint.getLinkTarget()).to.equal('_blank');
 | 
			
		||||
    });
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  describe('#click()', () => {
 | 
			
		||||
    it('clicks a element', (done) => {
 | 
			
		||||
      let link = document.getElementById('test-link3') as HTMLAnchorElement;
 | 
			
		||||
      let hint = new LinkHint(link, 'abc');
 | 
			
		||||
      link.onclick = () => { done() };
 | 
			
		||||
 | 
			
		||||
      hint.click();
 | 
			
		||||
    });
 | 
			
		||||
  });
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
describe('InputHint', () => {
 | 
			
		||||
  describe('#activate()', () => {
 | 
			
		||||
    context('<input>', () => {
 | 
			
		||||
      beforeEach(() => {
 | 
			
		||||
        document.body.innerHTML = `<input id='test-input'></input>`;
 | 
			
		||||
      });
 | 
			
		||||
 | 
			
		||||
      it('focuses to the input', () => {
 | 
			
		||||
        let input = document.getElementById('test-input') as HTMLInputElement;
 | 
			
		||||
        let hint = new InputHint(input, 'abc');
 | 
			
		||||
        hint.activate();
 | 
			
		||||
 | 
			
		||||
        expect(document.activeElement).to.equal(input);
 | 
			
		||||
      });
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    context('<input type="checkbox">', () => {
 | 
			
		||||
      beforeEach(() => {
 | 
			
		||||
        document.body.innerHTML = `<input type="checkbox" id='test-input'></input>`;
 | 
			
		||||
      });
 | 
			
		||||
 | 
			
		||||
      it('checks and focuses to the input', () => {
 | 
			
		||||
        let input = document.getElementById('test-input') as HTMLInputElement;
 | 
			
		||||
        let hint = new InputHint(input, 'abc');
 | 
			
		||||
        hint.activate();
 | 
			
		||||
 | 
			
		||||
        expect(input.checked).to.be.true;
 | 
			
		||||
      });
 | 
			
		||||
    });
 | 
			
		||||
    context('<textarea>', () => {
 | 
			
		||||
      beforeEach(() => {
 | 
			
		||||
        document.body.innerHTML = `<textarea id='test-textarea'></textarea>`;
 | 
			
		||||
      });
 | 
			
		||||
 | 
			
		||||
      it('focuses to the textarea', () => {
 | 
			
		||||
        let textarea = document.getElementById('test-textarea') as HTMLTextAreaElement;
 | 
			
		||||
        let hint = new InputHint(textarea, 'abc');
 | 
			
		||||
        hint.activate();
 | 
			
		||||
 | 
			
		||||
        expect(document.activeElement).to.equal(textarea);
 | 
			
		||||
      });
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    context('<button>', () => {
 | 
			
		||||
      beforeEach(() => {
 | 
			
		||||
        document.body.innerHTML = `<button id='test-button'></button>`;
 | 
			
		||||
      });
 | 
			
		||||
 | 
			
		||||
      it('clicks the button', (done) => {
 | 
			
		||||
        let button = document.getElementById('test-button') as HTMLButtonElement;
 | 
			
		||||
        button.onclick = () => { done() };
 | 
			
		||||
 | 
			
		||||
        let hint = new InputHint(button, 'abc');
 | 
			
		||||
        hint.activate();
 | 
			
		||||
      });
 | 
			
		||||
    });
 | 
			
		||||
  });
 | 
			
		||||
});
 | 
			
		||||
		Reference in a new issue