Saleor 3711 tests for categories and collections (#1204)

* tests for collections

* all tests for categories

cypress/apiRequests/Category.js

@@ -15,6 +15,31 @@ export function createCategory(name, slug = name) {
     .sendRequestWithQuery(mutation)
     .its("body.data.categoryCreate.category");
 }
+
+export function getCategory(categoryId) {
+  const mutation = `query{
+    category(id:"${categoryId}"){
+      name
+      description
+      products{
+        edges{
+          node{
+            name
+          }
+        }
+      }
+      children(first:100){
+        edges{
+          node{
+            name
+          }
+        }
+      }
+    }
+  }`;
+  return cy.sendRequestWithQuery(mutation).its("body.data.category");
+}
+
 export function getCategories(first, search) {
   const mutation = `query{
     categories(first:${first}, filter:{
@@ -32,6 +57,7 @@ export function getCategories(first, search) {
     .sendRequestWithQuery(mutation)
     .then(resp => resp.body.data.categories.edges);
 }
+
 export function deleteCategory(categoryId) {
   const mutation = `mutation{
     categoryDelete(id:"${categoryId}"){

cypress/apiRequests/Product.js

@@ -97,15 +97,11 @@ export function createProduct({
     collectionId,
     `collections:["${collectionId}"]`
   );
+  const category = getValueWithDefault(categoryId, `category:"${categoryId}"`);
   const descriptionLine = getValueWithDefault(
     description,
     `description:"{\\"blocks\\":[{\\"type\\":\\"paragraph\\",\\"data\\":{\\"text\\":\\"${description}\\"}}]}"`
   );
-  const categoryLine = getValueWithDefault(
-    categoryId,
-    `category:"${categoryId}"`
-  );
-
   const mutation = `mutation{
     productCreate(input:{
       attributes:[{
@@ -115,7 +111,7 @@ export function createProduct({
       slug:"${name}"
       seo:{title:"${name}" description:""}
       productType:"${productTypeId}"
-      ${categoryLine}
+      ${category}
       ${collection}
       ${descriptionLine}
     }){

cypress/elements/catalog/categories/categories-list.js

@@ -0,0 +1,3 @@
+export const CATEGORIES_LIST = {
+  addCategoryButton: '[data-test-id="createCategory"]'
+};

cypress/elements/catalog/categories/category-details.js

@@ -0,0 +1,9 @@
+export const CATEGORY_DETAILS = {
+  nameInput: '[name="name"]',
+  descriptionInput: '[data-test-id="description"]',
+  createSubcategoryButton: '[data-test-id="createSubcategory"]',
+  categoryChildrenRow: '[data-test="id"]',
+  productsTab: '[data-test-id="productsTab"]',
+  addProducts: '[data-test-id="addProducts"]',
+  productRow: '[data-test-id="productRow"]'
+};

cypress/elements/shared/sharedElements.js

@@ -4,9 +4,10 @@ export const SHARED_ELEMENTS = {
   circularProgress: '[class*="CircularProgress-circle"]',
   skeleton: '[data-test-id="skeleton"]',
   table: 'table[class*="Table"]',
-  selectOption: '[data-test="selectFieldOption"]',
+  tableRow: '[data-test="id"]',
   confirmationMsg: "[data-test='notification-success']",
-  notificationSuccess: '[data-test="notification-success"]',
+  searchInput: '[data-test-id="searchInput"]',
+  selectOption: '[data-test="selectFieldOption"]',
   richTextEditor: {
     empty: '[class*="codex-editor--empty"]'
   }

cypress/integration/allEnv/categories.js

@@ -0,0 +1,136 @@
+// <reference types="cypress" />
+import faker from "faker";
+
+import { getCategory } from "../../apiRequests/Category";
+import { CATEGORIES_LIST } from "../../elements/catalog/categories/categories-list";
+import { CATEGORY_DETAILS } from "../../elements/catalog/categories/category-details";
+import { BUTTON_SELECTORS } from "../../elements/shared/button-selectors";
+import { SHARED_ELEMENTS } from "../../elements/shared/sharedElements";
+import { createCategory } from "../../steps/categoriesSteps";
+import { confirmationMessageShouldDisappear } from "../../steps/shared/confirmationMessages";
+import { categoryDetails, urlList } from "../../url/urlList";
+import { deleteCategoriesStartsWith } from "../../utils/categoryUtils";
+import * as channelsUtils from "../../utils/channelsUtils";
+import * as productsUtils from "../../utils/products/productsUtils";
+import { deleteShippingStartsWith } from "../../utils/shippingUtils";
+
+describe("Categories", () => {
+  const startsWith = "CyCollections";
+  const name = `${startsWith}${faker.datatype.number()}`;
+
+  let attribute;
+  let category;
+  let productType;
+  let product;
+
+  let defaultChannel;
+
+  before(() => {
+    cy.clearSessionData().loginUserViaRequest();
+    productsUtils.deleteProductsStartsWith(startsWith);
+    deleteCategoriesStartsWith(startsWith);
+    deleteShippingStartsWith(startsWith);
+    channelsUtils.deleteChannelsStartsWith(startsWith);
+
+    channelsUtils
+      .getDefaultChannel()
+      .then(channel => {
+        defaultChannel = channel;
+        productsUtils.createTypeAttributeAndCategoryForProduct(name);
+      })
+      .then(
+        ({
+          category: categoryResp,
+          attribute: attributeResp,
+          productType: productTypeResp
+        }) => {
+          category = categoryResp;
+          attribute = attributeResp;
+          productType = productTypeResp;
+          productsUtils.createProductInChannel({
+            name,
+            channelId: defaultChannel.id,
+            productTypeId: productType.id,
+            attributeId: attribute.id,
+            categoryId: category.id
+          });
+        }
+      )
+      .then(({ product: productResp }) => (product = productResp));
+  });
+
+  beforeEach(() => {
+    cy.clearSessionData().loginUserViaRequest();
+  });
+
+  it("should create category", () => {
+    const categoryName = `${startsWith}${faker.datatype.number()}`;
+
+    cy.visit(urlList.categories)
+      .get(CATEGORIES_LIST.addCategoryButton)
+      .click();
+    createCategory({ name: categoryName, description: categoryName })
+      .its("response.body.data.categoryCreate.category")
+      .then(newCategory => {
+        getCategory(newCategory.id);
+      })
+      .then(newCategory => {
+        expect(newCategory.name).to.eq(categoryName);
+        // Uncomment this expect after fixing bug SALEOR-3728
+        // expect(newCategory.description).to.eq(categoryName);
+      });
+  });
+
+  it("should add subcategory", () => {
+    const categoryName = `${startsWith}${faker.datatype.number()}`;
+    cy.visit(categoryDetails(category.id))
+      .get(CATEGORY_DETAILS.createSubcategoryButton)
+      .click();
+    createCategory({ name: categoryName, description: categoryName })
+      .visit(categoryDetails(category.id))
+      .contains(CATEGORY_DETAILS.categoryChildrenRow, categoryName)
+      .should("be.visible");
+    getCategory(category.id).then(categoryResp => {
+      expect(categoryResp.children.edges[0].node.name).to.eq(categoryName);
+    });
+  });
+
+  it("should add product to category", () => {
+    cy.visit(categoryDetails(category.id))
+      .get(CATEGORY_DETAILS.productsTab)
+      .click()
+      .get(CATEGORY_DETAILS.addProducts)
+      .click()
+      .url()
+      .should("include", urlList.addProduct);
+  });
+
+  it("should remove product from category", () => {
+    cy.visit(categoryDetails(category.id))
+      .get(CATEGORY_DETAILS.productsTab)
+      .click();
+    cy.contains(CATEGORY_DETAILS.productRow, product.name)
+      .find(BUTTON_SELECTORS.checkbox)
+      .click()
+      .get(BUTTON_SELECTORS.deleteIcon)
+      .click()
+      .addAliasToGraphRequest("productBulkDelete")
+      .get(BUTTON_SELECTORS.submit)
+      .click();
+    confirmationMessageShouldDisappear();
+    cy.contains(CATEGORY_DETAILS.productRow, product.name)
+      .should("not.exist")
+      .wait("@productBulkDelete");
+    getCategory(category.id).then(categoryResp => {
+      expect(categoryResp.products).to.be.null;
+    });
+  });
+
+  it("should enter category details page", () => {
+    cy.visit(urlList.categories)
+      .get(SHARED_ELEMENTS.searchInput)
+      .type(category.name);
+    cy.contains(SHARED_ELEMENTS.tableRow, category.name).click();
+    cy.contains(SHARED_ELEMENTS.header, category.name).should("be.visible");
+  });
+});

cypress/integration/allEnv/collections.js

@@ -106,6 +106,7 @@ describe("Collections", () => {
         expect(isVisible).to.equal(true);
       });
   });
+
   it("should not display collection not set as available in channel", () => {
     const collectionName = `${startsWith}${faker.datatype.number()}`;
     let collection;
@@ -131,6 +132,7 @@ describe("Collections", () => {
         expect(isVisible).to.equal(false);
       });
   });
+
   it("should display products hidden in listing", () => {
     // Products "hidden in listings" are not displayed in Category listings or search results,
     // but are listed on Collections

cypress/steps/categoriesSteps.js

@@ -0,0 +1,15 @@
+import { CATEGORY_DETAILS } from "../elements/catalog/categories/category-details";
+import { BUTTON_SELECTORS } from "../elements/shared/button-selectors";
+import { confirmationMessageShouldDisappear } from "./shared/confirmationMessages";
+
+export function createCategory({ name, description }) {
+  cy.get(CATEGORY_DETAILS.nameInput)
+    .type(name)
+    .get(CATEGORY_DETAILS.descriptionInput)
+    .type(description)
+    .addAliasToGraphRequest("CategoryCreate")
+    .get(BUTTON_SELECTORS.confirm)
+    .click();
+  confirmationMessageShouldDisappear();
+  return cy.wait("@CategoryCreate");
+}

cypress/steps/collectionsSteps.js

@@ -1,5 +1,4 @@
 import { COLLECTION_SELECTORS } from "../elements/catalog/collection-selectors";
-import { PRODUCT_DETAILS } from "../elements/catalog/products/product-details";
 import { AVAILABLE_CHANNELS_FORM } from "../elements/channels/available-channels-form";
 import { SELECT_CHANNELS_TO_ASSIGN } from "../elements/channels/select-channels-to-assign";
 import { ASSIGN_ELEMENTS_SELECTORS } from "../elements/shared/assign-elements-selectors";

cypress/steps/shared/confirmationMessages.js

@@ -0,0 +1,8 @@
+import { SHARED_ELEMENTS } from "../../elements/shared/sharedElements";
+
+export function confirmationMessageShouldDisappear() {
+  cy.get(SHARED_ELEMENTS.confirmationMsg)
+    .should("be.visible")
+    .get(SHARED_ELEMENTS.confirmationMsg)
+    .should("not.exist");
+}

cypress/steps/shippingMethodSteps.js

@@ -56,13 +56,9 @@ export function createShippingZone(
 export function changeWeightUnit(weightUnit) {
   fillBaseSelect(SHIPPING_ZONES_LIST.unitSelect, weightUnit);
   cy.addAliasToGraphRequest("UpdateDefaultWeightUnit");
-  cy.get(SHIPPING_ZONES_LIST.saveUnit)
-    .click()
-    .get(SHARED_ELEMENTS.notificationSuccess)
-    .should("be.visible")
-    .wait("@UpdateDefaultWeightUnit")
-    .get(SHARED_ELEMENTS.notificationSuccess)
-    .should("not.exist");
+  cy.get(SHIPPING_ZONES_LIST.saveUnit).click();
+  confirmationMessageShouldDisappear();
+  cy.wait("@UpdateDefaultWeightUnit");
 }
 
 export function createShippingRate({
@@ -132,13 +128,9 @@ export function saveRate() {
   cy.addAliasToGraphRequest("ShippingMethodChannelListingUpdate")
     .addAliasToGraphRequest("ShippingZone")
     .get(BUTTON_SELECTORS.confirm)
-    .click()
-    .get(SHARED_ELEMENTS.notificationSuccess)
-    .should("be.visible")
-    .wait(`@ShippingMethodChannelListingUpdate`)
-    .wait(`@ShippingZone`)
-    .get(SHARED_ELEMENTS.notificationSuccess)
-    .should("not.exist");
+    .click();
+  confirmationMessageShouldDisappear();
+  cy.wait(`@ShippingMethodChannelListingUpdate`).wait(`@ShippingZone`);
 }
 
 export function fillUpWeightLimits({ max, min }) {

cypress/url/urlList.js

@@ -6,6 +6,7 @@ export const urlList = {
   homePage: "/",
   orders: "orders/",
   products: "products/",
+  addProduct: "products/add",
   warehouses: "warehouses/",
   shippingMethods: "shipping/",
   sales: "discounts/sales/",
@@ -14,6 +15,7 @@ export const urlList = {
   staffMembers: "staff/",
   newPassword: "new-password/",
   permissionsGroups: "permission-groups/",
+  categories: "categories/",
   weightRete: "weight/",
   attributes: "attributes/",
   productTypes: "product-types/",
@@ -31,6 +33,9 @@ export const staffMemberDetailsUrl = staffMemberId =>
 export const permissionGroupDetails = permissionGroupId =>
   `${urlList.permissionsGroups}${permissionGroupId}`;
 
+export const categoryDetails = categoryId =>
+  `${urlList.categories}${categoryId}`;
+
 export const shippingZoneDetailsUrl = shippingZoneId =>
   `${urlList.shippingMethods}${shippingZoneId}`;
 

cypress/utils/categoryUtils.js

@@ -0,0 +1,5 @@
+import { deleteCategory, getCategories } from "../apiRequests/Category";
+
+export function deleteCategoriesStartsWith(startsWith) {
+  cy.deleteElementsStartsWith(deleteCategory, getCategories, startsWith);
+}

src/categories/components/CategoryListPage/CategoryListPage.tsx

@@ -56,7 +56,12 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
   return (
     <Container>
       <PageHeader title={intl.formatMessage(sectionNames.categories)}>
-        <Button color="primary" variant="contained" onClick={onAdd}>
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={onAdd}
+          data-test-id="createCategory"
+        >
           <FormattedMessage
             defaultMessage="Create category"
             description="button"

src/categories/components/CategoryProductList/CategoryProductList.tsx

@@ -161,6 +161,7 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
 
               return (
                 <TableRow
+                  data-test-id="productRow"
                   selected={isSelected}
                   hover={!!product}
                   key={product ? product.id : "skeleton"}

src/categories/components/CategoryProducts/CategoryProducts.tsx

@@ -48,7 +48,12 @@ export const CategoryProducts: React.FC<CategoryProductsProps> = ({
           { categoryName }
         )}
         toolbar={
-          <Button color="primary" variant="text" onClick={onAdd}>
+          <Button
+            color="primary"
+            variant="text"
+            onClick={onAdd}
+            data-test-id="addProducts"
+          >
             <FormattedMessage
               defaultMessage="Add product"
               description="button"

src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx

@@ -154,6 +154,7 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
               />
             </CategoriesTab>
             <ProductsTab
+              testId="productsTab"
               isActive={currentTab === CategoryPageTab.products}
               changeTab={changeTab}
             >
@@ -176,6 +177,7 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
                     color="primary"
                     variant="text"
                     onClick={onAddCategory}
+                    data-test-id="createSubcategory"
                   >
                     <FormattedMessage
                       defaultMessage="Create subcategory"

src/categories/views/CategoryDetails.tsx

@@ -275,6 +275,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
         }
         productListToolbar={
           <IconButton
+            data-test-id="deleteIcon"
             color="primary"
             onClick={() =>
               openModal("delete-products", {

src/components/SearchBar/SearchInput.tsx

@@ -41,6 +41,7 @@ const SearchInput: React.FC<SearchInputProps> = props => {
 
         return (
           <TextField
+            data-test-id="searchInput"
             className={classes.root}
             inputProps={{
               className: classes.input,

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -43040,6 +43040,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -44243,6 +44244,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -44680,6 +44682,7 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -46095,6 +46098,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="createCategory"
             tabindex="0"
             type="button"
           >
@@ -46153,6 +46157,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -46758,6 +46763,7 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="createCategory"
             tabindex="0"
             type="button"
           >
@@ -46816,6 +46822,7 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -47067,6 +47074,7 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="createCategory"
             tabindex="0"
             type="button"
           >
@@ -47125,6 +47133,7 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -48885,6 +48894,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
         </span>
         <span
           class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
+          data-test-id="productsTab"
         >
           Products
         </span>
@@ -48908,6 +48918,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+              data-test-id="createSubcategory"
               tabindex="0"
               type="button"
             >
@@ -49659,6 +49670,7 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
         </span>
         <span
           class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
+          data-test-id="productsTab"
         >
           Products
         </span>
@@ -49682,6 +49694,7 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+              data-test-id="createSubcategory"
               tabindex="0"
               type="button"
             >
@@ -50152,6 +50165,7 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
         </span>
         <span
           class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
+          data-test-id="productsTab"
         >
           Products
         </span>
@@ -50175,6 +50189,7 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+              data-test-id="createSubcategory"
               tabindex="0"
               type="button"
             >
@@ -50975,6 +50990,7 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
         </span>
         <span
           class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
+          data-test-id="productsTab"
         >
           Products
         </span>
@@ -50998,6 +51014,7 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+              data-test-id="createSubcategory"
               tabindex="0"
               type="button"
             >
@@ -51742,6 +51759,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
         </span>
         <span
           class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
+          data-test-id="productsTab"
         >
           Products
         </span>
@@ -51765,6 +51783,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+              data-test-id="addProducts"
               tabindex="0"
               type="button"
             >
@@ -52514,6 +52533,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
         </span>
         <span
           class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
+          data-test-id="productsTab"
         >
           Products
         </span>
@@ -52537,6 +52557,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+              data-test-id="createSubcategory"
               tabindex="0"
               type="button"
             >
@@ -53281,6 +53302,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
         </span>
         <span
           class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
+          data-test-id="productsTab"
         >
           Products
         </span>
@@ -53304,6 +53326,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+              data-test-id="addProducts"
               tabindex="0"
               type="button"
             >
@@ -53486,6 +53509,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                  data-test-id="productRow"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -53583,6 +53607,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                  data-test-id="productRow"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -53680,6 +53705,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                  data-test-id="productRow"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -53777,6 +53803,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                  data-test-id="productRow"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -53874,6 +53901,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                  data-test-id="productRow"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -53971,6 +53999,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                  data-test-id="productRow"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -54068,6 +54097,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                  data-test-id="productRow"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -54165,6 +54195,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                  data-test-id="productRow"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -54262,6 +54293,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                  data-test-id="productRow"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -54359,6 +54391,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
+                  data-test-id="productRow"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -63950,6 +63983,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -64640,6 +64674,7 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -65050,6 +65085,7 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -80828,6 +80864,7 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -82424,6 +82461,7 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -82837,6 +82875,7 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -93128,6 +93167,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -93805,6 +93845,7 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -94244,6 +94285,7 @@ exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -94921,6 +94963,7 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -104523,6 +104566,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -105059,6 +105103,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -105546,6 +105591,7 @@ exports[`Storyshots Views / Discounts / Voucher list no channels 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -106082,6 +106128,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -111321,6 +111368,7 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -112963,6 +113011,7 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -113407,6 +113456,7 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -142385,6 +142435,7 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -144233,6 +144284,7 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -146036,6 +146088,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -146496,6 +146549,7 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -148299,6 +148353,7 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -153988,6 +154043,7 @@ exports[`Storyshots Views / Page types / Page types list default 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -154400,6 +154456,7 @@ exports[`Storyshots Views / Page types / Page types list loading 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -154721,6 +154778,7 @@ exports[`Storyshots Views / Page types / Page types list no data 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -165667,6 +165725,7 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -166113,6 +166172,7 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -166443,6 +166503,7 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -171175,6 +171236,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -171793,6 +171855,7 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -172169,6 +172232,7 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -207494,6 +207558,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -210147,6 +210212,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -212754,6 +212820,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -213322,6 +213389,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -215629,6 +215697,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -216047,6 +216116,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -218654,6 +218724,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -242597,6 +242668,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -243326,6 +243398,7 @@ exports[`Storyshots Views / Staff / Staff members limits reached 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -244004,6 +244077,7 @@ exports[`Storyshots Views / Staff / Staff members no limits 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -244687,6 +244761,7 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -249880,6 +249955,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -250483,6 +250559,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -251040,6 +251117,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list loading 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -251406,6 +251484,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list no data 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -251701,6 +251780,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list no limits 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
+          data-test-id="searchInput"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"