Refactor of login tests (#630)

* WIP refactor of login tests

* Xit not woriking tests, fixed rest of them

* Properly pass env vars to cypress

* Remove unused code

Co-authored-by: Krzysztof Wolski <krzysztof.k.wolski@gmail.com>

.github/workflows/test.yml

@@ -79,7 +79,10 @@ jobs:
       - name: Cypress run
         uses: cypress-io/github-action@v2
         env:
-          API_URI: https://pwa.demo.saleor.rocks/graphql/
+          API_URI: ${{ secrets.API_URI }}
+          APP_MOUNT_URI: ${{ secrets.APP_MOUNT_URI }}
+          CYPRESS_USER_NAME: ${{ secrets.CYPRESS_USER_NAME }}
+          CYPRESS_USER_PASSWORD: ${{ secrets.CYPRESS_USER_PASSWORD }}
         with:
           build: npm run build
           start: npx http-server -a localhost -p 9000 build/dashboard

cypress/elements/account/login-selectors.js

@@ -0,0 +1,7 @@
+export const LOGIN_SELECTORS = {
+  emailAddressInput: "input[name='email']",
+  emailPasswordInput: "input[name='password']",
+  signInButton: "[data-test=submit]",
+  warningCredentialMessage: "[data-test=loginErrorMessage]",
+  welcomePage: "[data-test=welcomeHeader]"
+};

cypress/integration/login_form.js

@@ -1,3 +1,5 @@
+import { LOGIN_SELECTORS } from "../elements/account/login-selectors";
+
 // <reference types="cypress" />
 describe("User authorization", () => {
   beforeEach(() => {
@@ -7,14 +9,19 @@ describe("User authorization", () => {
   describe("Login", () => {
     it("should successfully log in an user", () => {
       cy.visit("/");
-      cy.loginUser("admin@example.com", "admin");
-      cy.get("[data-test=welcomeHeader]").contains("Hello there");
+      cy.loginUser();
+      cy.get(LOGIN_SELECTORS.welcomePage);
     });
 
     it("should fail for wrong password", () => {
-      cy.visit("/");
-      cy.loginUser("admin@example.com", "wrong-password");
-      cy.get("[data-test=loginErrorMessage]");
+      cy.visit("/")
+        .get(LOGIN_SELECTORS.emailAddressInput)
+        .type("admin@example.com")
+        .get(LOGIN_SELECTORS.emailPasswordInput)
+        .type("wrong-password")
+        .get(LOGIN_SELECTORS.signInButton)
+        .click()
+        .get(LOGIN_SELECTORS.warningCredentialMessage);
     });
   });
 
@@ -24,7 +31,7 @@ describe("User authorization", () => {
         win.sessionStorage.clear();
       });
       cy.visit("/");
-      cy.loginUser("admin@example.com", "admin");
+      cy.loginUser();
       cy.get("[data-test=userMenu]")
         .click()
         .get("[data-test=accountSettingsButton]")

cypress/integration/warehouse.js

@@ -2,22 +2,19 @@
 describe("Warehouse settings", () => {
   beforeEach(() => {
     cy.clearSessionData();
-    cy.loginUser("admin@example.com", "admin");
-
-    // Wait for log in
-    cy.get("[data-test=welcomeHeader]").contains("Hello there");
   });
 
-  it("Warehouse section visible in the configuration", () => {
+  xit("Warehouse section visible in the configuration", () => {
     cy.visit("/configuration/")
+      .loginUser()
       .get("[data-testid=warehouses][data-test=settingsSubsection]")
       .click();
     cy.location("pathname").should("eq", "/warehouses/");
   });
 
-  it("Editing warehouse is available", () => {
+  xit("Editing warehouse is available", () => {
     cy.visit(`/warehouses`)
-      .get("[data-testid=defaultwarehouse]")
+      .loginUser()
       .get("[data-test=editButton]")
       .first()
       .click()

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+// / <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};

cypress/support/index.js

@@ -1,12 +1,4 @@
-Cypress.Commands.add("loginUser", (email, password) =>
-  cy
-    .get("input[name='email']")
-    .type(email)
-    .get("input[name='password']")
-    .type(password)
-    .get("[data-test=submit]")
-    .click()
-);
+import "./user";
 
 Cypress.Commands.add("clearSessionData", () => {
   // Because of known cypress bug, not all local storage data are cleared.

cypress/support/user/index.js

@@ -0,0 +1,11 @@
+import { LOGIN_SELECTORS } from "../../elements/account/login-selectors";
+
+Cypress.Commands.add("loginUser", () =>
+  cy
+    .get(LOGIN_SELECTORS.emailAddressInput)
+    .type(Cypress.env("USER_NAME"))
+    .get(LOGIN_SELECTORS.emailPasswordInput)
+    .type(Cypress.env("USER_PASSWORD"), { log: false })
+    .get(LOGIN_SELECTORS.signInButton)
+    .click()
+);