From b9aa4ecb0b248227b3c818a6a56a6a927249205a Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Mon, 26 Aug 2024 22:49:40 +0300
Subject: [PATCH 1/2] fix: keep alive and useLanguage composable

---
 src/app/App.vue                           | 2 +-
 src/shared/lib/composables/useLanguage.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index d439b271..fa1df6ff 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -17,7 +17,7 @@ const toasterTheme = computed<ToasterTheme>(() => {
 <template>
   <AppLayout>
     <RouterView v-slot="{ Component }">
-      <KeepAlive :include="['Login', 'Registration']">
+      <KeepAlive :include="['LoginPage', 'RegistrationPage']">
         <component :is="Component" />
       </KeepAlive>
     </RouterView>
diff --git a/src/shared/lib/composables/useLanguage.ts b/src/shared/lib/composables/useLanguage.ts
index c6e98e7a..f15abea9 100644
--- a/src/shared/lib/composables/useLanguage.ts
+++ b/src/shared/lib/composables/useLanguage.ts
@@ -1,4 +1,4 @@
-import { effectScope, onUnmounted, watch } from 'vue';
+import { effectScope, onScopeDispose, watch } from 'vue';
 import type { Ref } from 'vue';
 import type { Options } from '@/shared/ui/select/types';
 import { useCookies } from '@vueuse/integrations/useCookies';
@@ -34,7 +34,7 @@ export function useLanguage(options: Options[], language: Ref<string>) {
       }
     );
   });
-  onUnmounted(() => {
+  onScopeDispose(() => {
     scope.stop();
   });
 }

From 7175a8380230e199225531288a3a45efe5298e7f Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Tue, 27 Aug 2024 13:54:26 +0300
Subject: [PATCH 2/2] fix: reactive in header, resolves: #31, test: add tests
 for KanbanWrapper

---
 src/shared/lib/composables/useLanguage.ts     |  3 +--
 src/widgets/kanban/ui/KanbanWrapper.vue       |  2 +-
 .../kanban/ui/__tests__/KanbanWarpper.spec.ts | 24 +++++++++++++++++++
 .../__snapshots__/KanbanWarpper.spec.ts.snap  | 15 ++++++++++++
 .../config/{headerNavs.mock.ts => header.ts}  |  0
 src/widgets/layout/config/links.ts            |  4 ++--
 .../layout/ui/header/HeaderWelcome.vue        |  2 +-
 7 files changed, 44 insertions(+), 6 deletions(-)
 create mode 100644 src/widgets/kanban/ui/__tests__/KanbanWarpper.spec.ts
 create mode 100644 src/widgets/kanban/ui/__tests__/__snapshots__/KanbanWarpper.spec.ts.snap
 rename src/widgets/layout/config/{headerNavs.mock.ts => header.ts} (100%)

diff --git a/src/shared/lib/composables/useLanguage.ts b/src/shared/lib/composables/useLanguage.ts
index f15abea9..37928360 100644
--- a/src/shared/lib/composables/useLanguage.ts
+++ b/src/shared/lib/composables/useLanguage.ts
@@ -11,8 +11,7 @@ export function useLanguage(options: Options[], language: Ref<string>) {
   const { locale } = useI18n();
 
   scope.run(() => {
-    // TODO: think to way of computed property instead
-    // So anyway the problem in nested watchers is solved, issue #11
+    // resolves #31
     watch(
       () => locale.value,
       (newLocale) => {
diff --git a/src/widgets/kanban/ui/KanbanWrapper.vue b/src/widgets/kanban/ui/KanbanWrapper.vue
index 34acc68f..6ad4320c 100644
--- a/src/widgets/kanban/ui/KanbanWrapper.vue
+++ b/src/widgets/kanban/ui/KanbanWrapper.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { Column } from '@/entities/board';
 import { DragCards, AddColumn, DragColumns } from '@/features/kanban';
+import type { Column } from '@/entities/board';
 
 defineProps<{
   columns?: Column[];
diff --git a/src/widgets/kanban/ui/__tests__/KanbanWarpper.spec.ts b/src/widgets/kanban/ui/__tests__/KanbanWarpper.spec.ts
new file mode 100644
index 00000000..dc823225
--- /dev/null
+++ b/src/widgets/kanban/ui/__tests__/KanbanWarpper.spec.ts
@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import '@/shared/lib/vitest-utils/cookiesI18n-mock';
+import KanbanWrapper from '../KanbanWrapper.vue';
+import { AddColumn, DragColumns } from '@/features/kanban';
+import i18n from '@/shared/lib/i18n';
+
+describe('tests for KanbanWrapper.vue', () => {
+  const wrapper = mount(KanbanWrapper, {
+    global: { plugins: [i18n] },
+    props: {
+      columns: []
+    }
+  });
+
+  it('should be render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should render subcomponents', () => {
+    expect(wrapper.findComponent(DragColumns).exists()).toBe(true);
+    expect(wrapper.findComponent(AddColumn).exists()).toBe(true);
+  });
+});
diff --git a/src/widgets/kanban/ui/__tests__/__snapshots__/KanbanWarpper.spec.ts.snap b/src/widgets/kanban/ui/__tests__/__snapshots__/KanbanWarpper.spec.ts.snap
new file mode 100644
index 00000000..d336c855
--- /dev/null
+++ b/src/widgets/kanban/ui/__tests__/__snapshots__/KanbanWarpper.spec.ts.snap
@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for KanbanWrapper.vue > should be render correctly 1`] = `
+"<div class="kanban_wrapper">
+  <div>
+    <div class="columns" tag="ul" name="flip-list" type="transition"></div>
+  </div>
+  <div class="text-sm block"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon">
+      <path d="M5 12h14"></path>
+      <path d="M12 5v14"></path>
+    </svg> Add new column</div>
+  <!--teleport start-->
+  <!--teleport end-->
+</div>"
+`;
diff --git a/src/widgets/layout/config/headerNavs.mock.ts b/src/widgets/layout/config/header.ts
similarity index 100%
rename from src/widgets/layout/config/headerNavs.mock.ts
rename to src/widgets/layout/config/header.ts
diff --git a/src/widgets/layout/config/links.ts b/src/widgets/layout/config/links.ts
index 137cdcbf..08d58b95 100644
--- a/src/widgets/layout/config/links.ts
+++ b/src/widgets/layout/config/links.ts
@@ -1,9 +1,9 @@
-import { h, ref } from 'vue';
+import { h, markRaw } from 'vue';
 import type { Link } from '../types';
 import { RouteNames } from '@/shared/config/consts';
 import { SquareDashedKanban, Settings, Users, BringToFront } from 'lucide-vue-next';
 
-export const links = ref<Link[]>([
+export const links = markRaw<Link[]>([
   { id: 0, title: 'boards', pathName: RouteNames.boards, icon: h(SquareDashedKanban) },
   { id: 1, title: 'templates', pathName: RouteNames.templates, icon: h(BringToFront) },
   { id: 2, title: 'members', pathName: RouteNames.members, icon: h(Users) },
diff --git a/src/widgets/layout/ui/header/HeaderWelcome.vue b/src/widgets/layout/ui/header/HeaderWelcome.vue
index 7503e64b..0ffc67a0 100644
--- a/src/widgets/layout/ui/header/HeaderWelcome.vue
+++ b/src/widgets/layout/ui/header/HeaderWelcome.vue
@@ -8,7 +8,7 @@ import { redirect } from '@/shared/lib/helpers';
 import { RouteNames } from '@/shared/config/consts';
 import { Globe, Moon, Sun } from 'lucide-vue-next';
 import type { Options } from '@/shared/ui/select/types';
-import { headerLinks } from '../../config/headerNavs.mock';
+import { headerLinks } from '../../config/header';
 import type { HeaderNavLink } from '../../types';
 
 const isDark = useDark();