Merge pull request #3 from camptocamp/e2e

Set up e2e tests

.github/workflows/ci.yml

@@ -1,5 +1,8 @@
 name: CI
 
+env:
+  NODE_VERSION: 18.16.1
+
 on:
   push:
     branches:
@@ -27,6 +30,32 @@ jobs:
         npx nx affected --target=test --parallel=3 --ci --code-coverage
         npx nx affected --target=build --parallel=3
 
+  cypress-run:
+    name: End-to-end tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          repository: geonetwork/geonetwork-ui
+          path: './geonetwork-ui'
+      - name: Build the gn-ui backend
+        run: sudo docker-compose -f geonetwork-ui/support-services/docker-compose.yml up -d init
+
+      - name: Install dependencies
+        run: npm i
+
+      - name: Run tests
+        run: npx nx e2e mel-datahub-e2e
+
   agents:
     name: Nx Cloud - Agents
     uses: nrwl/ci/.github/workflows/[email protected]

README.md

@@ -6,7 +6,15 @@
 
 ## Start the app
 
-To start the development server run `nx serve datahub`. Open your browser and navigate to http://localhost:4200/. Happy coding!
+To start the development server run `npm start` or `nx serve datahub`. Open your browser and navigate to http://localhost:4200/. Happy coding!
+
+## E2e tests
+
+The e2e tests can be run using the `support-services` from geonetwork-ui in the background.
+
+Simply run `docker compose up -d` within your checked out https://github.com/geonetwork/geonetwork-ui/tree/main/support-services folder. The CI uses the same docker backend and data.
+
+Then run `npm run e2e:datahub` or `npm run e2e:datahub-dev` (if you want to run and watch them in a browser).
 
 ## Generate code
 

apps/datahub-e2e/project.json

@@ -1,5 +1,5 @@
 {
-  "name": "datahub-e2e",
+  "name": "mel-datahub-e2e",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "sourceRoot": "apps/datahub-e2e/src",
@@ -9,14 +9,14 @@
       "options": {
         "cypressConfig": "apps/datahub-e2e/cypress.config.ts",
         "testingType": "e2e",
-        "devServerTarget": "datahub:serve:development"
+        "devServerTarget": "mel-datahub:serve:development"
       },
       "configurations": {
         "production": {
-          "devServerTarget": "datahub:serve:production"
+          "devServerTarget": "mel-datahub:serve:production"
         },
         "ci": {
-          "devServerTarget": "datahub:serve-static"
+          "devServerTarget": "mel-datahub:serve-static"
         }
       }
     },
@@ -26,5 +26,5 @@
     }
   },
   "tags": [],
-  "implicitDependencies": ["datahub"]
+  "implicitDependencies": ["mel-datahub"]
 }

apps/datahub-e2e/src/e2e/home.cy.ts

@@ -0,0 +1,11 @@
+describe('datahub-e2e', () => {
+  beforeEach(() => cy.visit('/home'))
+
+  it('should display the title', () => {
+    cy.get('.mel-page-title').should('be.visible')
+  })
+  it('should display the search bar and placeholder', () => {
+    cy.get('gn-ui-fuzzy-search').should('be.visible')
+    cy.get('gn-ui-autocomplete').should('have.length.gt', 0)
+  })
+})

apps/datahub-e2e/src/e2e/search.cy.ts

@@ -0,0 +1,20 @@
+describe('datahub-e2e', () => {
+  beforeEach(() => cy.visit('/search'))
+
+  it('should display the title', () => {
+    cy.get('.mel-page-title').should('be.visible')
+  })
+  it('should display the number of result hits', () => {
+    cy.get('gn-ui-results-hits-number').should('contain', 12)
+  })
+  it('should display record results in preview cards', () => {
+    cy.get('mel-datahub-results-list-grid')
+      .find('mel-datahub-results-card-search')
+      .eq(0)
+      .find('h1')
+      .should(
+        'have.text',
+        ' Cartographie des sols agricoles de la plaine du Rhône '
+      )
+  })
+})

apps/datahub/project.json

@@ -1,5 +1,5 @@
 {
-  "name": "datahub",
+  "name": "mel-datahub",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "prefix": "mel-datahub",
@@ -61,10 +61,10 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "buildTarget": "datahub:build:production"
+          "buildTarget": "mel-datahub:build:production"
         },
         "development": {
-          "buildTarget": "datahub:build:development",
+          "buildTarget": "mel-datahub:build:development",
           "proxyConfig": "proxy-config.js"
         }
       },
@@ -73,7 +73,7 @@
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "buildTarget": "datahub:build"
+        "buildTarget": "mel-datahub:build"
       }
     },
     "lint": {
@@ -90,7 +90,7 @@
     "serve-static": {
       "executor": "@nx/web:file-server",
       "options": {
-        "buildTarget": "datahub:build",
+        "buildTarget": "mel-datahub:build",
         "staticFilePath": "dist/apps/datahub/browser"
       }
     }

package.json

@@ -3,9 +3,13 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "start": "nx serve datahub",
+    "start": "nx serve mel-datahub",
     "format": "nx format:write",
     "format:check": "nx format:check",
+    "lint:all": "nx run-many --target=lint",
+    "e2e:all": "nx run-many --target=e2e",
+    "e2e:datahub": "nx e2e mel-datahub-e2e",
+    "e2e:datahub-dev": "nx e2e mel-datahub-e2e --watch",
     "i18n:extract": "ngx-translate-extract -s --fi '  ' --input ./apps --output ./apps/datahub/src/assets/i18n/{en_MEL,fr_MEL}.json --clean --format json && npm run format:write"
   },
   "private": true,