From ae75059cc14db41f55dd2056f528442c7d319dd2 Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Tue, 15 Aug 2023 18:11:30 +0200
Subject: [PATCH] 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.
---
 docs/presentation.md                          | 14 ++++
 docs/tests.md                                 |  1 +
 .../bootstrapping/DependencyProvider.ts       | 28 +++++++
 src/presentation/components/App.vue           |  8 +-
 .../Instructions/InstructionList.vue          |  5 +-
 .../Code/CodeButtons/TheCodeButtons.vue       | 17 ++--
 .../components/Code/TheCodeArea.vue           |  8 +-
 .../Scripts/Menu/Selector/TheSelector.vue     |  6 +-
 .../components/Scripts/Menu/TheOsChanger.vue  |  9 +-
 .../Scripts/Menu/TheScriptsMenu.vue           |  8 +-
 .../Scripts/View/Cards/CardList.vue           |  5 +-
 .../Scripts/View/Cards/CardListItem.vue       |  5 +-
 .../Scripts/View/ScriptsTree/ScriptsTree.vue  |  6 +-
 .../SelectableTree/Node/RevertToggle.vue      |  6 +-
 .../Scripts/View/TheScriptsView.vue           |  8 +-
 .../components/Shared/Hooks/README.md         |  5 ++
 .../components/Shared/Hooks/UseApplication.ts | 15 +---
 .../Shared/Hooks/UseCollectionState.ts        | 13 +--
 .../components/Shared/Hooks/UseEnvironment.ts |  8 ++
 .../components/TheFooter/DownloadUrlList.vue  |  6 +-
 .../TheFooter/DownloadUrlListItem.vue         |  9 +-
 .../components/TheFooter/PrivacyPolicy.vue    | 10 +--
 .../components/TheFooter/TheFooter.vue        | 12 +--
 src/presentation/components/TheHeader.vue     |  6 +-
 src/presentation/components/TheSearchBar.vue  |  5 +-
 src/presentation/injectionSymbols.ts          | 16 ++++
 src/presentation/main.ts                      |  6 +-
 .../Shared/Hooks/UseApplication.spec.ts       | 29 -------
 .../Shared/Hooks/UseCollectionState.spec.ts   | 83 -------------------
 .../Shared/Hooks/UseApplication.spec.ts       | 13 +++
 .../Shared/Hooks/UseCollectionState.spec.ts   | 12 +++
 .../Shared/Hooks/UseEnvironment.spec.ts       | 28 +++++++
 32 files changed, 209 insertions(+), 201 deletions(-)
 create mode 100644 src/presentation/bootstrapping/DependencyProvider.ts
 create mode 100644 src/presentation/components/Shared/Hooks/README.md
 create mode 100644 src/presentation/components/Shared/Hooks/UseEnvironment.ts
 create mode 100644 src/presentation/injectionSymbols.ts
 delete mode 100644 tests/integration/presentation/components/Shared/Hooks/UseApplication.spec.ts
 delete mode 100644 tests/integration/presentation/components/Shared/Hooks/UseCollectionState.spec.ts
 create mode 100644 tests/unit/presentation/components/Shared/Hooks/UseEnvironment.spec.ts

diff --git a/docs/presentation.md b/docs/presentation.md
index 49595164..194712fe 100644
--- a/docs/presentation.md
+++ b/docs/presentation.md
@@ -61,6 +61,20 @@ Stateful components can mutate and/or react to state changes (e.g., user selecti
 
 📖 Refer to [architecture.md | Application State](./architecture.md#application-state) for an overview of event handling and [application.md | Application State](./presentation.md#application-state) for an in-depth understanding of state management in the application layer.
 
+## Dependency injections
+
+The presentation layer uses Vue's native dependency injection system to increase testability and decouple components.
+
+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)`.
+
 ## Shared UI components
 
 Shared UI components promote consistency and simplifies the creation of the front-end.
diff --git a/docs/tests.md b/docs/tests.md
index f93cb77f..b8f25245 100644
--- a/docs/tests.md
+++ b/docs/tests.md
@@ -18,6 +18,7 @@ Common aspects for all tests:
 - Unit tests test each component in isolation.
 - All unit tests goes under [`./tests/unit`](./../tests/unit).
 - They rely on [stubs](./../tests/unit/shared/Stubs) for isolation.
+- Unit tests include also Vue component tests using `@vue/test-utils`.
 
 ### Unit tests structure
 
diff --git a/src/presentation/bootstrapping/DependencyProvider.ts b/src/presentation/bootstrapping/DependencyProvider.ts
new file mode 100644
index 00000000..199de1aa
--- /dev/null
+++ b/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);
+}
diff --git a/src/presentation/components/App.vue b/src/presentation/components/App.vue
index b2c7b043..b8a87bcd 100644
--- a/src/presentation/components/App.vue
+++ b/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">
diff --git a/src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue b/src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue
index 45f673eb..329fd6b7 100644
--- a/src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue
+++ b/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);
 
diff --git a/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue b/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue
index 1b8e22e1..ee632b57 100644
--- a/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue
+++ b/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;
 }
diff --git a/src/presentation/components/Code/TheCodeArea.vue b/src/presentation/components/Code/TheCodeArea.vue
index 1d66571f..007c8cab 100644
--- a/src/presentation/components/Code/TheCodeArea.vue
+++ b/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;
diff --git a/src/presentation/components/Scripts/Menu/Selector/TheSelector.vue b/src/presentation/components/Scripts/Menu/Selector/TheSelector.vue
index 34819947..f1cd6331 100644
--- a/src/presentation/components/Scripts/Menu/Selector/TheSelector.vue
+++ b/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);
 
diff --git a/src/presentation/components/Scripts/Menu/TheOsChanger.vue b/src/presentation/components/Scripts/Menu/TheOsChanger.vue
index f01c296d..6b0ecd64 100644
--- a/src/presentation/components/Scripts/Menu/TheOsChanger.vue
+++ b/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() ?? [])
diff --git a/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue b/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
index 393b78b1..844fac16 100644
--- a/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
+++ b/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);
 
diff --git a/src/presentation/components/Scripts/View/Cards/CardList.vue b/src/presentation/components/Scripts/View/Cards/CardList.vue
index fef02454..0ca02566 100644
--- a/src/presentation/components/Scripts/View/Cards/CardList.vue
+++ b/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
diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
index 67dbf067..0b394c81 100644
--- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue
+++ b/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: () => {
diff --git a/src/presentation/components/Scripts/View/ScriptsTree/ScriptsTree.vue b/src/presentation/components/Scripts/View/ScriptsTree/ScriptsTree.vue
index b1a226b2..011ad4e5 100644
--- a/src/presentation/components/Scripts/View/ScriptsTree/ScriptsTree.vue
+++ b/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>>([]);
diff --git a/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue
index 8a4c5fd1..5736c5bc 100644
--- a/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue
+++ b/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);
 
diff --git a/src/presentation/components/Scripts/View/TheScriptsView.vue b/src/presentation/components/Scripts/View/TheScriptsView.vue
index 5439e4e1..497e4afe 100644
--- a/src/presentation/components/Scripts/View/TheScriptsView.vue
+++ b/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>();
diff --git a/src/presentation/components/Shared/Hooks/README.md b/src/presentation/components/Shared/Hooks/README.md
new file mode 100644
index 00000000..c4c470c1
--- /dev/null
+++ b/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.
diff --git a/src/presentation/components/Shared/Hooks/UseApplication.ts b/src/presentation/components/Shared/Hooks/UseApplication.ts
index 16d74791..6569f3b1 100644
--- a/src/presentation/components/Shared/Hooks/UseApplication.ts
+++ b/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,
diff --git a/src/presentation/components/Shared/Hooks/UseCollectionState.ts b/src/presentation/components/Shared/Hooks/UseCollectionState.ts
index 4f768b83..576c0228 100644
--- a/src/presentation/components/Shared/Hooks/UseCollectionState.ts
+++ b/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();
 
diff --git a/src/presentation/components/Shared/Hooks/UseEnvironment.ts b/src/presentation/components/Shared/Hooks/UseEnvironment.ts
new file mode 100644
index 00000000..5ab3a03c
--- /dev/null
+++ b/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;
+}
diff --git a/src/presentation/components/TheFooter/DownloadUrlList.vue b/src/presentation/components/TheFooter/DownloadUrlList.vue
index 6fbcc08f..4d605576 100644
--- a/src/presentation/components/TheFooter/DownloadUrlList.vue
+++ b/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));
diff --git a/src/presentation/components/TheFooter/DownloadUrlListItem.vue b/src/presentation/components/TheFooter/DownloadUrlListItem.vue
index 6db3d0f0..1356655f 100644
--- a/src/presentation/components/TheFooter/DownloadUrlListItem.vue
+++ b/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;
diff --git a/src/presentation/components/TheFooter/PrivacyPolicy.vue b/src/presentation/components/TheFooter/PrivacyPolicy.vue
index 3a6ec541..936cccbd 100644
--- a/src/presentation/components/TheFooter/PrivacyPolicy.vue
+++ b/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);
diff --git a/src/presentation/components/TheFooter/TheFooter.vue b/src/presentation/components/TheFooter/TheFooter.vue
index d0f1d4c7..835ac55c 100644
--- a/src/presentation/components/TheFooter/TheFooter.vue
+++ b/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);
 
diff --git a/src/presentation/components/TheHeader.vue b/src/presentation/components/TheHeader.vue
index a109ec9b..c53f6c45 100644
--- a/src/presentation/components/TheHeader.vue
+++ b/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);
diff --git a/src/presentation/components/TheSearchBar.vue b/src/presentation/components/TheSearchBar.vue
index 04461923..3bef2ae9 100644
--- a/src/presentation/components/TheSearchBar.vue
+++ b/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;
diff --git a/src/presentation/injectionSymbols.ts b/src/presentation/injectionSymbols.ts
new file mode 100644
index 00000000..9075c373
--- /dev/null
+++ b/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>;
+}
diff --git a/src/presentation/main.ts b/src/presentation/main.ts
index 72a52631..f8a081bf 100644
--- a/src/presentation/main.ts
+++ b/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
diff --git a/tests/integration/presentation/components/Shared/Hooks/UseApplication.spec.ts b/tests/integration/presentation/components/Shared/Hooks/UseApplication.spec.ts
deleted file mode 100644
index 35b1c05f..00000000
--- a/tests/integration/presentation/components/Shared/Hooks/UseApplication.spec.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import 'mocha';
-import { expect } from 'chai';
-import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
-import { ApplicationFactory } from '@/application/ApplicationFactory';
-
-describe('UseApplication', () => {
-  it('should return the actual application from factory', async () => {
-    // arrange
-    const expected = await ApplicationFactory.Current.getApp();
-
-    // act
-    const { application } = useApplication(expected);
-
-    // assert
-    expect(application).to.equal(expected);
-  });
-
-  it('should return the actual info from the application', async () => {
-    // arrange
-    const app = await ApplicationFactory.Current.getApp();
-    const expected = app.info;
-
-    // act
-    const { info } = useApplication();
-
-    // assert
-    expect(info).to.equal(expected);
-  });
-});
diff --git a/tests/integration/presentation/components/Shared/Hooks/UseCollectionState.spec.ts b/tests/integration/presentation/components/Shared/Hooks/UseCollectionState.spec.ts
deleted file mode 100644
index 1aad9320..00000000
--- a/tests/integration/presentation/components/Shared/Hooks/UseCollectionState.spec.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import 'mocha';
-import { expect } from 'chai';
-import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
-import { IReadOnlyApplicationContext } from '@/application/Context/IApplicationContext';
-
-describe('UseCollectionState', () => {
-  describe('currentContext', () => {
-    it('multiple calls get the same instance', () => {
-      // act
-      const firstContext = useCollectionState().currentContext;
-      const secondContext = useCollectionState().currentContext;
-      // assert
-      expect(firstContext).to.equal(secondContext);
-    });
-  });
-
-  describe('currentState', () => {
-    it('returns current collection state', () => {
-      // arrange
-      const { currentContext } = useCollectionState();
-      const expectedState = currentContext.state;
-
-      // act
-      const { currentState } = useCollectionState();
-      const actualState = currentState.value;
-
-      // assert
-      expect(expectedState).to.equal(actualState);
-    });
-    it('returns changed collection state', () => {
-      // arrange
-      const { currentContext, currentState, modifyCurrentContext } = useCollectionState();
-      const newOs = pickNonCurrentOs(currentContext);
-
-      // act
-      modifyCurrentContext((context) => {
-        context.changeContext(newOs);
-      });
-      const expectedState = currentContext.state;
-
-      // assert
-      expect(currentState.value).to.equal(expectedState);
-    });
-  });
-
-  describe('modifyCurrentContext', () => {
-    it('modifies the current context', () => {
-      // arrange
-      const { currentContext, currentState, modifyCurrentContext } = useCollectionState();
-      const expectedOs = pickNonCurrentOs(currentContext);
-
-      // act
-      modifyCurrentContext((context) => {
-        context.changeContext(expectedOs);
-      });
-
-      // assert
-      expect(currentContext.state.os).to.equal(expectedOs);
-      expect(currentState.value.os).to.equal(expectedOs);
-    });
-  });
-
-  describe('modifyCurrentState', () => {
-    it('modifies the current state', () => {
-      // arrange
-      const { currentState, modifyCurrentState } = useCollectionState();
-      const expectedFilter = 'expected-filter';
-
-      // act
-      modifyCurrentState((state) => {
-        state.filter.setFilter(expectedFilter);
-      });
-
-      // assert
-      const actualFilter = currentState.value.filter.currentFilter.query;
-      expect(actualFilter).to.equal(expectedFilter);
-    });
-  });
-});
-
-function pickNonCurrentOs(context: IReadOnlyApplicationContext) {
-  return context.app.getSupportedOsList().find((os) => os !== context.state.os);
-}
diff --git a/tests/unit/presentation/components/Shared/Hooks/UseApplication.spec.ts b/tests/unit/presentation/components/Shared/Hooks/UseApplication.spec.ts
index 74b19a5a..b65ddaba 100644
--- a/tests/unit/presentation/components/Shared/Hooks/UseApplication.spec.ts
+++ b/tests/unit/presentation/components/Shared/Hooks/UseApplication.spec.ts
@@ -3,8 +3,21 @@ import { expect } from 'chai';
 import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
 import { ApplicationStub } from '@tests/unit/shared/Stubs/ApplicationStub';
 import { ProjectInformationStub } from '@tests/unit/shared/Stubs/ProjectInformationStub';
+import { itEachAbsentObjectValue } from '@tests/unit/shared/TestCases/AbsentTests';
 
 describe('UseApplication', () => {
+  describe('application is absent', () => {
+    itEachAbsentObjectValue((absentValue) => {
+      // arrange
+      const expectedError = 'missing application';
+      const applicationValue = absentValue;
+      // act
+      const act = () => useApplication(applicationValue);
+      // assert
+      expect(act).to.throw(expectedError);
+    });
+  });
+
   it('should return expected info', () => {
     // arrange
     const expectedInfo = new ProjectInformationStub()
diff --git a/tests/unit/presentation/components/Shared/Hooks/UseCollectionState.spec.ts b/tests/unit/presentation/components/Shared/Hooks/UseCollectionState.spec.ts
index 9486761a..fc9aeb43 100644
--- a/tests/unit/presentation/components/Shared/Hooks/UseCollectionState.spec.ts
+++ b/tests/unit/presentation/components/Shared/Hooks/UseCollectionState.spec.ts
@@ -9,6 +9,18 @@ import { OperatingSystem } from '@/domain/OperatingSystem';
 import { itEachAbsentObjectValue } from '@tests/unit/shared/TestCases/AbsentTests';
 
 describe('UseCollectionState', () => {
+  describe('context is absent', () => {
+    itEachAbsentObjectValue((absentValue) => {
+      // arrange
+      const expectedError = 'missing context';
+      const contextValue = absentValue;
+      // act
+      const act = () => useCollectionState(contextValue);
+      // assert
+      expect(act).to.throw(expectedError);
+    });
+  });
+
   describe('currentContext', () => {
     it('returns current context', () => {
       // arrange
diff --git a/tests/unit/presentation/components/Shared/Hooks/UseEnvironment.spec.ts b/tests/unit/presentation/components/Shared/Hooks/UseEnvironment.spec.ts
new file mode 100644
index 00000000..6ed2c606
--- /dev/null
+++ b/tests/unit/presentation/components/Shared/Hooks/UseEnvironment.spec.ts
@@ -0,0 +1,28 @@
+import 'mocha';
+import { expect } from 'chai';
+import { useEnvironment } from '@/presentation/components/Shared/Hooks/UseEnvironment';
+import { itEachAbsentObjectValue } from '@tests/unit/shared/TestCases/AbsentTests';
+import { EnvironmentStub } from '@tests/unit/shared/Stubs/EnvironmentStub';
+
+describe('UseEnvironment', () => {
+  describe('environment is absent', () => {
+    itEachAbsentObjectValue((absentValue) => {
+      // arrange
+      const expectedError = 'missing environment';
+      const environmentValue = absentValue;
+      // act
+      const act = () => useEnvironment(environmentValue);
+      // assert
+      expect(act).to.throw(expectedError);
+    });
+  });
+
+  it('returns expected environment', () => {
+    // arrange
+    const expectedEnvironment = new EnvironmentStub();
+    // act
+    const actualEnvironment = useEnvironment(expectedEnvironment);
+    // assert
+    expect(actualEnvironment).to.equal(expectedEnvironment);
+  });
+});