merge pull request #41 from mnenie/dev

test: add tests for settings feature, refactoring

src/entities/board/ui/__tests__/BoardPreviewCard.spec.ts

@@ -1,20 +1,9 @@
 import { describe, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
+import '@/shared/lib/vitest-utils/cookiesI18n-mock';
 import i18n from '@/shared/lib/i18n';
 import BoardPreviewCard from '../BoardPreviewCard.vue';
 
-// TODO: think about putting this mock in /shared/vitest-utils maybe
-// so, the problem - is often used in many tests
-vi.mock('@vueuse/integrations/useCookies', () => {
-  return {
-    useCookies: () => ({
-      get: (key: string) => {
-        return key === 'i18n' ? 'en-US' : undefined;
-      }
-    })
-  };
-});
-
 const mockRouter = {
   push: vi.fn(),
   beforeEach: vi.fn()

src/entities/board/ui/__tests__/ColumnItem.spec.ts

@@ -1,17 +1,8 @@
-import { describe, expect, it, vi } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { mount } from '@vue/test-utils';
-import ColumnItem from '../ColumnItem.vue';
+import '@/shared/lib/vitest-utils/cookiesI18n-mock';
 import i18n from '@/shared/lib/i18n';
-
-vi.mock('@vueuse/integrations/useCookies', () => {
-  return {
-    useCookies: () => ({
-      get(key: string) {
-        return key === 'i18n' ? 'en-US' : undefined;
-      }
-    })
-  };
-});
+import ColumnItem from '../ColumnItem.vue';
 
 describe('tests for ColumnItem.vue', () => {
   const wrapper = mount(ColumnItem, {

src/entities/chart/ui/__tests__/ChartItem.spec.ts

@@ -1,18 +1,9 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect } from 'vitest';
 import { shallowMount } from '@vue/test-utils';
-import ChartItem from '../ChartItem.vue';
 import { defineComponent, h } from 'vue';
+import '@/shared/lib/vitest-utils/cookiesI18n-mock';
 import i18n from '@/shared/lib/i18n';
-
-vi.mock('@vueuse/integrations/useCookies', () => {
-  return {
-    useCookies: () => ({
-      get(key: string) {
-        return key === 'i18n' ? 'en-US' : undefined;
-      }
-    })
-  };
-});
+import ChartItem from '../ChartItem.vue';
 
 const TestChartComponent = defineComponent({
   render() {

src/entities/template/ui/__tests__/TemplateItem.spec.ts

@@ -1,19 +1,10 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect } from 'vitest';
 import { shallowMount } from '@vue/test-utils';
+import '@/shared/lib/vitest-utils/cookiesI18n-mock';
 import i18n from '@/shared/lib/i18n';
 import TemplateItem from '../TemplateItem.vue';
 import { _templates } from '../../config';
 
-vi.mock('@vueuse/integrations/useCookies', () => {
-  return {
-    useCookies: () => ({
-      get(key: string) {
-        return key === 'i18n' ? 'en-US' : undefined;
-      }
-    })
-  };
-});
-
 describe('tests for TemplateItem.vue ', () => {
   const wrapper = shallowMount(TemplateItem, {
     global: {

src/features/settings/lang-switcher/ui/__tests__/LanguageSwitcher.spec.ts

@@ -0,0 +1,55 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import { nextTick, ref, shallowReactive } from 'vue';
+import '@/shared/lib/vitest-utils/cookiesI18n-mock';
+import i18n from '@/shared/lib/i18n';
+import LanguageSwitcher from '../LanguageSwitcher.vue';
+import { useLanguage } from '@/shared/lib/composables';
+import { useI18n } from 'vue-i18n';
+
+vi.mock('vue-i18n', async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...(actual as unknown as object),
+    useI18n: () => ({
+      locale: ref('en-US')
+    })
+  };
+});
+
+describe('tests for LanguageSwitcher.vue', () => {
+  const wrapper = mount(LanguageSwitcher, {
+    global: {
+      plugins: [i18n]
+    }
+  });
+
+  it('should render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+  it('should render subcomponents', () => {
+    expect(wrapper.findComponent({ name: 'UiSelect' }).exists()).toBe(true);
+  });
+});
+
+describe('useLanguage composable tests', () => {
+  // mocks
+  const options = shallowReactive([
+    { name: 'English', value: 'en-US' },
+    { name: 'Русский', value: 'ru-RU' },
+    { name: '简体中文', value: 'zh-CN' }
+  ]);
+
+  it('should correctly sync language with `locale`', async () => {
+    const { locale } = useI18n();
+    const language = ref('');
+
+    useLanguage(options, language);
+
+    expect(language.value).toBe('English');
+
+    locale.value = 'ru-RU';
+    await nextTick();
+    expect(locale.value).toBe('ru-RU');
+  });
+});

src/features/settings/lang-switcher/ui/__tests__/__snapshots__/LanguageSwitcher.spec.ts.snap

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for LanguageSwitcher.vue > should render correctly 1`] = `
+"<div class="custom_select">
+  <div class="selected"><span class="text-sm">English</span><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon">
+      <path d="m7 15 5 5 5-5"></path>
+      <path d="m7 9 5-5 5 5"></path>
+    </svg></div>
+  <transition-stub name="dropdown" appear="false" persisted="false" css="true">
+    <!--v-if-->
+  </transition-stub>
+</div>"
+`;
+
+exports[`tests for LanguageSwitcher.vue > should render subcomponents 1`] = `
+"<div class="custom_select">
+  <div class="selected"><span class="text-sm">English</span><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon">
+      <path d="m7 15 5 5 5-5"></path>
+      <path d="m7 9 5-5 5 5"></path>
+    </svg></div>
+  <transition-stub name="dropdown" appear="false" persisted="false" css="true">
+    <!--v-if-->
+  </transition-stub>
+</div>"
+`;

src/features/settings/theme-switcher/lib/composables/useTheme.ts

@@ -1,9 +1,9 @@
 import { ref } from 'vue';
-import type { Ref } from 'vue';
+import type { ShallowRef } from 'vue';
 import { useColorMode } from '@vueuse/core';
 import type { ThemeBlock } from '../../model';
 
-export default function useTheme(themeBlocks: Ref<ThemeBlock[]>) {
+export default function useTheme(themeBlocks: ShallowRef<ThemeBlock[]>) {
   const { store } = useColorMode({
     initialValue: 'auto'
   });

src/features/settings/theme-switcher/model/types.ts

@@ -11,6 +11,6 @@ export const THEME: Record<string, Theme> = {
 export interface ThemeBlock {
   id: number;
   item: Component;
-  active: boolean;
+  active?: boolean;
   value: Theme;
 }

src/features/settings/theme-switcher/ui/__tests__/ThemeBlocks.spec.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import LightBlock from '../LightBlock.vue';
+import DarkBlock from '../DarkBlock.vue';
+import SystemBlock from '../SystemBlock.vue';
+
+describe('tests for theme blocks -> radio buttons', () => {
+  it('should render correctly LightBlock.vue', () => {
+    const wrapper = shallowMount(LightBlock);
+    expect(wrapper.html());
+  });
+  it('should render correctly DarkBlock.vue', () => {
+    const wrapper = shallowMount(DarkBlock);
+    expect(wrapper.html());
+  });
+  it('should render correctly SystemBlock.vue', () => {
+    const wrapper = shallowMount(SystemBlock);
+    expect(wrapper.html());
+  });
+});

src/features/settings/theme-switcher/ui/__tests__/ThemeSwitcher.spec.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ref, shallowRef } from 'vue';
+import '@/shared/lib/vitest-utils/cookiesI18n-mock';
+import useTheme from '../../lib/composables/useTheme';
+import ThemeSwitcher from '../ThemeSwitcher.vue';
+import i18n from '@/shared/lib/i18n';
+
+vi.mock('@vueuse/core', () => ({
+  useColorMode: vi.fn(() => ({
+    store: ref('auto')
+  }))
+}));
+
+describe('tests for ThemeSwitcher.vue', () => {
+  const wrapper = mount(ThemeSwitcher, {
+    global: {
+      plugins: [i18n],
+      mocks: {
+        t: (key: string) => {
+          const translations: Record<string, string> = {
+            'settings.theme.btn': 'change theme',
+            'settings.theme.variants.light': 'light',
+            'settings.theme.variants.dark': 'dark',
+            'settings.theme.variants.auto': 'system'
+          };
+          return translations[key];
+        }
+      }
+    }
+  });
+
+  it('should render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+  it('should render subcomponents', () => {
+    // TODO: change `findComponent` selector -> name in another tests
+    // So the problem with component import is solved ✅
+    expect(wrapper.findComponent({ name: 'UiRadioGroupContainer' }).exists()).toBe(true);
+    expect(wrapper.findComponent({ name: 'UiButton' }).exists()).toBe(true);
+  });
+
+  it('computed `themeAbout` is working correctly', () => {
+    //@ts-expect-error PublicInstance
+    const themeAbout = wrapper.vm.themeAbout;
+    expect(themeAbout('light')).toBe('Light');
+    expect(themeAbout('dark')).toBe('Dark');
+    expect(themeAbout('auto')).toBe('System');
+  });
+});
+
+describe('useTheme composable tests', () => {
+  it('should change active theme correctly', () => {
+    const themeBlocks = shallowRef([
+      { id: 0, active: true, value: 'light' },
+      { id: 1, active: false, value: 'dark' },
+      { id: 2, active: false, value: 'auto' }
+    ]);
+
+    const { changeActiveTheme } = useTheme(themeBlocks as unknown as any);
+
+    changeActiveTheme(1);
+    expect(themeBlocks.value[0].active).toBe(false);
+    expect(themeBlocks.value[1].active).toBe(true);
+    expect(themeBlocks.value[2].active).toBe(false);
+  });
+});

src/features/settings/theme-switcher/ui/__tests__/__snapshots__/ThemeSwitcher.spec.ts.snap

@@ -0,0 +1,62 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for ThemeSwitcher.vue > should render correctly 1`] = `
+"<form class="theme_form">
+  <div class="group">
+    <div class="block">
+      <div class="main_container">
+        <div class="main_content">
+          <div class="item">
+            <div class="item_line short"></div>
+            <div class="item_line long"></div>
+          </div>
+          <div class="item flex">
+            <div class="item_circle"></div>
+            <div class="item_line long"></div>
+          </div>
+          <div class="item flex">
+            <div class="item_circle"></div>
+            <div class="item_line long"></div>
+          </div>
+        </div>
+      </div><span class="text-xs">Light</span>
+    </div>
+    <div class="block">
+      <div class="main_container">
+        <div class="main_content">
+          <div class="item">
+            <div class="item_line short"></div>
+            <div class="item_line long"></div>
+          </div>
+          <div class="item flex">
+            <div class="item_circle"></div>
+            <div class="item_line long"></div>
+          </div>
+          <div class="item flex">
+            <div class="item_circle"></div>
+            <div class="item_line long"></div>
+          </div>
+        </div>
+      </div><span class="text-xs">Dark</span>
+    </div>
+    <div class="block">
+      <div class="main_container active">
+        <div class="main_content">
+          <div class="item">
+            <div class="item_line short"></div>
+            <div class="item_line long"></div>
+          </div>
+          <div class="item flex">
+            <div class="item_circle"></div>
+            <div class="item_line long"></div>
+          </div>
+          <div class="item flex">
+            <div class="item_circle"></div>
+            <div class="item_line long"></div>
+          </div>
+        </div>
+      </div><span class="text-xs">System</span>
+    </div>
+  </div><button class="text-sm button outline md" type="submit">change theme</button>
+</form>"
+`;

src/shared/lib/vitest-utils/cookiesI18n-mock.ts

@@ -0,0 +1,11 @@
+import { vi } from 'vitest';
+
+vi.mock('@vueuse/integrations/useCookies', () => {
+  return {
+    useCookies: () => ({
+      get(key: string) {
+        return key === 'i18n' ? 'en-US' : undefined;
+      }
+    })
+  };
+});

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

@@ -1,17 +1,8 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect } from 'vitest';
 import { shallowMount } from '@vue/test-utils';
-import FooterWelcome from '../AppFooter.vue';
+import '@/shared/lib/vitest-utils/cookiesI18n-mock';
 import i18n from '@/shared/lib/i18n';
-
-vi.mock('@vueuse/integrations/useCookies', () => {
-  return {
-    useCookies: () => ({
-      get: (key: string) => {
-        return key === 'i18n' ? 'en-US' : undefined;
-      }
-    })
-  };
-});
+import FooterWelcome from '../AppFooter.vue';
 
 describe('tests for FooterWelcome.vue', () => {
   const wrapper = shallowMount(FooterWelcome, {

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

@@ -1,20 +1,11 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
+import { nextTick } from 'vue';
+import '@/shared/lib/vitest-utils/cookiesI18n-mock';
 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(),