2
0
mirror of https://github.com/iconify/iconify.git synced 2024-09-19 16:59:02 +00:00

Use vitest in Vue tests, publish update for Vue component

This commit is contained in:
Vjacheslav Trushkin 2022-03-19 13:19:52 +02:00
parent ad18afe316
commit a0169b225b
33 changed files with 2725 additions and 7662 deletions

View File

@ -22,7 +22,9 @@
<InlineDemo />
<LoadingDemo />
<LoadingTest />
<StyleTest />
<InlineTest />
</div>
</template>
@ -45,7 +47,9 @@ import OfflineUsageDemo from './demo-components/UsageOffline.vue';
import FullOfflineUsageDemo from './demo-components/UsageFullOffline.vue';
import FullUsageDemo from './demo-components/UsageFull.vue';
import LoadingDemo from './test-components/LoadingDemo.vue';
import LoadingTest from './test-components/LoadingDemo.vue';
import StyleTest from './test-components/Style.vue';
import InlineTest from './test-components/Inline.vue';
// Disable cache
disableCache('all');
@ -104,7 +108,9 @@ export default {
OfflineUsageDemo,
FullOfflineUsageDemo,
FullUsageDemo,
LoadingDemo,
LoadingTest,
StyleTest,
InlineTest,
},
};
</script>

View File

@ -3,180 +3,150 @@
<h1>Alignment (components/Alignment.vue)</h1>
<div>
<p>Icon with correct width/heigh ratio:</p>
<Icon icon="experiment" />
<Icon icon="demo" />
</div>
<div>
<p>Bad width/height ratio, default alignment (slice = false):</p>
<Icon icon="experiment" width="2em" height="1em" />
<Icon icon="experiment" width="1em" height="2em" />
<Icon icon="demo" width="2em" height="1em" />
<Icon icon="demo" width="1em" height="2em" />
</div>
<div>
<p>Slice:</p>
<Icon icon="experiment" width="2em" height="1em" :slice="true" />
<Icon icon="experiment" width="2em" height="1em" align="slice" />
<Icon icon="demo" width="2em" height="1em" :slice="true" />
<Icon icon="demo" width="2em" height="1em" align="slice" />
</div>
<div>
<p>Slice:</p>
<Icon icon="experiment" width="1em" height="2em" :slice="true" />
<Icon icon="experiment" width="1em" height="2em" align="slice" />
<Icon icon="demo" width="1em" height="2em" :slice="true" />
<Icon icon="demo" width="1em" height="2em" align="slice" />
</div>
<div>
<p>Left:</p>
<Icon icon="experiment" width="2em" height="1em" hAlign="left" />
<Icon icon="experiment" width="2em" height="1em" h-align="left" />
<Icon icon="demo" width="2em" height="1em" hAlign="left" />
<Icon icon="demo" width="2em" height="1em" h-align="left" />
<Icon icon="demo" width="2em" height="1em" horizontalAlign="left" />
<Icon
icon="experiment"
width="2em"
height="1em"
horizontalAlign="left"
/>
<Icon
icon="experiment"
icon="demo"
width="2em"
height="1em"
horizontal-align="left"
/>
<Icon icon="experiment" width="2em" height="1em" align="left" />
<Icon icon="demo" width="2em" height="1em" align="left" />
</div>
<div>
<p>Left with slice:</p>
<Icon
icon="experiment"
icon="demo"
width="1em"
height="2em"
hAlign="left"
:slice="true"
/>
<Icon
icon="experiment"
icon="demo"
width="1em"
height="2em"
h-align="left"
:slice="true"
/>
<Icon
icon="experiment"
icon="demo"
width="1em"
height="2em"
horizontalAlign="left"
:slice="true"
/>
<Icon
icon="experiment"
icon="demo"
width="1em"
height="2em"
horizontal-align="left"
:slice="true"
/>
<Icon
icon="experiment"
width="1em"
height="2em"
align="left,slice"
/>
<Icon icon="demo" width="1em" height="2em" align="left,slice" />
</div>
<div>
<p>Right:</p>
<Icon icon="experiment" width="2em" height="1em" hAlign="right" />
<Icon icon="experiment" width="2em" height="1em" h-align="right" />
<Icon icon="demo" width="2em" height="1em" hAlign="right" />
<Icon icon="demo" width="2em" height="1em" h-align="right" />
<Icon
icon="experiment"
icon="demo"
width="2em"
height="1em"
horizontalAlign="right"
/>
<Icon
icon="experiment"
icon="demo"
width="2em"
height="1em"
horizontal-align="right"
/>
<Icon icon="experiment" width="2em" height="1em" align="right" />
<Icon icon="demo" width="2em" height="1em" align="right" />
</div>
<div>
<p>Right with slice:</p>
<Icon
icon="experiment"
icon="demo"
width="1em"
height="2em"
hAlign="right"
:slice="true"
/>
<Icon
icon="experiment"
icon="demo"
width="1em"
height="2em"
h-align="right"
:slice="true"
/>
<Icon
icon="experiment"
icon="demo"
width="1em"
height="2em"
horizontalAlign="right"
:slice="true"
/>
<Icon
icon="experiment"
icon="demo"
width="1em"
height="2em"
horizontal-align="right"
:slice="true"
/>
<Icon
icon="experiment"
width="1em"
height="2em"
align="right,slice"
/>
<Icon icon="demo" width="1em" height="2em" align="right,slice" />
</div>
<div>
<p>Top:</p>
<Icon
icon="experiment"
width="1em"
height="2em"
verticalAlign="top"
/>
<Icon
icon="experiment"
width="1em"
height="2em"
vertical-align="top"
/>
<Icon
icon="experiment"
width="1em"
height="2em"
v-bind:v-align="'top'"
/>
<Icon icon="experiment" width="1em" height="2em" align="top" />
<Icon icon="demo" width="1em" height="2em" verticalAlign="top" />
<Icon icon="demo" width="1em" height="2em" vertical-align="top" />
<Icon icon="demo" width="1em" height="2em" v-bind:v-align="'top'" />
<Icon icon="demo" width="1em" height="2em" align="top" />
</div>
<div>
<p>Top with slice:</p>
<Icon
icon="experiment"
icon="demo"
width="2em"
height="1em"
verticalAlign="top"
:slice="true"
/>
<Icon
icon="experiment"
icon="demo"
width="2em"
height="1em"
vertical-align="top"
:slice="true"
/>
<Icon
icon="experiment"
icon="demo"
width="2em"
height="1em"
v-bind:v-align="'top'"
:slice="true"
/>
<Icon
icon="experiment"
icon="demo"
width="2em"
height="1em"
align="top"
@ -185,55 +155,45 @@
</div>
<div>
<p>Bottom:</p>
<Icon icon="demo" width="1em" height="2em" verticalAlign="bottom" />
<Icon
icon="experiment"
width="1em"
height="2em"
verticalAlign="bottom"
/>
<Icon
icon="experiment"
icon="demo"
width="1em"
height="2em"
vertical-align="bottom"
/>
<Icon
icon="experiment"
icon="demo"
width="1em"
height="2em"
v-bind:v-align="'bottom'"
/>
<Icon icon="experiment" width="1em" height="2em" align="bottom" />
<Icon icon="demo" width="1em" height="2em" align="bottom" />
</div>
<div>
<p>Bottom with slice:</p>
<Icon
icon="experiment"
icon="demo"
width="2em"
height="1em"
verticalAlign="bottom"
:slice="true"
/>
<Icon
icon="experiment"
icon="demo"
width="2em"
height="1em"
vertical-align="bottom"
:slice="true"
/>
<Icon
icon="experiment"
icon="demo"
width="2em"
height="1em"
v-bind:v-align="'bottom'"
:slice="true"
/>
<Icon
icon="experiment"
width="2em"
height="1em"
align="bottom,slice"
/>
<Icon icon="demo" width="2em" height="1em" align="bottom,slice" />
</div>
</section>
</template>

View File

@ -3,17 +3,17 @@
<h1>Class (components/Class.vue)</h1>
<div>
Default icon:
<Icon icon="experiment" />
<Icon icon="demo" />
</div>
<div>
Red color:
<Icon icon="experiment" class="red-color" />
<Icon icon="experiment" :class="redClass" />
<Icon icon="demo" class="red-color" />
<Icon icon="demo" :class="redClass" />
</div>
<div>
Red color and 20px:
<Icon icon="experiment" class="red-color big-icon" />
<Icon icon="experiment" :class="[redClass, bigIcon]" />
<Icon icon="demo" class="red-color big-icon" />
<Icon icon="demo" :class="[redClass, bigIcon]" />
</div>
</section>
</template>

View File

@ -3,33 +3,42 @@
<h1>Style (components/Style.vue)</h1>
<div>
Default icon:
<Icon icon="experiment" />
<Icon icon="demo" />
</div>
<div>
Red color:
<Icon icon="experiment" color="red" />
<Icon icon="experiment" :style="{ color: 'red' }" />
<Icon icon="experiment" style="color: red" />
<Icon icon="experiment" :style="redIcon" />
<Icon icon="demo" color="red" />
<Icon
icon="demo"
:inline="true"
:style="{ color: 'red', verticalAlign: 0 }"
/>
<Icon
icon="demo"
:inline="true"
style="color: red; vertical-align: 0"
/>
<Icon icon="demo" :style="redIcon" />
</div>
<div>
40px:
<Icon icon="experiment" height="40" />
<Icon icon="experiment" :width="40" />
<Icon icon="experiment" :style="{ fontSize: '40px' }" />
<Icon icon="experiment" style="font-size: 40px" />
<Icon icon="experiment" :style="bigIcon" />
<Icon icon="demo" height="40" />
<Icon icon="demo" :width="40" />
<Icon
icon="demo"
:inline="true"
:style="{ fontSize: '40px', verticalAlign: 0 }"
/>
<Icon icon="demo" style="font-size: 40px" />
<Icon icon="demo" :style="bigIcon" />
</div>
<div>
Red and 40px:
<Icon icon="experiment" height="40" color="red" />
<Icon icon="experiment" :width="40" :style="redIcon" />
<Icon
icon="experiment"
:style="{ color: 'red', fontSize: '40px' }"
/>
<Icon icon="experiment" style="color: red; font-size: 40px" />
<Icon icon="experiment" :style="[bigIcon, redIcon]" />
<Icon icon="demo" height="40" color="red" />
<Icon icon="demo" :width="40" :style="redIcon" />
<Icon icon="demo" :style="{ color: 'red', fontSize: '40px' }" />
<Icon icon="demo" style="color: red; font-size: 40px" />
<Icon icon="demo" :style="[bigIcon, redIcon]" />
</div>
</section>
</template>

View File

@ -3,50 +3,46 @@
<h1>Transformations (components/Transform.vue)</h1>
<div>
Default icon:
<Icon icon="experiment" />
<Icon icon="demo" />
</div>
<div>
Flip horizontally:
<Icon icon="experiment" :hFlip="true" />
<Icon icon="experiment" flip="horizontal" />
<Icon icon="experiment" :horizontal-flip="true" />
<Icon icon="experiment" :h-flip="true" />
<Icon icon="demo" :hFlip="true" />
<Icon icon="demo" flip="horizontal" />
<Icon icon="demo" :horizontal-flip="true" />
<Icon icon="demo" :h-flip="true" />
</div>
<div>
Flip vertically:
<Icon icon="experiment" :vFlip="true" />
<Icon icon="experiment" flip="vertical" />
<Icon icon="experiment" :vertical-flip="true" />
<Icon icon="experiment" :v-flip="true" />
<Icon icon="demo" :vFlip="true" />
<Icon icon="demo" flip="vertical" />
<Icon icon="demo" :vertical-flip="true" />
<Icon icon="demo" :v-flip="true" />
</div>
<div>
Flip horizontally and vertically:
<Icon icon="experiment" :hFlip="true" :vFlip="true" />
<Icon icon="experiment" flip="horizontal,vertical" />
<Icon
icon="experiment"
:horizontal-flip="true"
:vertical-flip="true"
/>
<Icon icon="experiment" :h-flip="true" :v-flip="true" />
<Icon icon="demo" :hFlip="true" :vFlip="true" />
<Icon icon="demo" flip="horizontal,vertical" />
<Icon icon="demo" :horizontal-flip="true" :vertical-flip="true" />
<Icon icon="demo" :h-flip="true" :v-flip="true" />
</div>
<div>
90&deg; rotation:
<Icon icon="experiment" :rotate="1" />
<Icon icon="experiment" rotate="90deg" />
<Icon icon="experiment" rotate="25%" />
<Icon icon="demo" :rotate="1" />
<Icon icon="demo" rotate="90deg" />
<Icon icon="demo" rotate="25%" />
</div>
<div>
180&deg; rotation:
<Icon icon="experiment" :rotate="2" />
<Icon icon="experiment" rotate="180deg" />
<Icon icon="experiment" rotate="50%" />
<Icon icon="demo" :rotate="2" />
<Icon icon="demo" rotate="180deg" />
<Icon icon="demo" rotate="50%" />
</div>
<div>
270&deg; rotation:
<Icon icon="experiment" :rotate="3" />
<Icon icon="experiment" rotate="270deg" />
<Icon icon="experiment" rotate="-25%" />
<Icon icon="demo" :rotate="3" />
<Icon icon="demo" rotate="270deg" />
<Icon icon="demo" rotate="-25%" />
</div>
</section>
</template>

View File

@ -1,10 +1,14 @@
.DS_Store
.babelrc
.eslintignore
.eslintrc.js
node_modules
src
lib
tests
api-extractor.json
api-extractor.*.json
build.js
tsconfig.json
tsconfig.common.json
*.config.js
vitest.config.ts

View File

@ -65,7 +65,7 @@ if (compile.api && !fileExists(packagesDir + '/vue/lib/IconifyIcon.d.ts')) {
compile.lib = true;
}
if (compile.lib && !fileExists(packagesDir + '/core/lib/cache.js')) {
if (compile.lib && !fileExists(packagesDir + '/core/lib/cache.mjs')) {
compile.core = true;
}

File diff suppressed because it is too large Load Diff

View File

@ -2,7 +2,7 @@
"name": "@iconify/vue",
"description": "Iconify icon component for Vue 3.",
"author": "Vjacheslav Trushkin",
"version": "3.1.4",
"version": "3.2.0",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/",
@ -18,7 +18,7 @@
"build:dist": "rollup -c rollup.config.js",
"prebuild:api": "api-extractor run --local --verbose --config api-extractor.offline.json",
"build:api": "api-extractor run --local --verbose --config api-extractor.iconify.json",
"test": "jest --runInBand"
"test": "vitest"
},
"main": "dist/iconify.js",
"module": "dist/iconify.mjs",
@ -43,16 +43,16 @@
},
"devDependencies": {
"@babel/preset-env": "^7.16.11",
"@iconify/core": "^1.2.4",
"@iconify/core": "^1.3.0",
"@microsoft/api-extractor": "^7.19.4",
"@rollup/plugin-node-resolve": "^13.1.3",
"@types/jest": "^27.4.0",
"@vue/test-utils": "^2.0.0-rc.18",
"@vue/vue3-jest": "^27.0.0-alpha.4",
"babel-jest": "^27.4.6",
"jest": "^27.4.7",
"@types/jest": "^27.4.1",
"@vitejs/plugin-vue": "^2.2.4",
"@vue/test-utils": "^2.0.0-rc.17",
"jsdom": "^19.0.0",
"rollup": "^2.66.0",
"typescript": "^4.5.5",
"vitest": "^0.7.6",
"vue": "3"
},
"peerDependencies": {

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { loadIcons, iconExists } from '../../';
import { mockAPIData } from '@iconify/core/lib/api/modules/mock';
import { provider, nextPrefix } from './load';

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import { Icon, loadIcons, iconExists } from '../../';

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import { Icon, iconExists } from '../../';

View File

@ -12,4 +12,4 @@ _api.setAPIModule(provider, mockAPIModule);
// Prefix
let counter = 0;
export const nextPrefix = () => 'mock-' + counter++;
export const nextPrefix = () => 'mock-' + (counter++).toString();

View File

@ -1,3 +1,6 @@
// Default data for empty icon
export const defaultIconResult =
'<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 16 16"></svg>';
// Empty string: could be '<!---->' (jsdom) or '' (happy-dom), depending on testing envronment
export const emptyString = '<!---->';

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import { Icon } from '../../';
@ -26,7 +23,7 @@ describe('Creating component', () => {
const wrapper = mount(Wrapper, {});
await nextTick();
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
expect(wrapper.html().replace(/\s*\n\s*/g, '')).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"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
});
@ -43,7 +40,7 @@ describe('Creating component', () => {
});
await nextTick();
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toEqual(
expect(wrapper.html().replace(/\s*\n\s*/g, '')).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"><path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"></path></svg>'
);
});

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../';
import { defaultIconResult } from '../empty';

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import { Icon } from '../../';

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import { Icon } from '../../';

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import { Icon } from '../../';

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import { Icon } from '../../';

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { nextTick } from 'vue';
import { mount } from '@vue/test-utils';
import { Icon } from '../../';

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
// Import from file
import { Icon } from '../../dist/offline';

View File

@ -1,9 +1,7 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
// Import from alias
import { Icon } from '../../offline';
import { emptyString } from '../empty';
describe('Empty icon', () => {
test('basic test', () => {
@ -11,7 +9,7 @@ describe('Empty icon', () => {
props: {},
});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe('');
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(emptyString);
});
test('with child node', () => {

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../offline';

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../offline';

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../offline';

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../dist/offline';

View File

@ -1,8 +1,6 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon, addIcon, addCollection } from '../../offline';
import { emptyString } from '../empty';
const iconData = {
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
@ -93,6 +91,6 @@ describe('Using storage', () => {
};
const wrapper = mount(Wrapper, {});
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe('');
expect(wrapper.html().replace(/\s*\n\s*/g, '')).toBe(emptyString);
});
});

View File

@ -1,6 +1,3 @@
/**
* @jest-environment jsdom
*/
import { mount } from '@vue/test-utils';
import { Icon } from '../../offline';

View File

@ -0,0 +1,7 @@
{
"extends": "../tsconfig.common.json",
"compilerOptions": {
"types": ["node", "jest"],
"rootDir": "."
}
}

View File

@ -0,0 +1,13 @@
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"declaration": true,
"sourceMap": false,
"strict": false,
"moduleResolution": "node",
"esModuleInterop": true,
"importsNotUsedAsValues": "error",
"forceConsistentCasingInFileNames": true
}
}

View File

@ -1,15 +1,9 @@
{
"extends": "./tsconfig.common.json",
"compilerOptions": {
"rootDir": "./src",
"outDir": "./lib",
"target": "ESNext",
"module": "ESNext",
"declaration": true,
"sourceMap": false,
"strict": false,
"moduleResolution": "node",
"esModuleInterop": true,
"importsNotUsedAsValues": "error",
"forceConsistentCasingInFileNames": true
}
"lib": ["ESNext", "DOM"]
},
"include": ["src/**/*.ts"]
}

View File

@ -0,0 +1,14 @@
/// <reference types="vitest" />
import { defineConfig } from 'vitest/config';
import Vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [Vue()],
test: {
globals: true,
watch: false,
include: ['tests/**/*-test.ts'],
environment: 'jsdom',
},
});