Move from test cafe to Cypress (#584)

* Typo * Add cypress config * Login and logout tests * Typo * Add basic test for warehouse * Wrong password test * Fixes and docs * Remove testcafe * Add gh action * Update changelog * Fix typo * Update msgs * Work on GH action * Record artifacts * Fix warehouse test
2020-07-20 11:42:44 +02:00 · 2020-07-20 11:42:44 +02:00 · c778c200ed
commit c778c200ed
parent 38e790a4dd
26 changed files with 961 additions and 2205 deletions
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -71,6 +71,26 @@ jobs:
        run: |
          npm run test

+  cypress-run:
+    runs-on: ubuntu-16.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        env:
+          API_URI: https://pwa.demo.saleor.rocks/graphql/
+        with:
+          start: |
+            npm start
+          wait-on: http://localhost:9000/
+          wait-on-timeout: 120
+      - uses: actions/upload-artifact@v1
+        if: always()
+        with:
+          name: cypress-videos
+          path: cypress/videos
+
  translation-messages:
    runs-on: ubuntu-latest
    steps:
--- a/.testcafe/Data/systemData.js
+++ b/.testcafe/Data/systemData.js
@ -1 +0,0 @@
-export const MAIN_PAGE_URL = "http://localhost:9000/";
--- a/.testcafe/Data/userData.js
+++ b/.testcafe/Data/userData.js
@ -1,2 +0,0 @@
-export const DEFAULT_USER_EMAIL = "admin@example.com";
-export const DEFAULT_USER_PASSWORD = "admin";
--- a/.testcafe/Models/homePageModel.js
+++ b/.testcafe/Models/homePageModel.js
@ -1,11 +0,0 @@
-import { Selector, t } from "testcafe";
-
-export default class HomePage {
-  constructor() {
-    this.header = Selector('[data-test="home-header"]');
-    this.catalogMenu = Selector('[data-test="Catalog"]');
-    this.productsSubMenu = Selector(
-      '[data-test="catalogue"]>[aria-label="products"]'
-    );
-  }
-}
--- a/.testcafe/Models/loginPageModel.js
+++ b/.testcafe/Models/loginPageModel.js
@ -1,16 +0,0 @@
-import { Selector, t } from "testcafe";
-
-export default class LoginPage {
-  constructor() {
-    this.email = Selector('[data-test="email"]');
-    this.password = Selector('[data-test="password"]');
-    this.submitButton = Selector('[data-test="submit"]');
-  }
-
-  async performLogin(putEmail, putPassword) {
-    await t
-      .typeText(this.email, putEmail)
-      .typeText(this.password, putPassword)
-      .click(this.submitButton);
-  }
-}
--- a/.testcafe/Tests/loginPageTests.js
+++ b/.testcafe/Tests/loginPageTests.js
@ -1,7 +0,0 @@
-import * as verifier from "../Verifications/loginPageVerifications";
-import { MAIN_PAGE_URL } from "../Data/systemData";
-
-fixture`Login Tests`.page(MAIN_PAGE_URL);
-
-verifier.verifyEmailAndPasswordDisplayed();
-verifier.verifyIfUserCanLogin();
--- a/.testcafe/Verifications/loginPageVerifications.js
+++ b/.testcafe/Verifications/loginPageVerifications.js
@ -1,20 +0,0 @@
-import LoginPage from "../Models/loginPageModel";
-import HomePage from "../Models/homePageModel";
-import { DEFAULT_USER_EMAIL, DEFAULT_USER_PASSWORD } from "../Data/userData";
-
-const loginPage = new LoginPage();
-const homePage = new HomePage();
-
-export function verifyEmailAndPasswordDisplayed() {
-  test("Verify that Email and Password are displayed", async t => {
-    await t.expect(loginPage.email.exists).ok();
-    await t.expect(loginPage.password.exists).ok();
-  });
-}
-
-export function verifyIfUserCanLogin() {
-  test("PerformLogin", async t => {
-    await loginPage.performLogin(DEFAULT_USER_EMAIL, DEFAULT_USER_PASSWORD);
-    await t.expect(homePage.header.exists).ok();
-  });
-}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -11,6 +11,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Handle task failure and fix task duplication - #588 by @dominik-zeglen
 - Move fragments to separate directory to avoid circular imports - #592 by @dominik-zeglen
 - Add order invoices management - #570 by @orzechdev
+- Add Cypress e2e runner - #584 by @krzysztofwolski

 ## 2.10.1

--- a/assets/images/login-background.svg
+++ b/assets/images/login-background.svg
@ -95,7 +95,7 @@
 <stop stop-color="#412D79"/>
 <stop offset="1" stop-color="#1988BE"/>
 </linearGradient>
-<linearGradient id="paint6_linear" x1="-nan" y1="-nan" x2="-nan" y2="-nan" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint6_linear" x1="-99999" y1="-99999" x2="-99999" y2="-99999" gradientUnits="userSpaceOnUse">
 <stop stop-color="white" stop-opacity="0"/>
 <stop offset="1" stop-color="white"/>
 </linearGradient>
@ -115,7 +115,7 @@
 <stop stop-color="white" stop-opacity="0"/>
 <stop offset="1" stop-color="#0DB3B1"/>
 </linearGradient>
-<linearGradient id="paint11_linear" x1="-nan" y1="-nan" x2="-nan" y2="-nan" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint11_linear" x1="-99999" y1="-99999" x2="-99999" y2="-99999" gradientUnits="userSpaceOnUse">
 <stop stop-color="white" stop-opacity="0"/>
 <stop offset="1" stop-color="white"/>
 </linearGradient>
--- a/cypress.json
+++ b/cypress.json
@ -0,0 +1,10 @@
+{
+  "baseUrl": "http://localhost:9000",
+  "env": {
+    "API_URI": "https://pwa.demo.saleor.rocks/graphql/"
+  },
+  "defaultCommandTimeout": 15000,
+  "requestTimeout": 15000,
+  "viewportWidth": 1400,
+  "viewportHeight": 660
+}
--- a/cypress/integration/login_form.js
+++ b/cypress/integration/login_form.js
@ -0,0 +1,35 @@
+// <reference types="cypress" />
+describe("User authorization", () => {
+  beforeEach(() => {
+    cy.clearSessionData();
+  });
+
+  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");
+    });
+
+    it("should fail for wrong password", () => {
+      cy.visit("/");
+      cy.loginUser("admin@example.com", "wrong-password");
+      cy.get("[data-test=loginErrorMessage]");
+    });
+  });
+
+  describe("Logout", () => {
+    it("should successfully log out an user", () => {
+      cy.window().then(win => {
+        win.sessionStorage.clear();
+      });
+      cy.visit("/");
+      cy.loginUser("admin@example.com", "admin");
+      cy.get("[data-test=userMenu]")
+        .click()
+        .get("[data-test=accountSettingsButton]")
+        .click();
+      cy.location("pathname").should("contains", "/staff/");
+    });
+  });
+});
--- a/cypress/integration/warehouse.js
+++ b/cypress/integration/warehouse.js
@ -0,0 +1,26 @@
+// <reference types="cypress" />
+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", () => {
+    cy.visit("/configuration/")
+      .get("[data-testid=warehouses][data-test=settingsSubsection]")
+      .click();
+    cy.location("pathname").should("eq", "/warehouses/");
+  });
+
+  it("Editing warehouse is available", () => {
+    cy.visit(`/warehouses`)
+      .get("[data-testid=defaultwarehouse]")
+      .get("[data-test=editButton]")
+      .first()
+      .click()
+      .get("[data-test=generalInformationSection]");
+  });
+});
--- a/cypress/support/index.js
+++ b/cypress/support/index.js
@ -0,0 +1,27 @@
+Cypress.Commands.add("loginUser", (email, password) =>
+  cy
+    .get("input[name='email']")
+    .type(email)
+    .get("input[name='password']")
+    .type(password)
+    .get("[data-test=submit]")
+    .click()
+);
+
+Cypress.Commands.add("clearSessionData", () => {
+  // Because of known cypress bug, not all local storage data are cleared.
+  // Here is workaround to ensure tests have no side effects.
+  // Suggested usage:
+
+  // beforeEach(() => {
+  //   cy.clearSessionData();
+  // });
+
+  cy.clearCookies();
+  cy.clearLocalStorage();
+  cy.visit("/", {
+    onBeforeLoad: win => {
+      win.sessionStorage.clear();
+    }
+  });
+});
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@ -1445,8 +1445,8 @@
  "src_dot_configuration_dot_1639245766": {
    "string": "View and update your webhook and their settings"
  },
-  "src_dot_configuration_dot_2326418019": {
-    "string": "Attributes and Product Typess"
+  "src_dot_configuration_dot_1742602794": {
+    "string": "Attributes and Product Types"
  },
  "src_dot_configuration_dot_2387898569": {
    "string": "Manage external integrations accounts"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -115,6 +115,7 @@
    "codecov": "^3.6.5",
    "core-js": "^3.5.0",
    "cross-env": "^6.0.3",
+    "cypress": "^4.9.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "enzyme-to-json": "^3.3.5",
@ -138,7 +139,7 @@
    "regenerator-runtime": "^0.11.1",
    "require-context.macro": "^1.1.1",
    "rimraf": "^3.0.0",
-    "testcafe": "^1.3.3",
+    "start-server-and-test": "^1.11.0",
    "ts-jest": "^24.2.0",
    "tsconfig-paths-webpack-plugin": "^3.2.0",
    "webpack": "^4.35.3",
@ -200,7 +201,12 @@
    "serve:lhci": "NODE_ENV=production npm run server",
    "start": "webpack-dev-server -d",
    "storybook": "start-storybook -p 3000 -c src/storybook/",
-    "test-e2e": "testcafe 'chrome:headless' .testcafe",
+    "cy:run": "cypress run",
+    "cy:run:record": "npm run cy:run -- --record",
+    "cy:open": "cypress open",
+    "test:e2e:run": "start-server-and-test start http://localhost:9000 cy:run",
+    "test:e2e:run:record": "start-server-and-test start http://localhost:9000 cy:run:record",
+    "test:e2e:dev": "start-server-and-test start http://localhost:9000 cy:open",
    "test": "jest src/",
    "transpile-messages": "node scripts/transpile-tx.js",
    "lint": "npx eslint \"src/**/*.@(tsx|ts|jsx|js)\" --fix ; npx prettier --check \"src/**/*.@(tsx|ts|jsx|js)\" --write"
--- a/src/auth/components/LoginPage/LoginPage.tsx
+++ b/src/auth/components/LoginPage/LoginPage.tsx
@ -67,7 +67,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
      {({ change: handleChange, data, submit: handleSubmit }) => (
        <>
          {error && (
-            <div className={classes.panel}>
+            <div className={classes.panel} data-test="loginErrorMessage">
              <Typography variant="caption">
                <FormattedMessage defaultMessage="Sorry, your username and/or password are incorrect. Please try again." />
              </Typography>
--- a/src/components/AppLayout/AppLayout.tsx
+++ b/src/components/AppLayout/AppLayout.tsx
@ -451,6 +451,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                            </>
                          }
                          onClick={() => setMenuState(!isMenuOpened)}
+                          data-test="userMenu"
                        />
                        <Popper
                          className={classes.popover}
@ -478,6 +479,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                                    <MenuItem
                                      className={classes.userMenuItem}
                                      onClick={handleViewerProfile}
+                                      data-test="accountSettingsButton"
                                    >
                                      <FormattedMessage
                                        defaultMessage="Account Settings"
@ -487,6 +489,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                                    <MenuItem
                                      className={classes.userMenuItem}
                                      onClick={handleLogout}
+                                      data-test="logOutButton"
                                    >
                                      <FormattedMessage
                                        defaultMessage="Log out"
--- a/src/components/AppLayout/MenuList.tsx
+++ b/src/components/AppLayout/MenuList.tsx
@ -193,7 +193,7 @@ const MenuList: React.FC<MenuListProps> = props => {
  });
  const intl = useIntl();

-  const configutationMenu = createConfigurationMenu(intl).map(menu => {
+  const configurationMenu = createConfigurationMenu(intl).map(menu => {
    menu.menuItems.map(item =>
      user.userPermissions.map(perm => perm.code).includes(item.permission)
    );
@ -224,6 +224,7 @@ const MenuList: React.FC<MenuListProps> = props => {
      className={classNames(className, {
        [classes.menuIsActive]: activeSubMenu.isActive
      })}
+      data-test="mainMenu"
    >
      {/* FIXME: this .split("?")[0] looks gross */}
      {menuItems.map(menuItem => {
@ -257,6 +258,7 @@ const MenuList: React.FC<MenuListProps> = props => {
                [classes.menuListItemActive]: isAnyChildActive
              })}
              key={menuItem.label}
+              data-testid={menuItem.label.toLowerCase()}
            >
              <div
                className={classNames(classes.menuItemHover, {
@ -332,7 +334,7 @@ const MenuList: React.FC<MenuListProps> = props => {
          </a>
        );
      })}
-      {renderConfigure && configutationMenu.length > 0 && (
+      {renderConfigure && configurationMenu.length > 0 && (
        <a
          className={classes.menuListItem}
          href={createHref(configurationMenuUrl)}
--- a/src/configuration/ConfigurationPage.tsx
+++ b/src/configuration/ConfigurationPage.tsx
@ -126,6 +126,8 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
                    className={item.url ? classes.card : classes.cardDisabled}
                    onClick={() => onSectionClick(item.url)}
                    key={itemIndex}
+                    data-test="settingsSubsection"
+                    data-testid={item.title.toLowerCase()}
                  >
                    <CardContent className={classes.cardContent}>
                      <div className={classes.icon}>{item.icon}</div>
--- a/src/configuration/index.tsx
+++ b/src/configuration/index.tsx
@ -39,7 +39,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
  return [
    {
      label: intl.formatMessage({
-        defaultMessage: "Attributes and Product Typess"
+        defaultMessage: "Attributes and Product Types"
      }),
      menuItems: [
        {
--- a/src/home/components/HomeHeader/HomeHeader.tsx
+++ b/src/home/components/HomeHeader/HomeHeader.tsx
@ -30,7 +30,11 @@ const HomeOrdersCard: React.FC<HomeOrdersCardProps> = props => {

  return (
    <div className={classes.headerContainer} data-test="home-header">
-      <Typography className={classes.pageHeader} variant="h4">
+      <Typography
+        className={classes.pageHeader}
+        variant="h4"
+        data-test="welcomeHeader"
+      >
        {userName ? (
          <FormattedMessage
            defaultMessage="Hello there, {userName}"
--- a/src/storybook/snapshots/Stories.test.ts.snap
+++ b/src/storybook/snapshots/Stories.test.ts.snap
@ -15338,6 +15338,7 @@ exports[`Storyshots Views / Authentication / Log in error 1`] = `
      <form>
        <div
          class="LoginCard-panel-id"
+          data-test="loginErrorMessage"
        >
          <div
            class="MuiTypography-root-id MuiTypography-caption-id"
@ -34965,7 +34966,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
-          Attributes and Product Typess
+          Attributes and Product Types
        </div>
      </div>
      <div
@ -34973,6 +34974,8 @@ exports[`Storyshots Views / Configuration default 1`] = `
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="attributes"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35011,6 +35014,8 @@ exports[`Storyshots Views / Configuration default 1`] = `
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="product types"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35066,6 +35071,8 @@ exports[`Storyshots Views / Configuration default 1`] = `
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="taxes"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35121,6 +35128,8 @@ exports[`Storyshots Views / Configuration default 1`] = `
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="staff members"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35159,6 +35168,8 @@ exports[`Storyshots Views / Configuration default 1`] = `
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="permission groups"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35214,6 +35225,8 @@ exports[`Storyshots Views / Configuration default 1`] = `
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="shipping methods"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35252,6 +35265,8 @@ exports[`Storyshots Views / Configuration default 1`] = `
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="warehouses"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35307,6 +35322,8 @@ exports[`Storyshots Views / Configuration default 1`] = `
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="navigation"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35345,6 +35362,8 @@ exports[`Storyshots Views / Configuration default 1`] = `
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="site settings"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35383,6 +35402,8 @@ exports[`Storyshots Views / Configuration default 1`] = `
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="pages"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35421,6 +35442,8 @@ exports[`Storyshots Views / Configuration default 1`] = `
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="plugins"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35462,6 +35485,8 @@ exports[`Storyshots Views / Configuration default 1`] = `
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="service accounts"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35500,6 +35525,8 @@ exports[`Storyshots Views / Configuration default 1`] = `
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="webhooks"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35574,7 +35601,7 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
-          Attributes and Product Typess
+          Attributes and Product Types
        </div>
      </div>
      <div
@ -35582,6 +35609,8 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="attributes"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35620,6 +35649,8 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="product types"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35675,6 +35706,8 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="taxes"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35730,6 +35763,8 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="warehouses"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35785,6 +35820,8 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
      >
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="site settings"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -35823,6 +35860,8 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-rounded-id"
+          data-test="settingsSubsection"
+          data-testid="pages"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
@ -57931,6 +57970,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
    >
      <div
        class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
+        data-test="welcomeHeader"
      >
        Hello there, admin@example.com
      </div>
@ -58590,6 +58630,7 @@ exports[`Storyshots Views / HomePage loading 1`] = `
    >
      <div
        class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
+        data-test="welcomeHeader"
      >
        <span
          class="Skeleton-skeleton-id"
@ -58972,6 +59013,7 @@ exports[`Storyshots Views / HomePage no data 1`] = `
    >
      <div
        class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
+        data-test="welcomeHeader"
      >
        Hello there, admin@example.com
      </div>
@ -59294,6 +59336,7 @@ exports[`Storyshots Views / HomePage no permissions 1`] = `
    >
      <div
        class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
+        data-test="welcomeHeader"
      >
        Hello there, admin@example.com
      </div>
@ -59348,6 +59391,7 @@ exports[`Storyshots Views / HomePage order permissions 1`] = `
    >
      <div
        class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
+        data-test="welcomeHeader"
      >
        Hello there, admin@example.com
      </div>
@ -59891,6 +59935,7 @@ exports[`Storyshots Views / HomePage product permissions 1`] = `
    >
      <div
        class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
+        data-test="welcomeHeader"
      >
        Hello there, admin@example.com
      </div>
@ -153681,6 +153726,7 @@ exports[`Storyshots Views / Warehouses / Create warehouse default 1`] = `
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="generalInformationSection"
          >
            <div
              class="CardTitle-root-id"
@ -154137,6 +154183,7 @@ exports[`Storyshots Views / Warehouses / Create warehouse form errors 1`] = `
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="generalInformationSection"
          >
            <div
              class="CardTitle-root-id"
@ -154638,6 +154685,7 @@ exports[`Storyshots Views / Warehouses / Create warehouse loading 1`] = `
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="generalInformationSection"
          >
            <div
              class="CardTitle-root-id"
@ -155103,6 +155151,7 @@ exports[`Storyshots Views / Warehouses / Warehouse details default 1`] = `
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="generalInformationSection"
          >
            <div
              class="CardTitle-root-id"
@ -155632,6 +155681,7 @@ exports[`Storyshots Views / Warehouses / Warehouse details form errors 1`] = `
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="generalInformationSection"
          >
            <div
              class="CardTitle-root-id"
@ -156211,6 +156261,7 @@ exports[`Storyshots Views / Warehouses / Warehouse details loading 1`] = `
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+            data-test="generalInformationSection"
          >
            <div
              class="CardTitle-root-id"
@ -156965,8 +157016,8 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
          >
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="V2FyZWhvdXNlOmEzMThmMGZlLTcwMmYtNDNjYy1hYmFjLWZmZmMzN2Y3ZTliYw=="
+              data-test="warehouseEntry"
+              data-testid="cour wares"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
@ -156988,6 +157039,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
                >
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                    data-test="editButton"
                    tabindex="0"
                    type="button"
                  >
@ -157033,8 +157085,8 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="V2FyZWhvdXNlOjJmN2UyOTlmLWEwMzMtNDhjZS1iYmM5LTFkZDM4NjU2ZjMwYw=="
+              data-test="warehouseEntry"
+              data-testid="bestocked"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
@ -157056,6 +157108,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
                >
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                    data-test="editButton"
                    tabindex="0"
                    type="button"
                  >
@ -157101,8 +157154,8 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="V2FyZWhvdXNlOmM0ZmQ3Nzc0LWZlMjYtNDE1YS1hYjk1LWFlYTFjMjI0NTgwNg=="
+              data-test="warehouseEntry"
+              data-testid="awarehouse"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
@ -157124,6 +157177,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
                >
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                    data-test="editButton"
                    tabindex="0"
                    type="button"
                  >
@ -157169,8 +157223,8 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="V2FyZWhvdXNlOmNlMmNiZDhhLWRkYmQtNDhiNS1hM2UxLTNmZGVkZGI5MWZkMg=="
+              data-test="warehouseEntry"
+              data-testid="darkwares"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
@ -157192,6 +157246,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
                >
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                    data-test="editButton"
                    tabindex="0"
                    type="button"
                  >
@ -157530,7 +157585,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list loading 1`] = `
          >
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id"
-              data-test="id"
+              data-test="warehouseEntry"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
@ -157560,6 +157615,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list loading 1`] = `
                >
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                    data-test="editButton"
                    tabindex="0"
                    type="button"
                  >
@ -157897,6 +157953,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list no data 1`] = `
          >
            <tr
              class="MuiTableRow-root-id"
+              data-test="emptyListMessage"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
--- a/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx
+++ b/src/warehouses/components/WarehouseDetailsPage/WarehouseDetailsPage.tsx
@ -89,7 +89,7 @@ const WarehouseDetailsPage: React.FC<WarehouseDetailsPageProps> = ({
            <AppHeader onBack={onBack}>
              <FormattedMessage {...sectionNames.warehouses} />
            </AppHeader>
-            <PageHeader title={maybe(() => warehouse.name)} />
+            <PageHeader title={warehouse?.name} />
            <Grid>
              <div>
                <WarehouseInfo
--- a/src/warehouses/components/WarehouseInfo/WarehouseInfo.tsx
+++ b/src/warehouses/components/WarehouseInfo/WarehouseInfo.tsx
@ -28,7 +28,7 @@ const WarehouseInfo: React.FC<WarehouseInfoProps> = ({
  const formErrors = getFormErrors(["name"], errors);

  return (
-    <Card>
+    <Card data-test="generalInformationSection">
      <CardTitle
        title={intl.formatMessage(commonMessages.generalInformations)}
      />
--- a/src/warehouses/components/WarehouseList/WarehouseList.tsx
+++ b/src/warehouses/components/WarehouseList/WarehouseList.tsx
@ -83,7 +83,7 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
  const classes = useStyles(props);

  return (
-    <ResponsiveTable>
+    <ResponsiveTable data-test="warehouseList">
      <TableHead>
        <TableRow>
          <TableCellHeader
@ -130,8 +130,8 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
              hover={!!warehouse}
              onClick={warehouse ? onRowClick(warehouse.id) : undefined}
              key={warehouse ? warehouse.id : "skeleton"}
-              data-test="id"
-              data-test-id={maybe(() => warehouse.id)}
+              data-test="warehouseEntry"
+              data-testid={warehouse?.name.toLowerCase().replace(" ", "")}
            >
              <TableCell className={classes.colName} data-test="name">
                {maybe<React.ReactNode>(() => warehouse.name, <Skeleton />)}
@ -147,7 +147,7 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
              </TableCell>
              <TableCell className={classes.colActions}>
                <div className={classes.actions}>
-                  <IconButton color="primary">
+                  <IconButton color="primary" data-test="editButton">
                    <EditIcon />
                  </IconButton>
                  <IconButton
@ -161,7 +161,7 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
            </TableRow>
          ),
          () => (
-            <TableRow>
+            <TableRow data-test="emptyListMessage">
              <TableCell colSpan={numberOfColumns}>
                <FormattedMessage defaultMessage="No warehouses found" />
              </TableCell>
				`@ -1 +0,0 @@`
				`export const MAIN_PAGE_URL = "http://localhost:9000/";`