Refactor DI for simplicity and type safety
This commit improves the dependency injection mechanism by introducing a custom `injectKey` function. Key improvements are: - Enforced type consistency during dependency registration and instantiation. - Simplified injection process, abstracting away the complexity with a uniform API, regardless of the dependency's lifetime. - Eliminated the possibility of `undefined` returns during dependency injection, promoting fail-fast behavior. - Removed the necessity for type casting to `symbol` for injection keys in unit tests by using existing types. - Consalidated imports, combining keys and injection functions in one `import` statement.
This commit is contained in:
@@ -71,10 +71,11 @@ To add a new dependency:
|
||||
1. **Define its symbol**: Define an associated symbol for every dependency in [`injectionSymbols.ts`](./../src/presentation/injectionSymbols.ts). Symbols are grouped into:
|
||||
- **Singletons**: Shared across components, instantiated once.
|
||||
- **Transients**: Factories yielding a new instance on every access.
|
||||
2. **Provide the dependency**: Modify the [`provideDependencies`](./../src/presentation/bootstrapping/DependencyProvider.ts) function to include the new dependency. [`App.vue`](./../src/presentation/components/App.vue) calls this function within its `setup()` hook to register the dependencies.
|
||||
3. **Inject the dependency**: Use Vue's `inject` method alongside the defined symbol to incorporate the dependency into components.
|
||||
- For singletons, invoke the factory method: `inject(symbolKey)()`.
|
||||
- For transients, directly inject: `inject(symbolKey)`.
|
||||
2. **Provide the dependency**:
|
||||
Modify the [`provideDependencies`](./../src/presentation/bootstrapping/DependencyProvider.ts) function to include the new dependency.
|
||||
[`App.vue`](./../src/presentation/components/App.vue) calls this function within its `setup()` hook to register the dependencies.
|
||||
3. **Inject the dependency**: Use `injectKey` to inject a dependency. Pass a selector function to `injectKey` that retrieves the appropriate symbol from the provided dependencies.
|
||||
- Example usage: `injectKey((keys) => keys.useCollectionState)`;
|
||||
|
||||
## Shared UI components
|
||||
|
||||
|
||||
@@ -2,38 +2,89 @@ import { InjectionKey, provide, inject } from 'vue';
|
||||
import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
|
||||
import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
|
||||
import { useAutoUnsubscribedEvents } from '@/presentation/components/Shared/Hooks/UseAutoUnsubscribedEvents';
|
||||
import { useClipboard } from '@/presentation/components/Shared/Hooks/Clipboard/UseClipboard';
|
||||
import { useCurrentCode } from '@/presentation/components/Shared/Hooks/UseCurrentCode';
|
||||
import { IApplicationContext } from '@/application/Context/IApplicationContext';
|
||||
import { RuntimeEnvironment } from '@/infrastructure/RuntimeEnvironment/RuntimeEnvironment';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { useClipboard } from '../components/Shared/Hooks/Clipboard/UseClipboard';
|
||||
import { useCurrentCode } from '../components/Shared/Hooks/UseCurrentCode';
|
||||
import {
|
||||
AnyLifetimeInjectionKey, InjectionKeySelector, InjectionKeys, SingletonKey,
|
||||
TransientKey, injectKey,
|
||||
} from '@/presentation/injectionSymbols';
|
||||
import { PropertyKeys } from '@/TypeHelpers';
|
||||
|
||||
export function provideDependencies(
|
||||
context: IApplicationContext,
|
||||
api: VueDependencyInjectionApi = { provide, inject },
|
||||
) {
|
||||
const registerSingleton = <T>(key: InjectionKey<T>, value: T) => api.provide(key, value);
|
||||
const registerTransient = <T>(
|
||||
key: InjectionKey<() => T>,
|
||||
factory: () => T,
|
||||
) => api.provide(key, factory);
|
||||
|
||||
registerSingleton(InjectionKeys.useApplication, useApplication(context.app));
|
||||
registerSingleton(InjectionKeys.useRuntimeEnvironment, RuntimeEnvironment.CurrentEnvironment);
|
||||
registerTransient(InjectionKeys.useAutoUnsubscribedEvents, () => useAutoUnsubscribedEvents());
|
||||
registerTransient(InjectionKeys.useCollectionState, () => {
|
||||
const { events } = api.inject(InjectionKeys.useAutoUnsubscribedEvents)();
|
||||
const resolvers: Record<PropertyKeys<typeof InjectionKeys>, (di: DependencyRegistrar) => void> = {
|
||||
useCollectionState: (di) => di.provide(
|
||||
InjectionKeys.useCollectionState,
|
||||
() => {
|
||||
const { events } = di.injectKey((keys) => keys.useAutoUnsubscribedEvents);
|
||||
return useCollectionState(context, events);
|
||||
});
|
||||
registerTransient(InjectionKeys.useClipboard, () => useClipboard());
|
||||
registerTransient(InjectionKeys.useCurrentCode, () => {
|
||||
const { events } = api.inject(InjectionKeys.useAutoUnsubscribedEvents)();
|
||||
const state = api.inject(InjectionKeys.useCollectionState)();
|
||||
},
|
||||
),
|
||||
useApplication: (di) => di.provide(
|
||||
InjectionKeys.useApplication,
|
||||
useApplication(context.app),
|
||||
),
|
||||
useRuntimeEnvironment: (di) => di.provide(
|
||||
InjectionKeys.useRuntimeEnvironment,
|
||||
RuntimeEnvironment.CurrentEnvironment,
|
||||
),
|
||||
useAutoUnsubscribedEvents: (di) => di.provide(
|
||||
InjectionKeys.useAutoUnsubscribedEvents,
|
||||
useAutoUnsubscribedEvents,
|
||||
),
|
||||
useClipboard: (di) => di.provide(
|
||||
InjectionKeys.useClipboard,
|
||||
useClipboard,
|
||||
),
|
||||
useCurrentCode: (di) => di.provide(
|
||||
InjectionKeys.useCurrentCode,
|
||||
() => {
|
||||
const { events } = di.injectKey((keys) => keys.useAutoUnsubscribedEvents);
|
||||
const state = di.injectKey((keys) => keys.useCollectionState);
|
||||
return useCurrentCode(state, events);
|
||||
});
|
||||
},
|
||||
),
|
||||
};
|
||||
registerAll(Object.values(resolvers), api);
|
||||
}
|
||||
|
||||
function registerAll(
|
||||
registrations: ReadonlyArray<(di: DependencyRegistrar) => void>,
|
||||
api: VueDependencyInjectionApi,
|
||||
) {
|
||||
const registrar = new DependencyRegistrar(api);
|
||||
Object.values(registrations).forEach((register) => register(registrar));
|
||||
}
|
||||
|
||||
export interface VueDependencyInjectionApi {
|
||||
provide<T>(key: InjectionKey<T>, value: T): void;
|
||||
inject<T>(key: InjectionKey<T>): T;
|
||||
}
|
||||
|
||||
class DependencyRegistrar {
|
||||
constructor(private api: VueDependencyInjectionApi) {}
|
||||
|
||||
public provide<T>(
|
||||
key: TransientKey<T>,
|
||||
resolver: () => T,
|
||||
): void;
|
||||
public provide<T>(
|
||||
key: SingletonKey<T>,
|
||||
resolver: T,
|
||||
): void;
|
||||
public provide<T>(
|
||||
key: AnyLifetimeInjectionKey<T>,
|
||||
resolver: T | (() => T),
|
||||
): void {
|
||||
this.api.provide(key.key, resolver);
|
||||
}
|
||||
|
||||
public injectKey<T>(key: InjectionKeySelector<T>): T {
|
||||
const injector = this.api.inject.bind(this.api);
|
||||
return injectKey(key, injector);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,10 +7,8 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent, inject,
|
||||
} from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { defineComponent } from 'vue';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import IconButton from './IconButton.vue';
|
||||
|
||||
export default defineComponent({
|
||||
@@ -18,8 +16,8 @@ export default defineComponent({
|
||||
IconButton,
|
||||
},
|
||||
setup() {
|
||||
const { copyText } = inject(InjectionKeys.useClipboard)();
|
||||
const { currentCode } = inject(InjectionKeys.useCurrentCode)();
|
||||
const { copyText } = injectKey((keys) => keys.useClipboard);
|
||||
const { currentCode } = injectKey((keys) => keys.useCurrentCode);
|
||||
|
||||
async function copyCode() {
|
||||
await copyText(currentCode.value);
|
||||
|
||||
@@ -8,10 +8,8 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent, computed, inject,
|
||||
} from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { defineComponent, computed } from 'vue';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { OperatingSystem } from '@/domain/OperatingSystem';
|
||||
import { CodeRunner } from '@/infrastructure/CodeRunner';
|
||||
import { IReadOnlyApplicationContext } from '@/application/Context/IApplicationContext';
|
||||
@@ -22,8 +20,8 @@ export default defineComponent({
|
||||
IconButton,
|
||||
},
|
||||
setup() {
|
||||
const { currentState, currentContext } = inject(InjectionKeys.useCollectionState)();
|
||||
const { os, isDesktop } = inject(InjectionKeys.useRuntimeEnvironment);
|
||||
const { currentState, currentContext } = injectKey((keys) => keys.useCollectionState);
|
||||
const { os, isDesktop } = injectKey((keys) => keys.useRuntimeEnvironment);
|
||||
|
||||
const canRun = computed<boolean>(() => getCanRunState(currentState.value.os, isDesktop, os));
|
||||
|
||||
|
||||
@@ -13,9 +13,9 @@
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent, ref, computed, inject,
|
||||
defineComponent, ref, computed,
|
||||
} from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { SaveFileDialog, FileType } from '@/infrastructure/SaveFileDialog';
|
||||
import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
|
||||
import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
|
||||
@@ -34,8 +34,8 @@ export default defineComponent({
|
||||
ModalDialog,
|
||||
},
|
||||
setup() {
|
||||
const { currentState } = inject(InjectionKeys.useCollectionState)();
|
||||
const { isDesktop } = inject(InjectionKeys.useRuntimeEnvironment);
|
||||
const { currentState } = injectKey((keys) => keys.useCollectionState);
|
||||
const { isDesktop } = injectKey((keys) => keys.useRuntimeEnvironment);
|
||||
|
||||
const areInstructionsVisible = ref(false);
|
||||
const fileName = computed<string>(() => buildFileName(currentState.value.collection.scripting));
|
||||
|
||||
@@ -16,10 +16,10 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, shallowRef, inject } from 'vue';
|
||||
import { defineComponent, shallowRef } from 'vue';
|
||||
import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
|
||||
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@@ -27,7 +27,7 @@ export default defineComponent({
|
||||
AppIcon,
|
||||
},
|
||||
setup() {
|
||||
const { copyText } = inject(InjectionKeys.useClipboard)();
|
||||
const { copyText } = injectKey((keys) => keys.useClipboard);
|
||||
|
||||
const codeElement = shallowRef<HTMLElement | undefined>();
|
||||
|
||||
|
||||
@@ -57,9 +57,8 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent, PropType, computed,
|
||||
inject,
|
||||
} from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { OperatingSystem } from '@/domain/OperatingSystem';
|
||||
import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
|
||||
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
||||
@@ -79,7 +78,7 @@ export default defineComponent({
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { info } = inject(InjectionKeys.useApplication);
|
||||
const { info } = injectKey((keys) => keys.useApplication);
|
||||
|
||||
const appName = computed<string>(() => info.name);
|
||||
|
||||
|
||||
@@ -8,9 +8,9 @@
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent, computed, inject,
|
||||
defineComponent, computed,
|
||||
} from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import CodeRunButton from './CodeRunButton.vue';
|
||||
import CodeCopyButton from './CodeCopyButton.vue';
|
||||
import CodeSaveButton from './Save/CodeSaveButton.vue';
|
||||
@@ -22,7 +22,7 @@ export default defineComponent({
|
||||
CodeSaveButton,
|
||||
},
|
||||
setup() {
|
||||
const { currentCode } = inject(InjectionKeys.useCurrentCode)();
|
||||
const { currentCode } = injectKey((keys) => keys.useCurrentCode);
|
||||
|
||||
const hasCode = computed<boolean>(() => currentCode.value.length > 0);
|
||||
|
||||
|
||||
@@ -11,9 +11,9 @@
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent, onUnmounted, onMounted, inject,
|
||||
defineComponent, onUnmounted, onMounted,
|
||||
} from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { ICodeChangedEvent } from '@/application/Context/State/Code/Event/ICodeChangedEvent';
|
||||
import { IScript } from '@/domain/IScript';
|
||||
import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
|
||||
@@ -37,8 +37,8 @@ export default defineComponent({
|
||||
NonCollapsing,
|
||||
},
|
||||
setup(props) {
|
||||
const { onStateChange, currentState } = inject(InjectionKeys.useCollectionState)();
|
||||
const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
|
||||
const { onStateChange, currentState } = injectKey((keys) => keys.useCollectionState);
|
||||
const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
|
||||
|
||||
const editorId = 'codeEditor';
|
||||
let editor: ace.Ace.Editor | undefined;
|
||||
|
||||
@@ -65,8 +65,8 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, inject } from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
|
||||
import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
|
||||
import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
|
||||
@@ -81,8 +81,8 @@ export default defineComponent({
|
||||
TooltipWrapper,
|
||||
},
|
||||
setup() {
|
||||
const { modifyCurrentState, onStateChange } = inject(InjectionKeys.useCollectionState)();
|
||||
const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
|
||||
const { modifyCurrentState, onStateChange } = injectKey((keys) => keys.useCollectionState);
|
||||
const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
|
||||
|
||||
const currentSelection = ref(SelectionType.None);
|
||||
|
||||
|
||||
@@ -11,10 +11,8 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent, computed, inject,
|
||||
} from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { defineComponent, computed } from 'vue';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { OperatingSystem } from '@/domain/OperatingSystem';
|
||||
import MenuOptionList from './MenuOptionList.vue';
|
||||
import MenuOptionListItem from './MenuOptionListItem.vue';
|
||||
@@ -30,8 +28,8 @@ export default defineComponent({
|
||||
MenuOptionListItem,
|
||||
},
|
||||
setup() {
|
||||
const { modifyCurrentContext, currentState } = inject(InjectionKeys.useCollectionState)();
|
||||
const { application } = inject(InjectionKeys.useApplication);
|
||||
const { modifyCurrentContext, currentState } = injectKey((keys) => keys.useCollectionState);
|
||||
const { application } = injectKey((keys) => keys.useApplication);
|
||||
|
||||
const allOses = computed<ReadonlyArray<IOsViewModel>>(() => (
|
||||
application.getSupportedOsList() ?? [])
|
||||
|
||||
@@ -10,10 +10,8 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent, ref, inject,
|
||||
} from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { IReadOnlyUserFilter } from '@/application/Context/State/Filter/IUserFilter';
|
||||
import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
|
||||
import TheOsChanger from './TheOsChanger.vue';
|
||||
@@ -27,8 +25,8 @@ export default defineComponent({
|
||||
TheViewChanger,
|
||||
},
|
||||
setup() {
|
||||
const { onStateChange } = inject(InjectionKeys.useCollectionState)();
|
||||
const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
|
||||
const { onStateChange } = injectKey((keys) => keys.useCollectionState);
|
||||
const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
|
||||
|
||||
const isSearching = ref(false);
|
||||
|
||||
|
||||
@@ -35,9 +35,8 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent, ref, onMounted, onUnmounted, computed,
|
||||
inject,
|
||||
} from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import SizeObserver from '@/presentation/components/Shared/SizeObserver.vue';
|
||||
import { hasDirective } from './NonCollapsingDirective';
|
||||
import CardListItem from './CardListItem.vue';
|
||||
@@ -48,7 +47,7 @@ export default defineComponent({
|
||||
SizeObserver,
|
||||
},
|
||||
setup() {
|
||||
const { currentState, onStateChange } = inject(InjectionKeys.useCollectionState)();
|
||||
const { currentState, onStateChange } = injectKey((keys) => keys.useCollectionState);
|
||||
|
||||
const width = ref<number>(0);
|
||||
const categoryIds = computed<ReadonlyArray<number>>(() => currentState
|
||||
|
||||
@@ -49,11 +49,10 @@
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent, ref, watch, computed,
|
||||
inject, shallowRef,
|
||||
defineComponent, ref, watch, computed, shallowRef,
|
||||
} from 'vue';
|
||||
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
|
||||
import { sleep } from '@/infrastructure/Threading/AsyncSleep';
|
||||
|
||||
@@ -78,8 +77,8 @@ export default defineComponent({
|
||||
/* eslint-enable @typescript-eslint/no-unused-vars */
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const { onStateChange, currentState } = inject(InjectionKeys.useCollectionState)();
|
||||
const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
|
||||
const { onStateChange, currentState } = injectKey((keys) => keys.useCollectionState);
|
||||
const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
|
||||
|
||||
const isExpanded = computed({
|
||||
get: () => {
|
||||
|
||||
@@ -39,10 +39,9 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent, PropType, ref, computed,
|
||||
inject,
|
||||
} from 'vue';
|
||||
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
|
||||
import CardList from '@/presentation/components/Scripts/View/Cards/CardList.vue';
|
||||
import { ViewType } from '@/presentation/components/Scripts/Menu/View/ViewType';
|
||||
@@ -62,9 +61,9 @@ export default defineComponent({
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const { modifyCurrentState, onStateChange } = inject(InjectionKeys.useCollectionState)();
|
||||
const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
|
||||
const { info } = inject(InjectionKeys.useApplication);
|
||||
const { modifyCurrentState, onStateChange } = injectKey((keys) => keys.useCollectionState);
|
||||
const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
|
||||
const { info } = injectKey((keys) => keys.useApplication);
|
||||
|
||||
const repositoryUrl = computed<string>(() => info.repositoryWebUrl);
|
||||
const searchQuery = ref<string | undefined>();
|
||||
|
||||
@@ -8,11 +8,10 @@
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
PropType, defineComponent, ref, watch,
|
||||
computed, inject,
|
||||
PropType, defineComponent, ref, watch, computed,
|
||||
} from 'vue';
|
||||
import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { NodeMetadata } from '@/presentation/components/Scripts/View/Tree/NodeContent/NodeMetadata';
|
||||
import { IReverter } from './Reverter/IReverter';
|
||||
import { getReverter } from './Reverter/ReverterFactory';
|
||||
@@ -31,8 +30,8 @@ export default defineComponent({
|
||||
setup(props) {
|
||||
const {
|
||||
currentState, modifyCurrentState, onStateChange,
|
||||
} = inject(InjectionKeys.useCollectionState)();
|
||||
const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
|
||||
} = injectKey((keys) => keys.useCollectionState);
|
||||
const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
|
||||
|
||||
const isReverted = ref(false);
|
||||
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import {
|
||||
WatchSource, inject, shallowRef, watch,
|
||||
WatchSource, shallowRef, watch,
|
||||
} from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { ReadOnlyTreeNode } from './TreeNode';
|
||||
import { TreeNodeStateDescriptor } from './State/StateDescriptor';
|
||||
|
||||
export function useNodeState(
|
||||
nodeWatcher: WatchSource<ReadOnlyTreeNode | undefined>,
|
||||
) {
|
||||
const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
|
||||
const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
|
||||
|
||||
const state = shallowRef<TreeNodeStateDescriptor>();
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import {
|
||||
WatchSource, watch, inject, shallowReadonly, shallowRef,
|
||||
WatchSource, watch, shallowReadonly, shallowRef,
|
||||
} from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { TreeRoot } from './TreeRoot/TreeRoot';
|
||||
import { QueryableNodes } from './TreeRoot/NodeCollection/Query/QueryableNodes';
|
||||
|
||||
export function useCurrentTreeNodes(treeWatcher: WatchSource<TreeRoot>) {
|
||||
const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
|
||||
const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
|
||||
|
||||
const tree = shallowRef<TreeRoot | undefined>();
|
||||
const nodes = shallowRef<QueryableNodes | undefined>();
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import {
|
||||
WatchSource, inject, watch, shallowRef,
|
||||
WatchSource, watch, shallowRef,
|
||||
} from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
|
||||
import { TreeRoot } from './TreeRoot/TreeRoot';
|
||||
import { TreeNode } from './Node/TreeNode';
|
||||
@@ -15,7 +15,7 @@ export function useNodeStateChangeAggregator(
|
||||
useTreeNodes = useCurrentTreeNodes,
|
||||
) {
|
||||
const { nodes } = useTreeNodes(treeWatcher);
|
||||
const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
|
||||
const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
|
||||
|
||||
const onNodeChangeCallback = shallowRef<NodeStateChangeEventCallback>();
|
||||
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import { inject } from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { TreeNodeCheckState } from '../TreeView/Node/State/CheckState';
|
||||
import { TreeNodeStateChangedEmittedEvent } from '../TreeView/Bindings/TreeNodeStateChangedEmittedEvent';
|
||||
|
||||
export function useCollectionSelectionStateUpdater() {
|
||||
const { modifyCurrentState, currentState } = inject(InjectionKeys.useCollectionState)();
|
||||
const { modifyCurrentState, currentState } = injectKey((keys) => keys.useCollectionState);
|
||||
|
||||
function updateNodeSelection(change: TreeNodeStateChangedEmittedEvent) {
|
||||
const { node } = change;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import {
|
||||
computed, inject, shallowReadonly, shallowRef, triggerRef,
|
||||
computed, shallowReadonly, shallowRef, triggerRef,
|
||||
} from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
|
||||
import { getScriptNodeId } from './CategoryNodeMetadataConverter';
|
||||
|
||||
@@ -20,8 +20,8 @@ export function useSelectedScriptNodeIds(scriptNodeIdParser = getScriptNodeId) {
|
||||
}
|
||||
|
||||
function useSelectedScripts() {
|
||||
const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
|
||||
const { onStateChange } = inject(InjectionKeys.useCollectionState)();
|
||||
const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
|
||||
const { onStateChange } = injectKey((keys) => keys.useCollectionState);
|
||||
|
||||
const selectedScripts = shallowRef<readonly SelectedScript[]>([]);
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {
|
||||
Ref, inject, shallowReadonly, shallowRef,
|
||||
Ref, shallowReadonly, shallowRef,
|
||||
} from 'vue';
|
||||
import { IScript } from '@/domain/IScript';
|
||||
import { ICategory } from '@/domain/ICategory';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { IReadOnlyUserFilter } from '@/application/Context/State/Filter/IUserFilter';
|
||||
import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
|
||||
import { TreeViewFilterEvent, createFilterRemovedEvent, createFilterTriggeredEvent } from '../TreeView/Bindings/TreeInputFilterEvent';
|
||||
@@ -18,8 +18,8 @@ type TreeNodeFilterResultPredicate = (
|
||||
) => boolean;
|
||||
|
||||
export function useTreeViewFilterEvent() {
|
||||
const { onStateChange } = inject(InjectionKeys.useCollectionState)();
|
||||
const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
|
||||
const { onStateChange } = injectKey((keys) => keys.useCollectionState);
|
||||
const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
|
||||
|
||||
const latestFilterEvent = shallowRef<TreeViewFilterEvent | undefined>(undefined);
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {
|
||||
WatchSource, computed, inject,
|
||||
WatchSource, computed,
|
||||
ref, watch,
|
||||
} from 'vue';
|
||||
import { ICategoryCollection } from '@/domain/ICategoryCollection';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { TreeInputNodeData } from '../TreeView/Bindings/TreeInputNodeData';
|
||||
import { NodeMetadata } from '../NodeContent/NodeMetadata';
|
||||
import { convertToNodeInput } from './TreeNodeMetadataConverter';
|
||||
@@ -17,7 +17,7 @@ export function useTreeViewNodeInput(
|
||||
},
|
||||
nodeConverter = convertToNodeInput,
|
||||
) {
|
||||
const { currentState } = inject(InjectionKeys.useCollectionState)();
|
||||
const { currentState } = injectKey((keys) => keys.useCollectionState);
|
||||
|
||||
const categoryId = ref<number | undefined>();
|
||||
|
||||
|
||||
@@ -18,9 +18,9 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
import { OperatingSystem } from '@/domain/OperatingSystem';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
||||
import DownloadUrlListItem from './DownloadUrlListItem.vue';
|
||||
|
||||
@@ -36,7 +36,7 @@ export default defineComponent({
|
||||
AppIcon,
|
||||
},
|
||||
setup() {
|
||||
const { os: currentOs } = inject(InjectionKeys.useRuntimeEnvironment);
|
||||
const { os: currentOs } = injectKey((keys) => keys.useRuntimeEnvironment);
|
||||
const supportedDesktops = [
|
||||
...supportedOperativeSystems,
|
||||
].sort((os) => (os === currentOs ? 0 : 1));
|
||||
|
||||
@@ -12,9 +12,8 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent, PropType, computed,
|
||||
inject,
|
||||
} from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { OperatingSystem } from '@/domain/OperatingSystem';
|
||||
|
||||
export default defineComponent({
|
||||
@@ -25,8 +24,8 @@ export default defineComponent({
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { info } = inject(InjectionKeys.useApplication);
|
||||
const { os: currentOs } = inject(InjectionKeys.useRuntimeEnvironment);
|
||||
const { info } = injectKey((keys) => keys.useApplication);
|
||||
const { os: currentOs } = injectKey((keys) => keys.useRuntimeEnvironment);
|
||||
|
||||
const isCurrentOs = computed<boolean>(() => {
|
||||
return currentOs === props.operatingSystem;
|
||||
|
||||
@@ -41,13 +41,13 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, inject } from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { defineComponent, computed } from 'vue';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const { info } = inject(InjectionKeys.useApplication);
|
||||
const { isDesktop } = inject(InjectionKeys.useRuntimeEnvironment);
|
||||
const { info } = injectKey((keys) => keys.useApplication);
|
||||
const { isDesktop } = injectKey((keys) => keys.useRuntimeEnvironment);
|
||||
|
||||
const repositoryUrl = computed<string>(() => info.repositoryUrl);
|
||||
const feedbackUrl = computed<string>(() => info.feedbackUrl);
|
||||
|
||||
@@ -45,11 +45,11 @@
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent, ref, computed, inject,
|
||||
defineComponent, ref, computed,
|
||||
} from 'vue';
|
||||
import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
|
||||
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import DownloadUrlList from './DownloadUrlList.vue';
|
||||
import PrivacyPolicy from './PrivacyPolicy.vue';
|
||||
|
||||
@@ -61,8 +61,8 @@ export default defineComponent({
|
||||
AppIcon,
|
||||
},
|
||||
setup() {
|
||||
const { info } = inject(InjectionKeys.useApplication);
|
||||
const { isDesktop } = inject(InjectionKeys.useRuntimeEnvironment);
|
||||
const { info } = injectKey((keys) => keys.useApplication);
|
||||
const { isDesktop } = injectKey((keys) => keys.useRuntimeEnvironment);
|
||||
|
||||
const isPrivacyDialogVisible = ref(false);
|
||||
|
||||
|
||||
@@ -6,12 +6,12 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, inject } from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { defineComponent, computed } from 'vue';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const { info } = inject(InjectionKeys.useApplication);
|
||||
const { info } = injectKey((keys) => keys.useApplication);
|
||||
|
||||
const title = computed(() => info.name);
|
||||
const subtitle = computed(() => info.slogan);
|
||||
|
||||
@@ -15,9 +15,8 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent, ref, watch, computed,
|
||||
inject,
|
||||
} from 'vue';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { injectKey } from '@/presentation/injectionSymbols';
|
||||
import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
|
||||
import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
|
||||
import { IReadOnlyUserFilter } from '@/application/Context/State/Filter/IUserFilter';
|
||||
@@ -32,8 +31,8 @@ export default defineComponent({
|
||||
setup() {
|
||||
const {
|
||||
modifyCurrentState, onStateChange, currentState,
|
||||
} = inject(InjectionKeys.useCollectionState)();
|
||||
const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
|
||||
} = injectKey((keys) => keys.useCollectionState);
|
||||
const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
|
||||
|
||||
const searchPlaceholder = computed<string>(() => {
|
||||
const { totalScripts } = currentState.value.collection;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { inject, type InjectionKey } from 'vue';
|
||||
import type { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
|
||||
import type { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
|
||||
import type { useRuntimeEnvironment } from '@/presentation/components/Shared/Hooks/UseRuntimeEnvironment';
|
||||
import type { useClipboard } from '@/presentation/components/Shared/Hooks/Clipboard/UseClipboard';
|
||||
import type { useCurrentCode } from '@/presentation/components/Shared/Hooks/UseCurrentCode';
|
||||
import type { useAutoUnsubscribedEvents } from '@/presentation/components/Shared/Hooks/UseAutoUnsubscribedEvents';
|
||||
import type { InjectionKey } from 'vue';
|
||||
|
||||
export const InjectionKeys = {
|
||||
useCollectionState: defineTransientKey<ReturnType<typeof useCollectionState>>('useCollectionState'),
|
||||
@@ -15,10 +15,68 @@ export const InjectionKeys = {
|
||||
useCurrentCode: defineTransientKey<ReturnType<typeof useCurrentCode>>('useCurrentCode'),
|
||||
};
|
||||
|
||||
function defineSingletonKey<T>(key: string): InjectionKey<T> {
|
||||
return Symbol(key) as InjectionKey<T>;
|
||||
export interface InjectionKeyWithLifetime<T> {
|
||||
readonly lifetime: InjectionKeyLifetime;
|
||||
readonly key: InjectionKey<T> & symbol;
|
||||
}
|
||||
|
||||
function defineTransientKey<T>(key: string): InjectionKey<() => T> {
|
||||
return Symbol(key) as InjectionKey<() => T>;
|
||||
export interface SingletonKey<T> extends InjectionKeyWithLifetime<T> {
|
||||
readonly lifetime: InjectionKeyLifetime.Singleton;
|
||||
readonly key: InjectionKey<T> & symbol;
|
||||
}
|
||||
|
||||
export interface TransientKey<T> extends InjectionKeyWithLifetime<() => T> {
|
||||
readonly lifetime: InjectionKeyLifetime.Transient;
|
||||
readonly key: InjectionKey<() => T> & symbol;
|
||||
}
|
||||
|
||||
export type AnyLifetimeInjectionKey<T> = InjectionKeyWithLifetime<T> | TransientKey<T>;
|
||||
|
||||
export type InjectionKeySelector<T> = (keys: typeof InjectionKeys) => AnyLifetimeInjectionKey<T>;
|
||||
|
||||
export function injectKey<T>(
|
||||
keySelector: InjectionKeySelector<T>,
|
||||
vueInjector = inject,
|
||||
): T {
|
||||
const key = keySelector(InjectionKeys);
|
||||
const injectedValue = injectRequired(key.key, vueInjector);
|
||||
if (key.lifetime === InjectionKeyLifetime.Transient) {
|
||||
const factory = injectedValue as () => T;
|
||||
const value = factory();
|
||||
return value;
|
||||
}
|
||||
|
||||
return injectedValue as T;
|
||||
}
|
||||
|
||||
export enum InjectionKeyLifetime {
|
||||
Singleton,
|
||||
Transient,
|
||||
}
|
||||
|
||||
function defineSingletonKey<T>(key: string): SingletonKey<T> {
|
||||
return {
|
||||
lifetime: InjectionKeyLifetime.Singleton,
|
||||
key: Symbol(key),
|
||||
};
|
||||
}
|
||||
|
||||
function defineTransientKey<T>(key: string): TransientKey<T> {
|
||||
return {
|
||||
lifetime: InjectionKeyLifetime.Transient,
|
||||
key: Symbol(key),
|
||||
};
|
||||
}
|
||||
|
||||
function injectRequired<T>(
|
||||
key: InjectionKey<T>,
|
||||
vueInjector = inject,
|
||||
): T {
|
||||
const injectedValue = vueInjector(key);
|
||||
|
||||
if (injectedValue === undefined) {
|
||||
throw new Error(`Failed to inject value for key: ${key.description}`);
|
||||
}
|
||||
|
||||
return injectedValue;
|
||||
}
|
||||
|
||||
53
tests/integration/composite/DependencyResolution.spec.ts
Normal file
53
tests/integration/composite/DependencyResolution.spec.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import { it, describe, expect } from 'vitest';
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import { defineComponent, inject } from 'vue';
|
||||
import { InjectionKeySelector, InjectionKeys, injectKey } from '@/presentation/injectionSymbols';
|
||||
import { provideDependencies } from '@/presentation/bootstrapping/DependencyProvider';
|
||||
import { buildContext } from '@/application/Context/ApplicationContextFactory';
|
||||
import { IApplicationContext } from '@/application/Context/IApplicationContext';
|
||||
|
||||
describe('DependencyResolution', () => {
|
||||
describe('all dependencies can be injected', async () => {
|
||||
// arrange
|
||||
const context = await buildContext();
|
||||
const dependencies = collectProvidedKeys(context);
|
||||
Object.values(InjectionKeys).forEach((key) => {
|
||||
it(`"${key.key.description}"`, () => {
|
||||
// act
|
||||
const resolvedDependency = resolve(() => key, dependencies);
|
||||
// assert
|
||||
expect(resolvedDependency).to.toBeDefined();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
type ProvidedKeys = Record<symbol, unknown>;
|
||||
|
||||
function collectProvidedKeys(context: IApplicationContext): ProvidedKeys {
|
||||
const providedKeys: ProvidedKeys = {};
|
||||
provideDependencies(context, {
|
||||
inject,
|
||||
provide: (key, value) => {
|
||||
providedKeys[key as symbol] = value;
|
||||
},
|
||||
});
|
||||
return providedKeys;
|
||||
}
|
||||
|
||||
function resolve<T>(
|
||||
selector: InjectionKeySelector<T>,
|
||||
providedKeys: ProvidedKeys,
|
||||
): T | undefined {
|
||||
let injectedDependency: T | undefined;
|
||||
shallowMount(defineComponent({
|
||||
setup() {
|
||||
injectedDependency = injectKey(selector);
|
||||
},
|
||||
}), {
|
||||
global: {
|
||||
provide: providedKeys,
|
||||
},
|
||||
});
|
||||
return injectedDependency;
|
||||
}
|
||||
3
tests/integration/composite/README.md
Normal file
3
tests/integration/composite/README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# Composite Tests
|
||||
|
||||
The `composite` directory contains integration tests that validate the cooperative functionality of multiple components within the application, going beyond unit tests to ensure interconnected parts perform as expected.
|
||||
@@ -0,0 +1,16 @@
|
||||
import { describe } from 'vitest';
|
||||
import { createApp } from 'vue';
|
||||
import { ApplicationBootstrapper } from '@/presentation/bootstrapping/ApplicationBootstrapper';
|
||||
import { expectDoesNotThrowAsync } from '@tests/shared/Assertions/ExpectThrowsAsync';
|
||||
|
||||
describe('ApplicationBootstrapper', () => {
|
||||
it('can bootstrap without errors', async () => {
|
||||
// arrange
|
||||
const sut = new ApplicationBootstrapper();
|
||||
const vueApp = createApp({});
|
||||
// act
|
||||
const act = () => sut.bootstrap(vueApp);
|
||||
// assert
|
||||
await expectDoesNotThrowAsync(act);
|
||||
});
|
||||
});
|
||||
@@ -7,7 +7,7 @@ import { IApplication } from '@/domain/IApplication';
|
||||
import { RuntimeEnvironmentStub } from '@tests/unit/shared/Stubs/RuntimeEnvironmentStub';
|
||||
import { ApplicationStub } from '@tests/unit/shared/Stubs/ApplicationStub';
|
||||
import { CategoryCollectionStub } from '@tests/unit/shared/Stubs/CategoryCollectionStub';
|
||||
import { expectThrowsAsync } from '@tests/unit/shared/Assertions/ExpectThrowsAsync';
|
||||
import { expectThrowsAsync } from '@tests/shared/Assertions/ExpectThrowsAsync';
|
||||
|
||||
describe('ApplicationContextFactory', () => {
|
||||
describe('buildContext', () => {
|
||||
|
||||
@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest';
|
||||
import { RuntimeEnvironmentStub } from '@tests/unit/shared/Stubs/RuntimeEnvironmentStub';
|
||||
import { OperatingSystem } from '@/domain/OperatingSystem';
|
||||
import { CodeRunner } from '@/infrastructure/CodeRunner';
|
||||
import { expectThrowsAsync } from '@tests/unit/shared/Assertions/ExpectThrowsAsync';
|
||||
import { expectThrowsAsync } from '@tests/shared/Assertions/ExpectThrowsAsync';
|
||||
import { SystemOperationsStub } from '@tests/unit/shared/Stubs/SystemOperationsStub';
|
||||
import { OperatingSystemOpsStub } from '@tests/unit/shared/Stubs/OperatingSystemOpsStub';
|
||||
import { LocationOpsStub } from '@tests/unit/shared/Stubs/LocationOpsStub';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { BootstrapperStub } from '@tests/unit/shared/Stubs/BootstrapperStub';
|
||||
import { ApplicationBootstrapper } from '@/presentation/bootstrapping/ApplicationBootstrapper';
|
||||
import { expectThrowsAsync } from '@tests/unit/shared/Assertions/ExpectThrowsAsync';
|
||||
import { expectThrowsAsync } from '@tests/shared/Assertions/ExpectThrowsAsync';
|
||||
import type { App } from 'vue';
|
||||
|
||||
describe('ApplicationBootstrapper', () => {
|
||||
|
||||
@@ -18,8 +18,9 @@ describe('DependencyProvider', () => {
|
||||
useCurrentCode: createTransientTests(),
|
||||
};
|
||||
Object.entries(testCases).forEach(([key, runTests]) => {
|
||||
describe(`Key: "${key}"`, () => {
|
||||
runTests(InjectionKeys[key]);
|
||||
const registeredKey = InjectionKeys[key].key;
|
||||
describe(`Key: "${registeredKey.toString()}"`, () => {
|
||||
runTests(registeredKey);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { ISanityCheckOptions } from '@/infrastructure/RuntimeSanity/Common/ISanityCheckOptions';
|
||||
import { RuntimeSanityValidator } from '@/presentation/bootstrapping/Modules/RuntimeSanityValidator';
|
||||
import { expectDoesNotThrowAsync, expectThrowsAsync } from '@tests/unit/shared/Assertions/ExpectThrowsAsync';
|
||||
import { expectDoesNotThrowAsync, expectThrowsAsync } from '@tests/shared/Assertions/ExpectThrowsAsync';
|
||||
|
||||
describe('RuntimeSanityValidator', () => {
|
||||
it('calls validator with correct options upon bootstrap', async () => {
|
||||
|
||||
@@ -39,12 +39,12 @@ function mountComponent(options?: {
|
||||
return shallowMount(CodeCopyButton, {
|
||||
global: {
|
||||
provide: {
|
||||
[InjectionKeys.useClipboard as symbol]: () => (
|
||||
[InjectionKeys.useClipboard.key]: () => (
|
||||
options?.clipboard
|
||||
? new UseClipboardStub(options.clipboard)
|
||||
: new UseClipboardStub()
|
||||
).get(),
|
||||
[InjectionKeys.useCurrentCode as symbol]: () => (
|
||||
[InjectionKeys.useCurrentCode.key]: () => (
|
||||
options.currentCode === undefined
|
||||
? new UseCurrentCodeStub()
|
||||
: new UseCurrentCodeStub().withCurrentCode(options.currentCode)
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import CodeInstruction from '@/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue';
|
||||
import { expectThrowsAsync } from '@tests/unit/shared/Assertions/ExpectThrowsAsync';
|
||||
import { expectThrowsAsync } from '@tests/shared/Assertions/ExpectThrowsAsync';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { Clipboard } from '@/presentation/components/Shared/Hooks/Clipboard/Clipboard';
|
||||
import { UseClipboardStub } from '@tests/unit/shared/Stubs/UseClipboardStub';
|
||||
@@ -74,7 +74,7 @@ function mountComponent(options?: {
|
||||
return shallowMount(CodeInstruction, {
|
||||
global: {
|
||||
provide: {
|
||||
[InjectionKeys.useClipboard as symbol]:
|
||||
[InjectionKeys.useClipboard.key]:
|
||||
() => {
|
||||
if (options?.clipboard) {
|
||||
return new UseClipboardStub(options.clipboard).get();
|
||||
|
||||
@@ -406,11 +406,11 @@ function mountComponent(options?: {
|
||||
return shallowMount(TheScriptsView, {
|
||||
global: {
|
||||
provide: {
|
||||
[InjectionKeys.useCollectionState as symbol]:
|
||||
[InjectionKeys.useCollectionState.key]:
|
||||
() => options?.useCollectionState ?? new UseCollectionStateStub().get(),
|
||||
[InjectionKeys.useApplication as symbol]:
|
||||
[InjectionKeys.useApplication.key]:
|
||||
new UseApplicationStub().get(),
|
||||
[InjectionKeys.useAutoUnsubscribedEvents as symbol]:
|
||||
[InjectionKeys.useAutoUnsubscribedEvents.key]:
|
||||
() => new UseAutoUnsubscribedEventsStub().get(),
|
||||
},
|
||||
},
|
||||
|
||||
@@ -79,7 +79,7 @@ function mountWrapperComponent(nodeWatcher: WatchSource<ReadOnlyTreeNode | undef
|
||||
{
|
||||
global: {
|
||||
provide: {
|
||||
[InjectionKeys.useAutoUnsubscribedEvents as symbol]:
|
||||
[InjectionKeys.useAutoUnsubscribedEvents.key]:
|
||||
() => new UseAutoUnsubscribedEventsStub().get(),
|
||||
},
|
||||
},
|
||||
|
||||
@@ -70,7 +70,7 @@ function mountWrapperComponent(treeWatcher: WatchSource<TreeRoot | undefined>) {
|
||||
{
|
||||
global: {
|
||||
provide: {
|
||||
[InjectionKeys.useAutoUnsubscribedEvents as symbol]:
|
||||
[InjectionKeys.useAutoUnsubscribedEvents.key]:
|
||||
() => new UseAutoUnsubscribedEventsStub().get(),
|
||||
},
|
||||
},
|
||||
|
||||
@@ -336,7 +336,7 @@ class UseNodeStateChangeAggregatorBuilder {
|
||||
{
|
||||
global: {
|
||||
provide: {
|
||||
[InjectionKeys.useAutoUnsubscribedEvents as symbol]:
|
||||
[InjectionKeys.useAutoUnsubscribedEvents.key]:
|
||||
() => this.events.get(),
|
||||
},
|
||||
},
|
||||
|
||||
@@ -172,7 +172,7 @@ function mountWrapperComponent() {
|
||||
}, {
|
||||
global: {
|
||||
provide: {
|
||||
[InjectionKeys.useCollectionState as symbol]: () => useStateStub.get(),
|
||||
[InjectionKeys.useCollectionState.key]: () => useStateStub.get(),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -239,9 +239,9 @@ function mountWrapperComponent(scenario?: {
|
||||
}, {
|
||||
global: {
|
||||
provide: {
|
||||
[InjectionKeys.useCollectionState as symbol]:
|
||||
[InjectionKeys.useCollectionState.key]:
|
||||
() => useStateStub.get(),
|
||||
[InjectionKeys.useAutoUnsubscribedEvents as symbol]:
|
||||
[InjectionKeys.useAutoUnsubscribedEvents.key]:
|
||||
() => (scenario?.useAutoUnsubscribedEvents ?? new UseAutoUnsubscribedEventsStub()).get(),
|
||||
},
|
||||
},
|
||||
|
||||
@@ -148,9 +148,9 @@ function mountWrapperComponent(options?: {
|
||||
}, {
|
||||
global: {
|
||||
provide: {
|
||||
[InjectionKeys.useCollectionState as symbol]:
|
||||
[InjectionKeys.useCollectionState.key]:
|
||||
() => useStateStub.get(),
|
||||
[InjectionKeys.useAutoUnsubscribedEvents as symbol]:
|
||||
[InjectionKeys.useAutoUnsubscribedEvents.key]:
|
||||
() => new UseAutoUnsubscribedEventsStub().get(),
|
||||
},
|
||||
},
|
||||
|
||||
@@ -106,7 +106,7 @@ function mountWrapperComponent(categoryIdWatcher: WatchSource<number | undefined
|
||||
}, {
|
||||
global: {
|
||||
provide: {
|
||||
[InjectionKeys.useCollectionState as symbol]: () => useStateStub.get(),
|
||||
[InjectionKeys.useCollectionState.key]: () => useStateStub.get(),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { BrowserClipboard, NavigatorClipboard } from '@/presentation/components/Shared/Hooks/Clipboard/BrowserClipboard';
|
||||
import { StubWithObservableMethodCalls } from '@tests/unit/shared/Stubs/StubWithObservableMethodCalls';
|
||||
import { expectThrowsAsync } from '@tests/unit/shared/Assertions/ExpectThrowsAsync';
|
||||
import { expectThrowsAsync } from '@tests/shared/Assertions/ExpectThrowsAsync';
|
||||
|
||||
describe('BrowserClipboard', () => {
|
||||
describe('writeText', () => {
|
||||
|
||||
@@ -1,24 +1,78 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { InjectionKeys } from '@/presentation/injectionSymbols';
|
||||
import { InjectionKeySelector, InjectionKeys, injectKey } from '@/presentation/injectionSymbols';
|
||||
import { getAbsentObjectTestCases } from '../shared/TestCases/AbsentTests';
|
||||
|
||||
describe('injectionSymbols', () => {
|
||||
Object.entries(InjectionKeys).forEach(([key, symbol]) => {
|
||||
describe(`symbol for ${key}`, () => {
|
||||
describe('InjectionKeys', () => {
|
||||
Object.entries(InjectionKeys).forEach(([key, injectionKey]) => {
|
||||
describe(`symbol for ${injectionKey.key.toString()}`, () => {
|
||||
it('should be a symbol type', () => {
|
||||
// arrange
|
||||
const actualKey = injectionKey.key;
|
||||
const expectedType = Symbol;
|
||||
// act
|
||||
// assert
|
||||
expect(symbol).to.be.instanceOf(expectedType);
|
||||
expect(actualKey).to.be.instanceOf(expectedType);
|
||||
});
|
||||
it(`should have a description matching the key "${key}"`, () => {
|
||||
it(`should have a description matching the key "${injectionKey.key.toString()}"`, () => {
|
||||
// arrange
|
||||
const actualKey = injectionKey.key;
|
||||
const expected = key;
|
||||
// act
|
||||
const actual = symbol.description;
|
||||
const actual = actualKey.description;
|
||||
// assert
|
||||
expect(expected).to.equal(actual);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('injectKey', () => {
|
||||
it('returns the correct value for singleton keys', () => {
|
||||
// arrange
|
||||
const mockValue = { someProperty: 'someValue' };
|
||||
// act
|
||||
const mockInject = () => mockValue;
|
||||
const result = injectKey((keys) => keys.useApplication, mockInject);
|
||||
// assert
|
||||
expect(result).to.equal(mockValue);
|
||||
});
|
||||
it('invokes and returns result from factory function for transient keys', () => {
|
||||
// arrange
|
||||
const mockValue = { anotherProperty: 'anotherValue' };
|
||||
const mockFactory = () => mockValue;
|
||||
const mockInject = () => mockFactory;
|
||||
// act
|
||||
const result = injectKey((keys) => keys.useCollectionState, mockInject);
|
||||
// assert
|
||||
expect(result).to.equal(mockValue);
|
||||
});
|
||||
describe('throws error when no value is provided for a key', () => {
|
||||
// arrange
|
||||
const testScenarios: ReadonlyArray<{
|
||||
readonly name: string,
|
||||
readonly act: (selector: InjectionKeySelector<unknown>) => void,
|
||||
}> = getAbsentObjectTestCases().flatMap((absentTest) => [
|
||||
{
|
||||
name: `singleton factory: ${absentTest.absentValue}`,
|
||||
act: (selector) => injectKey(selector, () => (() => absentTest.absentValue)),
|
||||
},
|
||||
{
|
||||
name: `transient: ${absentTest.absentValue}`,
|
||||
act: (selector) => injectKey(selector, () => absentTest.absentValue),
|
||||
},
|
||||
]);
|
||||
testScenarios.forEach((testCase) => {
|
||||
it(testCase.name, () => {
|
||||
// arrange
|
||||
const key = InjectionKeys.useRuntimeEnvironment;
|
||||
const expectedError = `Failed to inject value for key: ${key.key.description}`;
|
||||
const selector: InjectionKeySelector<typeof key> = () => key;
|
||||
// act
|
||||
const act = () => testCase.act(selector);
|
||||
// assert
|
||||
expect(act).to.throw(expectedError);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user