test(cypress): add Cypress tests for the dashboard, header and login (#…

…1778) Add header and login cypress tests. Improve login tests. Fixes: canonical/MAAS-squad#2228 Co-authored-by: Caleb Ellis <[email protected]>
canonical · Oct 20, 2020 · 5a088cd · 5a088cd
1 parent af5255e
commit 5a088cd
Show file tree

Hide file tree

Showing 8 changed files with 229 additions and 15 deletions.
diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
@@ -15,17 +15,31 @@ jobs:
           sudo snap install maas-test-db --channel=latest/edge
       - name: Initialise MAAS
         run: sudo maas init region+rack --maas-url=${{env.MAAS_URL}}/MAAS --database-uri maas-test-db:///
-      - name: Create MAAS admin
-        run: sudo maas createadmin --username=admin --password=test [email protected]
+      - name: Install Cypress
+        uses: cypress-io/github-action@master
+        with:
+          runTests: false
       - name: Build shared
         run: |
           sudo apt install yarn
           yarn build-shared
-      - uses: cypress-io/github-action@master
+      - name: Run Cypress tests without a user
+        uses: cypress-io/github-action@master
         with:
-          working-directory: integration
           config: baseUrl=${{env.MAAS_URL}},pageLoadTimeout=100000
+          install: false
+          spec: cypress/integration/no-users/login.spec.ts
+          wait-on: "${{env.MAAS_URL}}/MAAS/r/machines"
+          working-directory: integration
+      - name: Create MAAS admin
+        run: sudo maas createadmin --username=admin --password=test [email protected]
+      - name: Run Cypress tests with a user
+        uses: cypress-io/github-action@master
+        with:
+          config: baseUrl=${{env.MAAS_URL}},pageLoadTimeout=100000,ignoreTestFiles="**/no-users/*"
+          install: false
           wait-on: "${{env.MAAS_URL}}/MAAS/r/machines"
+          working-directory: integration
       - uses: actions/upload-artifact@v1
         if: failure()
         with:

diff --git a/integration/cypress.json b/integration/cypress.json
@@ -1,5 +1,6 @@
 {
   "baseUrl": "http://localhost:8400",
+  "ignoreTestFiles": "**/no-users/*",
   "video": false,
   "projectId": "gp2cox"
 }
diff --git a/integration/cypress/integration/base/footer.spec.ts b/integration/cypress/integration/base/footer.spec.ts
@@ -0,0 +1,40 @@
+import { generateLegacyURL, generateNewURL } from "@maas-ui/maas-ui-shared";
+
+import { login } from "../utils";
+
+declare global {
+  interface Window {
+    usabilla_live: (type: string, trigger: string) => void;
+    lightningjs: () => void;
+  }
+}
+
+context("Footer", () => {
+  beforeEach(() => {
+    login();
+    cy.setCookie("skipintro", "true");
+    cy.visit(generateNewURL("/"));
+  });
+
+  afterEach(() => {
+    cy.clearCookie("skipintro");
+  });
+
+  it("navigates to the local documentation", () => {
+    cy.get(".p-footer__link:contains(Local documentation)").click();
+    cy.location("pathname").should(
+      "eq",
+      "/MAAS/docs/maas-documentation-25.html"
+    );
+  });
+
+  it("has a link to legal", () => {
+    cy.get(".p-footer__link:contains(Legal information)")
+      .should("have.attr", "href")
+      .and("include", "https://www.ubuntu.com/legal");
+  });
+
+  it("displays the feedback link", () => {
+    cy.get(".p-footer__nav a:contains(Give feedback)").should("exist");
+  });
+});
diff --git a/integration/cypress/integration/base/header.spec.ts b/integration/cypress/integration/base/header.spec.ts
@@ -0,0 +1,97 @@
+import { generateLegacyURL, generateNewURL } from "@maas-ui/maas-ui-shared";
+
+import { login } from "../utils";
+
+context("Header", () => {
+  beforeEach(() => {
+    login();
+    // Need the window to be wide enough so that menu items aren't hidden under
+    // the hardware menu.
+    cy.viewport("macbook-13");
+    cy.setCookie("skipintro", "true");
+    cy.visit(generateNewURL("/"));
+  });
+
+  afterEach(() => {
+    cy.clearCookie("skipintro");
+  });
+
+  it("navigates to the dashboard when clicking on the logo", () => {
+    cy.get(".p-navigation__logo .p-navigation__link").click();
+    cy.location("pathname").should("eq", generateLegacyURL("/dashboard"));
+    cy.get(".p-navigation__link.is-selected a").should("not.exist");
+  });
+
+  it("navigates to machines", () => {
+    cy.get(".p-navigation__link a:contains(Machines)").click();
+    cy.location("pathname").should("eq", generateNewURL("/machines"));
+    cy.get(".p-navigation__link.is-selected a").contains("Machines");
+  });
+
+  it("navigates to devices", () => {
+    cy.get(".p-navigation__link a:contains(Devices)").click();
+    cy.location("pathname").should("eq", generateLegacyURL("/devices"));
+    cy.get(".p-navigation__link.is-selected a").contains("Devices");
+  });
+
+  it("navigates to controllers", () => {
+    cy.get(".p-navigation__link a:contains(Controllers)").click();
+    cy.location("pathname").should("eq", generateLegacyURL("/controllers"));
+    cy.get(".p-navigation__link.is-selected a").contains("Controllers");
+  });
+
+  it("navigates to kvm", () => {
+    cy.get(".p-navigation__link a:contains(KVM)").click();
+    cy.location("pathname").should("eq", generateNewURL("/kvm"));
+    cy.get(".p-navigation__link.is-selected a").contains("KVM");
+  });
+
+  it("navigates to rsd", () => {
+    cy.get(".p-navigation__link a:contains(RSD)").click();
+    cy.location("pathname").should("eq", generateNewURL("/rsd"));
+    cy.get(".p-navigation__link.is-selected a").contains("RSD");
+  });
+
+  it("navigates to images", () => {
+    cy.get(".p-navigation__link a:contains(Images)").click();
+    cy.location("pathname").should("eq", generateLegacyURL("/images"));
+    cy.get(".p-navigation__link.is-selected a").contains("Images");
+  });
+
+  it("navigates to domains", () => {
+    cy.get(".p-navigation__link a:contains(DNS)").click();
+    cy.location("pathname").should("eq", generateLegacyURL("/domains"));
+    cy.get(".p-navigation__link.is-selected a").contains("DNS");
+  });
+
+  it("navigates to zones", () => {
+    cy.get(".p-navigation__link a:contains(AZs)").click();
+    cy.location("pathname").should("eq", generateLegacyURL("/zones"));
+    cy.get(".p-navigation__link.is-selected a").contains("AZs");
+  });
+
+  it("navigates to subnets", () => {
+    cy.get(".p-navigation__link a:contains(Subnets)").click();
+    cy.location("pathname").should("eq", generateLegacyURL("/networks"));
+    cy.location("search").should("eq", "?by=fabric");
+    cy.get(".p-navigation__link.is-selected a").contains("Subnets");
+  });
+
+  it("navigates to settings", () => {
+    cy.get(".p-navigation__link a:contains(Settings)").click();
+    cy.location("pathname").should(
+      "eq",
+      generateNewURL("/settings/configuration/general")
+    );
+    cy.get(".p-navigation__link.is-selected a").contains("Settings");
+  });
+
+  it("navigates to preferences", () => {
+    cy.get(".p-navigation__link a:contains(admin)").click();
+    cy.location("pathname").should(
+      "eq",
+      generateNewURL("/account/prefs/details")
+    );
+    cy.get(".p-navigation__link.is-selected a").contains("admin");
+  });
+});
diff --git a/integration/cypress/integration/legacy/dashboard.spec.ts b/integration/cypress/integration/legacy/dashboard.spec.ts
@@ -0,0 +1,28 @@
+import { generateLegacyURL } from "@maas-ui/maas-ui-shared";
+
+import { login } from "../utils";
+
+context("Dashboard", () => {
+  beforeEach(() => {
+    login();
+    cy.setCookie("skipintro", "true");
+  });
+
+  afterEach(() => {
+    cy.clearCookie("skipintro");
+  });
+
+  it("renders the correct heading", () => {
+    cy.visit(generateLegacyURL("/dashboard"));
+    cy.get(".page-header__title").contains("Network discovery");
+  });
+
+  it("displays the discoveries tab by default", () => {
+    cy.get(".p-table--network-discovery").should("exist");
+  });
+
+  it("can display the configuration tab", () => {
+    cy.get(".p-tabs__item:contains(Configuration)").click();
+    cy.get(".p-form__label:contains(Discovery enabled)").should("exist");
+  });
+});
diff --git a/integration/cypress/integration/login/login.spec.ts b/integration/cypress/integration/login/login.spec.ts
@@ -1,10 +1,15 @@
-import { generateNewURL } from "@maas-ui/maas-ui-shared";
+import { generateLegacyURL, generateNewURL } from "@maas-ui/maas-ui-shared";
 
 context("Login page", () => {
   beforeEach(() => {
     cy.visit(generateNewURL("/"));
   });
 
+  afterEach(() => {
+    cy.clearCookie("skipintro");
+    cy.clearCookie("skipsetupintro");
+  });
+
   it("is disabled by default", () => {
     cy.get("button").should("have.attr", "disabled", "disabled");
   });
@@ -35,7 +40,24 @@ context("Login page", () => {
     cy.get(".p-notification--negative").should("exist");
   });
 
+  it("logs in and redirects to the intro", () => {
+    cy.get("input[name='username']").type("admin");
+    cy.get("input[name='password']").type("test");
+    cy.get("button[type='submit']").click();
+    cy.location("pathname").should("eq", generateLegacyURL("/intro"));
+  });
+
+  it("logs in and redirects to the user intro", () => {
+    // Skip the first intro.
+    cy.setCookie("skipsetupintro", "true");
+    cy.get("input[name='username']").type("admin");
+    cy.get("input[name='password']").type("test");
+    cy.get("button[type='submit']").click();
+    cy.location("pathname").should("eq", generateLegacyURL("/intro/user"));
+  });
+
   it("logs in and redirects to the machine list", () => {
+    cy.setCookie("skipintro", "true");
     cy.get("button").should("have.attr", "disabled", "disabled");
     cy.get("input[name='username']").type("admin");
     cy.get("input[name='password']").type("test");

diff --git a/integration/cypress/integration/no-users/login.spec.ts b/integration/cypress/integration/no-users/login.spec.ts
@@ -0,0 +1,8 @@
+import { generateNewURL } from "@maas-ui/maas-ui-shared";
+
+context("Login without users", () => {
+  it("shows a create admin message", () => {
+    cy.visit(generateNewURL("/"));
+    cy.get(".p-card__title").contains("No admin user has been created yet");
+  });
+});
diff --git a/ui/src/app/App.js b/ui/src/app/App.js
@@ -38,6 +38,7 @@ export const App = () => {
   const connecting = useSelector(status.connecting);
   const connectionError = useSelector(status.error);
   const analyticsEnabled = useSelector(configSelectors.analyticsEnabled);
+  const configLoaded = useSelector(configSelectors.loaded);
   const authLoading = useSelector(authSelectors.loading);
   const navigationOptions = useSelector(generalSelectors.navigationOptions.get);
   const version = useSelector(generalSelectors.version.get);
@@ -69,17 +70,20 @@ export const App = () => {
     }
   }, [dispatch, connected]);
 
-  // the skipintro cookie is set by Cypress to make integration testing easier
-  const skipIntro = getCookie("skipintro");
-  if (!skipIntro) {
-    // Explicitly check that completedIntro is false so that it doesn't redirect
-    // if the config isn't defined yet.
-    if (completedIntro === false) {
-      navigateToLegacy("/intro");
-    } else if (authUser && !authUser.completed_intro) {
-      navigateToLegacy("/intro/user");
+  useEffect(() => {
+    // the skipintro cookie is set by Cypress to make integration testing easier
+    const skipIntro = getCookie("skipintro");
+    const skipSetupIntro = getCookie("skipsetupintro");
+    if (!skipIntro && configLoaded) {
+      // Explicitly check that completedIntro is false so that it doesn't redirect
+      // if the config isn't defined yet.
+      if (configLoaded && !completedIntro && !skipSetupIntro) {
+        navigateToLegacy("/intro");
+      } else if (authUser && !authUser.completed_intro) {
+        navigateToLegacy("/intro/user");
+      }
     }
-  }
+  }, [authUser, completedIntro, configLoaded]);
 
   let content;
   if (authLoading || connecting || authenticating) {