From ec55dbda14ecd0096fd022d3c00ad9125ce35172 Mon Sep 17 00:00:00 2001 From: mnenie <121057011+mneniee@users.noreply.github.com> Date: Sun, 25 Aug 2024 00:04:07 +0300 Subject: [PATCH] test: add tests for [ThemeSwitcher](#src/features/settings/theme-switcher/ui/__tests__/ThemeSwitcher.spec.ts), fix: types --- .../lib/composables/useTheme.ts | 4 +- .../settings/theme-switcher/model/types.ts | 2 +- .../ui/__tests__/ThemeBlocks.spec.ts | 20 +++++ .../ui/__tests__/ThemeSwitcher.spec.ts | 76 +++++++++++++++++++ .../__snapshots__/ThemeSwitcher.spec.ts.snap | 62 +++++++++++++++ 5 files changed, 161 insertions(+), 3 deletions(-) create mode 100644 src/features/settings/theme-switcher/ui/__tests__/ThemeBlocks.spec.ts create mode 100644 src/features/settings/theme-switcher/ui/__tests__/ThemeSwitcher.spec.ts create mode 100644 src/features/settings/theme-switcher/ui/__tests__/__snapshots__/ThemeSwitcher.spec.ts.snap diff --git a/src/features/settings/theme-switcher/lib/composables/useTheme.ts b/src/features/settings/theme-switcher/lib/composables/useTheme.ts index f2d0a0c..2784fdd 100644 --- a/src/features/settings/theme-switcher/lib/composables/useTheme.ts +++ b/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) { +export default function useTheme(themeBlocks: ShallowRef) { const { store } = useColorMode({ initialValue: 'auto' }); diff --git a/src/features/settings/theme-switcher/model/types.ts b/src/features/settings/theme-switcher/model/types.ts index 3e7b77e..03be7a3 100644 --- a/src/features/settings/theme-switcher/model/types.ts +++ b/src/features/settings/theme-switcher/model/types.ts @@ -11,6 +11,6 @@ export const THEME: Record = { export interface ThemeBlock { id: number; item: Component; - active: boolean; + active?: boolean; value: Theme; } diff --git a/src/features/settings/theme-switcher/ui/__tests__/ThemeBlocks.spec.ts b/src/features/settings/theme-switcher/ui/__tests__/ThemeBlocks.spec.ts new file mode 100644 index 0000000..e194b0f --- /dev/null +++ b/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()); + }); +}); diff --git a/src/features/settings/theme-switcher/ui/__tests__/ThemeSwitcher.spec.ts b/src/features/settings/theme-switcher/ui/__tests__/ThemeSwitcher.spec.ts new file mode 100644 index 0000000..d9f4581 --- /dev/null +++ b/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 = { + '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); + }); +}); diff --git a/src/features/settings/theme-switcher/ui/__tests__/__snapshots__/ThemeSwitcher.spec.ts.snap b/src/features/settings/theme-switcher/ui/__tests__/__snapshots__/ThemeSwitcher.spec.ts.snap new file mode 100644 index 0000000..9300bec --- /dev/null +++ b/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`] = ` +"
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Light +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Dark +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
System +
+
+
" +`;