refactor: fix tests

cypress/e2e/allCollections/allCollections.cy.ts

@@ -1,17 +1,20 @@
 import { CategoryType } from '@graasp/sdk';
-import { namespaces } from '@graasp/translations';
+import { langs, namespaces } from '@graasp/translations';
 
-import { i18nConfig } from '../../../src/config/i18n';
+import { LIBRARY_NAMESPACE, i18nConfig } from '../../../src/config/i18n';
 import { ALL_COLLECTIONS_ROUTE } from '../../../src/config/routes';
 import {
   ALL_COLLECTIONS_GRID_ID,
   ALL_COLLECTIONS_TITLE_ID,
   ENABLE_IN_DEPTH_SEARCH_CHECKBOX_ID,
+  SEARCH_FILTER_LANG_ID,
+  SEARCH_FILTER_POPPER_LANG_ID,
   buildCategoryOptionSelector,
   buildCollectionCardGridId,
   buildSearchFilterCategoryId,
   buildSearchFilterPopperButtonId,
 } from '../../../src/config/selectors';
+import LIBRARY from '../../../src/langs/constants';
 import { SAMPLE_CATEGORIES } from '../../fixtures/categories';
 import { buildPublicAndPrivateEnvironments } from '../../fixtures/environment';
 import { PUBLISHED_ITEMS } from '../../fixtures/items';
@@ -45,17 +48,10 @@ buildPublicAndPrivateEnvironments(PUBLISHED_ITEMS).forEach((environment) => {
         'contain.text',
         i18n.t(CategoryType.Discipline, { ns: namespaces.categories }),
       );
-      cy.get(`#${buildSearchFilterCategoryId(CategoryType.Language)}`).should(
+      cy.get(`#${SEARCH_FILTER_LANG_ID}`).should(
         'contain.text',
-        i18n.t(CategoryType.Language, { ns: namespaces.categories }),
+        i18n.t(LIBRARY.SEARCH_FILTER_LANG_TITLE, { ns: LIBRARY_NAMESPACE }),
       );
-      // todo: add back when license filtering is enabled
-      // cy.get(`#${buildSearchFilterCategoryId(CATEGORY_TYPES.LICENSE)}`).should(
-      //   'contain.text',
-      //   // todo: add translations
-      //   // i18n.t(CATEGORIES.EDUCATION_LEVEL, { ns: namespaces.categories }),
-      //   'License',
-      // );
 
       // verify 2 item cards are displayed (without children)
       cy.get(`#${ALL_COLLECTIONS_GRID_ID}`);
@@ -75,11 +71,7 @@ buildPublicAndPrivateEnvironments(PUBLISHED_ITEMS).forEach((environment) => {
 
     it('display menu options', () => {
       cy.wait(['@getCategories']);
-      [
-        CategoryType.Level,
-        CategoryType.Discipline,
-        CategoryType.Language,
-      ].forEach((categoryType) => {
+      [CategoryType.Level, CategoryType.Discipline].forEach((categoryType) => {
         cy.get(
           `#not-sticky button#${buildSearchFilterPopperButtonId(categoryType)}`,
         )
@@ -97,6 +89,16 @@ buildPublicAndPrivateEnvironments(PUBLISHED_ITEMS).forEach((environment) => {
       });
     });
 
+    it('display language options', () => {
+      cy.wait(['@getCategories']);
+      cy.get(`#not-sticky button#${SEARCH_FILTER_POPPER_LANG_ID}`)
+        .filter(':visible')
+        .click();
+      Object.entries(langs).forEach((l, idx) => {
+        cy.get(buildCategoryOptionSelector(idx)).contains(l[1]);
+      });
+    });
+
     it.skip('scroll to bottom and search should pop out', () => {
       cy.get(`#${ALL_COLLECTIONS_GRID_ID}`);
 

package.json

@@ -33,7 +33,7 @@
     "@emotion/react": "11.13.3",
     "@emotion/server": "11.11.0",
     "@emotion/styled": "11.13.0",
-    "@graasp/query-client": "5.0.0",
+    "@graasp/query-client": "5.1.0",
     "@graasp/sdk": "4.33.0",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.40.0",

src/components/filters/CategoryFilter.tsx

@@ -3,7 +3,10 @@ import React from 'react';
 import { Category } from '@graasp/sdk';
 
 import { useCategoriesTranslation } from '../../config/i18n';
-import { buildSearchFilterCategoryId } from '../../config/selectors';
+import {
+  buildSearchFilterCategoryId,
+  buildSearchFilterPopperButtonId,
+} from '../../config/selectors';
 import { Filter } from './Filter';
 
 type FilterProps = {
@@ -32,6 +35,7 @@ export function CategoryFilter({
   return (
     <Filter
       id={buildSearchFilterCategoryId(category)}
+      buttonId={buildSearchFilterPopperButtonId(category)}
       title={title}
       isLoading={isLoading}
       options={options?.map((c) => [c.id, translateCategories(c.name)])}

src/components/filters/Filter.tsx

@@ -5,7 +5,6 @@ import { Box, Button, Skeleton, Stack, Typography } from '@mui/material';
 
 import { GRAASP_COLOR } from '../../config/constants';
 import { useLibraryTranslation } from '../../config/i18n';
-import { buildSearchFilterPopperButtonId } from '../../config/selectors';
 import LIBRARY from '../../langs/constants';
 import { FilterPopper, FilterPopperProps } from './FilterPopper';
 
@@ -17,6 +16,7 @@ type FilterProps = {
   onClearOptions: FilterPopperProps['onClearOptions'];
   onOptionChange: FilterPopperProps['onOptionChange'];
   id: string;
+  buttonId: string;
   options?: FilterPopperProps['options'];
 };
 
@@ -28,6 +28,7 @@ export const Filter = ({
   onClearOptions,
   onOptionChange,
   id,
+  buttonId,
   options,
 }: FilterProps) => {
   const { t } = useLibraryTranslation();
@@ -67,7 +68,7 @@ export const Filter = ({
     <Skeleton width="100%" />
   ) : (
     <Button
-      id={buildSearchFilterPopperButtonId('lang')}
+      id={buttonId}
       onClick={togglePopper}
       variant="text"
       fullWidth

src/components/filters/FilterHeader.tsx

@@ -189,7 +189,7 @@ const FilterHeader: FC<FilterHeaderProps> = ({
     />,
     <LangFilter
       key={CategoryType.Language}
-      title={translateCategories(CategoryType.Language)}
+      title={t(LIBRARY.SEARCH_FILTER_LANG_TITLE)}
       selectedOptions={langs}
       setLangs={setLangs}
     />,

src/components/filters/LangFilter.tsx

@@ -1,6 +1,9 @@
 import { langs } from '@graasp/translations';
 
-import { buildSearchFilterCategoryId } from '../../config/selectors';
+import {
+  SEARCH_FILTER_LANG_ID,
+  SEARCH_FILTER_POPPER_LANG_ID,
+} from '../../config/selectors';
 import { Filter } from './Filter';
 
 type LangFilterProps = {
@@ -30,12 +33,13 @@ export function LangFilter({
 
   return (
     <Filter
-      id={buildSearchFilterCategoryId('lang')}
+      id={SEARCH_FILTER_LANG_ID}
       title={title}
       options={Object.entries(langs)}
       selectedOptions={selectedOptions}
       onOptionChange={onLangChange}
       onClearOptions={clearLang}
+      buttonId={SEARCH_FILTER_POPPER_LANG_ID}
     />
   );
 }

src/config/selectors.ts

@@ -97,3 +97,5 @@ export const LIBRARY_ACTION_GROUP_POP_UP_BUTTONS_ID =
 export const CHILD_CARD_COPY_BUTTON_ID = 'childCardCopyButton';
 export const buildCollectionCardCopyButtonId = (id: string) =>
   `collectionCardCopyButton-${id}`;
+export const SEARCH_FILTER_LANG_ID = 'searchFilterLang';
+export const SEARCH_FILTER_POPPER_LANG_ID = 'searchFilterPopperLang';

src/langs/constants.ts

@@ -165,5 +165,6 @@ export const LIBRARY = {
     'ITEM_SELECTION_NAVIGATION_RECENT_ITEMS',
   ITEM_SELECTION_NAVIGATION_PARENT: 'ITEM_SELECTION_NAVIGATION_PARENT',
   ITEM_SELECTION_NAVIGATION_HOME: 'ITEM_SELECTION_NAVIGATION_HOME',
+  SEARCH_FILTER_LANG_TITLE: 'SEARCH_FILTER_LANG_TITLE',
 };
 export default LIBRARY;

src/langs/en.json

@@ -55,6 +55,7 @@
   "CREATE_BUTTON_TOOLTIP": "Create your own collection",
   "COLLECTION_TAGS_TITLE": "Tags",
   "COLLECTION_LANGUAGE_TITLE": "Language",
+  "SEARCH_FILTER_LANG_TITLE": "Languages",
   "PROFILE_BUTTON": "Account",
   "COLLECTIONS_COUNT_MESSAGE_one": "{{count}} collection available",
   "COLLECTIONS_COUNT_MESSAGE_other": "{{count}} collections available",

src/langs/fr.json

@@ -126,5 +126,6 @@
   "COPY_MODAL_EMPTY_FOLDER": "Le dossier est vide.",
   "COPY_MODAL_HOME_TITLE": "Accueil",
   "COPY_MODAL_RECENT_TITLE": "Éléments récents",
-  "COPY_MODAL_SUBMIT_BUTTON": "Valider"
+  "COPY_MODAL_SUBMIT_BUTTON": "Valider",
+  "SEARCH_FILTER_LANG_TITLE": "Langues"
 }

yarn.lock

@@ -1263,9 +1263,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/query-client@npm:5.0.0":
-  version: 5.0.0
-  resolution: "@graasp/query-client@npm:5.0.0"
+"@graasp/query-client@npm:5.1.0":
+  version: 5.1.0
+  resolution: "@graasp/query-client@npm:5.1.0"
   dependencies:
     "@tanstack/react-query": "npm:5.59.8"
     "@tanstack/react-query-devtools": "npm:5.59.8"
@@ -1275,7 +1275,7 @@ __metadata:
     "@graasp/sdk": ^4.0.0
     "@graasp/translations": "*"
     react: ^18.0.0
-  checksum: 10/463dd556081d76fb2cb4bcf69b595560eb40ff528de5b1c64f189af106209bf394135d400374c80c031a57b0e3a13fdedd12d4d86988a4533b49d37c405a662a
+  checksum: 10/947d033c1fd0f734fa4a048d40d5f9bbc5f08d97b0eb7268a58046619179d417cbd2ebbe87866f9ffdb6c57de87179699fb9bc95c8682842b3323d2ac0d896f7
   languageName: node
   linkType: hard
 
@@ -7215,7 +7215,7 @@ __metadata:
     "@emotion/react": "npm:11.13.3"
     "@emotion/server": "npm:11.11.0"
     "@emotion/styled": "npm:11.13.0"
-    "@graasp/query-client": "npm:5.0.0"
+    "@graasp/query-client": "npm:5.1.0"
     "@graasp/sdk": "npm:4.33.0"
     "@graasp/stylis-plugin-rtl": "npm:2.2.0"
     "@graasp/translations": "npm:1.40.0"