categories test fix

Vizzuality · Jan 18, 2024 · 03e1f52 · 03e1f52
1 parent efdafc6
commit 03e1f52
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 511 deletions.
diff --git a/package.json b/package.json
@@ -54,42 +54,40 @@
     "@turf/bbox": "6.5.0",
     "@types/d3-format": "^3.0.1",
     "@types/lodash-es": "4.17.7",
-    "add": "^2.0.6",
     "axios": "1.6.0",
     "chroma-js": "^2.4.2",
     "classnames": "^2.3.2",
     "cmdk": "0.2.0",
     "d3-format": "3.1.0",
     "date-fns": "2.30.0",
-    "diacritics": "^1.3.0",
+    "diacritics": "1.3.0",
+    "dotenv": "16.3.1",
     "framer-motion": "10.12.3",
     "fuse.js": "6.6.2",
     "input": "1.0.1",
     "lodash-es": "4.17.21",
-    "mapbox-gl": "^2.13.0",
+    "mapbox-gl": "2.13.0",
     "next": "^13.5.0",
     "popover": "2.4.1",
     "postcss": "8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
-    "react-map-gl": "^7.0.21",
+    "react-map-gl": "7.0.21",
     "react-virtualized": "9.22.5",
     "recharts": "^2.5.0",
     "recoil": "^0.7.7",
     "recoil-sync": "0.2.0",
     "shadcn-ui": "latest",
-    "sharp": "^0.32.6",
-    "table": "^6.8.1",
-    "tailwind-merge": "^1.11.0",
-    "tailwind-scrollbar-hide": "^1.1.7",
+    "tailwind-merge": "1.11.0",
+    "tailwind-scrollbar-hide": "1.1.7",
     "tailwindcss": "3.2.7",
     "tailwindcss-animate": "^1.0.5",
-    "use-debounce": "^9.0.3",
-    "usehooks-ts": "^2.9.1"
+    "use-debounce": "9.0.3",
+    "usehooks-ts": "2.9.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.36.2",
+    "@playwright/test": "^1.41.0",
     "@transifex/cli": "6.0.2",
     "@transifex/native": "6.0.2",
     "@transifex/react": "6.0.2",

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -1,10 +1,11 @@
 import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
 
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// require('dotenv').config();
+dotenv.config({ path: '.env.local' });
 
 /**
  * See https://playwright.dev/docs/test-configuration.

diff --git a/src/containers/categories-menu/index.tsx b/src/containers/categories-menu/index.tsx
@@ -23,7 +23,7 @@ const Category = () => {
   const handleClick = useCallback(
     (event: MouseEvent<HTMLButtonElement & { value }>) => {
       event.preventDefault();
-      setCategory(event.currentTarget.value as Category);
+      setCategory(encodeURIComponent(event.currentTarget.value) as Category);
       const widgetsFiltered = widgets.filter((widget) =>
         widget?.categoryIds?.includes(event.currentTarget.value)
       );
@@ -39,15 +39,20 @@ const Category = () => {
       <p className="text-xs font-bold uppercase tracking-[1px]">presets</p>
       <div className="grid grid-cols-3 gap-4 py-2">
         {CATEGORY_OPTIONS.map((category) => (
-          <button key={category.value} type="button" value={category.value} onClick={handleClick}>
+          <button
+            key={category.value}
+            type="button"
+            value={category.value}
+            onClick={handleClick}
+            data-testid={category.value}
+          >
             <div
               className={cn({
                 'relative flex-1 items-center justify-center rounded-xl border border-black/15 p-3 text-xs md:p-6 md:text-sm':
                   true,
                 'border-2 border-brand-800 font-bold text-brand-800':
                   category.value === categorySelected,
               })}
-              data-testid={category.value}
               defaultChecked={'distribution_and_change' === category.value}
             >
               <h4 className="flex min-h-[40px] items-center justify-center">{category.label}</h4>

diff --git a/src/containers/navigation/mobile/configure/index.tsx b/src/containers/navigation/mobile/configure/index.tsx
@@ -10,7 +10,10 @@ const ConfigureWidgets = () => {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <div className="flex flex-col items-center space-y-1 pt-1 text-white">
+        <div
+          className="flex flex-col items-center space-y-1 pt-1 text-white"
+          data-testid="widgets-deck-trigger"
+        >
           <Icon
             icon={CONFIGS_SVG}
             className="h-8 w-8 fill-white text-white"

diff --git a/src/containers/widgets/constants.ts b/src/containers/widgets/constants.ts
@@ -17,6 +17,14 @@ const widgets_dev = [
     categoryIds: ['all_datasets', 'restoration_and_conservation'],
     layersIds: ['restoration_sites'],
   },
+  {
+    name: 'IUCN Ecoregion assesment',
+    slug: 'mangrove_iucn_ecoregion',
+    locationType: ['worldwide'],
+    applicability: 'Global',
+    categoryIds: ['all_datasets', 'distribution_and_change', 'restoration_and_conservation'],
+    layersIds: ['ecoregion'],
+  },
 ] satisfies WidgetTypes[];
 
 const widgets_prod = [
@@ -168,16 +176,7 @@ const widgets_prod = [
       'mangrove_coastal_protection_stock',
     ],
   },
-  {
-    ...(process.env.NEXT_PUBLIC_VERCEL_ENV === 'development' && {
-      name: 'IUCN Ecoregion assesment',
-      slug: 'mangrove_iucn_ecoregion',
-      locationType: ['worldwide'],
-      applicability: 'Global',
-      categoryIds: ['all_datasets', 'distribution_and_change', 'restoration_and_conservation'],
-      layersIds: ['ecoregion'],
-    }),
-  },
+
   {
     name: 'Protected areas',
     slug: 'mangrove_protected_areas',
@@ -218,6 +217,7 @@ const widgets =
   process.env.NEXT_PUBLIC_VERCEL_ENV === 'development'
     ? [...widgets_dev, ...widgets_prod]
     : widgets_prod;
+
 export const ANALYSIS_WIDGETS_SLUGS: WidgetTypes['slug'][] = [
   'mangrove_habitat_extent',
   'mangrove_net_change',

diff --git a/src/containers/widgets/index.tsx b/src/containers/widgets/index.tsx
@@ -125,7 +125,7 @@ const WidgetsContainer: React.FC = () => {
               <DialogTrigger className="md:translate-x-0">
                 <button
                   type="button"
-                  data-testid="configure-widgets-button"
+                  data-testid="widgets-deck-trigger"
                   className={cn({
                     'flex h-8 w-[262px] items-center justify-center rounded-4xl bg-white py-1 px-10 font-sans text-sm font-semibold text-brand-800 shadow-control transition-colors print:hidden md:ml-0':
                       true,

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -75,7 +75,7 @@ const MyApp = ({ Component, pageProps }: AppProps<PageProps>) => {
   useEffect(() => {
     tx.init({
       token: process.env.NEXT_PUBLIC_TRANSIFEX_API_KEY,
-      ...(process.env.NODE_ENV === 'development'
+      ...(process.env.NEXT_PUBLIC_VERCEL_ENV === 'development'
         ? { missingPolicy: new PseudoTranslationPolicy() }
         : {}),
     });
@@ -133,7 +133,7 @@ const MyApp = ({ Component, pageProps }: AppProps<PageProps>) => {
             serialize={serialize}
             deserialize={deserialize}
           >
-            {process.env.NODE_ENV === 'development' && <RecoilDevTools />}
+            {process.env.NEXT_PUBLIC_VERCEL_ENV === 'development' && <RecoilDevTools />}
             <QueryClientProvider client={queryClient}>
               <Hydrate state={pageProps.dehydratedState}>
                 <MediaContextProvider disableDynamicMediaQueries>

diff --git a/tests/categories.spec.ts b/tests/categories.spec.ts
@@ -14,47 +14,40 @@ const CATEGORY_OPTIONS = [
 const DEFAULT_LOCATION = 'worldwide';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('/');
+  await page.goto('/', {
+    waitUntil: 'load',
+  });
 });
 
-test('Has all categories buttons', async ({ page }) => {
-  // Hover over the categories on sidebar to open the category menu
-  await page.getByTestId('show-categories-button').hover();
+test('Selecting a category changes the url query "category"', async ({ page }) => {
+  const widgetsDeckTrigger = page.getByTestId('widgets-deck-trigger');
+  await expect(widgetsDeckTrigger).toBeVisible();
+  await widgetsDeckTrigger.click();
   for (const category of CATEGORY_OPTIONS) {
-    // Check that the category button is visible
-    await expect(page.locator(`[data-category="${category}"]`)).toBeVisible();
-  }
-});
+    // Get and click on the different categories buttons
+    const categoryButton = page.getByTestId(category);
+    await expect(categoryButton).toBeVisible();
+    await categoryButton.click();
 
-test('Selecting a category changes the url query "category"', async ({ page }) => {
-  const categoriesButton = page.getByTestId('show-categories-button');
-  for (let i = 0; i < CATEGORY_OPTIONS.length; i++) {
-    // Hover over the categories on sidebar to open the category menu
-    await categoriesButton.hover();
-    const category = CATEGORY_OPTIONS[i];
-    // Click on the category button
-    await page.locator(`[data-category="${category}"]`).click();
-    // Check that the category button is active
-    const categoryButton = categoriesButton.locator('div').nth(i);
-    await expect(categoryButton).toHaveAttribute('data-isactive', 'true');
     // Check that the url has the correct query
-    const url = new RegExp(`.*?category=${encodeURIComponent(`"${category}"`)}`);
+    const url = new RegExp(`.*?category=${`${category}`}`);
     await expect(page).toHaveURL(url);
   }
 });
 
 test.describe('Categories display the correct widgets', () => {
   for (const category of CATEGORY_OPTIONS) {
-    test(`Category ${category}  display correct widgets`, async ({ page }) => {
+    test(`Category ${category} display correct widgets`, async ({ page }) => {
       // Go to the category page
-      await page.goto(`/?category=${encodeURIComponent(`"${category}"`)}`);
-      // Get all widgets that should be visible
+      await page.goto(`/?category=${category}`, { waitUntil: 'load' });
+      // Get all widgets that should be enabled
       const widgets = WIDGETS.filter(
         ({ categoryIds, locationType }) =>
           categoryIds?.includes(category) && locationType?.includes(DEFAULT_LOCATION)
       );
       // Check that all widgets are visible
       for (const widget of widgets) {
+        test.setTimeout(120000);
         await expect(page.getByTestId(`widget-${widget.slug}`)).toBeVisible();
       }
     });

diff --git a/tests/fixtures/drawing-tool.ts b/tests/fixtures/drawing-tool.ts
@@ -1,5 +1,3 @@
-import { resolve } from 'path';
-
 import { Page } from '@playwright/test';
 
 const positions = [