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:
parent
17a46f6a75
commit
a848f63d5e
@ -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', () => {
|
||||||
|
@ -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;"'
|
||||||
);
|
);
|
||||||
|
@ -7,6 +7,7 @@
|
|||||||
"@iconify/api-redundancy"
|
"@iconify/api-redundancy"
|
||||||
],
|
],
|
||||||
"compiler": {
|
"compiler": {
|
||||||
|
"tsconfigFilePath": "<projectFolder>/tsconfig.src.json",
|
||||||
"skipLibCheck": true
|
"skipLibCheck": true
|
||||||
},
|
},
|
||||||
"apiReport": {
|
"apiReport": {
|
||||||
|
@ -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"
|
||||||
|
@ -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',
|
||||||
|
}),
|
||||||
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
@ -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!');
|
||||||
},
|
},
|
||||||
|
@ -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('');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -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!');
|
||||||
},
|
},
|
||||||
|
@ -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')!;
|
||||||
|
@ -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 '../../';
|
||||||
|
|
||||||
|
@ -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 '../../';
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -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')!;
|
||||||
|
@ -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');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -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>');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -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');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -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';
|
||||||
|
|
||||||
|
@ -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';
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -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('');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -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')!;
|
||||||
|
@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "../tsconfig-base.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"types": ["node", "jest"],
|
|
||||||
"rootDir": ".",
|
|
||||||
"outDir": "../lib",
|
|
||||||
"module": "CommonJS"
|
|
||||||
}
|
|
||||||
}
|
|
@ -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"
|
||||||
}
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,6 @@
|
|||||||
{
|
{
|
||||||
|
"include": ["src/**/*.ts", ".eslintrc.js"],
|
||||||
|
"exclude": ["src/svelte.d.ts"],
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"rootDir": "./src",
|
"rootDir": "./src",
|
||||||
"outDir": "./lib",
|
"outDir": "./lib",
|
18
components/svelte/tsconfig.tests.json
Normal file
18
components/svelte/tsconfig.tests.json
Normal 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
|
||||||
|
}
|
||||||
|
}
|
@ -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'] : [],
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
1155
pnpm-lock.yaml
1155
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user