2
0
mirror of https://github.com/iconify/iconify.git synced 2024-12-13 14:13:06 +00:00

chore: fix unit tests for svelte component

This commit is contained in:
Vjacheslav Trushkin 2024-07-25 23:04:08 +03:00
parent 17a46f6a75
commit a848f63d5e
27 changed files with 718 additions and 748 deletions

View File

@ -12,6 +12,9 @@ const iconData = {
describe('Creating component', () => { describe('Creating component', () => {
test('basic icon', () => { test('basic icon', () => {
const renderResult = render(<Icon icon={iconData} />); const renderResult = render(<Icon icon={iconData} />);
expect(renderResult.container.innerHTML).toEqual(
'<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" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
}); });
test('inline icon', () => { test('inline icon', () => {

View File

@ -57,7 +57,7 @@ describe('Passing attributes', () => {
<Icon icon={iconData} color="red" style={{ color: 'green' }} /> <Icon icon={iconData} color="red" style={{ color: 'green' }} />
); );
// `style` overrides `color` // In React component, `style` overrides `color`
expect(renderResult.container.innerHTML).toContain( expect(renderResult.container.innerHTML).toContain(
'style="color: green;"' 'style="color: green;"'
); );

View File

@ -7,6 +7,7 @@
"@iconify/api-redundancy" "@iconify/api-redundancy"
], ],
"compiler": { "compiler": {
"tsconfigFilePath": "<projectFolder>/tsconfig.src.json",
"skipLibCheck": true "skipLibCheck": true
}, },
"apiReport": { "apiReport": {

View File

@ -44,7 +44,7 @@
"cleanup": "rimraf lib dist", "cleanup": "rimraf lib dist",
"prebuild": "pnpm run cleanup", "prebuild": "pnpm run cleanup",
"build": "node build", "build": "node build",
"build:tsc": "tsc -b", "build:tsc": "tsc -b tsconfig.src.json",
"build:bundles": "rollup -c rollup.config.js", "build:bundles": "rollup -c rollup.config.js",
"build:api": "node build --only-api", "build:api": "node build --only-api",
"test": "vitest" "test": "vitest"
@ -55,21 +55,21 @@
"devDependencies": { "devDependencies": {
"@iconify/core": "workspace:^", "@iconify/core": "workspace:^",
"@iconify/utils": "workspace:^", "@iconify/utils": "workspace:^",
"@microsoft/api-extractor": "^7.47.2", "@microsoft/api-extractor": "^7.47.3",
"@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-typescript": "^11.1.6", "@rollup/plugin-typescript": "^11.1.6",
"@sveltejs/vite-plugin-svelte": "^2.5.3", "@sveltejs/vite-plugin-svelte": "^2.5.3",
"@testing-library/jest-dom": "^6.4.6", "@testing-library/jest-dom": "^6.4.8",
"@testing-library/svelte": "^4.2.3", "@testing-library/svelte": "5.2.0-next.3",
"@tsconfig/svelte": "^5.0.4", "@tsconfig/svelte": "^5.0.4",
"@types/jest": "^29.5.12", "@types/jest": "^29.5.12",
"@types/node": "^20.14.11", "@types/node": "^20.14.12",
"rimraf": "^6.0.1", "rimraf": "^6.0.1",
"rollup": "^4.18.1", "rollup": "^4.19.0",
"rollup-plugin-svelte": "^7.2.2", "rollup-plugin-svelte": "^7.2.2",
"svelte": "5.0.0-next.123", "svelte": "5.0.0-next.199",
"svelte-preprocess": "^5.1.4", "svelte-preprocess": "^5.1.4",
"vitest": "^2.0.3" "vitest": "^2.0.4"
}, },
"peerDependencies": { "peerDependencies": {
"svelte": ">4.0.0" "svelte": ">4.0.0"

View File

@ -28,7 +28,12 @@ export default [
format: 'cjs', format: 'cjs',
}, },
], ],
plugins: [resolve(resolveParams), typescript()], plugins: [
resolve(resolveParams),
typescript({
tsconfig: 'tsconfig.src.json',
}),
],
}, },
// Files included in OfflineIcon.svelte as bundle // Files included in OfflineIcon.svelte as bundle
{ {
@ -43,6 +48,11 @@ export default [
format: 'cjs', format: 'cjs',
}, },
], ],
plugins: [resolve(resolveParams), typescript()], plugins: [
resolve(resolveParams),
typescript({
tsconfig: 'tsconfig.src.json',
}),
],
}, },
]; ];

View File

@ -1,6 +1,4 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon from '../../'; import Icon from '../../';
@ -13,8 +11,8 @@ const iconData = {
describe('Creating component', () => { describe('Creating component', () => {
test('basic icon', () => { test('basic icon', () => {
const component = render(Icon, { const component = render(Icon, {
icon: iconData, 'icon': iconData,
onLoad: () => { 'on:load': () => {
// Should be called only for icons loaded from API // Should be called only for icons loaded from API
throw new Error('onLoad called for object!'); throw new Error('onLoad called for object!');
}, },

View File

@ -1,6 +1,4 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon from '../../'; import Icon from '../../';
@ -10,6 +8,6 @@ describe('Empty icon', () => {
const html = component.container.innerHTML; const html = component.container.innerHTML;
// Empty container div // Empty container div
expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('<div></div>'); expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('');
}); });
}); });

View File

@ -1,6 +1,4 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon from '../..'; import Icon from '../..';
@ -13,9 +11,9 @@ const iconData = {
describe('Rendering as span', () => { describe('Rendering as span', () => {
test('basic icon', () => { test('basic icon', () => {
const component = render(Icon, { const component = render(Icon, {
icon: iconData, 'icon': iconData,
mode: 'style', 'mode': 'style',
onLoad: () => { 'on:load': () => {
// Should be called only for icons loaded from API // Should be called only for icons loaded from API
throw new Error('onLoad called for object!'); throw new Error('onLoad called for object!');
}, },
@ -35,11 +33,11 @@ describe('Rendering as span', () => {
test('custom dimensions', () => { test('custom dimensions', () => {
const component = render(Icon, { const component = render(Icon, {
icon: iconData, 'icon': iconData,
mode: 'style', 'mode': 'style',
width: '48', 'width': '48',
height: 32, 'height': 32,
onLoad: () => { 'on:load': () => {
// Should be called only for icons loaded from API // Should be called only for icons loaded from API
throw new Error('onLoad called for object!'); throw new Error('onLoad called for object!');
}, },

View File

@ -1,6 +1,4 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon from '../../'; import Icon from '../../';
@ -12,7 +10,11 @@ const iconData = {
describe('Padding attributes', () => { describe('Padding attributes', () => {
test('title', () => { test('title', () => {
const component = render(Icon, { icon: iconData, title: 'Icon!' }); const component = render(Icon, {
icon: iconData,
// @ts-expect-error
title: 'Icon!',
});
const node = component.container.querySelector('svg')!; const node = component.container.querySelector('svg')!;
expect(node.getAttribute('title')).toBe('Icon!'); expect(node.getAttribute('title')).toBe('Icon!');
}); });
@ -31,6 +33,7 @@ describe('Padding attributes', () => {
// camelCase, boolean value // camelCase, boolean value
const component = render(Icon, { const component = render(Icon, {
icon: iconData, icon: iconData,
// @ts-expect-error
ariaHidden: false, ariaHidden: false,
}); });
const node = component.container.querySelector('svg')!; const node = component.container.querySelector('svg')!;

View File

@ -1,6 +1,4 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon from '../../'; import Icon from '../../';

View File

@ -1,6 +1,4 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon from '../../'; import Icon from '../../';

View File

@ -1,6 +1,4 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon from '../../'; import Icon from '../../';
@ -20,7 +18,11 @@ describe('Inline attribute', () => {
}); });
test('string true', () => { test('string true', () => {
const component = render(Icon, { icon: iconData, inline: 'true' }); const component = render(Icon, {
icon: iconData,
// @ts-expect-error
inline: 'true',
});
const node = component.container.querySelector('svg')!; const node = component.container.querySelector('svg')!;
const style = node.style; const style = node.style;
@ -37,7 +39,11 @@ describe('Inline attribute', () => {
test('false string', () => { test('false string', () => {
// "false" should be ignored // "false" should be ignored
const component = render(Icon, { icon: iconData, inline: 'false' }); const component = render(Icon, {
icon: iconData,
// @ts-expect-error
inline: 'false',
});
const node = component.container.querySelector('svg')!; const node = component.container.querySelector('svg')!;
const style = node.style; const style = node.style;

View File

@ -1,6 +1,4 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon from '../../'; import Icon from '../../';
@ -22,7 +20,11 @@ describe('Rotation', () => {
}); });
test('string', () => { test('string', () => {
const component = render(Icon, { icon: iconData, rotate: '180deg' }); const component = render(Icon, {
icon: iconData,
// @ts-expect-error
rotate: '180deg',
});
const node = component.container.querySelector('svg')!; const node = component.container.querySelector('svg')!;
// Find first child node // Find first child node
@ -75,6 +77,7 @@ describe('Flip', () => {
test('string for boolean attribute', () => { test('string for boolean attribute', () => {
const component = render(Icon, { const component = render(Icon, {
icon: iconData, icon: iconData,
// @ts-expect-error
hFlip: 'true', hFlip: 'true',
}); });
const node = component.container.querySelector('svg')!; const node = component.container.querySelector('svg')!;
@ -121,6 +124,7 @@ describe('Flip', () => {
test('wrong case', () => { test('wrong case', () => {
const component = render(Icon, { const component = render(Icon, {
icon: iconData, icon: iconData,
// @ts-expect-error
vflip: true, vflip: true,
}); });
const node = component.container.querySelector('svg')!; const node = component.container.querySelector('svg')!;

View File

@ -1,6 +1,4 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
// Test importing from exports // Test importing from exports
@ -14,21 +12,11 @@ const iconData = {
describe('Creating component', () => { describe('Creating component', () => {
test('basic icon', () => { test('basic icon', () => {
const component = render(Icon, { icon: iconData }); const renderResult = render(Icon, { icon: iconData });
const node = component.container.querySelector('svg')!; expect(
const html = (node.parentNode as HTMLDivElement).innerHTML; renderResult.container.innerHTML.replace(/<!--(.*?)-->/gm, '')
).toEqual(
// Check HTML
expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>' '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
); );
// Make sure getAttribute() works, used in other tests
expect(node.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg');
expect(node.getAttribute('aria-hidden')).toBe('true');
// Make sure style exists
const style = node.style;
expect(typeof style).toBe('object');
}); });
}); });

View File

@ -1,15 +1,12 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon from '../../offline'; import Icon from '../../offline';
describe('Empty icon', () => { describe('Empty icon', () => {
test('basic test', () => { test('basic test', () => {
const component = render(Icon, {}); const renderResult = render(Icon, {});
const html = component.container.innerHTML; expect(
renderResult.container.innerHTML.replace(/<!--(.*?)-->/gm, '')
// Empty container div ).toEqual('');
expect(html.replaceAll('<!--<OfflineIcon>-->', '')).toBe('<div></div>');
}); });
}); });

View File

@ -1,6 +1,4 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon from '../../offline'; import Icon from '../../offline';
@ -12,66 +10,76 @@ const iconData = {
describe('Padding attributes', () => { describe('Padding attributes', () => {
test('title', () => { test('title', () => {
const component = render(Icon, { icon: iconData, title: 'Icon!' }); const renderResult = render(Icon, {
const node = component.container.querySelector('svg')!; icon: iconData,
expect(node.getAttribute('title')).toBe('Icon!'); // @ts-expect-error
title: 'Icon!',
});
expect(renderResult.container.innerHTML).toContain('title="Icon!"');
}); });
test('aria-hidden', () => { test('aria-hidden', () => {
// dashes, string value // dashes, string value
const component = render(Icon, { const renderResult = render(Icon, {
'icon': iconData, 'icon': iconData,
'aria-hidden': 'false', 'aria-hidden': 'false',
}); });
const node = component.container.querySelector('svg')!; expect(renderResult.container.innerHTML).not.toContain('aria-hidden');
expect(node.getAttribute('aria-hidden')).toBeNull();
}); });
test('ariaHidden', () => { test('ariaHidden', () => {
// camelCase, boolean value // camelCase, boolean value
const component = render(Icon, { const renderResult = render(Icon, {
icon: iconData, icon: iconData,
// @ts-expect-error
ariaHidden: false, ariaHidden: false,
}); });
const node = component.container.querySelector('svg')!; expect(renderResult.container.innerHTML).not.toContain('aria-hidden');
expect(node.getAttribute('aria-hidden')).toBeNull();
}); });
test('style', () => { test('style', () => {
const component = render(Icon, { const renderResult = render(Icon, {
icon: iconData, icon: iconData,
style: 'vertical-align: 0; color: red;', style: 'vertical-align: 0; color: red;',
}); });
const node = component.container.querySelector('svg')!; expect(renderResult.container.innerHTML).toContain(
expect(node.style.verticalAlign).toBe('0'); 'style="vertical-align: 0; color: red;"'
expect(node.style.color).toBe('red'); );
}); });
test('color', () => { test('color', () => {
const component = render(Icon, { const renderResult = render(Icon, {
icon: iconData, icon: iconData,
color: 'red', color: 'red',
}); });
const node = component.container.querySelector('svg')!; expect(renderResult.container.innerHTML).toContain(
expect(node.style.color).toBe('red'); 'style="color: red;"'
);
}); });
test('color with style', () => { test('color with style', () => {
const component = render(Icon, { const renderResult = render(Icon, {
icon: iconData, icon: iconData,
color: 'red', color: 'red',
style: 'color: green;', style: 'color: green;',
}); });
const node = component.container.querySelector('svg')!;
expect(node.style.color).toBe('red'); // In Svelte component, `color` overrides `style`
expect(renderResult.container.innerHTML).toContain(
'style="color: red;"'
);
expect(renderResult.container.innerHTML).not.toContain('green');
}); });
test('attributes that cannot change', () => { test('attributes that cannot change', () => {
const component = render(Icon, { const renderResult = render(Icon, {
icon: iconData, icon: iconData,
viewBox: '0 0 0 0', viewBox: '0 0 0 0',
}); });
const node = component.container.querySelector('svg')!;
expect(node.getAttribute('viewBox')).toBe('0 0 24 24'); expect(renderResult.container.innerHTML).toContain(
'viewBox="0 0 24 24"'
);
expect(renderResult.container.innerHTML).not.toContain('0 0 0 0');
}); });
}); });

View File

@ -1,6 +1,4 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon from '../../offline'; import Icon from '../../offline';

View File

@ -1,6 +1,4 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon from '../../offline'; import Icon from '../../offline';

View File

@ -1,6 +1,4 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon from '../../offline'; import Icon from '../../offline';
@ -20,7 +18,11 @@ describe('Inline attribute', () => {
}); });
test('string true', () => { test('string true', () => {
const component = render(Icon, { icon: iconData, inline: 'true' }); const component = render(Icon, {
icon: iconData,
// @ts-expect-error
inline: 'true',
});
const node = component.container.querySelector('svg')!; const node = component.container.querySelector('svg')!;
const style = node.style; const style = node.style;
@ -37,7 +39,11 @@ describe('Inline attribute', () => {
test('false string', () => { test('false string', () => {
// "false" should be ignored // "false" should be ignored
const component = render(Icon, { icon: iconData, inline: 'false' }); const component = render(Icon, {
icon: iconData,
// @ts-expect-error
inline: 'false',
});
const node = component.container.querySelector('svg')!; const node = component.container.querySelector('svg')!;
const style = node.style; const style = node.style;

View File

@ -1,6 +1,4 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon, { addIcon, addCollection } from '../../offline'; import Icon, { addIcon, addCollection } from '../../offline';
@ -18,7 +16,7 @@ describe('Using storage', () => {
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;
expect(html.replaceAll('<!--<OfflineIcon>-->', '')).toBe( expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>' '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
); );
}); });
@ -44,7 +42,7 @@ describe('Using storage', () => {
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;
expect(html.replaceAll('<!--<OfflineIcon>-->', '')).toBe( expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"></path></svg>' '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M11.5 14c4.142 0 7.5 1.567 7.5 3.5V20H4v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S5 16.12 5 17.5V19h13v-1.5zM11.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5z" fill="currentColor"></path></svg>'
); );
}); });
@ -70,7 +68,7 @@ describe('Using storage', () => {
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;
expect(html.replaceAll('<!--<OfflineIcon>-->', '')).toBe( expect(html.replace(/<!--(.*?)-->/gm, '')).toBe(
'<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"></path></svg>' '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24"><path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"></path></svg>'
); );
}); });
@ -82,6 +80,6 @@ describe('Using storage', () => {
const html = component.container.innerHTML; const html = component.container.innerHTML;
// Empty container div // Empty container div
expect(html.replaceAll('<!--<OfflineIcon>-->', '')).toBe('<div></div>'); expect(html.replace(/<!--(.*?)-->/gm, '')).toBe('');
}); });
}); });

View File

@ -1,6 +1,4 @@
/** import { describe, test, expect } from 'vitest';
* @jest-environment jsdom
*/
import { render } from '@testing-library/svelte'; import { render } from '@testing-library/svelte';
import Icon from '../../offline'; import Icon from '../../offline';
@ -22,7 +20,11 @@ describe('Rotation', () => {
}); });
test('string', () => { test('string', () => {
const component = render(Icon, { icon: iconData, rotate: '180deg' }); const component = render(Icon, {
icon: iconData,
// @ts-expect-error
rotate: '180deg',
});
const node = component.container.querySelector('svg')!; const node = component.container.querySelector('svg')!;
// Find first child node // Find first child node
@ -75,6 +77,7 @@ describe('Flip', () => {
test('string for boolean attribute', () => { test('string for boolean attribute', () => {
const component = render(Icon, { const component = render(Icon, {
icon: iconData, icon: iconData,
// @ts-expect-error
hFlip: 'true', hFlip: 'true',
}); });
const node = component.container.querySelector('svg')!; const node = component.container.querySelector('svg')!;
@ -121,6 +124,7 @@ describe('Flip', () => {
test('wrong case', () => { test('wrong case', () => {
const component = render(Icon, { const component = render(Icon, {
icon: iconData, icon: iconData,
// @ts-expect-error
vflip: true, vflip: true,
}); });
const node = component.container.querySelector('svg')!; const node = component.container.querySelector('svg')!;

View File

@ -1,9 +0,0 @@
{
"extends": "../tsconfig-base.json",
"compilerOptions": {
"types": ["node", "jest"],
"rootDir": ".",
"outDir": "../lib",
"module": "CommonJS"
}
}

View File

@ -1,9 +1,11 @@
{ {
"extends": "./tsconfig-base.json", "files": [],
"include": ["src/**/*.ts", ".eslintrc.js"], "references": [
"exclude": ["src/svelte.d.ts"], {
"compilerOptions": { "path": "./tsconfig.src.json"
"rootDir": "./src", },
"outDir": "./lib" {
"path": "./tsconfig.tests.json"
} }
]
} }

View File

@ -1,4 +1,6 @@
{ {
"include": ["src/**/*.ts", ".eslintrc.js"],
"exclude": ["src/svelte.d.ts"],
"compilerOptions": { "compilerOptions": {
"rootDir": "./src", "rootDir": "./src",
"outDir": "./lib", "outDir": "./lib",

View File

@ -0,0 +1,18 @@
{
"include": ["tests/**/*", "tests/**/*.svelte"],
"exclude": ["src/*", ".eslintrc.js"],
"compilerOptions": {
"rootDir": "./tests",
"target": "esnext",
"module": "esnext",
"declaration": true,
"sourceMap": false,
"strict": true,
"types": ["node", "svelte"],
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true
}
}

View File

@ -1,11 +1,15 @@
import { defineConfig } from 'vitest/config'; import { defineConfig } from 'vitest/config';
import { svelte } from '@sveltejs/vite-plugin-svelte'; import { svelte } from '@sveltejs/vite-plugin-svelte';
export default defineConfig({ export default defineConfig(({ mode }) => ({
plugins: [svelte()], plugins: [svelte()],
test: { test: {
globals: true, globals: true,
watch: false, watch: false,
environment: 'jsdom',
include: ['**/tests/**/*.test.ts'], include: ['**/tests/**/*.test.ts'],
}, },
}); resolve: {
conditions: mode === 'test' ? ['browser'] : [],
},
}));

File diff suppressed because it is too large Load Diff