feat: add test for entities, fix: types in forms

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

@@ -0,0 +1,62 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+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()
+};
+
+describe('tests for BoardPreviewCard.vue', () => {
+  const wrapper = mount(BoardPreviewCard, {
+    global: {
+      plugins: [i18n],
+
+      mocks: {
+        t: (key: string) => {
+          const translations: Record<string, string> = {
+            'boards.card.date_updated': 'Date Updated (test)'
+          };
+          return translations[key];
+        },
+        $router: mockRouter
+      }
+    },
+    props: {
+      board: {
+        _id: '0',
+        title: 'test title',
+        description: 'test description',
+        users: []
+      }
+    }
+  });
+
+  it('should render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should correctly works with i18n', () => {
+    const date = wrapper.find('.bottom_part');
+    expect(date.text()).toContain('Date Updated (test)');
+  });
+
+  it('should redirect to "/board/1" ', async () => {
+    await wrapper.find('.active_board').trigger('click');
+    expect(mockRouter.push).toHaveBeenCalledTimes(1);
+    expect(mockRouter.push).toHaveBeenCalledWith('/board/1');
+  });
+});

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

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import CardItem from '../CardItem.vue';
+
+describe('tests for CardItem.vue', () => {
+  const wrapper = mount(CardItem, {
+    props: {
+      card: {
+        _id: '0',
+        title: 'Test Card',
+        priority: 'low',
+        users: [],
+        chat: true,
+        chatCount: 2,
+        tags: [{ _id: '0', name: 'test' }]
+      }
+    }
+  });
+
+  it('should render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should has correct number of tags', () => {
+    const tags = wrapper.findAll('.tags > .badge');
+    expect(tags.length).toBe(1);
+    expect(tags[0].text()).toBe('test');
+  });
+
+  it('should has correct chat counts', () => {
+    const chat = wrapper.find('.messages > span');
+    expect(chat.text()).toBe('2');
+  });
+});

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

@@ -0,0 +1,50 @@
+import { describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ColumnItem from '../ColumnItem.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 ColumnItem.vue', () => {
+  const wrapper = mount(ColumnItem, {
+    global: {
+      plugins: [i18n],
+      mocks: {
+        t: (key: string) => {
+          const translations: Record<string, string> = {
+            'kanban.cards.add': 'Add card (test)'
+          };
+          return translations[key];
+        }
+      }
+    },
+    props: {
+      column: {
+        _id: '0',
+        title: 'test',
+        cards: []
+      }
+    },
+    slots: {
+      default: 'test name of column',
+      content: 'test content'
+    }
+  });
+
+  it('should render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should correctly works with i18n', () => {
+    const date = wrapper.find('.add');
+    expect(date.text()).toContain('Add card (test)');
+  });
+});

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

@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for BoardPreviewCard > should render correctly 1`] = `
+"<div class="active_board">
+  <div class="text">
+    <p class="text-base" style="font-weight: 500;">test title</p><span class="text-xs">test description</span>
+  </div>
+  <div class="bottom_part"><span class="text-xs">Date Updated (test): May 2024</span>
+    <div class="users"></div>
+  </div>
+</div>"
+`;
+
+exports[`tests for BoardPreviewCard.vue > should render correctly 1`] = `
+"<div class="active_board">
+  <div class="text">
+    <p class="text-base" style="font-weight: 500;">test title</p><span class="text-xs">test description</span>
+  </div>
+  <div class="bottom_part"><span class="text-xs">Date Updated (test): May 2024</span>
+    <div class="users"></div>
+  </div>
+</div>"
+`;

src/entities/board/ui/__tests__/__snapshots__/CardItem.spec.ts.snap

@@ -0,0 +1,49 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for CardItem > should render correctly 1`] = `
+"<div class="text-sm card card">
+  <div class="top">
+    <div class="name"><span>Test Card</span></div>
+    <div class="tags">
+      <div class="text-xs badge secondary">test</div>
+    </div>
+  </div>
+  <div class="bottom">
+    <div class="left_container"><span> #0</span>
+      <div class="messages"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-messages-square-icon">
+          <path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z"></path>
+          <path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"></path>
+        </svg><span>2</span></div>
+    </div>
+    <div class="right_container">
+      <div class="user_container"></div>
+    </div>
+  </div>
+  <div class="indicator"></div>
+  <div class="user_container"></div>
+</div>"
+`;
+
+exports[`tests for CardItem.vue > should render correctly 1`] = `
+"<div class="text-sm card card">
+  <div class="top">
+    <div class="name"><span>Test Card</span></div>
+    <div class="tags">
+      <div class="text-xs badge secondary">test</div>
+    </div>
+  </div>
+  <div class="bottom">
+    <div class="left_container"><span> #0</span>
+      <div class="messages"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-messages-square-icon">
+          <path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z"></path>
+          <path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"></path>
+        </svg><span>2</span></div>
+    </div>
+    <div class="right_container">
+      <div class="user_container"></div>
+    </div>
+  </div>
+  <div class="indicator"></div>
+  <div class="user_container"></div>
+</div>"
+`;

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

@@ -0,0 +1,58 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`test ColumnItem > should render correctly 1`] = `
+"<div class="column">
+  <div class="text-sm top_part">
+    <div class="name">test name of column<span>0</span></div><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-icon">
+      <circle cx="12" cy="12" r="1"></circle>
+      <circle cx="19" cy="12" r="1"></circle>
+      <circle cx="5" cy="12" r="1"></circle>
+    </svg>
+  </div>
+  <div class="content">test content</div>
+  <div class="bottom">
+    <div class="text-sm add"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon">
+        <path d="M5 12h14"></path>
+        <path d="M12 5v14"></path>
+      </svg> Add card (test)</div>
+  </div>
+</div>"
+`;
+
+exports[`tests for ColumnItem > should render correctly 1`] = `
+"<div class="column">
+  <div class="text-sm top_part">
+    <div class="name">test name of column<span>0</span></div><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-icon">
+      <circle cx="12" cy="12" r="1"></circle>
+      <circle cx="19" cy="12" r="1"></circle>
+      <circle cx="5" cy="12" r="1"></circle>
+    </svg>
+  </div>
+  <div class="content">test content</div>
+  <div class="bottom">
+    <div class="text-sm add"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon">
+        <path d="M5 12h14"></path>
+        <path d="M12 5v14"></path>
+      </svg> Add card (test)</div>
+  </div>
+</div>"
+`;
+
+exports[`tests for ColumnItem.vue > should render correctly 1`] = `
+"<div class="column">
+  <div class="text-sm top_part">
+    <div class="name">test name of column<span>0</span></div><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-icon">
+      <circle cx="12" cy="12" r="1"></circle>
+      <circle cx="19" cy="12" r="1"></circle>
+      <circle cx="5" cy="12" r="1"></circle>
+    </svg>
+  </div>
+  <div class="content">test content</div>
+  <div class="bottom">
+    <div class="text-sm add"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon">
+        <path d="M5 12h14"></path>
+        <path d="M12 5v14"></path>
+      </svg> Add card (test)</div>
+  </div>
+</div>"
+`;

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

@@ -0,0 +1,50 @@
+import { describe, it, expect, vi } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import ChartItem from '../ChartItem.vue';
+import { defineComponent, h } from 'vue';
+import i18n from '@/shared/lib/i18n';
+
+vi.mock('@vueuse/integrations/useCookies', () => {
+  return {
+    useCookies: () => ({
+      get(key: string) {
+        return key === 'i18n' ? 'en-US' : undefined;
+      }
+    })
+  };
+});
+
+const TestChartComponent = defineComponent({
+  render() {
+    return h('div', 'chart');
+  }
+});
+
+describe('tests for ChartItem.vue ', () => {
+  const wrapper = shallowMount(ChartItem, {
+    global: {
+      plugins: [i18n],
+      mocks: {
+        t: (key: string) => {
+          const translations: Record<string, string> = {
+            'boards.chart.test1': 'test chart title',
+            'boards.chart.test2': 'test chart description'
+          };
+          return translations[key];
+        }
+      }
+    },
+    props: {
+      chart: {
+        id: 'test-chart',
+        titleKeyI18n: 'test-title',
+        descriptionKeyI18n: 'test-description',
+        chart: TestChartComponent
+      }
+    }
+  });
+
+  it('should render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for ChartItem.vue  > should render correctly 1`] = `
+"<div class="chart_container">
+  <h4 class="heading-4"></h4>
+  <p class="text-sm"></p>
+  <div class="chart">
+    <anonymous-stub></anonymous-stub>
+  </div>
+</div>"
+`;

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

@@ -0,0 +1,38 @@
+import { describe, it, expect, vi } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+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: {
+      plugins: [i18n],
+      mocks: {
+        t: (key: string) => {
+          const translations: Record<string, string> = {
+            'templates.user': 'test user'
+          };
+          return translations[key];
+        }
+      }
+    },
+    props: {
+      template: _templates[0]
+    }
+  });
+
+  it('should render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for TemplateItem.vue  > should render correctly 1`] = `
+"<div class="item">
+  <div class="img_wrapper"><img src="https://storage.weeek.net/templates/tm/development-and-product/scrum.png" alt="Base Kanban"></div>
+  <div class="main_content">
+    <ui-badge-stub variant="secondary" style="margin-bottom: 12px;"></ui-badge-stub>
+    <div class="text">
+      <p class="text-base" style="font-weight: 500;">Base Kanban</p><span>Create a basic project with "Base Kanban" template</span>
+    </div>
+    <div class="bottom"><span class="text-xs">June 12, 2024</span><img src="https://avatars.githubusercontent.com/u/121057011?v=4"></div>
+  </div>
+</div>"
+`;