Saleor 1737 tests for shipping methods (#1013)

* remove classes in shipping & products utils

* remove classes

* add tests plans

* add const

* tests for shipping methods

* test for shipping

* test for shipping

* tests for shipping

* install eslint-plugin-chai-friendly

* update stories

* add missing imports

.eslintrc.json

@@ -11,7 +11,9 @@
     "@typescript-eslint",
     "import",
     "local-rules",
-    "simple-import-sort"
+    "simple-import-sort",
+    "cypress",
+    "chai-friendly"
   ],
   "rules": {
     "@typescript-eslint/adjacent-overload-signatures": "error",
@@ -72,6 +74,7 @@
     "arrow-parens": ["off", "as-needed"],
     "camelcase": "off",
     "capitalized-comments": "off",
+    "chai-friendly/no-unused-expressions": "error",
     "comma-dangle": "off",
     "complexity": "off",
     "constructor-super": "error",
@@ -151,7 +154,7 @@
     "no-undef-init": "error",
     "no-underscore-dangle": "off",
     "no-unsafe-finally": "error",
-    "no-unused-expressions": "error",
+    "no-unused-expressions": "off",
     "no-unused-labels": "error",
     "no-var": "error",
     "object-shorthand": "error",

cypress/apiRequests/Checkout.js

@@ -27,6 +27,9 @@ export function createCheckout({
       created
       checkout{
         id
+        availableShippingMethods{
+          name
+        }
       }
     }
   }`;

cypress/apiRequests/ShippingMethod.js

@@ -21,6 +21,7 @@ export function createShippingZone(name, country) {
     }){
       shippingZone{
         id
+        name
       }
     }
   }`;

cypress/apiRequests/Warehouse.js

@@ -1,11 +1,15 @@
-import { getDefaultAddress } from "./utils/Utils";
+import { getDefaultAddress, getValueWithDefault } from "./utils/Utils";
 
-export function createWarehouse(name, shippingZone, address, slug = name) {
+export function createWarehouse({ name, shippingZone, address, slug = name }) {
+  const shippingZoneLine = getValueWithDefault(
+    shippingZone,
+    `shippingZones:"${shippingZone}"`
+  );
   const mutation = `mutation{
     createWarehouse(input:{
       name:"${name}"
       slug:"${slug}"
-      shippingZones:"${shippingZone}"
+      ${shippingZoneLine}
       ${getDefaultAddress(address, "address", false)}
     }){
       warehouseErrors{

cypress/elements/shipping/shipping-rate-details.js

@@ -0,0 +1,4 @@
+export const SHIPPING_RATE_DETAILS = {
+  inputName: "[name='name']",
+  priceInput: "[name='price']"
+};

cypress/elements/shipping/shipping-zone-details.js

@@ -0,0 +1,12 @@
+export const SHIPPING_ZONE_DETAILS = {
+  assignCountryButton: "[data-test-id='assign-country']",
+  submitAssignCountry: "[type='submit']",
+  searchInput: "[name='query']",
+  tableRow: "[class*='MuiTableRow']",
+  addPriceRateButton: "[data-test-id='add-price-rate']",
+  addWeightRateButton: "[data-test-id='add-weight-rate']",
+  nameInput: "[name='name']",
+  shippingRatePriceTableCell: "[data-test-id='shipping-rate-price']",
+  warehouseOption: "[data-test='multiautocomplete-select-option']",
+  warehouseSelector: "[placeholder*='Warehouse']"
+};

cypress/elements/shipping/shipping-zones-list.js

@@ -0,0 +1,3 @@
+export const SHIPPING_ZONES_LIST = {
+  addShippingZone: "[data-test-id='add-shipping-zone']"
+};

cypress/fixtures/addresses.json

@@ -8,6 +8,7 @@
         "country": "PL",
         "countryArea": "Dolny Śląsk",
         "phone": "123456787",
-        "currency": "PLN"
+        "currency": "PLN",
+        "countryFullName": "Poland"
     }
 }

cypress/integration/configuration/channels.js

@@ -1,22 +1,22 @@
 // <reference types="cypress" />
 import faker from "faker";
 
-import { createChannel } from "../apiRequests/Channels";
+import { createChannel } from "../../apiRequests/Channels";
-import { LEFT_MENU_SELECTORS } from "../elements/account/left-menu/left-menu-selectors";
+import { LEFT_MENU_SELECTORS } from "../../elements/account/left-menu/left-menu-selectors";
-import { PRODUCTS_LIST } from "../elements/catalog/products/products-list";
+import { PRODUCTS_LIST } from "../../elements/catalog/products/products-list";
-import { ADD_CHANNEL_FORM_SELECTORS } from "../elements/channels/add-channel-form-selectors";
+import { ADD_CHANNEL_FORM_SELECTORS } from "../../elements/channels/add-channel-form-selectors";
-import { AVAILABLE_CHANNELS_FORM } from "../elements/channels/available-channels-form";
+import { AVAILABLE_CHANNELS_FORM } from "../../elements/channels/available-channels-form";
-import { CHANNEL_FORM_SELECTORS } from "../elements/channels/channel-form-selectors";
+import { CHANNEL_FORM_SELECTORS } from "../../elements/channels/channel-form-selectors";
-import { CHANNELS_SELECTORS } from "../elements/channels/channels-selectors";
+import { CHANNELS_SELECTORS } from "../../elements/channels/channels-selectors";
-import { SELECT_CHANNELS_TO_ASSIGN } from "../elements/channels/select-channels-to-assign";
+import { SELECT_CHANNELS_TO_ASSIGN } from "../../elements/channels/select-channels-to-assign";
-import { CONFIGURATION_SELECTORS } from "../elements/configuration/configuration-selectors";
+import { CONFIGURATION_SELECTORS } from "../../elements/configuration/configuration-selectors";
-import { HEADER_SELECTORS } from "../elements/header/header-selectors";
+import { HEADER_SELECTORS } from "../../elements/header/header-selectors";
-import { DRAFT_ORDER_SELECTORS } from "../elements/orders/draft-order-selectors";
+import { DRAFT_ORDER_SELECTORS } from "../../elements/orders/draft-order-selectors";
-import { ORDERS_SELECTORS } from "../elements/orders/orders-selectors";
+import { ORDERS_SELECTORS } from "../../elements/orders/orders-selectors";
-import { BUTTON_SELECTORS } from "../elements/shared/button-selectors";
+import { BUTTON_SELECTORS } from "../../elements/shared/button-selectors";
-import { createChannelByView } from "../steps/channelsSteps";
+import { createChannelByView } from "../../steps/channelsSteps";
-import { urlList } from "../url/urlList";
+import { urlList } from "../../url/urlList";
-import { deleteChannelsStartsWith } from "../utils/channelsUtils";
+import { deleteChannelsStartsWith } from "../../utils/channelsUtils";
 
 describe("Channels", () => {
   const channelStartsWith = "Cypress:";

cypress/integration/configuration/shippingMethod.js

@@ -0,0 +1,183 @@
+// <reference types="cypress" />
+import faker from "faker";
+
+import { addChannelToShippingMethod } from "../../apiRequests/ShippingMethod";
+import { SHIPPING_ZONE_DETAILS } from "../../elements/shipping/shipping-zone-details";
+import { selectChannelInHeader } from "../../steps/channelsSteps";
+import {
+  createShippingRate,
+  createShippingZone,
+  rateOptions
+} from "../../steps/shippingMethodSteps";
+import { getFormattedCurrencyAmount } from "../../support/format/formatCurrencyAmount";
+import { urlList } from "../../url/urlList";
+import * as channelsUtils from "../../utils/channelsUtils";
+import { createCheckout } from "../../utils/ordersUtils";
+import * as productsUtils from "../../utils/products/productsUtils";
+import * as shippingUtils from "../../utils/shippingUtils";
+import { isShippingAvailableInCheckout } from "../../utils/storeFront/checkoutUtils";
+
+describe("Shipping methods", () => {
+  const startsWith = "Cy-";
+  const name = `${startsWith}${faker.random.number()}`;
+  const price = 8;
+  let defaultChannel;
+  let plAddress;
+  let variantsList;
+  let warehouse;
+
+  before(() => {
+    cy.clearSessionData().loginUserViaRequest();
+    productsUtils.deleteProductsStartsWith(startsWith);
+    shippingUtils.deleteShippingStartsWith(startsWith);
+    channelsUtils.deleteChannelsStartsWith(startsWith);
+
+    channelsUtils
+      .getDefaultChannel()
+      .then(channel => {
+        defaultChannel = channel;
+        cy.fixture("addresses");
+      })
+      .then(addresses => {
+        plAddress = addresses.plAddress;
+        shippingUtils.createWarehouse({ name, address: plAddress });
+      })
+      .then(warehouseResp => {
+        warehouse = warehouseResp;
+        productsUtils.createTypeAttributeAndCategoryForProduct(startsWith);
+      })
+      .then(
+        ({
+          productType: productTypeResp,
+          category: categoryResp,
+          attribute: attributeResp
+        }) => {
+          productsUtils.createProductInChannel({
+            name,
+            channelId: defaultChannel.id,
+            productTypeId: productTypeResp.id,
+            attributeId: attributeResp.id,
+            categoryId: categoryResp.id,
+            warehouseId: warehouse.id,
+            quantityInWarehouse: 10
+          });
+        }
+      )
+      .then(({ variants: variantsListResp }) => {
+        variantsList = variantsListResp;
+      });
+  });
+
+  beforeEach(() => {
+    cy.clearSessionData().loginUserViaRequest();
+    cy.visit(urlList.shippingMethods);
+  });
+
+  it("should display different price for each channel", () => {
+    const shippingName = `${startsWith}${faker.random.number()}`;
+    const defaultChannelPrice = 11;
+    const createdChannelPrice = 7;
+    const createdChannelCurrency = "PLN";
+
+    let shippingMethod;
+    let shippingZone;
+    let createdChannel;
+
+    channelsUtils
+      .createChannel({
+        name: shippingName,
+        currencyCode: createdChannelCurrency
+      })
+      .then(channel => {
+        createdChannel = channel;
+        shippingUtils.createShipping({
+          channelId: defaultChannel.id,
+          name: shippingName,
+          address: plAddress,
+          price: defaultChannelPrice
+        });
+      })
+      .then(
+        ({
+          shippingMethod: shippingMethodResp,
+          shippingZone: shippingZoneResp
+        }) => {
+          shippingZone = shippingZoneResp;
+          shippingMethod = shippingMethodResp;
+          addChannelToShippingMethod(
+            shippingMethod.id,
+            createdChannel.id,
+            createdChannelPrice
+          );
+        }
+      )
+      .then(() => {
+        cy.addAliasToGraphRequest("ShippingZone");
+        cy.contains(shippingZone.name).click();
+        cy.wait("@ShippingZone");
+        selectChannelInHeader(defaultChannel.name);
+        cy.getTextFromElement(SHIPPING_ZONE_DETAILS.shippingRatePriceTableCell)
+          .then(text => {
+            const expectedValue = getFormattedCurrencyAmount(
+              defaultChannelPrice,
+              defaultChannel.currencyCode
+            );
+            expect(text).to.be.eq(expectedValue);
+
+            selectChannelInHeader(createdChannel.name);
+          })
+          .then(() => {
+            cy.getTextFromElement(
+              SHIPPING_ZONE_DETAILS.shippingRatePriceTableCell
+            );
+          })
+          .then(text => {
+            const expectedValue = getFormattedCurrencyAmount(
+              createdChannelPrice,
+              createdChannelCurrency
+            );
+            expect(text).to.be.eq(expectedValue);
+          });
+      });
+  });
+  it("should create price based shipping method", () => {
+    const shippingName = `${startsWith}${faker.random.number()}`;
+
+    createShippingZone(shippingName, warehouse.name, plAddress.countryFullName);
+    createShippingRate(shippingName, price, rateOptions.PRICE_OPTION);
+
+    createCheckout({
+      channelSlug: defaultChannel.slug,
+      email: "test@example.com",
+      variantsList,
+      address: plAddress,
+      auth: "token"
+    }).then(checkout => {
+      const isShippingAvailable = isShippingAvailableInCheckout(
+        checkout,
+        shippingName
+      );
+      expect(isShippingAvailable).to.be.true;
+    });
+  });
+
+  it("should create weight based shipping method", () => {
+    const shippingName = `${startsWith}${faker.random.number()}`;
+
+    createShippingZone(shippingName, warehouse.name, plAddress.countryFullName);
+    createShippingRate(shippingName, price, rateOptions.WEIGHT_OPTION);
+    createCheckout({
+      channelSlug: defaultChannel.slug,
+      email: "test@example.com",
+      variantsList,
+      address: plAddress,
+      auth: "token"
+    }).then(checkout => {
+      const isShippingAvailable = isShippingAvailableInCheckout(
+        checkout,
+        shippingName
+      );
+      expect(isShippingAvailable).to.be.true;
+    });
+  });
+});

cypress/integration/configuration/warehouse.js

@@ -1,5 +1,5 @@
 // <reference types="cypress" />
-import { urlList } from "../url/urlList";
+import { urlList } from "../../url/urlList";
 
 describe("Warehouse settings", () => {
   beforeEach(() => {

cypress/integration/orders/draftOrders.js

@@ -85,7 +85,6 @@ describe("Draft orders", () => {
       cy.visit(urlList.orders);
       cy.contains(ORDERS_SELECTORS.orderRow, draftOrderNumber).should(
         $order => {
-          /* eslint-disable no-unused-expressions */
           expect($order).to.be.visible;
         }
       );

cypress/steps/discounts/salesSteps.js

@@ -1,7 +1,7 @@
 import { ASSIGN_PRODUCTS_SELECTORS } from "../../elements/catalog/products/assign-products";
 import { SALES_SELECTORS } from "../../elements/discounts/sales";
 import { BUTTON_SELECTORS } from "../../elements/shared/button-selectors";
-import { formatDate } from "../../support/formatDate";
+import { formatDate } from "../../support/format/formatDate";
 import { selectChannelInDetailsPages } from "../channelsSteps";
 
 export const discountOptions = {

cypress/steps/shippingMethodSteps.js

@@ -0,0 +1,49 @@
+import { BUTTON_SELECTORS } from "../elements/shared/button-selectors";
+import { SHIPPING_RATE_DETAILS } from "../elements/shipping/shipping-rate-details";
+import { SHIPPING_ZONE_DETAILS } from "../elements/shipping/shipping-zone-details";
+import { SHIPPING_ZONES_LIST } from "../elements/shipping/shipping-zones-list";
+
+export function createShippingZone(shippingName, warehouseName, country) {
+  cy.get(SHIPPING_ZONES_LIST.addShippingZone)
+    .click()
+    .get(SHIPPING_ZONE_DETAILS.nameInput)
+    .type(shippingName)
+    .get(SHIPPING_ZONE_DETAILS.assignCountryButton)
+    .click()
+    .get(SHIPPING_ZONE_DETAILS.searchInput)
+    .type(country);
+  cy.contains(SHIPPING_ZONE_DETAILS.tableRow, country)
+    .find(BUTTON_SELECTORS.checkbox)
+    .click()
+    .get(SHIPPING_ZONE_DETAILS.submitAssignCountry)
+    .click()
+    .get(BUTTON_SELECTORS.confirm)
+    .click()
+    .get(SHIPPING_ZONE_DETAILS.warehouseSelector)
+    .click()
+    .get(SHIPPING_ZONE_DETAILS.warehouseOption)
+    .contains(warehouseName)
+    .click();
+  cy.addAliasToGraphRequest("UpdateShippingZone");
+  cy.get(BUTTON_SELECTORS.confirm).click();
+  cy.wait("@UpdateShippingZone");
+}
+
+export function createShippingRate(rateName, price, rateOption) {
+  cy.get(rateOption)
+    .click()
+    .get(SHIPPING_RATE_DETAILS.inputName)
+    .type(rateName)
+    .get(SHIPPING_RATE_DETAILS.priceInput)
+    .each($priceInput => {
+      cy.wrap($priceInput).type(price);
+    });
+  cy.addAliasToGraphRequest("ShippingZone");
+  cy.get(BUTTON_SELECTORS.confirm).click();
+  cy.wait("@ShippingZone");
+}
+
+export const rateOptions = {
+  PRICE_OPTION: SHIPPING_ZONE_DETAILS.addPriceRateButton,
+  WEIGHT_OPTION: SHIPPING_ZONE_DETAILS.addWeightRateButton
+};

cypress/support/format/formatCurrencyAmount.js

@@ -0,0 +1,8 @@
+export function getFormattedCurrencyAmount(amount, currency) {
+  const language = window.navigator.userLanguage || window.navigator.language;
+  const formattedCurrencyAmount = amount.toLocaleString(language, {
+    currency,
+    style: "currency"
+  });
+  return formattedCurrencyAmount;
+}

cypress/url/urlList.js

@@ -7,6 +7,7 @@ export const urlList = {
   orders: "orders/",
   products: "products/",
   warehouses: "warehouses/",
+  shippingMethods: "shipping/",
   sales: "discounts/sales/",
   collections: "collections/",
   vouchers: "discounts/vouchers/"

cypress/utils/shippingUtils.js

@@ -9,7 +9,7 @@ export function createShipping({ channelId, name, address, price = 1 }) {
   return createShippingZone(name, address.country)
     .then(shippingZoneResp => {
       shippingZone = shippingZoneResp;
-      createWarehouse(name, shippingZone.id, address);
+      createWarehouse({ name, shippingZoneId: shippingZone.id, address });
     })
     .then(warehouseResp => {
       warehouse = warehouseResp;
@@ -31,9 +31,9 @@ export function createShippingZone(name, country) {
     .createShippingZone(name, country)
     .its("body.data.shippingZoneCreate.shippingZone");
 }
-export function createWarehouse(name, shippingZoneId, address) {
+export function createWarehouse({ name, shippingZoneId, address }) {
   return warehouseRequest
-    .createWarehouse(name, shippingZoneId, address)
+    .createWarehouse({ name, shippingZone: shippingZoneId, address })
     .its("body.data.createWarehouse.warehouse");
 }
 export function createShippingRate(name, shippingZoneId) {

cypress/utils/storeFront/checkoutUtils.js

@@ -0,0 +1,6 @@
+export function isShippingAvailableInCheckout(checkout, shippingName) {
+  const shipping = checkout.availableShippingMethods.find(
+    element => element.name === shippingName
+  );
+  return shipping !== undefined;
+}

cypress/utils/storeFront/storeFrontProductUtils.js

@@ -28,7 +28,8 @@ export const getProductVariants = (productId, channelSlug) => {
   });
 };
 
-export const getProductPrice = (productId, channelSlug) =>
+export const getProductPrice = (productId, channelSlug) => {
   getProductDetails(productId, channelSlug).then(
     resp => resp.body.data.product.variants[0].pricing.price.gross.amount
   );
+};

package.json

@@ -139,6 +139,8 @@
     "enzyme-to-json": "^3.6.1",
     "eslint": "^6.8.0",
     "eslint-loader": "^3.0.2",
+    "eslint-plugin-chai-friendly": "^0.6.0",
+    "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-import": "^2.19.1",
     "eslint-plugin-local-rules": "^0.1.1",
     "eslint-plugin-prefer-arrow": "^1.1.6",

src/components/CountryList/CountryList.tsx

@@ -98,7 +98,12 @@ const CountryList: React.FC<CountryListProps> = props => {
       <CardTitle
         title={title}
         toolbar={
-          <Button color="primary" disabled={disabled} onClick={onCountryAssign}>
+          <Button
+            color="primary"
+            disabled={disabled}
+            onClick={onCountryAssign}
+            data-test-id="assign-country"
+          >
             <FormattedMessage
               defaultMessage="Assign countries"
               description="button"

src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx

@@ -186,6 +186,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
                   )}
                   variant="price"
                   selectedChannelId={selectedChannelId}
+                  testId="add-price-rate"
                 />
                 <CardSpacer />
                 <ShippingZoneRates
@@ -198,6 +199,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
                   )}
                   variant="weight"
                   selectedChannelId={selectedChannelId}
+                  testId="add-weight-rate"
                 />
                 <CardSpacer />
                 <Metadata data={data} onChange={changeMetadata} />

src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx

@@ -26,6 +26,7 @@ export interface ShippingZoneRatesProps extends ChannelProps {
   disabled: boolean;
   rates: ShippingZoneDetailsFragment_shippingMethods[];
   variant: "price" | "weight";
+  testId?: string;
   onRateAdd: () => void;
   onRateEdit: (id: string) => void;
   onRateRemove: (id: string) => void;
@@ -58,7 +59,8 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
     onRateRemove,
     rates,
     selectedChannelId,
-    variant
+    variant,
+    testId
   } = props;
 
   const classes = useStyles(props);
@@ -80,7 +82,12 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
               })
         }
         toolbar={
-          <Button color="primary" disabled={disabled} onClick={onRateAdd}>
+          <Button
+            color="primary"
+            disabled={disabled}
+            onClick={onRateAdd}
+            data-test-id={testId}
+          >
             <FormattedMessage
               defaultMessage="Create rate"
               description="button"
@@ -153,7 +160,7 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
                       <Skeleton />
                     )}
                   </TableCell>
-                  <TableCell>
+                  <TableCell data-test-id="shipping-rate-price">
                     {maybe<React.ReactNode>(
                       () =>
                         rate && !channel ? (

src/shipping/components/ShippingZonesList/ShippingZonesList.tsx

@@ -80,7 +80,11 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
           description: "sort shipping methods by zone, section header"
         })}
         toolbar={
-          <Button color="primary" onClick={onAdd}>
+          <Button
+            color="primary"
+            onClick={onAdd}
+            data-test-id="add-shipping-zone"
+          >
             <FormattedMessage
               defaultMessage="Create shipping zone"
               description="button"

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

@@ -202854,6 +202854,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="assign-country"
                   tabindex="0"
                   type="button"
                 >
@@ -203094,6 +203095,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="assign-country"
                   tabindex="0"
                   type="button"
                 >
@@ -203331,6 +203333,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone loading 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
+                  data-test-id="assign-country"
                   disabled=""
                   tabindex="-1"
                   type="button"
@@ -209672,6 +209675,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="assign-country"
                   tabindex="0"
                   type="button"
                 >
@@ -209758,6 +209762,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="add-price-rate"
                   tabindex="0"
                   type="button"
                 >
@@ -209833,6 +209838,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
+                      data-test-id="shipping-rate-price"
                     >
                       -
                     </td>
@@ -209900,6 +209906,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
+                      data-test-id="shipping-rate-price"
                     >
                       -
                     </td>
@@ -209975,6 +209982,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="add-weight-rate"
                   tabindex="0"
                   type="button"
                 >
@@ -210050,6 +210058,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
+                      data-test-id="shipping-rate-price"
                     >
                       -
                     </td>
@@ -210117,6 +210126,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
+                      data-test-id="shipping-rate-price"
                     >
                       -
                     </td>
@@ -210636,6 +210646,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="assign-country"
                   tabindex="0"
                   type="button"
                 >
@@ -210722,6 +210733,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="add-price-rate"
                   tabindex="0"
                   type="button"
                 >
@@ -210797,6 +210809,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
+                      data-test-id="shipping-rate-price"
                     >
                       -
                     </td>
@@ -210864,6 +210877,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
+                      data-test-id="shipping-rate-price"
                     >
                       -
                     </td>
@@ -210939,6 +210953,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                  data-test-id="add-weight-rate"
                   tabindex="0"
                   type="button"
                 >
@@ -211014,6 +211029,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
+                      data-test-id="shipping-rate-price"
                     >
                       -
                     </td>
@@ -211081,6 +211097,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
+                      data-test-id="shipping-rate-price"
                     >
                       -
                     </td>
@@ -211594,6 +211611,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
+                  data-test-id="assign-country"
                   disabled=""
                   tabindex="-1"
                   type="button"
@@ -211681,6 +211699,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
+                  data-test-id="add-price-rate"
                   disabled=""
                   tabindex="-1"
                   type="button"
@@ -211765,6 +211784,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
+                      data-test-id="shipping-rate-price"
                     >
                       <span
                         class="Skeleton-skeleton-id"
@@ -211846,6 +211866,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
+                  data-test-id="add-weight-rate"
                   disabled=""
                   tabindex="-1"
                   type="button"
@@ -211930,6 +211951,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id"
+                      data-test-id="shipping-rate-price"
                     >
                       <span
                         class="Skeleton-skeleton-id"
@@ -212210,6 +212232,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test-id="add-shipping-zone"
                 tabindex="0"
                 type="button"
               >
@@ -212914,6 +212937,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test-id="add-shipping-zone"
                 tabindex="0"
                 type="button"
               >
@@ -213348,6 +213372,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test-id="add-shipping-zone"
                 tabindex="0"
                 type="button"
               >
@@ -213673,6 +213698,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no site settings perm
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
+                data-test-id="add-shipping-zone"
                 tabindex="0"
                 type="button"
               >