Increase testability through dependency injection

- Remove existing integration tests for hooks as they're redundant after
  this change.
- Document the pattern in relevant documentation.
- Introduce `useEnvironment` to increase testability.
- Update components to inject dependencies rather than importing hooks
  directly.

src/presentation/bootstrapping/DependencyProvider.ts

@@ -0,0 +1,28 @@
+import { InjectionKey, provide } from 'vue';
+import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
+import {
+  useCollectionStateKey, useApplicationKey, useEnvironmentKey,
+} from '@/presentation/injectionSymbols';
+import { IApplicationContext } from '@/application/Context/IApplicationContext';
+import { Environment } from '@/application/Environment/Environment';
+
+export function provideDependencies(context: IApplicationContext) {
+  registerSingleton(useApplicationKey, useApplication(context.app));
+  registerTransient(useCollectionStateKey, () => useCollectionState(context));
+  registerSingleton(useEnvironmentKey, Environment.CurrentEnvironment);
+}
+
+function registerSingleton<T>(
+  key: InjectionKey<T>,
+  value: T,
+) {
+  provide(key, value);
+}
+
+function registerTransient<T>(
+  key: InjectionKey<() => T>,
+  factory: () => T,
+) {
+  provide(key, factory);
+}

src/presentation/components/App.vue

@@ -17,6 +17,10 @@ import TheFooter from '@/presentation/components/TheFooter/TheFooter.vue';
 import TheCodeButtons from '@/presentation/components/Code/CodeButtons/TheCodeButtons.vue';
 import TheScriptArea from '@/presentation/components/Scripts/TheScriptArea.vue';
 import TheSearchBar from '@/presentation/components/TheSearchBar.vue';
+import { buildContext } from '@/application/Context/ApplicationContextFactory';
+import { provideDependencies } from '../bootstrapping/DependencyProvider';
+
+const singletonAppContext = await buildContext();
 
 export default defineComponent({
   components: {
@@ -26,8 +30,10 @@ export default defineComponent({
     TheSearchBar,
     TheFooter,
   },
+  setup() {
+    provideDependencies(singletonAppContext); // In Vue 3.0 we can move it to main.ts
+  },
 });
-
 </script>
 
 <style lang="scss">

src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue

@@ -57,10 +57,11 @@
 <script lang="ts">
 import {
   defineComponent, PropType, computed,
+  inject,
 } from 'vue';
+import { useApplicationKey } from '@/presentation/injectionSymbols';
 import { OperatingSystem } from '@/domain/OperatingSystem';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
-import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
 import CodeInstruction from './CodeInstruction.vue';
 import { IInstructionListData } from './InstructionListData';
 
@@ -76,7 +77,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { info } = useApplication();
+    const { info } = inject(useApplicationKey);
 
     const appName = computed<string>(() => info.name);
 

src/presentation/components/Code/CodeButtons/TheCodeButtons.vue

@@ -26,8 +26,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue';
-import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import {
+  defineComponent, ref, computed, inject,
+} from 'vue';
+import { useCollectionStateKey, useEnvironmentKey } from '@/presentation/injectionSymbols';
 import { SaveFileDialog, FileType } from '@/infrastructure/SaveFileDialog';
 import { Clipboard } from '@/infrastructure/Clipboard';
 import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
@@ -44,8 +46,6 @@ import IconButton from './IconButton.vue';
 import { IInstructionListData } from './Instructions/InstructionListData';
 import { getInstructions, hasInstructions } from './Instructions/InstructionListDataFactory';
 
-const isDesktopVersion = Environment.CurrentEnvironment.isDesktop;
-
 export default defineComponent({
   components: {
     IconButton,
@@ -55,10 +55,11 @@ export default defineComponent({
   setup() {
     const {
       currentState, currentContext, onStateChange, events,
-    } = useCollectionState();
+    } = inject(useCollectionStateKey)();
+    const { isDesktop } = inject(useEnvironmentKey);
 
     const areInstructionsVisible = ref(false);
-    const canRun = computed<boolean>(() => getCanRunState(currentState.value.os));
+    const canRun = computed<boolean>(() => getCanRunState(currentState.value.os, isDesktop));
     const fileName = computed<string>(() => buildFileName(currentState.value.collection.scripting));
     const hasCode = ref(false);
     const instructions = computed<IInstructionListData | undefined>(() => getDownloadInstructions(
@@ -98,7 +99,7 @@ export default defineComponent({
     }
 
     return {
-      isDesktopVersion,
+      isDesktopVersion: isDesktop,
       canRun,
       hasCode,
       instructions,
@@ -121,7 +122,7 @@ function getDownloadInstructions(
   return getInstructions(os, fileName);
 }
 
-function getCanRunState(selectedOs: OperatingSystem): boolean {
+function getCanRunState(selectedOs: OperatingSystem, isDesktopVersion: boolean): boolean {
   const isRunningOnSelectedOs = selectedOs === Environment.CurrentEnvironment.os;
   return isDesktopVersion && isRunningOnSelectedOs;
 }

src/presentation/components/Code/TheCodeArea.vue

@@ -10,8 +10,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onUnmounted, onMounted } from 'vue';
-import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import {
+  defineComponent, onUnmounted, onMounted, inject,
+} from 'vue';
+import { useCollectionStateKey } from '@/presentation/injectionSymbols';
 import { ICodeChangedEvent } from '@/application/Context/State/Code/Event/ICodeChangedEvent';
 import { IScript } from '@/domain/IScript';
 import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
@@ -35,7 +37,7 @@ export default defineComponent({
     NonCollapsing,
   },
   setup(props) {
-    const { onStateChange, currentState, events } = useCollectionState();
+    const { onStateChange, currentState, events } = inject(useCollectionStateKey)();
 
     const editorId = 'codeEditor';
     let editor: ace.Ace.Editor | undefined;

src/presentation/components/Scripts/Menu/Selector/TheSelector.vue

@@ -65,8 +65,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
-import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import { defineComponent, ref, inject } from 'vue';
+import { useCollectionStateKey } from '@/presentation/injectionSymbols';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import MenuOptionList from '../MenuOptionList.vue';
@@ -80,7 +80,7 @@ export default defineComponent({
     TooltipWrapper,
   },
   setup() {
-    const { modifyCurrentState, onStateChange, events } = useCollectionState();
+    const { modifyCurrentState, onStateChange, events } = inject(useCollectionStateKey)();
 
     const currentSelection = ref(SelectionType.None);
 

src/presentation/components/Scripts/Menu/TheOsChanger.vue

@@ -12,11 +12,10 @@
 
 <script lang="ts">
 import {
-  defineComponent, computed,
+  defineComponent, computed, inject,
 } from 'vue';
+import { useApplicationKey, useCollectionStateKey } from '@/presentation/injectionSymbols';
 import { OperatingSystem } from '@/domain/OperatingSystem';
-import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
-import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
 import MenuOptionList from './MenuOptionList.vue';
 import MenuOptionListItem from './MenuOptionListItem.vue';
 
@@ -31,8 +30,8 @@ export default defineComponent({
     MenuOptionListItem,
   },
   setup() {
-    const { modifyCurrentContext, currentState } = useCollectionState();
-    const { application } = useApplication();
+    const { modifyCurrentContext, currentState } = inject(useCollectionStateKey)();
+    const { application } = inject(useApplicationKey);
 
     const allOses = computed<ReadonlyArray<IOsViewModel>>(() => (
       application.getSupportedOsList() ?? [])

src/presentation/components/Scripts/Menu/TheScriptsMenu.vue

@@ -10,8 +10,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onUnmounted } from 'vue';
-import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import {
+  defineComponent, ref, onUnmounted, inject,
+} from 'vue';
+import { useCollectionStateKey } from '@/presentation/injectionSymbols';
 import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import TheOsChanger from './TheOsChanger.vue';
 import TheSelector from './Selector/TheSelector.vue';
@@ -24,7 +26,7 @@ export default defineComponent({
     TheViewChanger,
   },
   setup() {
-    const { onStateChange, events } = useCollectionState();
+    const { onStateChange, events } = inject(useCollectionStateKey)();
 
     const isSearching = ref(false);
 

src/presentation/components/Scripts/View/Cards/CardList.vue

@@ -35,8 +35,9 @@
 <script lang="ts">
 import {
   defineComponent, ref, onMounted, onUnmounted, computed,
+  inject,
 } from 'vue';
-import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import { useCollectionStateKey } from '@/presentation/injectionSymbols';
 import SizeObserver from '@/presentation/components/Shared/SizeObserver.vue';
 import { hasDirective } from './NonCollapsingDirective';
 import CardListItem from './CardListItem.vue';
@@ -47,7 +48,7 @@ export default defineComponent({
     SizeObserver,
   },
   setup() {
-    const { currentState, onStateChange } = useCollectionState();
+    const { currentState, onStateChange } = inject(useCollectionStateKey)();
 
     const width = ref<number>(0);
     const categoryIds = computed<ReadonlyArray<number>>(() => currentState

src/presentation/components/Scripts/View/Cards/CardListItem.vue

@@ -50,8 +50,9 @@
 <script lang="ts">
 import {
   defineComponent, ref, watch, computed,
+  inject,
 } from 'vue';
-import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import { useCollectionStateKey } from '@/presentation/injectionSymbols';
 import ScriptsTree from '@/presentation/components/Scripts/View/ScriptsTree/ScriptsTree.vue';
 import { sleep } from '@/infrastructure/Threading/AsyncSleep';
 
@@ -75,7 +76,7 @@ export default defineComponent({
     /* eslint-enable @typescript-eslint/no-unused-vars */
   },
   setup(props, { emit }) {
-    const { events, onStateChange, currentState } = useCollectionState();
+    const { events, onStateChange, currentState } = inject(useCollectionStateKey)();
 
     const isExpanded = computed({
       get: () => {

src/presentation/components/Scripts/View/ScriptsTree/ScriptsTree.vue

@@ -15,9 +15,9 @@
 
 <script lang="ts">
 import {
-  defineComponent, watch, ref,
+  defineComponent, watch, ref, inject,
 } from 'vue';
-import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import { useCollectionStateKey } from '@/presentation/injectionSymbols';
 import { IScript } from '@/domain/IScript';
 import { ICategory } from '@/domain/ICategory';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
@@ -44,7 +44,7 @@ export default defineComponent({
   setup(props) {
     const {
       modifyCurrentState, currentState, onStateChange, events,
-    } = useCollectionState();
+    } = inject(useCollectionStateKey)();
 
     const nodes = ref<ReadonlyArray<INodeContent>>([]);
     const selectedNodeIds = ref<ReadonlyArray<string>>([]);

src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue

@@ -9,10 +9,10 @@
 <script lang="ts">
 import {
   PropType, defineComponent, ref, watch,
-  computed,
+  computed, inject,
 } from 'vue';
-import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
 import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
+import { useCollectionStateKey } from '@/presentation/injectionSymbols';
 import { IReverter } from './Reverter/IReverter';
 import { INodeContent } from './INodeContent';
 import { getReverter } from './Reverter/ReverterFactory';
@@ -31,7 +31,7 @@ export default defineComponent({
   setup(props) {
     const {
       currentState, modifyCurrentState, onStateChange, events,
-    } = useCollectionState();
+    } = inject(useCollectionStateKey)();
 
     const isReverted = ref(false);
 

src/presentation/components/Scripts/View/TheScriptsView.vue

@@ -34,14 +34,14 @@
 <script lang="ts">
 import {
   defineComponent, PropType, ref, computed,
+  inject,
 } from 'vue';
-import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import { useApplicationKey, useCollectionStateKey } from '@/presentation/injectionSymbols';
 import ScriptsTree from '@/presentation/components/Scripts/View/ScriptsTree/ScriptsTree.vue';
 import CardList from '@/presentation/components/Scripts/View/Cards/CardList.vue';
 import { ViewType } from '@/presentation/components/Scripts/Menu/View/ViewType';
 import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
 import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
-import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
 
 /** Shows content of single category or many categories */
 export default defineComponent({
@@ -56,8 +56,8 @@ export default defineComponent({
     },
   },
   setup() {
-    const { modifyCurrentState, onStateChange, events } = useCollectionState();
-    const { info } = useApplication();
+    const { modifyCurrentState, onStateChange, events } = inject(useCollectionStateKey)();
+    const { info } = inject(useApplicationKey);
 
     const repositoryUrl = computed<string>(() => info.repositoryWebUrl);
     const searchQuery = ref<string>();

src/presentation/components/Shared/Hooks/README.md

@@ -0,0 +1,5 @@
+# Hooks
+
+This folder contains shared hooks used throughout the application.
+
+To use the hooks, prefer using Vue-native `provide` / `inject` pattern to keep the components independently testable without side-effect.

src/presentation/components/Shared/Hooks/UseApplication.ts

@@ -1,16 +1,9 @@
-import { ApplicationFactory } from '@/application/ApplicationFactory';
 import { IApplication } from '@/domain/IApplication';
 
-/* Application is always static */
-let cachedApplication: IApplication;
-
-// Running tests through Vue CLI throws 'Top-level-await is only supported in EcmaScript Modules'
-// This is a temporary workaround until migrating to Vite
-ApplicationFactory.Current.getApp().then((app) => {
-  cachedApplication = app;
-});
-
-export function useApplication(application: IApplication = cachedApplication) {
+export function useApplication(application: IApplication) {
+  if (!application) {
+    throw new Error('missing application');
+  }
   return {
     application,
     info: application.info,

src/presentation/components/Shared/Hooks/UseCollectionState.ts

@@ -1,18 +1,13 @@
 import { ref, computed, readonly } from 'vue';
 import { IApplicationContext, IReadOnlyApplicationContext } from '@/application/Context/IApplicationContext';
-import { buildContext } from '@/application/Context/ApplicationContextFactory';
 import { ICategoryCollectionState, IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { EventSubscriptionCollection } from '@/infrastructure/Events/EventSubscriptionCollection';
 
-let singletonContext: IApplicationContext;
+export function useCollectionState(context: IApplicationContext) {
+  if (!context) {
+    throw new Error('missing context');
+  }
 
-// Running tests through Vue CLI throws 'Top-level-await is only supported in EcmaScript Modules'
-// This is a temporary workaround until migrating to Vite
-buildContext().then((context) => {
-  singletonContext = context;
-});
-
-export function useCollectionState(context: IApplicationContext = singletonContext) {
   const events = new EventSubscriptionCollection();
   const ownEvents = new EventSubscriptionCollection();
 

src/presentation/components/Shared/Hooks/UseEnvironment.ts

@@ -0,0 +1,8 @@
+import { IEnvironment } from '@/application/Environment/IEnvironment';
+
+export function useEnvironment(environment: IEnvironment) {
+  if (!environment) {
+    throw new Error('missing environment');
+  }
+  return environment;
+}

src/presentation/components/TheFooter/DownloadUrlList.vue

@@ -18,9 +18,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { Environment } from '@/application/Environment/Environment';
+import { defineComponent, inject } from 'vue';
 import { OperatingSystem } from '@/domain/OperatingSystem';
+import { useEnvironmentKey } from '@/presentation/injectionSymbols';
 import DownloadUrlListItem from './DownloadUrlListItem.vue';
 
 const supportedOperativeSystems: readonly OperatingSystem[] = [
@@ -34,7 +34,7 @@ export default defineComponent({
     DownloadUrlListItem,
   },
   setup() {
-    const currentOs = Environment.CurrentEnvironment.os;
+    const { os: currentOs } = inject(useEnvironmentKey);
     const supportedDesktops = [
       ...supportedOperativeSystems,
     ].sort((os) => (os === currentOs ? 0 : 1));

src/presentation/components/TheFooter/DownloadUrlListItem.vue

@@ -12,12 +12,10 @@
 <script lang="ts">
 import {
   defineComponent, PropType, computed,
+  inject,
 } from 'vue';
-import { Environment } from '@/application/Environment/Environment';
+import { useApplicationKey, useEnvironmentKey } from '@/presentation/injectionSymbols';
 import { OperatingSystem } from '@/domain/OperatingSystem';
-import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
-
-const currentOs = Environment.CurrentEnvironment.os;
 
 export default defineComponent({
   props: {
@@ -27,7 +25,8 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { info } = useApplication();
+    const { info } = inject(useApplicationKey);
+    const { os: currentOs } = inject(useEnvironmentKey);
 
     const isCurrentOs = computed<boolean>(() => {
       return currentOs === props.operatingSystem;

src/presentation/components/TheFooter/PrivacyPolicy.vue

@@ -41,15 +41,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
-import { Environment } from '@/application/Environment/Environment';
-import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
-
-const { isDesktop } = Environment.CurrentEnvironment;
+import { defineComponent, computed, inject } from 'vue';
+import { useApplicationKey, useEnvironmentKey } from '@/presentation/injectionSymbols';
 
 export default defineComponent({
   setup() {
-    const { info } = useApplication();
+    const { info } = inject(useApplicationKey);
+    const { isDesktop } = inject(useEnvironmentKey);
 
     const repositoryUrl = computed<string>(() => info.repositoryUrl);
     const feedbackUrl = computed<string>(() => info.feedbackUrl);

src/presentation/components/TheFooter/TheFooter.vue

@@ -44,15 +44,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue';
-import { Environment } from '@/application/Environment/Environment';
+import {
+  defineComponent, ref, computed, inject,
+} from 'vue';
 import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
-import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
+import { useApplicationKey, useEnvironmentKey } from '@/presentation/injectionSymbols';
 import DownloadUrlList from './DownloadUrlList.vue';
 import PrivacyPolicy from './PrivacyPolicy.vue';
 
-const { isDesktop } = Environment.CurrentEnvironment;
-
 export default defineComponent({
   components: {
     ModalDialog,
@@ -60,7 +59,8 @@ export default defineComponent({
     DownloadUrlList,
   },
   setup() {
-    const { info } = useApplication();
+    const { info } = inject(useApplicationKey);
+    const { isDesktop } = inject(useEnvironmentKey);
 
     const isPrivacyDialogVisible = ref(false);
 

src/presentation/components/TheHeader.vue

@@ -6,12 +6,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
-import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
+import { defineComponent, computed, inject } from 'vue';
+import { useApplicationKey } from '@/presentation/injectionSymbols';
 
 export default defineComponent({
   setup() {
-    const { info } = useApplication();
+    const { info } = inject(useApplicationKey);
 
     const title = computed(() => info.name);
     const subtitle = computed(() => info.slogan);

src/presentation/components/TheSearchBar.vue

@@ -15,8 +15,9 @@
 <script lang="ts">
 import {
   defineComponent, ref, watch, computed,
+  inject,
 } from 'vue';
-import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import { useCollectionStateKey } from '@/presentation/injectionSymbols';
 import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
 import { IReadOnlyUserFilter } from '@/application/Context/State/Filter/IUserFilter';
 import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
@@ -29,7 +30,7 @@ export default defineComponent({
   setup() {
     const {
       modifyCurrentState, onStateChange, events, currentState,
-    } = useCollectionState();
+    } = inject(useCollectionStateKey)();
 
     const searchPlaceholder = computed<string>(() => {
       const { totalScripts } = currentState.value.collection;

src/presentation/injectionSymbols.ts

@@ -0,0 +1,16 @@
+import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
+import { useEnvironment } from '@/presentation/components/Shared/Hooks/UseEnvironment';
+import type { InjectionKey } from 'vue';
+
+export const useCollectionStateKey = defineTransientKey<ReturnType<typeof useCollectionState>>('useCollectionState');
+export const useApplicationKey = defineSingletonKey<ReturnType<typeof useApplication>>('useApplication');
+export const useEnvironmentKey = defineSingletonKey<ReturnType<typeof useEnvironment>>('useEnvironment');
+
+function defineSingletonKey<T>(key: string) {
+  return Symbol(key) as InjectionKey<T>;
+}
+
+function defineTransientKey<T>(key: string) {
+  return Symbol(key) as InjectionKey<() => T>;
+}

src/presentation/main.ts

@@ -3,8 +3,6 @@ import { buildContext } from '@/application/Context/ApplicationContextFactory';
 import App from './components/App.vue';
 import { ApplicationBootstrapper } from './bootstrapping/ApplicationBootstrapper';
 
-let vue: Vue;
-
 buildContext().then(() => {
   // hack workaround to solve running tests through
   // Vue CLI throws 'Top-level-await is only supported in EcmaScript Modules'
@@ -12,9 +10,7 @@ buildContext().then(() => {
   new ApplicationBootstrapper()
     .bootstrap(Vue);
 
-  vue = new Vue({
+  new Vue({
     render: (h) => h(App),
   }).$mount('#app');
 });
-
-export const getVue = () => vue; // exporting is hack until Vue 3 so vue-js-modal can be used