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