Add tests

pkolt · Sep 2, 2024 · f836fe7 · f836fe7
1 parent 9e6f19b
commit f836fe7
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 1 deletion.
diff --git a/src/pages/Home/components/BitmapItem/index.tsx b/src/pages/Home/components/BitmapItem/index.tsx
@@ -34,10 +34,11 @@ export const BitmapItem = ({ bitmapId, openDialog }: BitmapItemProps): JSX.Eleme
           className={bitmapEntity.favorite ? 'bi-star-fill text-warning' : 'bi-star text-black-50'}
           role="button"
           onClick={toggleFavorite}
+          title={t('Favorite')}
         />
       </td>
       <td>
-        <Link to={url} className="btn-link me-1">
+        <Link to={url} className="btn-link me-1" data-testid="bitmap-item-title">
           {bitmapEntity.name}
         </Link>
       </td>

diff --git a/src/pages/Home/index.test.tsx b/src/pages/Home/index.test.tsx
@@ -4,8 +4,11 @@ import { PageUrl } from '@/constants/urls';
 import { bitmapEntity } from '@/test-utils/bitmaps';
 import FileSaver from 'file-saver';
 import { generatePath } from 'react-router-dom';
+import { SortValue } from '@/stores/settings';
+import { DateTime } from 'luxon';
 
 const BITMAP_ITEM_ID = 'bitmap-item';
+const BITMAP_ITEM_TITLE_ID = 'bitmap-item-title';
 
 const renderHomePage = () => renderPage(<Home />, { route: { path: PageUrl.Home } });
 
@@ -108,3 +111,100 @@ test('copy bitmap', async () => {
   const url = generatePath(PageUrl.EditBitmap, { id });
   expect(router.location.pathname).toBe(url);
 });
+
+const renderPageForSorting = () => {
+  const props = renderHomePage();
+  const { stores } = props;
+  stores.settings.updateBitmapListSettings({ nameSortValue: SortValue.NONE, dateSortValue: SortValue.NONE });
+  stores.bitmaps.addBitmap({
+    ...bitmapEntity,
+    id: '1',
+    name: 'Banana',
+    createdAt: DateTime.now().minus({ day: 2 }).toMillis(),
+  });
+  stores.bitmaps.addBitmap({
+    ...bitmapEntity,
+    id: '2',
+    name: 'Orange',
+    createdAt: DateTime.now().minus({ day: 3 }).toMillis(),
+  });
+  stores.bitmaps.addBitmap({
+    ...bitmapEntity,
+    id: '3',
+    name: 'Apple',
+    createdAt: DateTime.now().minus({ day: 1 }).toMillis(),
+  });
+  return props;
+};
+
+test('sort by favorite', async () => {
+  const { userEvent } = renderPageForSorting();
+
+  const favoriteButtons = screen.getAllByTitle('Favorite');
+  expect(favoriteButtons.length).toBe(3);
+
+  await userEvent.click(favoriteButtons[favoriteButtons.length - 1]);
+
+  const items = screen.getAllByTestId(BITMAP_ITEM_TITLE_ID);
+  expect(items[0].textContent).toBe('Apple');
+  expect(items[1].textContent).toBe('Banana');
+  expect(items[2].textContent).toBe('Orange');
+});
+
+test('sort by name', async () => {
+  const { userEvent } = renderPageForSorting();
+
+  const sortButton = screen.getByText('Name');
+  await userEvent.click(sortButton);
+  {
+    const items = screen.getAllByTestId(BITMAP_ITEM_TITLE_ID);
+    expect(items[0].textContent).toBe('Apple');
+    expect(items[1].textContent).toBe('Banana');
+    expect(items[2].textContent).toBe('Orange');
+  }
+
+  await userEvent.click(sortButton);
+  {
+    const items = screen.getAllByTestId(BITMAP_ITEM_TITLE_ID);
+    expect(items[0].textContent).toBe('Orange');
+    expect(items[1].textContent).toBe('Banana');
+    expect(items[2].textContent).toBe('Apple');
+  }
+
+  await userEvent.click(sortButton);
+  {
+    const items = screen.getAllByTestId(BITMAP_ITEM_TITLE_ID);
+    expect(items[0].textContent).toBe('Banana');
+    expect(items[1].textContent).toBe('Orange');
+    expect(items[2].textContent).toBe('Apple');
+  }
+});
+
+test('sort by date', async () => {
+  const { userEvent } = renderPageForSorting();
+
+  const sortButton = screen.getByText('Created');
+  await userEvent.click(sortButton);
+  {
+    const items = screen.getAllByTestId(BITMAP_ITEM_TITLE_ID);
+    expect(items[0].textContent).toBe('Apple');
+    expect(items[1].textContent).toBe('Banana');
+    expect(items[2].textContent).toBe('Orange');
+  }
+
+  await userEvent.click(sortButton);
+  {
+    const items = screen.getAllByTestId(BITMAP_ITEM_TITLE_ID);
+    expect(items[0].textContent).toBe('Orange');
+    expect(items[1].textContent).toBe('Banana');
+    expect(items[2].textContent).toBe('Apple');
+  }
+
+  await userEvent.click(sortButton);
+  {
+    const items = screen.getAllByTestId(BITMAP_ITEM_TITLE_ID);
+    expect(items[0].textContent).toBe('Banana');
+    expect(items[1].textContent).toBe('Orange');
+    expect(items[2].textContent).toBe('Apple');
+  }
+});