feat: add tests for header and footer

src/shared/lib/i18n/locales/en-US.ts

@@ -213,6 +213,7 @@ export default {
         title: 'Chats 💬',
         description: 'Communicate, share, discuss. Our convenience for you 😉'
       }
-    ]
+    ],
+    footer: 'cloud-based program for task management. The source code is available on'
   }
 };

src/shared/lib/i18n/locales/ru-RU.ts

@@ -218,10 +218,7 @@ export default {
         title: 'Чаты 💬',
         description: 'Общайтесь, делитесь, обсуждайте. Удобство для вас 😉'
       }
-      // {
-      //   title: 'План 📄',
-      //   description: 'Обновите ваш бесплатный план и воспользуйтесь всеми функциями.'
-      // }
-    ]
+    ],
+    footer: 'облачная программа для управления задачами. Исходный код доступен на'
   }
 };

src/shared/lib/i18n/locales/zh-CN.ts

@@ -210,6 +210,7 @@ export default {
         title: '聊天 💬',
         description: '交流、分享、讨论。我们为您提供便利 😉'
       }
-    ]
+    ],
+    footer: '基于云的任务管理程序。源代码可在'
   }
 };

src/widgets/layout/ui/footer/ui/FooterWelcome.vue → src/widgets/layout/ui/footer/FooterWelcome.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import { redirect } from '@/shared/lib/helpers';
+
+const { t } = useI18n();
 </script>
 
 <template>
   <footer :class="$style.footer">
     <div :class="$style.container">
       <p class="text-base">
-        <span :class="$style.brand">Jenda</span> - cloud-based program for task management. The source code is
-        available on
+        <span :class="$style.brand">Jenda</span> - {{ t('welcome.footer') }}
         <a :class="$style.link" @click.prevent="redirect('https://github.com/mnenie/jenda')"> Github </a>
       </p>
     </div>
@@ -44,7 +46,7 @@ import { redirect } from '@/shared/lib/helpers';
 }
 
 :global(html.dark) {
-  .footer{
+  .footer {
     border-color: rgba(var(--zinc-rgb-600), 0.5);
   }
   .container {

src/widgets/layout/ui/footer/__tests__/FooterWelcome.spec.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect, vi } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import FooterWelcome from '../FooterWelcome.vue';
+import i18n from '@/shared/lib/i18n';
+
+vi.mock('@vueuse/integrations/useCookies', () => {
+  return {
+    useCookies: () => ({
+      get: (key: string) => {
+        return key === 'i18n' ? 'en-US' : undefined;
+      }
+    })
+  };
+});
+
+describe('tests for FooterWelcome.vue', () => {
+  const wrapper = shallowMount(FooterWelcome, {
+    global: {
+      plugins: [i18n],
+
+      mocks: {
+        t: (key: string) => {
+          const translations: Record<string, string> = {
+            'welcome.footer': 'footer'
+          };
+          return translations[key];
+        }
+      }
+    }
+  });
+
+  // snapshot is covered needs for i18n I think ;)
+  it('should be render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

src/widgets/layout/ui/footer/__tests__/__snapshots__/FooterWelcome.spec.ts.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for FooterWelcome.vue > should be render correctly 1`] = `
+"<footer class="footer">
+  <div class="container">
+    <p class="text-base"><span class="brand">Jenda</span> - footer <a class="link"> Github </a></p>
+  </div>
+</footer>"
+`;

src/widgets/layout/ui/footer/index.ts

@@ -1 +1,3 @@
-export * from './ui';
+import FooterWelcome from './FooterWelcome.vue';
+
+export { FooterWelcome };

src/widgets/layout/ui/header/__tests__/HeaderWelcome.spec.ts

@@ -0,0 +1,86 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import HeaderWelcome from '../HeaderWelcome.vue';
+import i18n from '@/shared/lib/i18n';
+import { UiButton, UiSelect } from '@/shared/ui';
+import { Moon, Sun } from 'lucide-vue-next';
+import { nextTick } from 'vue';
+
+vi.mock('@vueuse/integrations/useCookies', () => {
+  return {
+    useCookies: () => ({
+      get: (key: string) => {
+        return key === 'i18n' ? 'en-US' : undefined;
+      }
+    })
+  };
+});
+
+const mockRouter = {
+  push: vi.fn(),
+  beforeEach: vi.fn()
+};
+
+describe('tests for HeaderWelcome.vue', () => {
+  const wrapper = mount(HeaderWelcome, {
+    global: {
+      plugins: [i18n],
+
+      mocks: {
+        t: (key: string) => {
+          const translations: Record<string, string> = {
+            'welcome.header.login': 'Log In',
+            'welcome.header.reg': 'Registration'
+          };
+          return translations[key];
+        },
+        tm: (key: string) => {
+          const translationsArr: Record<string, string[]> = {
+            'welcome.header.links': []
+          };
+          return translationsArr[key];
+        },
+        $router: mockRouter
+      }
+    }
+  });
+
+  it('should be render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should render subcomponents', () => {
+    expect(wrapper.findComponent(UiButton).exists()).toBe(true);
+    expect(wrapper.findComponent(UiSelect).exists()).toBe(true);
+  });
+
+  it('should handle mode + icon changing', async () => {
+    const darkModeButton = wrapper.find('.btn');
+    //@ts-expect-error instance
+    wrapper.vm.isDark = false;
+
+    expect(wrapper.findComponent(Moon).exists()).toBe(true);
+    expect(wrapper.findComponent(Sun).exists()).toBe(false);
+
+    darkModeButton.trigger('click');
+    //@ts-expect-error instance
+    wrapper.vm.isDark = true;
+    await nextTick();
+    expect(wrapper.findComponent(Moon).exists()).toBe(false);
+    expect(wrapper.findComponent(Sun).exists()).toBe(true);
+  });
+
+  it('should redirect correctly to login', async () => {
+    const loginButton = wrapper.find('.btns').findAllComponents(UiButton).at(0);
+
+    await loginButton.trigger('click');
+    expect(mockRouter.push).toHaveBeenCalledWith({ name: 'login' });
+  });
+
+  it('should redirect correctly to registration', async () => {
+    const registrationButton = wrapper.find('.btns').findAllComponents(UiButton).at(1);
+
+    await registrationButton.trigger('click');
+    expect(mockRouter.push).toHaveBeenCalledWith({ name: 'registration' });
+  });
+});

src/widgets/layout/ui/header/__tests__/__snapshots__/HeaderWelcome.spec.ts.snap

@@ -0,0 +1,30 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for HeaderWelcome.vue > should be render correctly 1`] = `
+"<header class="header_welcome">
+  <div class="left_container">
+    <div class="box">
+      <div class="inside">
+        <div class="name_container"><img src="/icons/kanban.png">
+          <h3 class="text-xl">Jenda</h3>
+        </div><button class="text-sm button ghost sm item">About</button><button class="text-sm button ghost sm item">Kanban</button><button class="text-sm button ghost sm item">Members</button><button class="text-sm button ghost sm item">Templates</button><button class="text-sm button ghost sm item">Collaborative</button><button class="text-sm button ghost sm item">Chats</button>
+      </div>
+    </div>
+    <div class="additional">
+      <div class="btn_variant"><button class="text-sm button ghost sm btn"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe-icon">
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
+            <path d="M2 12h20"></path>
+          </svg> EN</button>
+        <transition-stub name="dropdown" appear="false" persisted="false" css="true">
+          <!--v-if-->
+        </transition-stub>
+      </div>
+      <div class="separator"></div><button class="text-sm button ghost sm btn"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon-icon">
+          <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+        </svg></button>
+    </div>
+  </div>
+  <div class="btns"><button class="text-sm button ghost md" style="font-weight: 500;">Log In</button><button class="text-sm button default md">Registration</button></div>
+</header>"
+`;