agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-11-09 14:50:56 +00:00
Code Issues Releases Activity

Web component: more tests

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2022-05-01 14:01:54 +03:00
parent 2ffecadfee
commit f1af63de48
1 changed files with 89 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
packages/icon/tests/component-test.ts
View File

@ -17,6 +17,36 @@ export declare interface DebugIconifyIconHTMLElement
describe('Testing icon component', () => {
afterEach(cleanupGlobals);
it('Registering component', () => {
// Setup DOM
const doc = setupDOM('').window.document;
// Make sure component does not exist and registry is available
expect(window.customElements).toBeDefined();
expect(window.customElements.get('iconify-icon')).toBeUndefined();
// Define component
const IconifyIcon = defineIconifyIcon();
expect(IconifyIcon).toBeDefined();
expect(window.customElements.get('iconify-icon')).toBeDefined();
// Create element
const node = document.createElement(
'iconify-icon'
) as DebugIconifyIconHTMLElement;
expect(node instanceof IconifyIcon).toBe(true);
// Define component again (should return previous class)
const IconifyIcon2 = defineIconifyIcon();
expect(IconifyIcon2).toBe(IconifyIcon);
// Create another element
const node2 = document.createElement(
'iconify-icon'
) as DebugIconifyIconHTMLElement;
expect(node2 instanceof IconifyIcon).toBe(true);
});
it('Creating component instance, changing properties', () => {
// Setup DOM
const doc = setupDOM('').window.document;
@ -78,6 +108,65 @@ describe('Testing icon component', () => {
);
});
it('Testing changes to inline', () => {
// Setup DOM
const doc = setupDOM('').window.document;
// Make sure component does not exist and registry is available
expect(window.customElements).toBeDefined();
expect(window.customElements.get('iconify-icon')).toBeUndefined();
// Define component
const IconifyIcon = defineIconifyIcon();
expect(IconifyIcon).toBeDefined();
expect(window.customElements.get('iconify-icon')).toBeDefined();
// Create element
const node = document.createElement(
'iconify-icon'
) as DebugIconifyIconHTMLElement;
// Should be empty with block style
expect(node._shadowRoot.innerHTML).toBe(
`<style>${expectedBlock}</style>`
);
// Check inline
expect(node.inline).toBe(false);
expect(node.hasAttribute('inline')).toBe(false);
expect(node.getAttribute('inline')).toBeFalsy();
// Change to inline via property
node.inline = true;
expect(node._shadowRoot.innerHTML).toBe(
`<style>${expectedInline}</style>`
);
expect(node.inline).toBe(true);
expect(node.hasAttribute('inline')).toBe(true);
expect(node.getAttribute('inline')).toBeTruthy();
// Change to block by removing attribute
node.removeAttribute('inline');
expect(node._shadowRoot.innerHTML).toBe(
`<style>${expectedBlock}</style>`
);
expect(node.inline).toBe(false);
expect(node.hasAttribute('inline')).toBe(false);
expect(node.getAttribute('inline')).toBeFalsy();
// Change to inline by setting attribute
node.setAttribute('inline', 'inline');
expect(node._shadowRoot.innerHTML).toBe(
`<style>${expectedInline}</style>`
);
expect(node.inline).toBe(true);
expect(node.hasAttribute('inline')).toBe(true);
expect(node.getAttribute('inline')).toBeTruthy();
});
it('Restarting animation', async () => {
// Setup DOM
const doc = setupDOM('').window.document;