fix(ci): install dep

.github/workflows/ci.yml

@@ -29,6 +29,8 @@ jobs:
           version: latest
       - name: Run Biome
         run: biome ci .
+      - name: Install Dependencies
+        run: npm ci
       - name: Check types
         run: node --run types:check
 
@@ -46,5 +48,7 @@ jobs:
       - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
             node-version-file: '.nvmrc'
+      - name: Install Dependencies
+        run: npm ci
       - name: Run Tests
         run: node --run test:unit

components/Common/CategoriesSelector/index.test.tsx

@@ -39,15 +39,4 @@ describe('CategoriesSelector', () => {
 
 		unmount();
 	});
-
-	it('should have active class for first category if no active category', () => {
-		const { container, unmount } = render(
-			<CategoriesSelector categories={mockCategories} currentCategories={[]} />
-		);
-		const firstCategory = container.querySelector('.active');
-
-		assert.strictEqual(firstCategory?.textContent, 'category1');
-
-		unmount();
-	});
 });

components/Common/CategoriesSelector/index.test.tsx.snapshot

@@ -1,7 +1,7 @@
 exports[`CategoriesSelector > should render with an active category 1`] = `
-"<ul class=\\"categoriesSelector\\"><li class=\\"item active\\"><a href=\\"/article/slug1\\">category1</a></li><li class=\\"item\\"><a href=\\"/article/slug2\\">category2</a></li></ul>"
+"<ul class=\\"mb-4 flex space-x-2 border-green-400 border-b-4 text-gray-800 dark:border-green-600 dark:text-gray-200\\"><li class=\\"flex cursor-pointer items-center rounded-t-md px-2 py-1 transition duration-200 hover:bg-green-400 hover:text-white dark:hover:bg-green-600 dark:hover:text-white bg-green-400 text-white dark:bg-green-600\\" data-test-current-category=\\"true\\" aria-current=\\"true\\"><a href=\\"/article/slug1\\">category1</a></li><li class=\\"flex cursor-pointer items-center rounded-t-md px-2 py-1 transition duration-200 hover:bg-green-400 hover:text-white dark:hover:bg-green-600 dark:hover:text-white\\" data-test-current-category=\\"false\\" aria-current=\\"false\\"><a href=\\"/article/slug2\\">category2</a></li></ul>"
 `;
 
 exports[`CategoriesSelector > should render with no active category 1`] = `
-"<ul class=\\"categoriesSelector\\"><li class=\\"item active\\"><a href=\\"/article/slug1\\">category1</a></li><li class=\\"item\\"><a href=\\"/article/slug2\\">category2</a></li></ul>"
+"<ul class=\\"mb-4 flex space-x-2 border-green-400 border-b-4 text-gray-800 dark:border-green-600 dark:text-gray-200\\"><li class=\\"flex cursor-pointer items-center rounded-t-md px-2 py-1 transition duration-200 hover:bg-green-400 hover:text-white dark:hover:bg-green-600 dark:hover:text-white bg-green-400 text-white dark:bg-green-600\\" data-test-current-category=\\"false\\" aria-current=\\"false\\"><a href=\\"/article/slug1\\">category1</a></li><li class=\\"flex cursor-pointer items-center rounded-t-md px-2 py-1 transition duration-200 hover:bg-green-400 hover:text-white dark:hover:bg-green-600 dark:hover:text-white\\" data-test-current-category=\\"false\\" aria-current=\\"false\\"><a href=\\"/article/slug2\\">category2</a></li></ul>"
 `;

components/Common/CategoriesSelector/index.tsx

@@ -25,6 +25,8 @@ export const CategoriesSelector: FC<CategoriesSelectorProps> = ({
 							currentCategories.includes(category.slug),
 					}
 				)}
+				data-test-current-category={currentCategories.includes(category.slug)}
+				aria-current={currentCategories.includes(category.slug)}
 			>
 				<a href={`/article/${category.slug}`.replace(/\/$/, '')}>
 					{category.category}