mnenie / jenda

Jenda is a cloud-based app for efficient collaborative and individual project and task management
https://jenda.vercel.app
MIT License
6 stars 1 forks source link

change `findComponent` selector -> name in another tests #40

Closed github-actions[bot] closed 3 months ago

github-actions[bot] commented 3 months ago

So the problem with component import is solved ✅

https://github.com/mnenie/jenda/blob/ec55dbda14ecd0096fd022d3c00ad9125ce35172/src/features/settings/theme-switcher/ui/__tests__/ThemeSwitcher.spec.ts#L46


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);
  });
});
github-actions[bot] commented 3 months ago

Closed in fee405f0383399179f04c6167d91f198a8b3e41c