fix: keep alive and composable, test: add some tests

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>

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';
@@ -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) => {
@@ -34,7 +33,7 @@ export function useLanguage(options: Options[], language: Ref<string>) {
       }
     );
   });
-  onUnmounted(() => {
+  onScopeDispose(() => {
     scope.stop();
   });
 }

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[];

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);
+  });
+});

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>"
+`;

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) },

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