Merge branch 'master' of github.com:mirumee/saleor-dashboard into feature/unconfirmed-order-line-manipulation

.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",

.github/PULL_REQUEST_TEMPLATE.md

@@ -13,16 +13,11 @@ greatly reduce the amount of work needed to review your work. -->
 
 <!-- Please keep this section. It will make maintainer's life easier. -->
 
-1. [ ] All visible strings are translated with proper context.
+1. [ ] This code contains UI changes
-1. [ ] All data-formatting is locale-aware (dates, numbers, and so on).
+2. [ ] All visible strings are translated with proper context including data-formatting
-1. [ ] Translated strings are extracted.
+3. [ ] Attributes `[data-test-id]` are added for new elements
-1. [ ] Number of API calls is optimized.
+4. [ ] Changes are mentioned in the changelog
-1. [ ] The changes are tested.
+5. [ ] The changes are tested in different browsers and in light/dark mode
-1. [ ] Data-test are added for new elements.
-1. [ ] Type definitions are up to date.
-1. [ ] Changes are mentioned in the changelog.
-1. [ ] The changes are tested in different browsers (Chrome, Firefox, Safari).
-1. [ ] The changes are tested in light and dark mode.
 
 ### Test environment config
 

.github/workflows/review-assignment.yml

@@ -0,0 +1,18 @@
+name: Review assignment
+
+on:
+  pull_request:
+    types: [opened, edited]
+
+jobs:
+  assign_ui:
+    runs-on: ubuntu-latest
+    name: Assign UI Reviewer
+    if: contains(github.event.pull_request.body , 'This code contains UI changes')
+    steps:
+      - name: Add/Remove UI reviewer
+        uses: jwm0/add-reviewer-gh-action@1.0.4
+        with:
+          reviewers: "pwgryglak"
+          token: ${{ secrets.GITHUB_TOKEN }}
+          remove: ${{ !contains(github.event.pull_request.body , '[x] This code contains UI changes') }}

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-lock.json

@@ -3959,6 +3959,113 @@
         }
       }
     },
+    "@release-it/bumper": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@release-it/bumper/-/bumper-2.0.0.tgz",
+      "integrity": "sha512-r8JeyuQfonY9g9CJjBcG1PrGZmpHIccbDb3TFyfTPknxFHVanE2gMGYijncE259zZ/oCo+u9fRpx0WkiRJxhtw==",
+      "dev": true,
+      "requires": {
+        "@iarna/toml": "^2.2.5",
+        "detect-indent": "^6.0.0",
+        "fast-glob": "^3.2.4",
+        "ini": "^1.3.5",
+        "js-yaml": "^3.14.0",
+        "lodash.castarray": "^4.4.0",
+        "lodash.get": "^4.4.2",
+        "lodash.set": "^4.3.2",
+        "mock-fs": "^4.13.0"
+      },
+      "dependencies": {
+        "@nodelib/fs.stat": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
+          "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
+          "dev": true
+        },
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "dev": true,
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "detect-indent": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz",
+          "integrity": "sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==",
+          "dev": true
+        },
+        "fast-glob": {
+          "version": "3.2.5",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
+          "integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==",
+          "dev": true,
+          "requires": {
+            "@nodelib/fs.stat": "^2.0.2",
+            "@nodelib/fs.walk": "^1.2.3",
+            "glob-parent": "^5.1.0",
+            "merge2": "^1.3.0",
+            "micromatch": "^4.0.2",
+            "picomatch": "^2.2.1"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "dev": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true
+        },
+        "js-yaml": {
+          "version": "3.14.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        },
+        "micromatch": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.1",
+            "picomatch": "^2.0.5"
+          }
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "dev": true,
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        }
+      }
+    },
     "@saleor/macaw-ui": {
       "version": "0.1.1-9",
       "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.1.1-9.tgz",
@@ -12488,6 +12595,21 @@
         }
       }
     },
+    "eslint-plugin-chai-friendly": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-chai-friendly/-/eslint-plugin-chai-friendly-0.6.0.tgz",
+      "integrity": "sha512-Uvvv1gkbRGp/qfN15B0kQyQWg+oFA8buDSqrwmW3egNSk/FpqH2MjQqKOuKwmEL6w4QIQrIjDp+gg6kGGmD3oQ==",
+      "dev": true
+    },
+    "eslint-plugin-cypress": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.11.2.tgz",
+      "integrity": "sha512-1SergF1sGbVhsf7MYfOLiBhdOg6wqyeV9pXUAIDIffYTGMN3dTBQS9nFAzhLsHhO+Bn0GaVM1Ecm71XUidQ7VA==",
+      "dev": true,
+      "requires": {
+        "globals": "^11.12.0"
+      }
+    },
     "eslint-plugin-import": {
       "version": "2.19.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.19.1.tgz",
@@ -17838,6 +17960,12 @@
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
     },
+    "lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -17911,6 +18039,12 @@
       "resolved": "https://registry.npmjs.org/lodash.pickby/-/lodash.pickby-4.6.0.tgz",
       "integrity": "sha1-feoh2MGNdwOifHBMFdO4SmfjOv8="
     },
+    "lodash.set": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/lodash.set/-/lodash.set-4.3.2.tgz",
+      "integrity": "sha1-2HV7HagH3eJIFrDWqEvqGnYjCyM=",
+      "dev": true
+    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -18463,6 +18597,12 @@
       "integrity": "sha512-cHznpkX8uUClkWWJMpgdDWzEgjacM85xt69S9gPLrssM8Vahas0QmEJkFUycrRQyBkaqxvRe58Bg3a5pOvj2zA==",
       "dev": true
     },
+    "mock-fs": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/mock-fs/-/mock-fs-4.13.0.tgz",
+      "integrity": "sha512-DD0vOdofJdoaRNtnWcrXe6RQbpHkPPmtqGq14uRX0F8ZKJ5nv89CVTYl/BZdppDxBDaV0hl75htg3abpEWlPZA==",
+      "dev": true
+    },
     "moment": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",

package.json

@@ -96,6 +96,7 @@
     "@pollyjs/adapter-node-http": "^5.0.0",
     "@pollyjs/core": "^5.0.0",
     "@pollyjs/persister-fs": "^5.0.0",
+    "@release-it/bumper": "^2.0.0",
     "@sentry/webpack-plugin": "^1.14.0",
     "@storybook/addon-storyshots": "^5.2.8",
     "@storybook/react": "^5.1.9",
@@ -139,6 +140,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

@@ -202860,6 +202860,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"
                 >
@@ -203100,6 +203101,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"
                 >
@@ -203337,6 +203339,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"
@@ -209678,6 +209681,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"
                 >
@@ -209764,6 +209768,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"
                 >
@@ -209839,6 +209844,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>
@@ -209906,6 +209912,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>
@@ -209981,6 +209988,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"
                 >
@@ -210056,6 +210064,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>
@@ -210123,6 +210132,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>
@@ -210642,6 +210652,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"
                 >
@@ -210728,6 +210739,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"
                 >
@@ -210803,6 +210815,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>
@@ -210870,6 +210883,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>
@@ -210945,6 +210959,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"
                 >
@@ -211020,6 +211035,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>
@@ -211087,6 +211103,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>
@@ -211600,6 +211617,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"
@@ -211687,6 +211705,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"
@@ -211771,6 +211790,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"
@@ -211852,6 +211872,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"
@@ -211936,6 +211957,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"
@@ -212216,6 +212238,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"
               >
@@ -212920,6 +212943,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"
               >
@@ -213354,6 +213378,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"
               >
@@ -213679,6 +213704,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"
               >