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/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>();