test: add tests for [ThemeSwitcher](#src/features/settings/theme-swit…

…cher/ui/__tests__/ThemeSwitcher.spec.ts), fix: types

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,76 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ref, shallowRef } from 'vue';
+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')
+ }))
+}));
+
+vi.mock('@vueuse/integrations/useCookies', () => {
+ return {
+ useCookies: () => ({
+ get(key: string) {
+ return key === 'i18n' ? 'en-US' : undefined;
+ }
+ })
+ };
+});
+
+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>"
+`;