fix

Author: AugustinMauroy

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}