test: add cypress setup (eclipse-tractusx#1357)

eclipse-tractusx#1296

---------

Co-authored-by: Evelyn Gurschler <[email protected]>

.eslintrc.json

@@ -21,7 +21,7 @@
         "plugin:@typescript-eslint/recommended-requiring-type-checking"
       ],
       "parserOptions": {
-        "project": ["./tsconfig.json"]
+        "project": ["./tsconfig.json", "./cypress/tsconfig.json"]
       },
       "rules": {
         "linebreak-style": ["error", "unix"],

cypress.config.ts

@@ -0,0 +1,43 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+  env: {
+    baseUrl: 'http://localhost:3001',
+    backendUrl: 'https://portal-backend.example.org',
+    user: {
+      email: '[email protected]',
+      password: '',
+    },
+    company: {
+      name: 'Company name to search',
+    },
+    keycloak: {
+      centralUrl: 'centralidp.example.org',
+      sharedUrl: 'sharedidp.example.org',
+    },
+  },
+})

cypress/README.md

@@ -0,0 +1,53 @@
+# Running Cypress Locally and Updating Environment Variables
+
+This document provides step-by-step instructions for running Cypress tests locally, updating environment variables, and executing the `cy:open` script.
+
+## Steps to Run Cypress Locally
+
+### 1. Install Dependencies
+
+First, install all necessary dependencies for the project:
+
+```bash
+yarn install
+```
+
+### 2. Update Environment Variables
+
+To update environment variables in the `cypress.config` file:
+
+1. Open the `cypress.config.ts` file in your preferred code editor.
+2. Locate the `env` property or the section where environment variables are defined.
+3. Add or update the necessary environment variables.
+4. Save the file.
+
+### 3. Execute the Cypress Open Command
+
+To open the Cypress Test Runner, use the following command:
+
+```bash
+yarn cy:open
+```
+
+This command will launch the Cypress Test Runner UI, where you can select and run individual test files.
+
+### 4. Running Specific Tests
+
+Within the Cypress Test Runner:
+
+1. Select the desired testing browser (e.g., Chrome, Electron).
+2. Click on the specific test file to execute it.
+
+## Troubleshooting
+
+- For any issues with environment variables:
+  - Confirm the variables are properly defined in the `env` section of `cypress.config`.
+  - Use `Cypress.env('VARIABLE_NAME')` in test files to access environment variables.
+
+## NOTICE
+
+This work is licensed under the [Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0).
+
+- SPDX-License-Identifier: Apache-2.0
+- SPDX-FileCopyrightText: 2024 Contributors to the Eclipse Foundation
+- Source URL: https://github.com/eclipse-tractusx/portal-frontend

cypress/e2e/home.cy.ts

@@ -0,0 +1,30 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+describe('Validate authentication for home page', () => {
+  beforeEach(() => {
+    cy.login('user')
+  })
+
+  it('should visit home page after login', () => {
+    cy.visit(Cypress.env('baseUrl'))
+      .get('.copyright')
+      .should('have.text', 'Copyright © Catena-X Automotive Network')
+  })
+})

cypress/support/commands.ts

@@ -0,0 +1,87 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+/* eslint-disable @typescript-eslint/no-namespace */
+
+export {}
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      login: (userType: string) => Chainable<void>
+      snackbarAlert: (msg: string) => Chainable<void>
+    }
+  }
+}
+
+// @ref https://on.cypress.io/custom-commands
+Cypress.Commands.add('login', (usertype) => {
+  // creating a session for user login
+  cy.session(
+    [usertype],
+    () => {
+      const companyName = Cypress.env('company').name
+      cy.visit(Cypress.env('baseUrl'))
+      // Perform login on Keycloak login page
+      cy.origin(
+        Cypress.env('keycloak').centralUrl,
+        { args: { companyName } },
+        ({ companyName }) => {
+          // Click the login button to be redirected to Keycloak
+          cy.get('input[placeholder="Enter your company name"]').type(
+            companyName
+          ) // Update selector based on your app
+
+          cy.get('li')
+            .find('div')
+            .contains(companyName, { matchCase: false })
+            .click()
+        }
+      )
+
+      cy.origin(
+        Cypress.env('keycloak').sharedUrl,
+        { args: { usertype } },
+        ({ usertype }) => {
+          const currentUsername =
+            usertype === 'admin'
+              ? Cypress.env('admin').email
+              : Cypress.env('user').email
+          const currentPassword =
+            usertype === 'admin'
+              ? Cypress.env('admin').password
+              : Cypress.env('user').password
+          cy.get('#username').should('exist').type(currentUsername)
+          cy.get('#password').type(currentPassword)
+          cy.get('#kc-login').click() // Submit the Keycloak form
+        }
+      )
+    },
+    { cacheAcrossSpecs: true }
+  )
+})
+
+Cypress.Commands.add('snackbarAlert', (text) => {
+  cy.get('.MuiSnackbar-root')
+    .should('be.visible')
+    .then(() => {
+      cy.get('.MuiSnackbarContent-root').should('contain', text)
+      cy.wait(7000)
+    })
+    .should('not.exist')
+})

cypress/support/e2e.ts

@@ -0,0 +1,31 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+import './commands'

cypress/tsconfig.json

@@ -0,0 +1,30 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"],
+
+    /* Linting */
+    "strict": true
+  },
+  "include": ["**/*.ts"]
+}

package.json

@@ -86,6 +86,7 @@
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.3.3",
+    "cypress": "^13.15.2",
     "eslint": "^8.57.0",
     "eslint-config-love": "^43.1.0",
     "eslint-config-prettier": "^9.1.0",
@@ -121,6 +122,7 @@
     "start:docker": "IMAGE=$npm_package_config_image  && docker run --rm -d -p 3001:8080 --name cx-portal $IMAGE",
     "publish:docker": "IMAGE=$npm_package_config_image && docker tag $IMAGE:latest $IMAGE:$npm_package_version && docker push $IMAGE:$npm_package_version && docker push $IMAGE:latest",
     "build:legal-notice": "bash scripts/legal-notice.sh",
-    "build:copy-legal-info": "cp LICENSE NOTICE.md DEPENDENCIES SECURITY.md public/"
+    "build:copy-legal-info": "cp LICENSE NOTICE.md DEPENDENCIES SECURITY.md public/",
+    "cy:open": "cypress open"
   }
 }