Update test cases

src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx

@@ -28,20 +28,17 @@ const price: AllOrAttribute<string> = {
   }))
 };
 
-const stock: AllOrAttribute<string[]> = {
+const stock: AllOrAttribute<number[]> = {
   all: false,
   attribute: selectedAttributes[0].id,
-  value: selectedWarehouses.map((_, warehouseIndex) =>
-    ((warehouseIndex + 2) * 3).toString()
+  value: selectedWarehouses.map(
+    (_, warehouseIndex) => (warehouseIndex + 2) * 3
   ),
   values: selectedAttributes[0].values.map((attribute, attributeIndex) => ({
     slug: attribute.slug,
-    value: selectedWarehouses.map((_, warehouseIndex) =>
-      (
-        selectedAttributes.length * 10 -
-        attributeIndex -
-        warehouseIndex * 3
-      ).toString()
+    value: selectedWarehouses.map(
+      (_, warehouseIndex) =>
+        selectedAttributes.length * 10 - attributeIndex - warehouseIndex * 3
     )
   }))
 };

src/products/components/ProductVariantCreatorPage/createVariants.test.ts

@@ -18,7 +18,7 @@ describe("Creates variant matrix", () => {
 
   it("with constant price and stock", () => {
     const price = "49.99";
-    const stock = 80;
+    const stock = [80, 40, 30];
 
     const data: ProductVariantCreateFormData = {
       ...thirdStep,
@@ -30,7 +30,7 @@ describe("Creates variant matrix", () => {
       stock: {
         ...thirdStep.stock,
         all: true,
-        value: stock.toString()
+        value: stock
       }
     };
 
@@ -44,13 +44,15 @@ describe("Creates variant matrix", () => {
 
     variants.forEach(variant => {
       expect(variant.priceOverride).toBe(price);
-      expect(variant.quantity).toBe(stock);
+      variant.stocks.forEach((_, stockIndex) => {
+        expect(variant.stocks[stockIndex].quantity).toBe(stock[stockIndex]);
+      });
     });
   });
 
   it("with constant stock and attribute dependent price", () => {
     const price = 49.99;
-    const stock = 80;
+    const stock = [80, 40, 30];
     const attribute = attributes.find(
       attribute => attribute.id === thirdStep.attributes[0].id
     );
@@ -69,7 +71,7 @@ describe("Creates variant matrix", () => {
       stock: {
         ...thirdStep.stock,
         all: true,
-        value: stock.toString()
+        value: stock
       }
     };
 
@@ -82,7 +84,9 @@ describe("Creates variant matrix", () => {
     );
 
     variants.forEach(variant => {
-      expect(variant.quantity).toBe(stock);
+      variant.stocks.forEach((_, stockIndex) => {
+        expect(variant.stocks[stockIndex].quantity).toBe(stock[stockIndex]);
+      });
     });
 
     attribute.values.forEach((attributeValue, attributeValueIndex) => {
@@ -103,7 +107,7 @@ describe("Creates variant matrix", () => {
 
   it("with constant price and attribute dependent stock", () => {
     const price = "49.99";
-    const stock = 80;
+    const stock = [80, 40, 30];
     const attribute = attributes.find(
       attribute => attribute.id === thirdStep.attributes[0].id
     );
@@ -121,7 +125,9 @@ describe("Creates variant matrix", () => {
         attribute: attribute.id,
         values: attribute.values.map((attributeValue, attributeValueIndex) => ({
           slug: attributeValue,
-          value: (stock * (attributeValueIndex + 1)).toString()
+          value: stock.map(
+            (_, stockIndex) => stock[stockIndex] * (attributeValueIndex + 1)
+          )
         }))
       }
     };
@@ -147,14 +153,18 @@ describe("Creates variant matrix", () => {
             ).values[0] === attributeValue
         )
         .forEach(variant => {
-          expect(variant.quantity).toBe(stock * (attributeValueIndex + 1));
+          variant.stocks.forEach((_, stockIndex) => {
+            expect(variant.stocks[stockIndex].quantity).toBe(
+              stock[stockIndex] * (attributeValueIndex + 1)
+            );
+          });
         });
     });
   });
 
   it("with attribute dependent price and stock", () => {
     const price = 49.99;
-    const stock = 80;
+    const stock = [80, 40, 30];
     const attribute = attributes.find(
       attribute => attribute.id === thirdStep.attributes[0].id
     );
@@ -176,7 +186,9 @@ describe("Creates variant matrix", () => {
         attribute: attribute.id,
         values: attribute.values.map((attributeValue, attributeValueIndex) => ({
           slug: attributeValue,
-          value: (stock * (attributeValueIndex + 1)).toString()
+          value: stock.map(
+            (_, stockIndex) => stock[stockIndex] * (attributeValueIndex + 1)
+          )
         }))
       }
     };
@@ -213,7 +225,11 @@ describe("Creates variant matrix", () => {
             ).values[0] === attributeValue
         )
         .forEach(variant => {
-          expect(variant.quantity).toBe(stock * (attributeValueIndex + 1));
+          variant.stocks.forEach((_, stockIndex) => {
+            expect(variant.stocks[stockIndex].quantity).toBe(
+              stock[stockIndex] * (attributeValueIndex + 1)
+            );
+          });
         });
     });
   });

src/products/components/ProductVariantCreatorPage/createVariants.ts

@@ -36,7 +36,6 @@ function createVariant(
   const stocks = data.stock.all
     ? data.stock.value
     : getAttributeValuePriceOrStock(attributes, data.stock);
-
   return {
     attributes: attributes.map(attribute => ({
       id: attribute.attributeId,
@@ -45,7 +44,7 @@ function createVariant(
     priceOverride,
     sku: "",
     stocks: stocks.map((quantity, stockIndex) => ({
-      quantity: parseInt(quantity, 10),
+      quantity,
       warehouse: data.warehouses[stockIndex]
     }))
   };

src/products/components/ProductVariantCreatorPage/fixtures.ts

@@ -1,3 +1,4 @@
+import { WarehouseFragment } from "@saleor/warehouses/types/WarehouseFragment";
 import { createVariants } from "./createVariants";
 import {
   AllOrAttribute,
@@ -32,8 +33,31 @@ export const attributes = [
   }
 ];
 
+export const warehouses: WarehouseFragment[] = [
+  {
+    __typename: "Warehouse",
+    id: "wh-1",
+    name: "Warehouse 1"
+  },
+  {
+    __typename: "Warehouse",
+    id: "wh-2",
+    name: "Warehouse 2"
+  },
+  {
+    __typename: "Warehouse",
+    id: "wh-3",
+    name: "Warehouse 3"
+  },
+  {
+    __typename: "Warehouse",
+    id: "wh-4",
+    name: "Warehouse 4"
+  }
+];
+
 export const secondStep: ProductVariantCreateFormData = {
-  ...createInitialForm([], "10.99"),
+  ...createInitialForm([], "10.99", warehouses),
   attributes: [
     {
       id: attributes[0].id,
@@ -65,10 +89,11 @@ export const thirdStep: ProductVariantCreateFormData = {
       id: attributes[3].id,
       values: [0, 4].map(index => attributes[3].values[index])
     }
-  ]
+  ],
+  warehouses: warehouses.map(warehouse => warehouse.id)
 };
 
-const price: AllOrAttribute = {
+const price: AllOrAttribute<string> = {
   all: false,
   attribute: thirdStep.attributes[1].id,
   value: "",
@@ -83,18 +108,18 @@ const price: AllOrAttribute = {
     }
   ]
 };
-const stock: AllOrAttribute = {
+const stock: AllOrAttribute<number[]> = {
   all: false,
   attribute: thirdStep.attributes[2].id,
-  value: "",
+  value: [],
   values: [
     {
       slug: thirdStep.attributes[2].values[0],
-      value: "50"
+      value: [50, 20, 45, 75]
     },
     {
       slug: thirdStep.attributes[2].values[1],
-      value: "35"
+      value: [80, 50, 85, 105]
     }
   ]
 };

src/products/components/ProductVariantCreatorPage/reducer.test.ts

@@ -1,4 +1,10 @@
-import { attributes, fourthStep, secondStep, thirdStep } from "./fixtures";
+import {
+  attributes,
+  fourthStep,
+  secondStep,
+  thirdStep,
+  warehouses
+} from "./fixtures";
 import reducer, { VariantField } from "./reducer";
 
 function execActions<TState, TAction>(
@@ -60,6 +66,9 @@ describe("Reducer is able to", () => {
       {
         type: "changeApplyPriceToAllValue",
         value
+      },
+      {
+        type: "reload"
       }
     ]);
 
@@ -69,20 +78,24 @@ describe("Reducer is able to", () => {
   });
 
   it("select stock for all variants", () => {
-    const value = 45.99;
+    const quantity = 45.99;
     const state = execActions(thirdStep, reducer, [
       {
         all: true,
         type: "applyStockToAll"
       },
       {
+        quantity,
         type: "changeApplyStockToAllValue",
-        value: value.toString()
+        warehouseIndex: 1
+      },
+      {
+        type: "reload"
       }
     ]);
 
     expect(state.stock.all).toBeTruthy();
-    expect(state.stock.value).toBe(value.toString());
+    expect(state.stock.value[1]).toBe(quantity);
     expect(state).toMatchSnapshot();
   });
 
@@ -107,6 +120,9 @@ describe("Reducer is able to", () => {
         type: "changeAttributeValuePrice",
         value: (value + 6).toString(),
         valueId: attribute.values[1]
+      },
+      {
+        type: "reload"
       }
     ]);
 
@@ -139,6 +155,9 @@ describe("Reducer is able to", () => {
         type: "changeAttributeValueStock",
         value: (value + 6).toString(),
         valueId: attribute.values[1]
+      },
+      {
+        type: "reload"
       }
     ]);
 
@@ -168,6 +187,29 @@ describe("Reducer is able to", () => {
     expect(state.variants[variantIndex - 1].priceOverride).toBe(
       fourthStep.variants[variantIndex - 1].priceOverride
     );
+    expect(state).toMatchSnapshot();
+  });
+
+  it("modify individual variant stock", () => {
+    const quantity = 5;
+    const variantIndex = 3;
+
+    const state = execActions(fourthStep, reducer, [
+      {
+        stock: {
+          quantity,
+          warehouse: warehouses[0].id
+        },
+        type: "changeVariantStockData",
+        variantIndex
+      }
+    ]);
+
+    expect(state.variants[variantIndex].stocks[0].quantity).toBe(quantity);
+    expect(state.variants[variantIndex - 1].stocks[0].quantity).toBe(
+      fourthStep.variants[variantIndex - 1].stocks[0].quantity
+    );
+    expect(state).toMatchSnapshot();
   });
 
   it("delete variant", () => {

src/utils/lists/lists.ts

@@ -35,7 +35,9 @@ export function update<TData>(
   list: List<TData>,
   compare: Compare<TData>
 ) {
-  return add(data, remove(data, list, compare));
+  const index = list.findIndex(element => compare(data, element));
+
+  return updateAtIndex(data, list, index);
 }
 
 export function updateAtIndex<TData>(