agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2025-02-12 16:48:28 +00:00
Code Issues Releases Activity

Use tick() in Svelte component tests

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2022-02-28 11:48:59 +02:00
parent 6d04b4a7e6
commit b6b31aa00c
2 changed files with 130 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
packages/svelte/tests/api/20-rendering-from-api.test.ts
View File

@ -1,6 +1,7 @@
/** /**
* @jest-environment jsdom * @jest-environment jsdom
*/ */
import { tick } from 'svelte';
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon, { loadIcons, iconExists } from '../../'; import Icon, { loadIcons, iconExists } from '../../';
import { mockAPIData } from '@iconify/core/lib/api/modules/mock'; import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
@ -61,7 +62,7 @@ describe('Rendering icon', () => {
const node = component.container.querySelector('svg')!; const node = component.container.querySelector('svg')!;
const html = (node.parentNode as HTMLDivElement).innerHTML; const html = (node.parentNode as HTMLDivElement).innerHTML;
// Check HTML // Check HTML immediately
expect(html).toBe( expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' + '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
className + className +
@ -104,28 +105,6 @@ describe('Rendering icon', () => {
// Test it again // Test it again
expect(iconExists(iconName)).toBe(true); expect(iconExists(iconName)).toBe(true);
// Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks
setTimeout(() => {
setTimeout(() => {
const node = component.container.querySelector('svg')!;
const html = (node.parentNode as HTMLDivElement)
.innerHTML;
// Check HTML
expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="test ' +
className +
'" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
// onLoad should have been called
expect(onLoadCalled).toBe(true);
done();
}, 0);
}, 0);
}, },
}); });
@ -141,6 +120,24 @@ describe('Rendering icon', () => {
expect(name).toBe(iconName); expect(name).toBe(iconName);
expect(onLoadCalled).toBe(false); expect(onLoadCalled).toBe(false);
onLoadCalled = true; onLoadCalled = true;
// Check component on next tick
tick()
.then(() => {
const node = component.container.querySelector('svg')!;
const html = (node.parentNode as HTMLDivElement)
.innerHTML;
// Check HTML
expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="test ' +
className +
'" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
done();
})
.catch(done);
}, },
}); });
@ -172,16 +169,24 @@ describe('Rendering icon', () => {
// Test it again // Test it again
expect(iconExists(iconName)).toBe(false); expect(iconExists(iconName)).toBe(false);
// Check if state was changed // Check if state was changed on next few ticks
// Wrapped in double setTimeout() because re-render takes 2 ticks tick()
setTimeout(() => { .then(() => {
setTimeout(() => { const html = component.container.innerHTML;
expect(html).toBe('<div></div>');
return tick();
})
.then(() => {
const html = component.container.innerHTML;
expect(html).toBe('<div></div>');
return tick();
})
.then(() => {
const html = component.container.innerHTML; const html = component.container.innerHTML;
expect(html).toBe('<div></div>'); expect(html).toBe('<div></div>');
done(); done();
}, 0); })
}, 0); .catch(done);
}, },
}); });

204
packages/svelte/tests/api/30-changing-props.test.ts
View File

@ -1,6 +1,7 @@
/** /**
* @jest-environment jsdom * @jest-environment jsdom
*/ */
import { tick } from 'svelte';
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import { iconExists } from '../../'; import { iconExists } from '../../';
import { mockAPIData } from '@iconify/core/lib/api/modules/mock'; import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
@ -58,29 +59,6 @@ describe('Rendering icon', () => {
// Test it again // Test it again
expect(iconExists(iconName)).toBe(true); expect(iconExists(iconName)).toBe(true);
// Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks
setTimeout(() => {
setTimeout(() => {
const node = component.container.querySelector('svg')!;
const html = (node.parentNode as HTMLDivElement)
.innerHTML;
// Check HTML
expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
className +
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
// onLoad should have been called
expect(onLoadCalled).toBe(iconName);
// Change property
triggerSwap!();
}, 0);
}, 0);
}, },
}); });
@ -106,28 +84,6 @@ describe('Rendering icon', () => {
// Test it again // Test it again
expect(iconExists(iconName2)).toBe(true); expect(iconExists(iconName2)).toBe(true);
// Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks
setTimeout(() => {
setTimeout(() => {
const node = component.container.querySelector('svg')!;
const html = (node.parentNode as HTMLDivElement)
.innerHTML;
// Check HTML
expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' +
className +
'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
);
// onLoad should have been called for second icon
expect(onLoadCalled).toBe(iconName2);
done();
}, 0);
}, 0);
}, },
}); });
@ -147,11 +103,50 @@ describe('Rendering icon', () => {
// First onLoad call // First onLoad call
case iconName: case iconName:
expect(onLoadCalled).toBe(''); expect(onLoadCalled).toBe('');
// Wait 1 tick, then test rendered icon
tick()
.then(() => {
const node =
component.container.querySelector('svg')!;
const html = (node.parentNode as HTMLDivElement)
.innerHTML;
// Check HTML
expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
className +
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
// Change property
triggerSwap!();
})
.catch(done);
break; break;
// Second onLoad call // Second onLoad call
case iconName2: case iconName2:
expect(onLoadCalled).toBe(iconName); expect(onLoadCalled).toBe(iconName);
// Wait 1 tick, then test rendered icon
tick()
.then(() => {
const node =
component.container.querySelector('svg')!;
const html = (node.parentNode as HTMLDivElement)
.innerHTML;
// Check HTML
expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' +
className +
'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
);
done();
})
.catch(done);
break; break;
default: default:
@ -224,28 +219,6 @@ describe('Rendering icon', () => {
// Test it again // Test it again
expect(iconExists(iconName2)).toBe(true); expect(iconExists(iconName2)).toBe(true);
// Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks
setTimeout(() => {
setTimeout(() => {
const node = component.container.querySelector('svg')!;
const html = (node.parentNode as HTMLDivElement)
.innerHTML;
// Check HTML
expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' +
className +
'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
);
// onLoad should have been called for second icon
expect(onLoadCalled).toBe(iconName2);
done();
}, 0);
}, 0);
}, },
}); });
@ -263,6 +236,24 @@ describe('Rendering icon', () => {
// onLoad should be called only for second icon // onLoad should be called only for second icon
expect(name).toBe(iconName2); expect(name).toBe(iconName2);
onLoadCalled = name; onLoadCalled = name;
// Wait 1 tick, then test rendered icon
tick()
.then(() => {
const node = component.container.querySelector('svg')!;
const html = (node.parentNode as HTMLDivElement)
.innerHTML;
// Check HTML
expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" class="' +
className +
'"><path d="M19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z" fill="currentColor"></path></svg>'
);
done();
})
.catch(done);
}, },
}); });
@ -313,48 +304,6 @@ describe('Rendering icon', () => {
// Test it again // Test it again
expect(iconExists(iconName)).toBe(true); expect(iconExists(iconName)).toBe(true);
// Check if state was changed
// Wrapped in double setTimeout() because re-render takes 2 ticks
setTimeout(() => {
setTimeout(() => {
const node = component.container.querySelector('svg')!;
const html = (node.parentNode as HTMLDivElement)
.innerHTML;
// Check HTML
expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
className +
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
// onLoad should have been called
expect(onLoadCalled).toBe(true);
// Add horizontal flip and style
triggerSwap!();
// Wait for component to re-render
setTimeout(() => {
setTimeout(() => {
// Check HTML again
const node =
component.container.querySelector('svg')!;
const html = (node.parentNode as HTMLDivElement)
.innerHTML;
expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
className +
'"><g transform="translate(24 0) scale(-1 1)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
);
done();
}, 0);
}, 0);
}, 0);
}, 0);
}, },
}); });
@ -369,9 +318,46 @@ describe('Rendering icon', () => {
}, },
onLoad: (name: string) => { onLoad: (name: string) => {
expect(name).toBe(iconName); expect(name).toBe(iconName);
// Should be called only once // Should be called only once
expect(onLoadCalled).toBe(false); expect(onLoadCalled).toBe(false);
onLoadCalled = true; onLoadCalled = true;
// Check if state was changed on next tick
tick()
.then(() => {
const node = component.container.querySelector('svg')!;
const html = (node.parentNode as HTMLDivElement)
.innerHTML;
// Check HTML
expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
className +
'"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
// Add horizontal flip and style
triggerSwap!();
// Wait for component to re-render
return tick();
})
.then(() => {
// Check HTML again
const node = component.container.querySelector('svg')!;
const html = (node.parentNode as HTMLDivElement)
.innerHTML;
expect(html).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="' +
className +
'"><g transform="translate(24 0) scale(-1 1)"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></g></svg>'
);
done();
})
.catch(done);
}, },
}); });