@commercetools-frontend/experimental-components 0.0.2

package/src/utils/products/products.spec.js

@@ -0,0 +1,331 @@
+import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
+import {
+  sanitizeListColumns,
+  computedProperties,
+  resolveStatusType,
+  splitVariantAttributesByConstraint,
+} from './products';
+
+describe('sanitizing product list columns', () => {
+  it('omits some fields in the product list columns', () => {
+    expect(
+      sanitizeListColumns([
+        { key: 'id' },
+        { key: 'name' },
+        { key: 'a-1', attributeDefinition: {} },
+        { key: 'a-2', customType: {} },
+        { key: 'a-3', customLabel: {} },
+      ])
+    ).toEqual([
+      { key: 'id' },
+      { key: 'name' },
+      { key: 'a-1' },
+      { key: 'a-2' },
+      { key: 'a-3' },
+    ]);
+  });
+});
+
+describe('splitting variant attributes by constraint', () => {
+  const product = {
+    productType: {
+      obj: {
+        attributes: [
+          { attributeConstraint: 'constraint1' },
+          { attributeConstraint: 'constraint2' },
+          { attributeConstraint: 'constraint3' },
+        ],
+      },
+    },
+  };
+  const attributeDefinitions = splitVariantAttributesByConstraint(
+    product,
+    'constraint2'
+  );
+  it('contains one product attribute definition by constraint', () => {
+    expect(attributeDefinitions[0]).toHaveLength(1);
+  });
+
+  it('contains two variant attribute definitions by constraint', () => {
+    expect(attributeDefinitions[1]).toHaveLength(2);
+  });
+
+  it('contains the filtered constraint in the product definition', () => {
+    expect(attributeDefinitions[0]).toEqual([
+      {
+        attributeConstraint: 'constraint2',
+      },
+    ]);
+  });
+
+  it('contains the non filtered constraint in the variant definition', () => {
+    expect(attributeDefinitions[1]).toEqual([
+      {
+        attributeConstraint: 'constraint1',
+      },
+      {
+        attributeConstraint: 'constraint3',
+      },
+    ]);
+  });
+});
+
+describe('computing product properties', () => {
+  describe('computing prices', () => {
+    const product = {
+      masterVariant: {
+        prices: [
+          { value: { centAmount: 1000, currencyCode: 'EUR' } },
+          { value: { centAmount: 900, currencyCode: 'USD' } },
+        ],
+      },
+      variants: [
+        {
+          prices: [
+            { value: { centAmount: 2000, currencyCode: 'EUR' } },
+            { value: { centAmount: 1800, currencyCode: 'USD' } },
+            {
+              value: {
+                preciseAmount: 9712,
+                currencyCode: 'USD',
+                fractionDigits: 9,
+                type: 'highPrecision',
+              },
+            },
+          ],
+        },
+      ],
+    };
+
+    const intl = {
+      formatNumber: (amount, currency) => `${currency.currency} ${amount}`,
+    };
+    it('gets the prices from the given product', () => {
+      const pricesList = computedProperties.price({ product, intl });
+      expect(pricesList).toBe('EUR 10, USD 0.000009712');
+    });
+  });
+  describe('computing categories', () => {
+    const product = {
+      categories: [
+        {
+          id: 'cat-id-1',
+          obj: {
+            externalId: 500,
+            name: {
+              en: 'category-name-1',
+              de: 'Kategori-name-1',
+            },
+            ancestors: [
+              {
+                name: {
+                  en: 'category-ancestor-1',
+                  de: 'Kategori-ancestor-1',
+                },
+              },
+            ],
+          },
+        },
+      ],
+    };
+
+    it('gets the category info from a given product', () => {
+      const expected = [
+        {
+          id: 'cat-id-1',
+          name: 'category-name-1 | ext. ID: 500',
+          path: 'category-ancestor-1 > category-name-1',
+          level: 1,
+        },
+      ];
+
+      const actual = computedProperties.categories({
+        product,
+        language: 'en',
+        languages: ['de', 'en', 'fr'],
+      });
+
+      expect(actual).toEqual(expected);
+    });
+
+    it('gets the number of categories contained in the product', () => {
+      const totalCategories = computedProperties.totalCategories({ product });
+      expect(totalCategories).toBe(1);
+    });
+  });
+
+  describe('computing product type', () => {
+    it('gets the product type name given a product', () => {
+      const product = {
+        productType: {
+          obj: {
+            name: 'product name',
+          },
+        },
+      };
+      const productName = computedProperties.productType({ product });
+
+      expect(productName).toBe(product.productType.obj.name);
+    });
+
+    it('gets NO_VALUE_FALLBACK when no product type name is passed', () => {
+      const product = {
+        productType: {},
+      };
+      const productName = computedProperties.productType({ product });
+
+      expect(productName).toBe(NO_VALUE_FALLBACK);
+    });
+  });
+
+  describe('computing state', () => {
+    describe('with expanded `state`', () => {
+      it('should return the state name', () => {
+        const product = {
+          state: {
+            obj: {
+              name: { en: 'state' },
+            },
+          },
+        };
+        const state = computedProperties.state({
+          product,
+          language: 'en',
+        });
+
+        expect(state).toBe(product.state.obj.name.en);
+      });
+    });
+
+    describe('without a name on the `state`', () => {
+      it('gets NO_VALUE_FALLBACK when no state name is passed', () => {
+        const product = {
+          state: { obj: {} },
+        };
+        const state = computedProperties.state({
+          product,
+          language: 'en',
+        });
+
+        expect(state).toBe(NO_VALUE_FALLBACK);
+      });
+    });
+
+    describe('with non expanded `state`', () => {
+      it('should return the `NO_VALUE_FALLBACK`', () => {
+        const product = {
+          state: {},
+        };
+        const state = computedProperties.state({
+          product,
+          language: 'en',
+        });
+
+        expect(state).toBe(NO_VALUE_FALLBACK);
+      });
+    });
+  });
+
+  describe('computing tax categories', () => {
+    describe('with expanded `taxCategory`', () => {
+      it('should return the tax category name', () => {
+        const product = {
+          taxCategory: {
+            obj: {
+              name: 'tax category',
+            },
+          },
+        };
+        const taxCategory = computedProperties.taxCategory({ product });
+
+        expect(taxCategory).toBe(product.taxCategory.obj.name);
+      });
+    });
+
+    describe('without a name on the `taxCategory`', () => {
+      it('gets NO_VALUE_FALLBACK when no tax category name is passed', () => {
+        const product = {
+          productType: { obj: {} },
+        };
+        const taxCategory = computedProperties.taxCategory({ product });
+
+        expect(taxCategory).toBe(NO_VALUE_FALLBACK);
+      });
+    });
+
+    describe('with non expanded `taxCategory`', () => {
+      it('should return the `NO_VALUE_FALLBACK`', () => {
+        const product = {
+          productType: {},
+        };
+        const taxCategory = computedProperties.taxCategory({ product });
+
+        expect(taxCategory).toBe(NO_VALUE_FALLBACK);
+      });
+    });
+  });
+
+  describe('computing variants', () => {
+    describe('all variants have sku', () => {
+      const product = {
+        masterVariant: { sku: 'master-variant-sku' },
+        variants: [{ sku: 'variant-1-sku' }, { sku: 'variant-2-sku' }],
+      };
+
+      it('gets the sku concatenation for all variants including master', () => {
+        const skuString = computedProperties.sku({ product });
+        expect(skuString).toBe(
+          'master-variant-sku, variant-1-sku, variant-2-sku'
+        );
+      });
+
+      it('gets the number of variants available given a product', () => {
+        const totalVariants = computedProperties.totalVariants({ product });
+        expect(totalVariants).toBe(3);
+      });
+    });
+
+    describe('some variants are missing sku', () => {
+      const product = {
+        masterVariant: {},
+        variants: [{ sku: 'variant-1-sku' }, {}, { sku: 'variant-3-sku' }],
+      };
+
+      it('filters out empty skus', () => {
+        const skuString = computedProperties.sku({ product });
+        expect(skuString).toBe('variant-1-sku, variant-3-sku');
+      });
+    });
+  });
+});
+
+describe('resolving product status types', () => {
+  it('gets a modified status type product', () => {
+    const expectedModified = 'modified';
+    const actualModified = resolveStatusType({
+      hasStagedChanges: true,
+      published: true,
+    });
+
+    expect(actualModified).toBe(expectedModified);
+  });
+
+  it('gets a published status type product', () => {
+    const expectedModified = 'published';
+    const actualModified = resolveStatusType({
+      hasStagedChanges: false,
+      published: true,
+    });
+
+    expect(actualModified).toBe(expectedModified);
+  });
+
+  it('gets an unpublished status type product', () => {
+    const expectedModified = 'unpublished';
+    const actualModified = resolveStatusType({
+      published: false,
+    });
+
+    expect(actualModified).toBe(expectedModified);
+  });
+});

package/src/utils/query-string/index.js

@@ -0,0 +1 @@
+export * from './query-string';

package/src/utils/query-string/query-string.js

@@ -0,0 +1,37 @@
+/* eslint-disable no-param-reassign */
+
+export function pickFilters(filterParams, settings) {
+  return filterParams.reduce((acc, filter) => {
+    const filterValue = settings[filter];
+    if (filterValue || typeof filterValue === 'boolean')
+      acc[filter] = filterValue;
+    return acc;
+  }, {});
+}
+
+export function coercion(values) {
+  return Object.keys(values).reduce((acc, p) => {
+    const paramValue = values[p];
+    if (!isNaN(paramValue)) {
+      acc[p] = parseInt(paramValue, 10);
+      return acc;
+    }
+
+    acc[p] =
+      paramValue === 'true' || (paramValue === 'false' ? false : paramValue);
+    return acc;
+  }, {});
+}
+
+export function sanitize(param) {
+  if (typeof param === 'string')
+    return (
+      param
+        // Replace all \ with \\ (to prevent generate escape characters)
+        .replace(/\\/g, '\\\\')
+        // Replace all " with \"
+        .replace(/"/g, '\\"')
+    );
+
+  return param;
+}

package/src/utils/query-string/query-string.spec.js

@@ -0,0 +1,56 @@
+import { pickFilters, coercion, sanitize } from './query-string';
+
+describe('coercion', () => {
+  it('converts a numeric string into an integer', () => {
+    expect(coercion({ input: '10' })).toEqual({ input: 10 });
+  });
+
+  it('converts a float string into an integer', () => {
+    expect(coercion({ input: '10.5' })).toEqual({ input: 10 });
+  });
+
+  it('converts a false boolean string into an actual false boolean', () => {
+    expect(coercion({ input: 'false' })).toEqual({ input: false });
+  });
+
+  it('converts a true boolean string into an actual true boolean', () => {
+    expect(coercion({ input: 'true' })).toEqual({ input: true });
+  });
+});
+
+describe('picking filters', () => {
+  it('picks the filters marked as true flags', () => {
+    const params = ['flagOne', 'numberOne'];
+    const settings = {
+      flagOne: true,
+      flagTwo: false,
+      numberOne: 10,
+      stringOne: 'nice',
+    };
+    const expected = {
+      flagOne: true,
+      numberOne: 10,
+    };
+
+    expect(pickFilters(params, settings)).toEqual(expected);
+  });
+});
+
+describe('sanitize', () => {
+  it('should escape in correct order', () => {
+    expect(sanitize('value \\"')).toBe('value \\\\\\"');
+  });
+
+  it('should escape reserved character "', () => {
+    expect(sanitize('value "')).toBe('value \\"');
+  });
+
+  it('should escape reserved character "single backslash"', () => {
+    expect(sanitize('value \\')).toBe('value \\\\');
+  });
+
+  it('should ignore invalid params', () => {
+    expect(sanitize(undefined)).toBe(undefined);
+    expect(sanitize(null)).toBe(null);
+  });
+});

package/src/utils/request-cache/index.js

@@ -0,0 +1,2 @@
+export { default } from './request-cache';
+export * from './request-cache';

package/src/utils/request-cache/request-cache.js

@@ -0,0 +1,52 @@
+import { deepEqual } from 'fast-equals';
+
+export class RequestCache {
+  timestamp = null;
+  key = null;
+  result = null;
+  expiryDurationInSeconds = 5 * 60;
+  get(key) {
+    if (this.isValid(key)) {
+      return this.result;
+    }
+    // Reset cache in case the cache was not valid
+    // The cache contains big-ass objects (a few megabytes) so removing the
+    // reference to them probably helps garbage collection a lot
+    this.clear();
+    return null;
+  }
+  set(key, result) {
+    this.timestamp = Date.now();
+    this.key = key;
+    this.result = result;
+  }
+  setExpiryDurationInSeconds(duration) {
+    this.expiryDurationInSeconds = duration;
+  }
+  isValid(key) {
+    return (
+      this.timestamp &&
+      // keep cache valid for 5 minutes
+      this.timestamp > Date.now() - this.expiryDurationInSeconds * 1000 &&
+      deepEqual(this.key, key)
+    );
+  }
+  clear() {
+    this.timestamp = null;
+    this.key = null;
+    this.result = null;
+  }
+}
+
+// Same as RequestCache but doesn't require any keys
+export class NoOptionsRequestCache extends RequestCache {
+  cacheKey = 'singular';
+  get() {
+    return super.get(this.cacheKey);
+  }
+  set(result) {
+    return super.set(this.cacheKey, result);
+  }
+}
+
+export default RequestCache;

package/src/utils/request-cache/request-cache.spec.js

@@ -0,0 +1,118 @@
+import RequestCache, { NoOptionsRequestCache } from './request-cache';
+
+jest.useFakeTimers();
+
+describe('RequestCache', () => {
+  let cache;
+  const key = { foo: true };
+  const value = { bar: true };
+  beforeEach(() => {
+    cache = new RequestCache();
+  });
+
+  describe('storing and retrieving values', () => {
+    describe('when there is an entry', () => {
+      beforeEach(() => {
+        cache.set(key, value);
+      });
+      describe('when calling `get` with the key of the entry', () => {
+        describe('when calling `get` within the expiry duration', () => {
+          it('should return the value', () => {
+            expect(cache.get(key)).toBe(value);
+          });
+        });
+        describe('when calling `get` after the expiry duration', () => {
+          beforeEach(() => {
+            // cache is never valid
+            cache.setExpiryDurationInSeconds(-1);
+          });
+          it('should return `null`', () => {
+            expect(cache.get(key)).toBe(null);
+          });
+        });
+      });
+      describe('when calling `get` with another key', () => {
+        let result;
+        beforeEach(() => {
+          result = cache.get({ baz: true });
+        });
+        it('should return `null`', () => {
+          expect(result).toBe(null);
+        });
+        describe('when then calling `get` with the original key', () => {
+          it('should have removed the cached value', () => {
+            expect(cache.get(key)).toBe(null);
+          });
+        });
+      });
+    });
+    describe('when there is no entry', () => {
+      it('should return `null`', () => {
+        expect(cache.get()).toBe(null);
+      });
+    });
+
+    describe('when storing multiple values of same key sequentially', () => {
+      describe('when calling `get`', () => {
+        beforeEach(() => {
+          cache.set(key, { something: true });
+          cache.set(key, { somethingElse: true });
+          cache.set(key, value);
+        });
+        it('should return the latest value', () => {
+          expect(cache.get(key)).toBe(value);
+        });
+      });
+    });
+  });
+});
+
+describe('NoOptionsRequestCache', () => {
+  let cache;
+  const value = { bar: true };
+  beforeEach(() => {
+    cache = new NoOptionsRequestCache();
+  });
+
+  describe('storing and retrieving values', () => {
+    describe('when there is an entry', () => {
+      beforeEach(() => {
+        cache.set(value);
+      });
+      describe('when calling `get`', () => {
+        describe('when calling `get` within the expiry duration', () => {
+          it('should return the value', () => {
+            expect(cache.get()).toBe(value);
+          });
+        });
+        describe('when calling `get` after the expiry duration', () => {
+          beforeEach(() => {
+            // cache is never valid
+            cache.setExpiryDurationInSeconds(-1);
+          });
+          it('should return `null`', () => {
+            expect(cache.get()).toBe(null);
+          });
+        });
+      });
+    });
+    describe('when there is no entry', () => {
+      it('should return `null`', () => {
+        expect(cache.get()).toBe(null);
+      });
+    });
+
+    describe('when storing multiple values sequentially', () => {
+      describe('when calling `get`', () => {
+        beforeEach(() => {
+          cache.set({ something: true });
+          cache.set({ somethingElse: true });
+          cache.set(value);
+        });
+        it('should return the latest value', () => {
+          expect(cache.get()).toBe(value);
+        });
+      });
+    });
+  });
+});

package/src/utils/shallow-equal/index.js

@@ -0,0 +1 @@
+export { default } from './shallow-equal';

package/src/utils/shallow-equal/shallow-equal.js

@@ -0,0 +1,19 @@
+// copied from
+// https://github.com/reactjs/react-redux/blob/master/src/utils/shallowEqual.js
+
+export default function shallowEqual(objA, objB) {
+  if (objA === objB) return true;
+
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+
+  if (keysA.length !== keysB.length) return false;
+
+  // Test for A's keys different from B.
+  const hasOwn = Object.prototype.hasOwnProperty;
+  for (let i = 0; i < keysA.length; i += 1)
+    if (!hasOwn.call(objB, keysA[i]) || objA[keysA[i]] !== objB[keysA[i]])
+      return false;
+
+  return true;
+}

package/src/utils/shallow-equal/shallow-equal.spec.js

@@ -0,0 +1,45 @@
+import shallowEqual from './shallow-equal';
+
+describe('equal arguments', () => {
+  it('returns true for undefined values', () => {
+    expect(
+      shallowEqual({ a: 1, b: 2, c: undefined }, { a: 1, b: 2, c: undefined })
+    ).toBe(true);
+  });
+  it('returns true for numeric values', () => {
+    expect(shallowEqual({ a: 1, b: 2, c: 3 }, { a: 1, b: 2, c: 3 })).toBe(true);
+  });
+  it('returns true for referentially equal values', () => {
+    const o = {};
+    expect(shallowEqual({ a: 1, b: 2, c: o }, { a: 1, b: 2, c: o })).toBe(true);
+  });
+  it('returns true for referentially equal function values', () => {
+    const o = {};
+    const d = () => 1;
+    expect(shallowEqual({ a: 1, b: 2, c: o, d }, { a: 1, b: 2, c: o, d })).toBe(
+      true
+    );
+  });
+});
+
+describe('unequal arguments', () => {
+  it('returns false if argument fields are different function identities', () => {
+    expect(
+      shallowEqual({ a: 1, b: 2, d: () => 1 }, { a: 1, b: 2, d: () => 1 })
+    ).toBe(false);
+  });
+
+  it('returns false if first argument has too many keys', () => {
+    expect(shallowEqual({ a: 1, b: 2, c: 3 }, { a: 1, b: 2 })).toBe(false);
+  });
+
+  it('returns false if second argument has too many keys', () => {
+    expect(shallowEqual({ a: 1, b: 2 }, { a: 1, b: 2, c: 3 })).toBe(false);
+  });
+
+  it('returns false if arguments have different keys', () => {
+    expect(
+      shallowEqual({ a: 1, b: 2, c: undefined }, { a: 1, bb: 2, c: undefined })
+    ).toBe(false);
+  });
+});

package/src/utils/should-update-attribute-input/index.js

@@ -0,0 +1 @@
+export { default } from './should-update-attribute-input';