ca81f68ff1
- Migrate from "Vue 2.X" to "Vue 3.X"
- Migrate from "Vue Test Utils v1" to "Vue Test Utils v2"
Changes in detail:
- Change `inserted` to `mounted`.
- Change `::v-deep` to `:deep`.
- Change to Vue 3.0 `v-modal` syntax.
- Remove old Vue 2.0 transition name, keep the ones for Vue 3.0.
- Use new global mounting API `createApp`.
- Change `destroy` to `unmount`.
- Bootstrapping:
- Move `provide`s for global dependencies to a bootsrapper from
`App.vue`.
- Remove `productionTip` setting (not in Vue 3).
- Change `IVueBootstrapper` for simplicity and Vue 3 compatible API.
- Add missing tests.
- Remove `.text` access on `VNode` as it's now internal API of Vue.
- Import `CSSProperties` from `vue` instead of `jsx` package.
- Shims:
- Remove unused `shims-tsx.d.ts`.
- Remove `shims-vue.d.ts` that's missing in quickstart template.
- Unit tests:
- Remove old typing workaround for mounting components.
- Rename `propsData` to `props`.
- Remove unneeded `any` cast workarounds.
- Move stubs and `provide`s under `global` object.
Other changes:
- Add `dmg-license` dependency explicitly due to failing electron builds
on macOS (electron-userland/electron-builder#6520,
electron-userland/electron-builder#6489). This was a side-effect of
updating dependencies for this commit.
103 lines
3.3 KiB
TypeScript
103 lines
3.3 KiB
TypeScript
import {
|
|
describe, it, expect,
|
|
} from 'vitest';
|
|
import { shallowMount } from '@vue/test-utils';
|
|
import { nextTick } from 'vue';
|
|
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
|
import { IconName } from '@/presentation/components/Shared/Icon/IconName';
|
|
import { UseSvgLoaderStub } from '@tests/unit/shared/Stubs/UseSvgLoaderStub';
|
|
|
|
describe('AppIcon.vue', () => {
|
|
it('renders the correct SVG content based on the icon prop', async () => {
|
|
// arrange
|
|
const expectedIconName: IconName = 'magnifying-glass';
|
|
const expectedIconContent = '<svg id="expected-svg" />';
|
|
const svgLoaderStub = new UseSvgLoaderStub();
|
|
svgLoaderStub.withSvgIcon(expectedIconName, expectedIconContent);
|
|
|
|
// act
|
|
const wrapper = mountComponent({
|
|
iconPropValue: expectedIconName,
|
|
loader: svgLoaderStub,
|
|
});
|
|
await nextTick();
|
|
|
|
// assert
|
|
const actualSvg = extractAndNormalizeSvg(wrapper.html());
|
|
const expectedSvg = extractAndNormalizeSvg(expectedIconContent);
|
|
expect(actualSvg).to.equal(
|
|
expectedSvg,
|
|
`Expected:\n\n${expectedSvg}\n\nActual:\n\n${actualSvg}`,
|
|
);
|
|
});
|
|
it('updates the SVG content when the icon prop changes', async () => {
|
|
// arrange
|
|
const initialIconName: IconName = 'magnifying-glass';
|
|
const updatedIconName: IconName = 'copy';
|
|
const updatedIconContent = '<svg id="updated-svg" />';
|
|
const svgLoaderStub = new UseSvgLoaderStub();
|
|
svgLoaderStub.withSvgIcon(initialIconName, '<svg id="initial-svg" />');
|
|
svgLoaderStub.withSvgIcon(updatedIconName, updatedIconContent);
|
|
|
|
// act
|
|
const wrapper = mountComponent({
|
|
iconPropValue: initialIconName,
|
|
loader: svgLoaderStub,
|
|
});
|
|
await wrapper.setProps({ icon: updatedIconName });
|
|
await nextTick();
|
|
|
|
// assert
|
|
const actualSvg = extractAndNormalizeSvg(wrapper.html());
|
|
const expectedSvg = extractAndNormalizeSvg(updatedIconContent);
|
|
expect(actualSvg).to.equal(
|
|
expectedSvg,
|
|
`Expected:\n\n${expectedSvg}\n\nActual:\n\n${actualSvg}`,
|
|
);
|
|
});
|
|
});
|
|
|
|
function mountComponent(options: {
|
|
readonly iconPropValue: IconName,
|
|
readonly loader: UseSvgLoaderStub,
|
|
}) {
|
|
return shallowMount(AppIcon, {
|
|
props: {
|
|
icon: options.iconPropValue,
|
|
},
|
|
global: {
|
|
provide: {
|
|
useSvgLoaderHook: options.loader.get(),
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
function extractAndNormalizeSvg(svgString: string): string {
|
|
const svg = extractSvg(svgString);
|
|
return normalizeSvg(svg);
|
|
}
|
|
|
|
function extractSvg(svgString: string): string {
|
|
const svgMatches = svgString.match(/<svg[\s\S]*?(<\/svg>|\/>)/g);
|
|
if (!svgMatches || svgMatches.length === 0) {
|
|
throw new Error(`No SVG found in: ${svgString}`);
|
|
}
|
|
if (svgMatches.length > 1) {
|
|
throw new Error(`Multiple SVGs found in: ${svgString}`);
|
|
}
|
|
const svgContent = svgMatches[0];
|
|
return svgContent;
|
|
}
|
|
|
|
function normalizeSvg(svgString: string): string {
|
|
return svgString
|
|
.replace(/\n/g, '') // Remove newlines
|
|
.replace(/\s+/g, ' ') // Replace all whitespace sequences with a single space
|
|
.replace(/> </g, '><') // Remove spaces between tags
|
|
.replace(/ <\//g, '</') // Remove spaces before closing tags
|
|
.replace(/\s+\/>/g, '/>') // Remove spaces before self-closing tag end
|
|
.replace(/<(\w+)([^>]*)><\/\1>/g, '<$1$2/>') // Convert to self-closing SVG tags
|
|
.trim(); // Remove leading and trailing spaces
|
|
}
|