tests for product types (#1199)

cypress/apiRequests/Product.js

@@ -101,6 +101,11 @@ export function createProduct({
     description,
     `description:"{\\"blocks\\":[{\\"type\\":\\"paragraph\\",\\"data\\":{\\"text\\":\\"${description}\\"}}]}"`
   );
+  const categoryLine = getValueWithDefault(
+    categoryId,
+    `category:"${categoryId}"`
+  );
+
   const mutation = `mutation{
     productCreate(input:{
       attributes:[{
@@ -110,7 +115,7 @@ export function createProduct({
       slug:"${name}"
       seo:{title:"${name}" description:""}
       productType:"${productTypeId}"
-      category:"${categoryId}"
+      ${categoryLine}
       ${collection}
       ${descriptionLine}
     }){
@@ -183,41 +188,6 @@ export function createVariant({
     .its("body.data.productVariantBulkCreate.productVariants");
 }
 
-export function createTypeProduct({
-  name,
-  attributeId,
-  hasVariants = true,
-  slug = name,
-  shippable = true
-}) {
-  const variantAttributesLine = getValueWithDefault(
-    hasVariants,
-    `variantAttributes: "${attributeId}"`
-  );
-  const mutation = `mutation{
-    productTypeCreate(input: {
-      name: "${name}"
-      slug: "${slug}"
-      productAttributes: "${attributeId}"
-      hasVariants: ${hasVariants}
-      ${variantAttributesLine}
-      isShippingRequired:${shippable}
-    }){
-      productErrors{
-        field
-        message
-      }
-      productType{
-        id
-        name
-      }
-    }
-  } `;
-  return cy
-    .sendRequestWithQuery(mutation)
-    .its("body.data.productTypeCreate.productType");
-}
-
 export function deleteProduct(productId) {
   const mutation = `mutation{
     productDelete(id: "${productId}"){
@@ -229,33 +199,3 @@ export function deleteProduct(productId) {
   } `;
   return cy.sendRequestWithQuery(mutation);
 }
-
-export function getProductTypes(first, search) {
-  const query = `query{
-    productTypes(first:${first}, filter:{
-      search:"${search}"
-    }){
-      edges{
-        node{
-          id
-          name
-        }
-      }
-    }
-  }`;
-  return cy
-    .sendRequestWithQuery(query)
-    .then(resp => resp.body.data.productTypes.edges);
-}
-
-export function deleteProductType(productTypeId) {
-  const mutation = `mutation{
-    productTypeDelete(id:"${productTypeId}"){
-      productErrors{
-        field
-        message
-      }
-    }
-  }`;
-  return cy.sendRequestWithQuery(mutation);
-}

cypress/apiRequests/productType.js

@@ -0,0 +1,90 @@
+import { getValueWithDefault } from "./utils/Utils";
+
+export function createTypeProduct({
+  name,
+  attributeId,
+  hasVariants = true,
+  slug = name,
+  shippable = true
+}) {
+  const productAttributesLine = getValueWithDefault(
+    attributeId,
+    `productAttributes: "${attributeId}"`
+  );
+  const variantAttributesLine = getValueWithDefault(
+    hasVariants && attributeId,
+    `variantAttributes: "${attributeId}"`
+  );
+  const mutation = `mutation{
+    productTypeCreate(input: {
+      name: "${name}"
+      slug: "${slug}"
+      ${productAttributesLine}
+      hasVariants: ${hasVariants}
+      ${variantAttributesLine}
+      isShippingRequired:${shippable}
+    }){
+      productErrors{
+        field
+        message
+      }
+      productType{
+        id
+        name
+      }
+    }
+  } `;
+  return cy
+    .sendRequestWithQuery(mutation)
+    .its("body.data.productTypeCreate.productType");
+}
+
+export function getProductTypes(first, search) {
+  const query = `query{
+    productTypes(first:${first}, filter:{
+      search:"${search}"
+    }){
+      edges{
+        node{
+          id
+          name
+        }
+      }
+    }
+  }`;
+  return cy
+    .sendRequestWithQuery(query)
+    .then(resp => resp.body.data.productTypes.edges);
+}
+
+export function deleteProductType(productTypeId) {
+  const mutation = `mutation{
+    productTypeDelete(id:"${productTypeId}"){
+      productErrors{
+        field
+        message
+      }
+    }
+  }`;
+  return cy.sendRequestWithQuery(mutation);
+}
+
+export function getProductType(productTypeId) {
+  const query = `query{
+    productType(id:"${productTypeId}"){
+      id
+      name
+      isShippingRequired
+      weight{
+        value
+      }
+      productAttributes{
+        name
+      }
+      variantAttributes{
+        name
+      }
+    }
+  }`;
+  return cy.sendRequestWithQuery(query).its("body.data.productType");
+}

cypress/elements/catalog/products/product-details.js

@@ -7,7 +7,6 @@ export const PRODUCT_DETAILS = {
   autocompleteDropdown: "[data-test='autocomplete-dropdown']",
   firstCategoryItem: "#downshift-0-item-0",
   visibleRadioBtn: "[name='isPublished']",
-  confirmationMsg: "[data-test='notification-success']",
   channelAvailabilityItem: "[data-test='channel-availability-item']",
   addVariantsButton: "[data-test*='button-add-variant']",
   descriptionInput: "[data-test-id='description']",

cypress/elements/productTypes/productTypeDetails.js

@@ -0,0 +1,8 @@
+export const PRODUCT_TYPE_DETAILS = {
+  nameInput: '[name="name"]',
+  isShippingRequired: '[name="isShippingRequired"]',
+  assignProductAttributeButton: '[data-test-id="assignProductsAttributes"]',
+  assignVariantAttributeButton: '[data-test-id="assignVariantsAttributes"]',
+  hasVariantsButton: '[name="hasVariants"]',
+  shippingWeightInput: '[name="weight"]'
+};

cypress/elements/productTypes/productTypesList.js

@@ -0,0 +1,3 @@
+export const PRODUCT_TYPES_LIST = {
+  addProductTypeButton: '[data-test-id="addProductType"]'
+};

cypress/elements/shared/assign-elements-selectors.js

@@ -1,6 +1,7 @@
-export const ASSIGN_PRODUCTS_SELECTORS = {
+export const ASSIGN_ELEMENTS_SELECTORS = {
   searchInput: "[name='query']",
   tableRow: "[class*='MuiTableRow']",
+  productTableRow: "[data-test-id='assign-product-table-row']",
   checkbox: "[type='checkbox']",
   submitButton: "[type='submit']",
   dialogContent: '[data-test-id="searchQuery"]'

cypress/elements/shared/sharedElements.js

@@ -2,5 +2,6 @@ export const SHARED_ELEMENTS = {
   header: "[data-test-id='page-header']",
   progressBar: '[role="progressbar"]',
   skeleton: '[data-test-id="skeleton"]',
-  table: 'table[class*="Table"]'
+  table: 'table[class*="Table"]',
+  confirmationMsg: "[data-test='notification-success']"
 };

cypress/integration/allEnv/configuration/productTypes.js

@@ -0,0 +1,102 @@
+import faker from "faker";
+
+import { createAttribute } from "../../../apiRequests/Attribute";
+import {
+  createTypeProduct,
+  getProductType
+} from "../../../apiRequests/productType";
+import { PRODUCT_TYPE_DETAILS } from "../../../elements/productTypes/productTypeDetails";
+import { SHARED_ELEMENTS } from "../../../elements/shared/sharedElements";
+import { createProductType } from "../../../steps/productTypeSteps";
+import { assignElements } from "../../../steps/shared/assignElements";
+import { confirmationMessageShouldDisappear } from "../../../steps/shared/confirmationMessage";
+import { productTypeDetailsUrl, urlList } from "../../../url/urlList";
+import { deleteProductsStartsWith } from "../../../utils/products/productsUtils";
+
+describe("Tests for product types", () => {
+  const startsWith = "ProductType";
+
+  before(() => {
+    cy.clearSessionData().loginUserViaRequest();
+    deleteProductsStartsWith(startsWith);
+    createAttribute(startsWith);
+  });
+
+  beforeEach(() => {
+    cy.clearSessionData()
+      .loginUserViaRequest()
+      .visit(urlList.productTypes);
+  });
+
+  it("Create product type without shipping required", () => {
+    const name = `${startsWith}${faker.datatype.number()}`;
+
+    createProductType(name, false)
+      .then(productType => {
+        getProductType(productType.id);
+      })
+      .then(productType => {
+        expect(productType.name).to.be.eq(name);
+        expect(productType.isShippingRequired).to.be.false;
+      });
+  });
+
+  it("Create product type with shipping required", () => {
+    const name = `${startsWith}${faker.datatype.number()}`;
+    const shippingWeight = 10;
+
+    createProductType(name, shippingWeight)
+      .then(productType => {
+        getProductType(productType.id);
+      })
+      .then(productType => {
+        expect(productType.name).to.be.eq(name);
+        expect(productType.isShippingRequired).to.be.true;
+        expect(productType.weight.value).to.eq(shippingWeight);
+      });
+  });
+
+  it("Update product type with product attribute", () => {
+    const name = `${startsWith}${faker.datatype.number()}`;
+
+    createTypeProduct({ name })
+      .then(productType => {
+        cy.visit(productTypeDetailsUrl(productType.id))
+          .get(SHARED_ELEMENTS.progressBar)
+          .should("be.not.visible")
+          .get(PRODUCT_TYPE_DETAILS.assignProductAttributeButton)
+          .click();
+        cy.addAliasToGraphRequest("AssignProductAttribute");
+        assignElements(startsWith, false);
+        confirmationMessageShouldDisappear();
+        cy.wait("@AssignProductAttribute");
+        getProductType(productType.id);
+      })
+      .then(productType => {
+        expect(productType.productAttributes[0].name).to.eq(startsWith);
+      });
+  });
+
+  it("Update product type with variant attribute", () => {
+    const name = `${startsWith}${faker.datatype.number()}`;
+
+    createTypeProduct({ name, hasVariants: false })
+      .then(productType => {
+        cy.visit(productTypeDetailsUrl(productType.id))
+          .get(SHARED_ELEMENTS.progressBar)
+          .should("be.not.visible")
+          .get(PRODUCT_TYPE_DETAILS.hasVariantsButton)
+          .click()
+          .get(PRODUCT_TYPE_DETAILS.assignVariantAttributeButton)
+          .click();
+        cy.addAliasToGraphRequest("AssignProductAttribute");
+        assignElements(startsWith, false);
+        confirmationMessageShouldDisappear();
+        cy.wait("@AssignProductAttribute");
+        getProductType(productType.id);
+      })
+      .then(productType => {
+        expect(productType.variantAttributes[0].name).to.eq(startsWith);
+      });
+  });
+});

cypress/integration/allEnv/productTypes/purchaseWithProductTypes.js

@@ -10,7 +10,7 @@ import {
   createCheckout
 } from "../../../apiRequests/Checkout";
 import { getOrder } from "../../../apiRequests/Order";
-import { createTypeProduct } from "../../../apiRequests/Product";
+import { createTypeProduct } from "../../../apiRequests/productType";
 import { getDefaultChannel } from "../../../utils/channelsUtils";
 import {
   addPayment,

cypress/integration/allEnv/products/createProduct.js

@@ -2,11 +2,12 @@
 import faker from "faker";
 
 import { createAttribute } from "../../../apiRequests/Attribute";
-import { createTypeProduct } from "../../../apiRequests/Product";
+import { createTypeProduct } from "../../../apiRequests/productType";
 import { ONE_PERMISSION_USERS } from "../../../Data/users";
 import { PRODUCT_DETAILS } from "../../../elements/catalog/products/product-details";
 import { PRODUCTS_LIST } from "../../../elements/catalog/products/products-list";
 import { BUTTON_SELECTORS } from "../../../elements/shared/button-selectors";
+import { SHARED_ELEMENTS } from "../../../elements/shared/sharedElements";
 import { metadataForms } from "../../../steps/catalog/metadataSteps";
 import {
   fillUpPriceList,
@@ -74,7 +75,7 @@ describe("Create product", () => {
     cy.addAliasToGraphRequest("ProductDetails");
     cy.get(BUTTON_SELECTORS.confirm).click();
     cy.wait("@ProductDetails");
-    cy.get(PRODUCT_DETAILS.confirmationMsg).should("be.visible");
+    cy.get(SHARED_ELEMENTS.confirmationMsg).should("be.visible");
     cy.get("@ProductDetails")
       .its("response.body")
       .then(resp => {
@@ -105,7 +106,7 @@ describe("Create product", () => {
     cy.addAliasToGraphRequest("ProductDetails");
     cy.get(BUTTON_SELECTORS.confirm).click();
     cy.wait("@ProductDetails");
-    cy.get(PRODUCT_DETAILS.confirmationMsg).should("be.visible");
+    cy.get(SHARED_ELEMENTS.confirmationMsg).should("be.visible");
     cy.get("@ProductDetails")
       .its("response.body")
       .then(resp => {

cypress/integration/allEnv/products/updatingProducts.js

@@ -6,6 +6,7 @@ import { getProductDetails } from "../../../apiRequests/storeFront/ProductDetail
 import { ONE_PERMISSION_USERS } from "../../../Data/users";
 import { PRODUCT_DETAILS } from "../../../elements/catalog/products/product-details";
 import { BUTTON_SELECTORS } from "../../../elements/shared/button-selectors";
+import { SHARED_ELEMENTS } from "../../../elements/shared/sharedElements";
 import { metadataForms } from "../../../steps/catalog/metadataSteps";
 import { fillUpCommonFieldsForAllProductTypes } from "../../../steps/catalog/products/productSteps";
 import { productDetailsUrl } from "../../../url/urlList";
@@ -107,7 +108,7 @@ describe("Update products", () => {
         cy.addAliasToGraphRequest("UpdateMetadata");
         cy.addAliasToGraphRequest("ProductUpdate");
         cy.get(BUTTON_SELECTORS.confirm).click();
-        cy.get(PRODUCT_DETAILS.confirmationMsg)
+        cy.get(SHARED_ELEMENTS.confirmationMsg)
           .should("be.visible")
           .then(() => {
             cy.wait("@ProductUpdate");

cypress/steps/collectionsSteps.js

@@ -1,9 +1,10 @@
 import { COLLECTION_SELECTORS } from "../elements/catalog/collection-selectors";
-import { ASSIGN_PRODUCTS_SELECTORS } from "../elements/catalog/products/assign-products-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";
 import { BUTTON_SELECTORS } from "../elements/shared/button-selectors";
+import { SHARED_ELEMENTS } from "../elements/shared/sharedElements";
 
 export function createCollection(collectionName, isPublished, channel) {
   const publishedSelector = isPublished
@@ -29,7 +30,7 @@ export function createCollection(collectionName, isPublished, channel) {
     .click();
   cy.addAliasToGraphRequest("CreateCollection");
   cy.get(COLLECTION_SELECTORS.saveButton).click();
-  cy.get(PRODUCT_DETAILS.confirmationMsg).should("be.visible");
+  cy.get(SHARED_ELEMENTS.confirmationMsg).should("be.visible");
   return cy
     .wait("@CreateCollection")
     .its("response.body.data.collectionCreate.collection");
@@ -37,12 +38,12 @@ export function createCollection(collectionName, isPublished, channel) {
 export function assignProductsToCollection(productName) {
   cy.get(COLLECTION_SELECTORS.addProductButton)
     .click()
-    .get(ASSIGN_PRODUCTS_SELECTORS.searchInput)
+    .get(ASSIGN_ELEMENTS_SELECTORS.searchInput)
     .type(productName);
-  cy.contains(ASSIGN_PRODUCTS_SELECTORS.tableRow, productName)
+  cy.contains(ASSIGN_ELEMENTS_SELECTORS.tableRow, productName)
-    .find(ASSIGN_PRODUCTS_SELECTORS.checkbox)
+    .find(ASSIGN_ELEMENTS_SELECTORS.checkbox)
     .click();
   cy.addAliasToGraphRequest("CollectionAssignProduct");
-  cy.get(ASSIGN_PRODUCTS_SELECTORS.submitButton).click();
+  cy.get(ASSIGN_ELEMENTS_SELECTORS.submitButton).click();
   cy.wait("@CollectionAssignProduct");
 }

cypress/steps/discounts/salesSteps.js

@@ -1,5 +1,5 @@
-import { ASSIGN_PRODUCTS_SELECTORS } from "../../elements/catalog/products/assign-products";
 import { SALES_SELECTORS } from "../../elements/discounts/sales";
+import { ASSIGN_ELEMENTS_SELECTORS } from "../../elements/shared/assign-elements-selectors";
 import { BUTTON_SELECTORS } from "../../elements/shared/button-selectors";
 import { formatDate } from "../../support/format/formatDate";
 import { selectChannelInDetailsPages } from "../channelsSteps";
@@ -38,10 +38,10 @@ export function assignProducts(productName) {
     .click()
     .get(SALES_SELECTORS.assignProducts)
     .click()
-    .get(ASSIGN_PRODUCTS_SELECTORS.searchInput)
+    .get(ASSIGN_ELEMENTS_SELECTORS.searchInput)
     .type(productName);
-  cy.contains(ASSIGN_PRODUCTS_SELECTORS.tableRow, productName)
+  cy.contains(ASSIGN_ELEMENTS_SELECTORS.productTableRow, productName)
-    .find(BUTTON_SELECTORS.checkbox)
+    .find(ASSIGN_ELEMENTS_SELECTORS.checkbox)
     .click();
   cy.addAliasToGraphRequest("SaleCataloguesAdd");
   cy.get(BUTTON_SELECTORS.submit).click();

cypress/steps/draftOrderSteps.js

@@ -1,23 +1,14 @@
-import { ASSIGN_PRODUCTS_SELECTORS } from "../elements/catalog/products/assign-products-selectors";
 import { DRAFT_ORDER_SELECTORS } from "../elements/orders/draft-order-selectors";
+import { ASSIGN_ELEMENTS_SELECTORS } from "../elements/shared/assign-elements-selectors";
 import { BUTTON_SELECTORS } from "../elements/shared/button-selectors";
 import { SHARED_ELEMENTS } from "../elements/shared/sharedElements";
 import { SELECT_SHIPPING_METHOD_FORM } from "../elements/shipping/select-shipping-method-form";
+import { assignElements } from "./shared/assignElements";
 
 export function finalizeDraftOrder(name, address) {
-  cy.get(DRAFT_ORDER_SELECTORS.addProducts)
+  cy.get(DRAFT_ORDER_SELECTORS.addProducts).click();
-    .click()
+  assignElements(name);
-    .get(ASSIGN_PRODUCTS_SELECTORS.searchInput)
+  cy.get(DRAFT_ORDER_SELECTORS.editCustomerButton)
-    .type(name)
-    .get(ASSIGN_PRODUCTS_SELECTORS.dialogContent)
-    .find(SHARED_ELEMENTS.progressBar)
-    .should("not.exist");
-  cy.contains(ASSIGN_PRODUCTS_SELECTORS.tableRow, name)
-    .find(ASSIGN_PRODUCTS_SELECTORS.checkbox)
-    .click()
-    .get(ASSIGN_PRODUCTS_SELECTORS.submitButton)
-    .click()
-    .get(DRAFT_ORDER_SELECTORS.editCustomerButton)
     .click()
     .get(DRAFT_ORDER_SELECTORS.selectCustomer)
     .type(name);

cypress/steps/productTypeSteps.js

@@ -0,0 +1,25 @@
+import { PRODUCT_TYPE_DETAILS } from "../elements/productTypes/productTypeDetails";
+import { PRODUCT_TYPES_LIST } from "../elements/productTypes/productTypesList";
+import { BUTTON_SELECTORS } from "../elements/shared/button-selectors";
+import { SHARED_ELEMENTS } from "../elements/shared/sharedElements";
+
+export function createProductType(name, shippingWeight) {
+  cy.get(PRODUCT_TYPES_LIST.addProductTypeButton)
+    .click()
+    .get(SHARED_ELEMENTS.progressBar)
+    .should("be.not.visible")
+    .get(PRODUCT_TYPE_DETAILS.nameInput)
+    .type(name);
+  if (shippingWeight) {
+    cy.get(PRODUCT_TYPE_DETAILS.isShippingRequired)
+      .click()
+      .get(PRODUCT_TYPE_DETAILS.shippingWeightInput)
+      .type(shippingWeight);
+  }
+  return cy
+    .addAliasToGraphRequest("ProductTypeCreate")
+    .get(BUTTON_SELECTORS.confirm)
+    .click()
+    .wait("@ProductTypeCreate")
+    .its("response.body.data.productTypeCreate.productType");
+}

cypress/steps/shared/assignElements.js

@@ -0,0 +1,16 @@
+import { ASSIGN_ELEMENTS_SELECTORS } from "../../elements/shared/assign-elements-selectors";
+import { SHARED_ELEMENTS } from "../../elements/shared/sharedElements";
+
+export function assignElements(name, withLoader = true) {
+  cy.get(ASSIGN_ELEMENTS_SELECTORS.searchInput).type(name);
+  if (withLoader) {
+    cy.get(ASSIGN_ELEMENTS_SELECTORS.dialogContent)
+      .find(SHARED_ELEMENTS.progressBar)
+      .should("not.exist");
+  }
+  cy.contains(ASSIGN_ELEMENTS_SELECTORS.tableRow, name)
+    .find(ASSIGN_ELEMENTS_SELECTORS.checkbox)
+    .click()
+    .get(ASSIGN_ELEMENTS_SELECTORS.submitButton)
+    .click();
+}

cypress/steps/shared/confirmationMessage.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/url/urlList.js

@@ -13,7 +13,8 @@ export const urlList = {
   vouchers: "discounts/vouchers/",
   staffMembers: "staff/",
   newPassword: "new-password/",
-  permissionsGroups: "permission-groups/"
+  permissionsGroups: "permission-groups/",
+  productTypes: "product-types/"
 };
 export const productDetailsUrl = productId => `${urlList.products}${productId}`;
 
@@ -24,3 +25,6 @@ export const staffMemberDetailsUrl = staffMemberId =>
 
 export const permissionGroupDetails = permissionGroupId =>
   `${urlList.permissionsGroups}${permissionGroupId}`;
+
+export const productTypeDetailsUrl = productTypeId =>
+  `${urlList.productTypes}${productTypeId}`;

cypress/utils/products/productsUtils.js

@@ -1,6 +1,11 @@
 import * as attributeRequest from "../../apiRequests/Attribute";
 import * as categoryRequest from "../../apiRequests/Category";
 import * as productRequest from "../../apiRequests/Product";
+import {
+  createTypeProduct,
+  deleteProductType,
+  getProductTypes
+} from "../../apiRequests/productType";
 
 export function createProductInChannel({
   name,
@@ -68,7 +73,7 @@ export function createTypeAttributeAndCategoryForProduct(
     .createAttribute(name, attributeValues)
     .then(attributeResp => {
       attribute = attributeResp;
-      productRequest.createTypeProduct({ name, attributeId: attributeResp.id });
+      createTypeProduct({ name, attributeId: attributeResp.id });
     })
     .then(productTypeResp => {
       productType = productTypeResp;
@@ -80,11 +85,7 @@ export function createTypeAttributeAndCategoryForProduct(
     });
 }
 export function deleteProductsStartsWith(startsWith) {
-  cy.deleteElementsStartsWith(
+  cy.deleteElementsStartsWith(deleteProductType, getProductTypes, startsWith);
-    productRequest.deleteProductType,
-    productRequest.getProductTypes,
-    startsWith
-  );
   cy.deleteElementsStartsWith(
     attributeRequest.deleteAttribute,
     attributeRequest.getAttributes,

src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx

@@ -58,6 +58,7 @@ interface ProductTypeAttributesProps extends ListActions {
     | ProductTypeDetails_productType_variantAttributes[];
   disabled: boolean;
   type: string;
+  testId?: string;
   onAttributeAssign: (type: ProductAttributeType) => void;
   onAttributeClick: (id: string) => void;
   onAttributeReorder: ReorderAction;
@@ -77,6 +78,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
     toggleAll,
     toolbar,
     type,
+    testId,
     onAttributeAssign,
     onAttributeClick,
     onAttributeReorder,
@@ -108,6 +110,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
         }
         toolbar={
           <Button
+            data-test-id={testId}
             color="primary"
             variant="text"
             onClick={() => onAttributeAssign(ProductAttributeType[type])}

src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx

@@ -187,6 +187,7 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
                 />
                 <CardSpacer />
                 <ProductTypeAttributes
+                  testId="assignProductsAttributes"
                   attributes={maybe(() => productType.productAttributes)}
                   disabled={disabled}
                   type={ProductAttributeType.PRODUCT}
@@ -213,6 +214,7 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
                   <>
                     <CardSpacer />
                     <ProductTypeAttributes
+                      testId="assignVariantsAttributes"
                       attributes={maybe(() => productType.variantAttributes)}
                       disabled={disabled}
                       type={ProductAttributeType.VARIANT}

src/productTypes/components/ProductTypeListPage/ProductTypeListPage.tsx

@@ -58,7 +58,12 @@ const ProductTypeListPage: React.FC<ProductTypeListPageProps> = ({
         {intl.formatMessage(sectionNames.configuration)}
       </AppHeader>
       <PageHeader title={intl.formatMessage(sectionNames.productTypes)}>
-        <Button color="primary" variant="contained" onClick={onAdd}>
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={onAdd}
+          data-test-id="addProductType"
+        >
           <FormattedMessage
             defaultMessage="create product type"
             description="button"

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

@@ -167506,6 +167506,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="assignProductsAttributes"
                   tabindex="0"
                   type="button"
                 >
@@ -168539,6 +168540,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="assignProductsAttributes"
                   tabindex="0"
                   type="button"
                 >
@@ -169575,6 +169577,7 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="assignProductsAttributes"
                   tabindex="0"
                   type="button"
                 >
@@ -170132,6 +170135,7 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="assignProductsAttributes"
                   tabindex="0"
                   type="button"
                 >
@@ -170606,6 +170610,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="addProductType"
             tabindex="0"
             type="button"
           >
@@ -171223,6 +171228,7 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="addProductType"
             tabindex="0"
             type="button"
           >
@@ -171598,6 +171604,7 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+            data-test-id="addProductType"
             tabindex="0"
             type="button"
           >