test(e2e-login): e2e login tests added to cypress (#87)

eclipse-mnestix · Feb 3, 2025 · a38aa63 · a38aa63
1 parent df387ab
commit a38aa63
Show file tree

Hide file tree

Showing 12 changed files with 131 additions and 13 deletions.
diff --git a/.github/workflows/docker-build.yml b/.github/workflows/docker-build.yml
@@ -97,6 +97,8 @@ jobs:
         env:
           SPLIT: ${{ strategy.job-total }}
           SPLIT_INDEX: ${{ strategy.job-index }}
+          TEST_ADMIN_USER_PASSWORD: ${{ secrets.TEST_ADMIN_USER_PASSWORD }}
+          TEST_USER_PASSWORD: ${{ secrets.TEST_USER_PASSWORD }}
 
       - name: E2E test collect artifact
         id: test_artifact

diff --git a/cypress.config.ts b/cypress.config.ts
@@ -33,5 +33,10 @@ export default defineConfig({
         MNESTIX_BACKEND_API_URL: 'http://localhost:5064',
         AAS_DISCOVERY_API_URL: 'http://localhost:5064/discovery',
         MNESTIX_API_KEY: process.env.MNESTIX_BACKEND_API_KEY,
+        TEST_ADMIN_USER_LOGIN: process.env.TEST_ADMIN_USER_LOGIN,
+        TEST_ADMIN_USER_PASSWORD: process.env.TEST_ADMIN_USER_PASSWORD,
+        TEST_USER_LOGIN: process.env.TEST_USER_LOGIN,
+        TEST_USER_PASSWORD: process.env.TEST_USER_PASSWORD,
+        KEYCLOAK_ISSUER: process.env.KEYCLOAK_ISSUER,
     },
 });
diff --git a/cypress/e2e/loginKeycloak.spec.js b/cypress/e2e/loginKeycloak.spec.js
@@ -0,0 +1,78 @@
+describe('Login Keycloak user roles', function () {
+    const adminTestUser = {
+        login: Cypress.env('TEST_ADMIN_USER_LOGIN'),
+        password: Cypress.env('TEST_ADMIN_USER_PASSWORD'),
+    };
+    const testUser = {
+        login: Cypress.env('TEST_USER_LOGIN'),
+        password: Cypress.env('TEST_USER_PASSWORD'),
+    };
+
+    beforeEach(function () {
+        cy.visit('/');
+    });
+    it('should be possible to login', () => {
+        cy.getByTestId('header-burgermenu').click();
+        cy.getByTestId('login-button').should('exist');
+    });
+
+    it('should not be able to access templates without login', () => {
+        cy.visit('/templates');
+        cy.getByTestId('authentication-prompt-lock').should('exist');
+    });
+
+    it('should show correct admin user login and icon', () => {
+        cy.keycloakLogin(adminTestUser.login, adminTestUser.password);
+        cy.getByTestId('header-burgermenu').click();
+
+        cy.getByTestId('user-info-box').should('have.text', 'admin@test.com');
+        cy.getByTestId('admin-icon').should('exist');
+        cy.getByTestId('login-button').should('be.not.exist');
+        cy.keycloakLogout();
+    });
+
+    it('should navigate to settings when logged in as admin user', () => {
+        cy.keycloakLogin(adminTestUser.login, adminTestUser.password);
+        cy.getByTestId('header-burgermenu').click();
+
+        cy.getByTestId('settings-menu-icon').should('exist').click();
+        cy.getByTestId('settings-route-page').should('exist');
+        cy.getByTestId('settings-header').should('have.text', 'Settings');
+
+        cy.getByTestId('header-burgermenu').click();
+        cy.keycloakLogout();
+    });
+
+    it('should show correct user login and icon', () => {
+        cy.keycloakLogin(testUser.login, testUser.password);
+        cy.getByTestId('header-burgermenu').click();
+
+        cy.getByTestId('user-info-box').should('have.text', 'user@test.com');
+        cy.getByTestId('user-icon').should('exist');
+        cy.getByTestId('login-button').should('be.not.exist');
+        cy.keycloakLogout();
+    });
+
+    it('should navigate to template when logged in as a user', () => {
+        cy.keycloakLogin(testUser.login, testUser.password);
+
+        cy.visit('/templates');
+        cy.getByTestId('templates-route-page').should('exist');
+        cy.getByTestId('templates-header').should('include.text', 'Templates');
+
+        cy.getByTestId('header-burgermenu').click();
+        cy.keycloakLogout();
+    });
+
+    it('should block settings route when logged in as s user', () => {
+        cy.keycloakLogin(testUser.login, testUser.password);
+
+        cy.visit('/settings');
+        cy.getByTestId('not-allowed-prompt-lock').should('exist');
+
+        cy.getByTestId('header-burgermenu').click();
+        cy.getByTestId('settings-menu-icon').should('not.exist');
+
+        cy.keycloakLogout();
+    });
+});
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -180,3 +180,18 @@ Cypress.Commands.add('deleteThumbnailFromAas', (aasId: string) => {
     const encodedAasId = btoa(aasId).replace(/=+$/g, '');
     cy.repoRequest('DELETE', '/shells/' + encodedAasId + '/asset-information/thumbnail', null);
 });
+
+Cypress.Commands.add('keycloakLogin', (login: string, password: string) => {
+    cy.getByTestId('header-burgermenu').click();
+    cy.getByTestId('login-button').click();
+    cy.origin(Cypress.env('KEYCLOAK_ISSUER'), { args: { login, password } }, ({ login, password }) => {
+        cy.get('#username').invoke('focus').type(login);
+        cy.get('#password').invoke('focus').type(password, { log: false });
+        cy.get('#kc-login').invoke('focus').click();
+    });
+    cy.get('button').click();
+});
+
+Cypress.Commands.add('keycloakLogout', () => {
+    cy.getByTestId('logout-button').click();
+});
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
@@ -119,6 +119,10 @@ declare global {
             uploadThumbnailToAas(aasId: string): Chainable;
 
             deleteThumbnailFromAas(aasId: string): Chainable;
+
+            keycloakLogin(login: string, password: string): Chainable;
+
+            keycloakLogout(): Chainable;
         }
     }
 }
diff --git a/docker-compose/compose.test.yml b/docker-compose/compose.test.yml
@@ -1,7 +1,7 @@
 services:
   cypress-test:
     container_name: cypress-test
-    profiles: ['', 'tests']
+    profiles: [ '', 'tests' ]
     build:
       dockerfile: cypress.dockerfile
     environment:
@@ -12,7 +12,12 @@ services:
       CYPRESS_AAS_DISCOVERY_API_URL: 'http://mnestix-api:5064/discovery'
       MNESTIX_BACKEND_API_KEY: ${MNESTIX_BACKEND_API_KEY:-verySecureApiKey}
       ELECTRON_ENABLE_LOGGING: 1
-      SPLIT: ${SPLIT:-0}
+      TEST_ADMIN_USER_LOGIN: ${TEST_ADMIN_USER_LOGIN:-test_admin}
+      TEST_ADMIN_USER_PASSWORD: ${TEST_ADMIN_USER_PASSWORD:-test_admin}
+      TEST_USER_LOGIN: ${TEST_USER_LOGIN:-test_user}
+      TEST_USER_PASSWORD: ${TEST_USER_PASSWORD:-test_user}
+      KEYCLOAK_ISSUER: 'https://mnestix-keycloak.azurewebsites.net'
+      SPLIT: ${SPLIT:-1}
       SPLIT_INDEX: ${SPLIT_INDEX:-0}
     volumes:
       - ./cypress-artifacts/screenshots:/cypress_Tests/cypress/screenshots
@@ -31,3 +36,9 @@ services:
       SUBMODEL_REPO_API_URL: 'http://mnestix-api:5064/repo'
       DISCOVERY_API_URL: 'http://mnestix-api:5064/discovery'
       MNESTIX_BACKEND_API_URL: 'http://mnestix-api:5064'
+      AUTHENTICATION_FEATURE_FLAG: 'true'
+      NEXTAUTH_URL: 'http://mnestix-browser:3000/'
+      KEYCLOAK_ENABLED: 'true'
+      KEYCLOAK_CLIENT_ID: 'mnestix-cypress-e2e-client'
+      KEYCLOAK_ISSUER: 'https://mnestix-keycloak.azurewebsites.net'
+      KEYCLOAK_REALM: 'Mnestix'
diff --git a/src/app/[locale]/settings/page.tsx b/src/app/[locale]/settings/page.tsx
@@ -52,8 +52,8 @@ export default function Page() {
 
     return (
         <PrivateRoute currentRoute={'/settings'}>
-            <Box sx={{ p: 4, width: '100%', margin: '0 auto' }}>
-                <Box sx={{ mb: 3 }}>
+            <Box sx={{ p: 4, width: '100%', margin: '0 auto' }} data-testid="settings-route-page">
+                <Box sx={{ mb: 3 }} data-testid="settings-header">
                     <ViewHeading title={<FormattedMessage {...messages.mnestix.settings} />} />
                 </Box>
                 <Card sx={{ p: 2 }}>

diff --git a/src/app/[locale]/templates/page.tsx b/src/app/[locale]/templates/page.tsx
@@ -200,8 +200,11 @@ export default function Page() {
 
     return (
         <PrivateRoute currentRoute={'/templates'}>
-            <Box sx={{ p: 3, maxWidth: '1125px', width: '100%', margin: '0 auto' }}>
-                <Box sx={{ mb: 3, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Box sx={{ p: 3, maxWidth: '1125px', width: '100%', margin: '0 auto' }} data-testid="templates-route-page">
+                <Box
+                    sx={{ mb: 3, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
+                    data-testid="templates-header"
+                >
                     <ViewHeading title={<FormattedMessage {...messages.mnestix.templates} />} />
                     <Button
                         variant="contained"

diff --git a/src/components/authentication/AuthenticationPrompt.tsx b/src/components/authentication/AuthenticationPrompt.tsx
@@ -19,7 +19,7 @@ export function AuthenticationPrompt() {
             <Typography variant="h2" sx={{ mb: 2 }} color="primary" align="center">
                 {t('authentication-needed')}
             </Typography>
-            <AuthenticationLock />
+            <AuthenticationLock data-testid="authentication-prompt-lock" />
             <SignInButton />
         </Box>
     );

diff --git a/src/components/authentication/NotAllowedPrompt.tsx b/src/components/authentication/NotAllowedPrompt.tsx
@@ -18,7 +18,7 @@ export function NotAllowedPrompt() {
             <Typography variant="h2" sx={{ mb: 2 }} color="primary" align="center">
                 {t('contactAdmin')}
             </Typography>
-            <AuthenticationLock />
+            <AuthenticationLock data-testid="not-allowed-prompt-lock" />
         </Box>
     );
 }
diff --git a/src/layout/menu/BottomMenu.tsx b/src/layout/menu/BottomMenu.tsx
@@ -17,15 +17,15 @@ export default function BottomMenu(props: { isLoggedIn: boolean; name: string; m
     const guestBottomMenu: MenuListItemProps[] = [
         {
             label: t('login'),
-            icon: <Login />,
+            icon: <Login data-testid="login-button" />,
             onClick: () => auth.login(),
         },
     ];
 
     const loggedInBottomMenu: MenuListItemProps[] = [
         {
             label: t('logout'),
-            icon: <Logout />,
+            icon: <Logout data-testid="logout-button" />,
             onClick: () => auth.logout(),
         },
     ];
@@ -39,9 +39,9 @@ export default function BottomMenu(props: { isLoggedIn: boolean; name: string; m
                         <MenuHeading marginTop={0}>
                             <Box component="span" display="flex" gap={1} data-testid="user-info-box">
                                 {props.mnestixRole === MnestixRole.MnestixAdmin ? (
-                                    <AdminPanelSettings />
+                                    <AdminPanelSettings data-testid="admin-icon" />
                                 ) : (
-                                    <AccountCircle />
+                                    <AccountCircle data-testid="user-icon" />
                                 )}
                                 {props.name}
                             </Box>

diff --git a/src/layout/menu/MainMenu.tsx b/src/layout/menu/MainMenu.tsx
@@ -116,7 +116,7 @@ export default function MainMenu() {
         const settingsMenu = {
             label: t('settings'),
             to: '/settings',
-            icon: <Settings />,
+            icon: <Settings data-testid="settings-menu-icon" />,
         };
         basicMenu.push(settingsMenu);
     }