Merge pull request #23 from Vizzuality/AF-cypress

[FE](test): Cypress configs and UI tests
Vizzuality · Feb 19, 2024 · e76ccde · e76ccde
2 parents cd902c2 + 4cff5d7
commit e76ccde
Show file tree

Hide file tree

Showing 18 changed files with 12,151 additions and 3,601 deletions.
diff --git a/.github/workflows/testing-e2e.yml b/.github/workflows/testing-e2e.yml
@@ -0,0 +1,36 @@
+name: Cypress Tests
+
+on:
+  push:
+    paths:
+      - 'client/**'
+      - '.github/workflows/testing-e2e.yml'
+
+  workflow_dispatch:
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    defaults:
+      run:
+        working-directory: ${{github.workspace}}/client
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 18.13
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: 'client/.nvmrc'
+          cache: 'yarn'
+          cache-dependency-path: client/yarn.lock
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          build: yarn build
+          start: yarn start
+          command: "yarn cypress:open"
diff --git a/client/cypress.config.ts b/client/cypress.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    supportFile: false,
+  },
+});
diff --git a/client/cypress/e2e/map.cy.ts b/client/cypress/e2e/map.cy.ts
@@ -0,0 +1,14 @@
+describe('map', () => {
+  it('changes basemap', () => {
+    cy.visit('/');
+    cy.get('button[data-cy="map-settings-button"]').click();
+    cy.get('button[data-cy="basemap-satellite"]').click();
+    // Todo: We would need to check if basemap is in the url
+  });
+
+  it('loads', () => {
+    cy.visit('/');
+    const map = cy.get('#default').wait(8000);
+    map.should('exist');
+  });
+});
diff --git a/client/cypress/e2e/navigation.cy.ts b/client/cypress/e2e/navigation.cy.ts
@@ -0,0 +1,30 @@
+describe('navigation', () => {
+  it('redirects to project page', () => {
+    cy.visit('/').url().should('be.equal', 'http://localhost:3000/projects');
+  });
+
+  it('access to project detail page and switch dashboard', () => {
+    cy.visit('/');
+    cy.get('a[data-cy="project-item-link"]').first().click();
+    cy.get('button[data-cy="project-dashboard-button"]').click().wait(1000);
+    cy.get('[data-cy="project-dashboard"]').should('exist');
+    cy.get('button[data-cy="project-dashboard-button"]').click();
+    cy.get('[data-cy="project-dashboard"]').should('not.exist');
+  });
+
+  it('access to country detail page', () => {
+    cy.visit('/');
+    cy.get('a[data-cy="sidebar-tab-countries"]').click();
+    cy.get('a[data-cy="country-item-link"]').first().click();
+    cy.get('[data-cy="country-detail-name"]').should('exist');
+  });
+
+  it('access to datasets and displays an info dialog', () => {
+    cy.visit('/');
+    cy.get('a[data-cy="sidebar-tab-datasets"]').click().wait(1000);
+    cy.get('button[data-cy="info-soil-carbon-density-button"]').click();
+    cy.get('div[data-cy="info-soil-carbon-density-dialog"]').should('exist');
+    cy.get('button[data-cy="info-soil-carbon-density-dialog-close"]').click();
+    cy.get('div[data-cy="info-soil-carbon-density-dialog"]').should('not.exist');
+  });
+});
diff --git a/client/package.json b/client/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "cypress:open": "cypress open"
   },
   "dependencies": {
     "@deck.gl/geo-layers": "8.9.19",
@@ -65,6 +66,7 @@
     "@types/d3-array": "3.0.5",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
+    "cypress": "13.6.4",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-prettier": "^4.2.1",

diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
@@ -6,7 +6,6 @@ import localFont from 'next/font/local';
 
 import Providers from '@/app/layout-providers';
 
-import Panel from '@/containers/panel';
 import Sidebar from '@/containers/sidebar';
 
 const Map = dynamic(() => import('@/containers/map'), {

diff --git a/client/src/components/map/controls/settings/index.tsx b/client/src/components/map/controls/settings/index.tsx
@@ -34,6 +34,7 @@ export const SettingsControl: FC<SettingsControlProps> = ({
                 })}
                 aria-label="Map settings"
                 type="button"
+                data-cy="map-settings-button"
               >
                 <Settings className="h-full w-full" />
               </button>

diff --git a/client/src/components/ui/dialog.tsx b/client/src/components/ui/dialog.tsx
@@ -11,6 +11,8 @@ const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
+const DialogClose = DialogPrimitive.Close;
+
 const DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => (
   <DialogPrimitive.Portal {...props} />
 );
@@ -99,4 +101,5 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
+  DialogClose,
 };
diff --git a/client/src/containers/countries/item.tsx b/client/src/containers/countries/item.tsx
@@ -7,6 +7,7 @@ export default function CountryItem() {
   return (
     <Link
       href={'/countries/bhutan'}
+      data-cy="country-item-link"
       className="flex items-center justify-between space-x-4 rounded-lg border border-gray-100 bg-white py-2 pl-2 pr-4 text-sm text-yellow-900 shadow-sm transition-all duration-300 hover:border-yellow-500"
     >
       <div className="flex items-center space-x-4">
@@ -17,7 +18,7 @@ export default function CountryItem() {
           width={40}
           height={32}
         />
-        <h3>Bhutan</h3>
+        <h3 data-cy="country-detail-name">Bhutan</h3>
       </div>
       <p>
         <span className="font-semibold">32</span> projects

diff --git a/client/src/containers/datasets/item.tsx b/client/src/containers/datasets/item.tsx
@@ -1,22 +1,16 @@
 'use client';
 
-import { useState } from 'react';
-
 import { Info } from 'lucide-react';
 
-import { cn } from '@/lib/classnames';
-
 import { DatasetListResponseDataItem } from '@/types/generated/strapi.schemas';
 
 // import Layers from '@/containers/datasets/layers';
 
 import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
+import { Dialog, DialogClose, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 import { Switch } from '@/components/ui/switch';
 
 export default function DatasetsItem(props: Required<DatasetListResponseDataItem>) {
-  const [infoOpen, setInfoOpen] = useState(false);
-
   const mockedLayersSelected = ['projects', 'tree-cover', 'soil-carbon-density'];
 
   return (
@@ -31,46 +25,43 @@ export default function DatasetsItem(props: Required<DatasetListResponseDataItem
         </div>
         <Dialog>
           <DialogTrigger
-            className={cn({
-              'flex items-center justify-center rounded-full p-2 hover:bg-yellow-50': true,
-              'bg-yellow-50': infoOpen,
-            })}
-            onClick={() => setInfoOpen(true)}
+            className="flex items-center justify-center rounded-full p-2 hover:bg-yellow-50 data-[state=open]:bg-yellow-50"
+            data-cy={`info-${props.id}-button`}
           >
             <Info className="h-4 w-4 text-black" strokeWidth={1} />
           </DialogTrigger>
 
-          {infoOpen && (
-            <DialogContent className="p-0">
-              <h3 className="px-6 pt-4 text-xl font-medium text-green-900">
-                {props.attributes.title}
-              </h3>
-              <div className="border-b border-t border-gray-100 py-2.5">
-                <p className="px-6 text-sm text-yellow-900">
-                  Lorem ipsum dolor sit amet consectetur. Ac in vel mauris lectus in. Cras tellus
-                  aliquam amet quisque. Amet ut mi sed purus. Nulla adipiscing commodo lectus sed
-                  vehicula. Convallis etiam placerat imperdiet nunc tempus sit. Mi non habitant
-                  blandit cursus ullamcorper vitae. Aliquet donec egestas vitae tincidunt nunc amet
-                  ultricies. Cras blandit mattis etiam erat. Iaculis tellus euismod enim integer.
-                  Lorem ipsum dolor sit amet consectetur. Ac in vel mauris lectus in. Cras tellus
-                  aliquam amet quisque. Amet ut mi sed purus. Nulla adipiscing commodo lectus sed
-                  vehicula. Convallis etiam placerat imperdiet nunc tempus sit. Mi non habitant
-                  blandit cursus ullamcorper vitae. Aliquet donec egestas vitae tincidunt nunc amet
-                  ultricies. Cras blandit mattis etiam erat. Iaculis tellus euismod enim integer.
-                </p>
-              </div>
-              <div className="flex w-full px-6 pb-4">
+          <DialogContent className="p-0" data-cy={`info-${props.id}-dialog`}>
+            <h3 className="px-6 pt-4 text-xl font-medium text-green-900">
+              {props.attributes.title}
+            </h3>
+            <div className="border-b border-t border-gray-100 py-2.5">
+              <p className="px-6 text-sm text-yellow-900">
+                Lorem ipsum dolor sit amet consectetur. Ac in vel mauris lectus in. Cras tellus
+                aliquam amet quisque. Amet ut mi sed purus. Nulla adipiscing commodo lectus sed
+                vehicula. Convallis etiam placerat imperdiet nunc tempus sit. Mi non habitant
+                blandit cursus ullamcorper vitae. Aliquet donec egestas vitae tincidunt nunc amet
+                ultricies. Cras blandit mattis etiam erat. Iaculis tellus euismod enim integer.
+                Lorem ipsum dolor sit amet consectetur. Ac in vel mauris lectus in. Cras tellus
+                aliquam amet quisque. Amet ut mi sed purus. Nulla adipiscing commodo lectus sed
+                vehicula. Convallis etiam placerat imperdiet nunc tempus sit. Mi non habitant
+                blandit cursus ullamcorper vitae. Aliquet donec egestas vitae tincidunt nunc amet
+                ultricies. Cras blandit mattis etiam erat. Iaculis tellus euismod enim integer.
+              </p>
+            </div>
+            <div className="flex w-full px-6 pb-4">
+              <DialogClose asChild>
                 <Button
+                  data-cy={`info-${props.id}-dialog-close`}
                   variant="primary"
                   size="base"
-                  className="ml-auto w-12"
-                  onClick={() => setInfoOpen(false)}
+                  className="ml-auto w-12 self-end"
                 >
                   Ok
                 </Button>
-              </div>
-            </DialogContent>
-          )}
+              </DialogClose>
+            </div>
+          </DialogContent>
         </Dialog>
       </div>
       <div>

diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
@@ -133,6 +133,7 @@ export default function MapContainer() {
     <div className="absolute left-0 top-0 h-screen w-screen">
       <Map
         id={id}
+        data-cy="map"
         initialViewState={{
           ...initialViewState,
           ...(bbox && {

diff --git a/client/src/containers/map/settings/basemaps/item/index.tsx b/client/src/containers/map/settings/basemaps/item/index.tsx
@@ -27,7 +27,12 @@ const BasemapItem = ({ label, value, preview }: BasemapItemProps) => {
 
   return (
     <div className="flex w-full items-center justify-between space-x-8">
-      <button className="group grow" type="button" onClick={handleToggleBasemap}>
+      <button
+        className="group grow"
+        type="button"
+        onClick={handleToggleBasemap}
+        data-cy={`${value}`}
+      >
         <div className="space-y-2">
           <div
             className={cn({

diff --git a/client/src/containers/projects/detail/dashboard.tsx b/client/src/containers/projects/detail/dashboard.tsx
@@ -18,12 +18,15 @@ export default function ProjectDashboard() {
   const setDashboard = useSetAtom(dashboardAtom);
 
   return (
-    <div className="z-50 box-content h-full w-full rounded-3xl bg-neutral-50 px-6 py-8 shadow-md">
+    <div
+      data-cy="project-dashboard"
+      className="z-50 box-content h-full w-full rounded-3xl bg-neutral-50 px-6 py-8 shadow-md"
+    >
       <div>
         <h3 className="mb-4 text-xl font-extrabold text-gray-400">Overview</h3>
         <button
           onClick={() => setDashboard(false)}
-          className="focus:ring-ring absolute right-6 top-9 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+          className="focus:ring-ring absolute -right-6 top-9 z-50 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
         >
           <X className="h-4 w-4 text-yellow-400" />
           <span className="sr-only">Close</span>

diff --git a/client/src/containers/projects/detail/panel.tsx b/client/src/containers/projects/detail/panel.tsx
@@ -3,11 +3,8 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { useAtom } from 'jotai';
 import { ArrowLeft, ChevronRight } from 'lucide-react';
 
-import { dashboardAtom } from '@/store';
-
 import { PANEL_OVERVIEW_ITEMS } from '@/containers/projects/detail/constants';
 
 import { Button } from '@/components/ui/button';
@@ -16,8 +13,6 @@ import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';
 import ProjectDashboard from './dashboard';
 
 export default function ProjectDetailPanel() {
-  const [dashboard, setDashboard] = useAtom(dashboardAtom);
-
   return (
     <div className="no-scrollbar h-full overflow-x-hidden rounded-3xl bg-neutral-50 p-6 pb-40">
       <div className="absolute left-0 top-0 w-full">
@@ -107,18 +102,19 @@ export default function ProjectDetailPanel() {
         </div>
       </div>
       <Drawer>
-        <DrawerTrigger asChild>
+        <DrawerTrigger asChild className="group">
           <Button
             variant="primary"
-            className="group fixed bottom-6 right-6 z-50 space-x-2"
+            className="fixed bottom-6 right-6 z-50 w-48 space-x-2"
             size="base"
-            onClick={() => setDashboard(!dashboard)}
+            data-cy="project-dashboard-button"
           >
-            <p className="w-36">{dashboard ? 'Hide dashboard' : 'Show dashboard'}</p>
+            <p className="block group-data-[state=open]:hidden">{'Show dashboard'}</p>
+            <p className="block group-data-[state=closed]:hidden">{'Hide dashboard'}</p>
             <ChevronRight className="h-4 w-4 text-yellow-900 group-hover:text-yellow-50" />
           </Button>
         </DrawerTrigger>
-        <DrawerContent className="left-[512px] w-[calc(100vw-584px)]">
+        <DrawerContent className="left-[514px] w-[calc(100vw-570px)]">
           <ProjectDashboard />
         </DrawerContent>
       </Drawer>

diff --git a/client/src/containers/projects/item.tsx b/client/src/containers/projects/item.tsx
@@ -7,11 +7,12 @@ export default function ProjectItem() {
   return (
     <Link
       href={'/projects/indonesia-landscape'}
+      data-cy="project-item-link"
       className="flex space-x-4 rounded-lg border border-gray-100 bg-white py-2 pl-2 pr-4 shadow-sm transition-all duration-300 hover:border-yellow-500"
     >
       <Image src="/images/projects/placeholder.png" alt="Project Image" width={300} height={300} />
       <div className="flex flex-col space-y-2">
-        <h3 className="text-sm font-bold text-yellow-900">
+        <h3 className="text-sm font-bold text-yellow-900" id="project-detail-title">
           Innovative Solutions for Climate Change and Biodiversity Landscape Strategy to Support
           SDGs in Indonesia
         </h3>

diff --git a/client/src/containers/sidebar/index.tsx b/client/src/containers/sidebar/index.tsx
@@ -27,6 +27,7 @@ export default function Sidebar() {
             <Link
               href={href}
               key={name}
+              data-cy={`sidebar-tab-${name}`}
               className={cn({
                 'rounded-8xl mx-2 mt-2 flex flex-col items-center space-y-1 border-2 border-transparent py-10 text-center':
                   true,