import { clearFixture, getFixture } from '../../helpers/fixture' import TemplateFactory from '../../../src/util/template-factory' describe('TemplateFactory', () => { let fixtureEl beforeAll(() => { fixtureEl = getFixture() }) afterEach(() => { clearFixture() }) describe('NAME', () => { it('should return plugin NAME', () => { expect(TemplateFactory.NAME).toEqual('TemplateFactory') }) }) describe('Default', () => { it('should return plugin default config', () => { expect(TemplateFactory.Default).toEqual(jasmine.any(Object)) }) }) describe('toHtml', () => { describe('Sanitization', () => { it('should use "sanitizeHtml" to sanitize template', () => { const factory = new TemplateFactory({ sanitize: true, template: '
Click me
' }) const spy = spyOn(factory, '_maybeSanitize').and.callThrough() expect(factory.toHtml().innerHTML).not.toContain('href="javascript:alert(7)') expect(spy).toHaveBeenCalled() }) it('should not sanitize template', () => { const factory = new TemplateFactory({ sanitize: false, template: '
Click me
' }) const spy = spyOn(factory, '_maybeSanitize').and.callThrough() expect(factory.toHtml().innerHTML).toContain('href="javascript:alert(7)') expect(spy).toHaveBeenCalled() }) it('should use "sanitizeHtml" to sanitize content', () => { const factory = new TemplateFactory({ sanitize: true, html: true, template: '
', content: { '#foo': 'Click me' } }) expect(factory.toHtml().innerHTML).not.toContain('href="javascript:alert(7)') }) it('should not sanitize content', () => { const factory = new TemplateFactory({ sanitize: false, html: true, template: '
', content: { '#foo': 'Click me' } }) expect(factory.toHtml().innerHTML).toContain('href="javascript:alert(7)') }) it('should sanitize content only if "config.html" is enabled', () => { const factory = new TemplateFactory({ sanitize: true, html: false, template: '
', content: { '#foo': 'Click me' } }) const spy = spyOn(factory, '_maybeSanitize').and.callThrough() expect(spy).not.toHaveBeenCalled() }) }) describe('Extra Class', () => { it('should add extra class', () => { const factory = new TemplateFactory({ extraClass: 'testClass' }) expect(factory.toHtml().classList.contains('testClass')).toBeTrue() }) it('should add extra classes', () => { const factory = new TemplateFactory({ extraClass: 'testClass testClass2' }) expect(factory.toHtml().classList.contains('testClass')).toBeTrue() expect(factory.toHtml().classList.contains('testClass2')).toBeTrue() }) it('should resolve class if function is given', () => { const factory = new TemplateFactory({ extraClass: arg => { expect(arg).toEqual(factory) return 'testClass' } }) expect(factory.toHtml().classList.contains('testClass')).toBeTrue() }) }) }) describe('Content', () => { it('add simple text content', () => { const template = [ '
' + '
' + '
' + '
' ].join(' ') const factory = new TemplateFactory({ template, content: { '.foo': 'bar', '.foo2': 'bar2' } }) const html = factory.toHtml() expect(html.querySelector('.foo').textContent).toBe('bar') expect(html.querySelector('.foo2').textContent).toBe('bar2') }) it('should not fill template if selector not exists', () => { const factory = new TemplateFactory({ sanitize: true, html: true, template: '
', content: { '#bar': 'test' } }) expect(factory.toHtml().outerHTML).toBe('
') }) it('should remove template selector, if content is null', () => { const factory = new TemplateFactory({ sanitize: true, html: true, template: '
', content: { '#foo': null } }) expect(factory.toHtml().outerHTML).toBe('
') }) it('should resolve content if is function', () => { const factory = new TemplateFactory({ sanitize: true, html: true, template: '
', content: { '#foo': () => null } }) expect(factory.toHtml().outerHTML).toBe('
') }) it('if content is element and "config.html=false", should put content\'s textContent', () => { fixtureEl.innerHTML = '
foobar
' const contentElement = fixtureEl.querySelector('div') const factory = new TemplateFactory({ html: false, template: '
', content: { '#foo': contentElement } }) const fooEl = factory.toHtml().querySelector('#foo') expect(fooEl.innerHTML).not.toBe(contentElement.innerHTML) expect(fooEl.textContent).toBe(contentElement.textContent) expect(fooEl.textContent).toBe('foobar') }) it('if content is element and "config.html=true", should put content\'s outerHtml as child', () => { fixtureEl.innerHTML = '
foobar
' const contentElement = fixtureEl.querySelector('div') const factory = new TemplateFactory({ html: true, template: '
', content: { '#foo': contentElement } }) const fooEl = factory.toHtml().querySelector('#foo') expect(fooEl.innerHTML).toBe(contentElement.outerHTML) expect(fooEl.textContent).toBe(contentElement.textContent) }) }) describe('getContent', () => { it('should get content as array', () => { const factory = new TemplateFactory({ content: { '.foo': 'bar', '.foo2': 'bar2' } }) expect(factory.getContent()).toEqual(['bar', 'bar2']) }) it('should filter empties', () => { const factory = new TemplateFactory({ content: { '.foo': 'bar', '.foo2': '', '.foo3': null, '.foo4': () => 2, '.foo5': () => null } }) expect(factory.getContent()).toEqual(['bar', 2]) }) }) describe('hasContent', () => { it('should return true, if it has', () => { const factory = new TemplateFactory({ content: { '.foo': 'bar', '.foo2': 'bar2', '.foo3': '' } }) expect(factory.hasContent()).toBeTrue() }) it('should return false, if filtered content is empty', () => { const factory = new TemplateFactory({ content: { '.foo2': '', '.foo3': null, '.foo4': () => null } }) expect(factory.hasContent()).toBeFalse() }) }) describe('changeContent', () => { it('should change Content', () => { const template = [ '
' + '
' + '
' + '
' ].join(' ') const factory = new TemplateFactory({ template, content: { '.foo': 'bar', '.foo2': 'bar2' } }) const html = selector => factory.toHtml().querySelector(selector).textContent expect(html('.foo')).toEqual('bar') expect(html('.foo2')).toEqual('bar2') factory.changeContent({ '.foo': 'test', '.foo2': 'test2' }) expect(html('.foo')).toEqual('test') expect(html('.foo2')).toEqual('test2') }) it('should change only the given, content', () => { const template = [ '
' + '
' + '
' + '
' ].join(' ') const factory = new TemplateFactory({ template, content: { '.foo': 'bar', '.foo2': 'bar2' } }) const html = selector => factory.toHtml().querySelector(selector).textContent expect(html('.foo')).toEqual('bar') expect(html('.foo2')).toEqual('bar2') factory.changeContent({ '.foo': 'test', '.wrong': 'wrong' }) expect(html('.foo')).toEqual('test') expect(html('.foo2')).toEqual('bar2') }) }) })