fix navigation from overview page (#11602)

* fix navigation from overview page * cypress tests for overview page * small cleanup * re-usable function for visiting url with feature flag
Altinn · Nov 16, 2023 · 4d90f5e · 4d90f5e
1 parent 3b6eb97
commit 4d90f5e
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 11 deletions.
diff --git a/frontend/app-development/features/administration/components/Navigation.tsx b/frontend/app-development/features/administration/components/Navigation.tsx
@@ -20,7 +20,7 @@ export const Navigation = () => {
       <div className={classes.links}>
         {menuItems.map((menuItem) => {
           return (
-            <Link key={menuItem.key} to={menuItem.link} className={classes.link}>
+            <Link key={menuItem.key} to={`../${menuItem.link}`} className={classes.link}>
               <menuItem.icon className={classes.icon} />
               <span>{t(menuItem.key)}</span>
             </Link>

diff --git a/frontend/testing/cypress/src/integration/studio/overview.js b/frontend/testing/cypress/src/integration/studio/overview.js
@@ -0,0 +1,98 @@
+/// <reference types="cypress" />
+/// <reference types="../../support" />
+
+import * as texts from '../../../../../language/src/nb.json';
+
+const designerAppId = `${Cypress.env('autoTestUser')}/${Cypress.env('designerAppName')}`;
+const orgAppId = `${Cypress.env('orgUserName')}/${Cypress.env('designerAppName')}`;
+const NEW_ADM_FEATURE_FLAG = 'newAdministration';
+
+context('Designer', () => {
+  before(() => {
+    cy.deleteAllApps(Cypress.env('autoTestUser'), Cypress.env('accessToken'));
+    cy.deleteApp(
+      Cypress.env('orgUserName'),
+      Cypress.env('designerAppName'),
+      Cypress.env('accessToken'),
+    );
+    cy.studioLogin(Cypress.env('autoTestUser'), Cypress.env('autoTestUserPwd'));
+    cy.createApp(Cypress.env('autoTestUser'), Cypress.env('designerAppName'));
+    cy.createApp(Cypress.env('orgFullName'), Cypress.env('designerAppName'));
+  });
+  beforeEach(() => {
+    cy.visit('/dashboard');
+  });
+
+  it('loads the overview page when navigating to app for user with no environments', () => {
+    // Ensure feature flag is toggled
+    // TODO: remove this once feature flag is removed (https://github.com/Altinn/altinn-studio/issues/11495)
+    cy.visitWithFeatureFlag('/editor/' + designerAppId, NEW_ADM_FEATURE_FLAG);
+    cy.findByText(Cypress.env('designerAppName')).should('be.visible');
+    cy.findByText(texts['app_publish.no_env_title']).should('be.visible');
+    cy.findByText(texts['administration.navigation_title']).should('be.visible');
+    cy.findByText(texts['administration.documentation.title']).should('be.visible');
+    cy.findByText(texts['administration.news_title']).should('be.visible');
+  });
+
+  it('loads the overview page when navigating to app for org with environments', () => {
+    // Ensure feature flag is toggled
+    // TODO: remove this once feature flag is removed (https://github.com/Altinn/altinn-studio/issues/11495)
+    cy.visitWithFeatureFlag('/editor/' + orgAppId, NEW_ADM_FEATURE_FLAG);
+    cy.findByText(Cypress.env('designerAppName')).should('be.visible');
+    cy.findByRole('heading', { name: 'tt02' }).should('be.visible');
+    cy.findByText(texts['administration.activity']).should('be.visible');
+    cy.findByText(texts['administration.navigation_title']).should('be.visible');
+    cy.findByText(texts['administration.documentation.title']).should('be.visible');
+    cy.findByText(texts['administration.news_title']).should('be.visible');
+  });
+
+  it('should be possible to navigate to the forms builder from overview page', () => {
+    // Ensure feature flag is toggled
+    // TODO: remove this once feature flag is removed (https://github.com/Altinn/altinn-studio/issues/11495)
+    cy.visitWithFeatureFlag('/editor/' + designerAppId, NEW_ADM_FEATURE_FLAG);
+    const navigationContainer = cy.findByText(texts['administration.navigation_title']).parent();
+    navigationContainer
+      .findByRole('link', { name: texts['top_menu.create'] })
+      .should('be.visible')
+      .click();
+    cy.findByText(texts['left_menu.components']).should('be.visible');
+    cy.findByText(texts['ux_editor.no_components_selected']).should('be.visible');
+  });
+
+  it('should be possible to navigate to the data model editor from overview page', () => {
+    // Ensure feature flag is toggled
+    // TODO: remove this once feature flag is removed (https://github.com/Altinn/altinn-studio/issues/11495)
+    cy.visitWithFeatureFlag('/editor/' + designerAppId, NEW_ADM_FEATURE_FLAG);
+    const navigationContainer = cy.findByText(texts['administration.navigation_title']).parent();
+    navigationContainer
+      .findByRole('link', { name: texts['top_menu.datamodel'] })
+      .should('be.visible')
+      .click();
+    cy.findByText(texts['app_data_modelling.landing_dialog_header']).should('be.visible');
+  });
+
+  it('should be possible to navigate to the text editor from overview page', () => {
+    // Ensure feature flag is toggled
+    // TODO: remove this once feature flag is removed (https://github.com/Altinn/altinn-studio/issues/11495)
+    cy.visitWithFeatureFlag('/editor/' + designerAppId, NEW_ADM_FEATURE_FLAG);
+    const navigationContainer = cy.findByText(texts['administration.navigation_title']).parent();
+    navigationContainer
+      .findByRole('link', { name: texts['top_menu.texts'] })
+      .should('be.visible')
+      .click();
+    cy.findByText(texts['text_editor.new_text']).should('be.visible');
+    cy.findByText(texts['text_editor.search_for_text']).should('be.visible');
+  });
+
+  it('should be possible to navigate to the process editor from overview page', () => {
+    // Ensure feature flag is toggled
+    // TODO: remove this once feature flag is removed (https://github.com/Altinn/altinn-studio/issues/11495)
+    cy.visitWithFeatureFlag('/editor/' + designerAppId, NEW_ADM_FEATURE_FLAG);
+    const navigationContainer = cy.findByText(texts['administration.navigation_title']).parent();
+    navigationContainer
+      .findByRole('link', { name: texts['top_menu.process-editor'] })
+      .should('be.visible')
+      .click();
+    cy.findByText(texts['process_editor.edit_mode']).should('be.visible');
+  });
+});
diff --git a/frontend/testing/cypress/src/support/custom.js b/frontend/testing/cypress/src/support/custom.js
@@ -1,10 +1,15 @@
-Cypress.Commands.add(
-  'isVisible',
-  {
-    prevSubject: true,
-  },
-  (subject) => {
-    const isVisible = (elem) => !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
-    expect(isVisible(subject[0])).to.be.true;
-  },
-);
+Cypress.Commands.add('isVisible', { prevSubject: true }, (subject) => {
+  const isVisible = (elem) =>
+    !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
+  expect(isVisible(subject[0])).to.be.true;
+});
+
+/**
+ * Visit a location in Studio with given feature flag toggled on.
+ * @param path The base path to visit
+ * @param featureFlag The feature flag to toggle on
+ * @param persistFeatureFlag Specifies if the feature flag should be persisted on navigation. Defaults to true.
+ */
+Cypress.Commands.add('visitWithFeatureFlag', (path, featureFlag, persistFeatureFlag = true) => {
+  cy.visit(`${path}?featureFlags=${featureFlag}&persistFeatureFlag=${persistFeatureFlag}`);
+});