Files
privacy.sexy/tests/unit/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseTreeViewNodeInput.spec.ts
undergroundwires ca81f68ff1 Migrate to Vue 3.0 #230
- 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.
2023-11-01 13:39:39 +01:00

197 lines
6.6 KiB
TypeScript

import { shallowMount } from '@vue/test-utils';
import { describe, it, expect } from 'vitest';
import { WatchSource, ref, nextTick } from 'vue';
import { CategoryNodeParser, useTreeViewNodeInput } from '@/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseTreeViewNodeInput';
import { InjectionKeys } from '@/presentation/injectionSymbols';
import { CategoryCollectionStateStub } from '@tests/unit/shared/Stubs/CategoryCollectionStateStub';
import { UseCollectionStateStub } from '@tests/unit/shared/Stubs/UseCollectionStateStub';
import { CategoryCollectionStub } from '@tests/unit/shared/Stubs/CategoryCollectionStub';
import { CategoryStub } from '@tests/unit/shared/Stubs/CategoryStub';
import { ICategoryCollection } from '@/domain/ICategoryCollection';
import { NodeMetadata } from '@/presentation/components/Scripts/View/Tree/NodeContent/NodeMetadata';
import { NodeMetadataStub } from '@tests/unit/shared/Stubs/NodeMetadataStub';
import { convertToNodeInput } from '@/presentation/components/Scripts/View/Tree/TreeViewAdapter/TreeNodeMetadataConverter';
import { TreeInputNodeDataStub as TreeInputNodeData, TreeInputNodeDataStub } from '@tests/unit/shared/Stubs/TreeInputNodeDataStub';
describe('useTreeViewNodeInput', () => {
describe('when given categoryId', () => {
it('sets input nodes correctly', async () => {
// arrange
const testCategoryId = ref<number | undefined>();
const {
useStateStub, returnObject, parserMock, converterMock,
} = mountWrapperComponent(
() => testCategoryId.value,
);
const expectedCategoryId = 123;
const expectedCategoryCollection = new CategoryCollectionStub().withAction(
new CategoryStub(expectedCategoryId),
);
const expectedMetadata = [new NodeMetadataStub(), new NodeMetadataStub()];
parserMock.setupParseSingleScenario({
givenId: expectedCategoryId,
givenCollection: expectedCategoryCollection,
parseResult: expectedMetadata,
});
const expectedNodeInputData = [new TreeInputNodeDataStub(), new TreeInputNodeDataStub()];
expectedMetadata.forEach((metadata, index) => {
converterMock.setupConversionScenario({
givenMetadata: metadata,
convertedNode: expectedNodeInputData[index],
});
});
useStateStub.withState(
new CategoryCollectionStateStub().withCollection(expectedCategoryCollection),
);
// act
const { treeViewInputNodes } = returnObject;
testCategoryId.value = expectedCategoryId;
await nextTick();
// assert
const actualInputNodes = treeViewInputNodes.value;
expect(actualInputNodes).have.lengthOf(expectedNodeInputData.length);
expect(actualInputNodes).include.members(expectedNodeInputData);
});
});
describe('when not given a categoryId', () => {
it('sets input nodes correctly', () => {
// arrange
const testCategoryId = ref<number | undefined>();
const {
useStateStub, returnObject, parserMock, converterMock,
} = mountWrapperComponent(
() => testCategoryId.value,
);
const expectedCategoryCollection = new CategoryCollectionStub().withAction(
new CategoryStub(123),
);
const expectedMetadata = [new NodeMetadataStub(), new NodeMetadataStub()];
parserMock.setupParseAllScenario({
givenCollection: expectedCategoryCollection,
parseResult: expectedMetadata,
});
const expectedNodeInputData = [new TreeInputNodeDataStub(), new TreeInputNodeDataStub()];
expectedMetadata.forEach((metadata, index) => {
converterMock.setupConversionScenario({
givenMetadata: metadata,
convertedNode: expectedNodeInputData[index],
});
});
useStateStub.withState(
new CategoryCollectionStateStub().withCollection(expectedCategoryCollection),
);
// act
const { treeViewInputNodes } = returnObject;
testCategoryId.value = undefined;
// assert
const actualInputNodes = treeViewInputNodes.value;
expect(actualInputNodes).have.lengthOf(expectedNodeInputData.length);
expect(actualInputNodes).include.members(expectedNodeInputData);
});
});
});
function mountWrapperComponent(categoryIdWatcher: WatchSource<number | undefined>) {
const useStateStub = new UseCollectionStateStub();
const parserMock = mockCategoryNodeParser();
const converterMock = mockConverter();
let returnObject: ReturnType<typeof useTreeViewNodeInput>;
shallowMount({
setup() {
returnObject = useTreeViewNodeInput(categoryIdWatcher, parserMock.mock, converterMock.mock);
},
template: '<div></div>',
}, {
global: {
provide: {
[InjectionKeys.useCollectionState as symbol]: () => useStateStub.get(),
},
},
});
return {
returnObject,
useStateStub,
parserMock,
converterMock,
};
}
interface ConversionScenario {
readonly givenMetadata: NodeMetadata;
readonly convertedNode: TreeInputNodeData;
}
function mockConverter() {
const scenarios = new Array<ConversionScenario>();
const mock: typeof convertToNodeInput = (metadata) => {
const scenario = scenarios.find((s) => s.givenMetadata === metadata);
if (scenario) {
return scenario.convertedNode;
}
return new TreeInputNodeData();
};
function setupConversionScenario(scenario: ConversionScenario) {
scenarios.push(scenario);
}
return {
mock,
setupConversionScenario,
};
}
interface ParseSingleScenario {
readonly givenId: number;
readonly givenCollection: ICategoryCollection;
readonly parseResult: NodeMetadata[];
}
interface ParseAllScenario {
readonly givenCollection: ICategoryCollection;
readonly parseResult: NodeMetadata[];
}
function mockCategoryNodeParser() {
const parseSingleScenarios = new Array<ParseSingleScenario>();
const parseAllScenarios = new Array<ParseAllScenario>();
const mock: CategoryNodeParser = {
parseSingle: (id, collection) => {
const scenario = parseSingleScenarios
.find((s) => s.givenId === id && s.givenCollection === collection);
if (scenario) {
return scenario.parseResult;
}
return [];
},
parseAll: (collection) => {
const scenario = parseAllScenarios
.find((s) => s.givenCollection === collection);
if (scenario) {
return scenario.parseResult;
}
return [];
},
};
function setupParseSingleScenario(scenario: ParseSingleScenario) {
parseSingleScenarios.push(scenario);
}
function setupParseAllScenario(scenario: ParseAllScenario) {
parseAllScenarios.push(scenario);
}
return {
mock,
setupParseAllScenario,
setupParseSingleScenario,
};
}