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

.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:

.testcafe/Data/systemData.js

@@ -1 +0,0 @@
-export const MAIN_PAGE_URL = "http://localhost:9000/";

.testcafe/Data/userData.js

@@ -1,2 +0,0 @@
-export const DEFAULT_USER_EMAIL = "admin@example.com";
-export const DEFAULT_USER_PASSWORD = "admin";

.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"]'
-    );
-  }
-}

.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);
-  }
-}

.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();

.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();
-  });
-}

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
 

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>

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
+}

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/");
+    });
+  });
+});

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]");
+  });
+});

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();
+    }
+  });
+});

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": {
+  "src_dot_configuration_dot_1742602794": {
-    "string": "Attributes and Product Typess"
+    "string": "Attributes and Product Types"
   },
   "src_dot_configuration_dot_2387898569": {
     "string": "Manage external integrations accounts"

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"

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>

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"

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)}

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>

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: [
         {

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}"

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="warehouseEntry"
-              data-test-id="V2FyZWhvdXNlOmEzMThmMGZlLTcwMmYtNDNjYy1hYmFjLWZmZmMzN2Y3ZTliYw=="
+              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="warehouseEntry"
-              data-test-id="V2FyZWhvdXNlOjJmN2UyOTlmLWEwMzMtNDhjZS1iYmM5LTFkZDM4NjU2ZjMwYw=="
+              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="warehouseEntry"
-              data-test-id="V2FyZWhvdXNlOmM0ZmQ3Nzc0LWZlMjYtNDE1YS1hYjk1LWFlYTFjMjI0NTgwNg=="
+              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="warehouseEntry"
-              data-test-id="V2FyZWhvdXNlOmNlMmNiZDhhLWRkYmQtNDhiNS1hM2UxLTNmZGVkZGI5MWZkMg=="
+              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"

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

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)}
       />

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="warehouseEntry"
-              data-test-id={maybe(() => warehouse.id)}
+              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>