@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

package/src/hooks/use-storage/use-storage.spec.js

@@ -1,237 +0,0 @@
-import { renderHook, act } from '@testing-library/react-hooks';
-import useStorage from './use-storage';
-
-jest.mock('@commercetools-frontend/application-shell-connectors', () => ({
-  useApplicationContext: jest.fn(() => ({
-    user: {
-      id: 'test-user-id',
-    },
-  })),
-}));
-
-const storageKey = 'test-storage-key';
-const initialStorageValue = 'test-storage-value';
-
-describe('useStorage', () => {
-  describe('without previous value', () => {
-    describe('with local storage', () => {
-      describe('when string does not contain a nil value', () => {
-        it('should return the initial value', () => {
-          const { result } = renderHook(() =>
-            useStorage(storageKey, initialStorageValue)
-          );
-
-          const [actualValue] = result.current;
-
-          expect(actualValue).toEqual(initialStorageValue);
-        });
-
-        it('should allow getting the stored value', () => {
-          const { result } = renderHook(() =>
-            useStorage(storageKey, initialStorageValue)
-          );
-
-          const [, , getValue] = result.current;
-
-          expect(getValue()).toEqual(initialStorageValue);
-        });
-
-        it('should allow setting the value', () => {
-          const nextStorageValue = 'test-storage-key-next';
-
-          const { result } = renderHook(() =>
-            useStorage(storageKey, initialStorageValue)
-          );
-
-          const [, setValue] = result.current;
-
-          act(() => {
-            setValue(nextStorageValue);
-          });
-
-          const [actualValue] = result.current;
-
-          expect(actualValue).toEqual(nextStorageValue);
-          expect(actualValue).not.toEqual(initialStorageValue);
-        });
-      });
-      describe('when string contains a nil value', () => {
-        const previouslyStoredValue = 'null';
-
-        beforeEach(() => {
-          window.localStorage.getItem.mockReturnValue(previouslyStoredValue);
-        });
-
-        it('should return null', () => {
-          const { result } = renderHook(() => useStorage(storageKey));
-
-          const [actualValue] = result.current;
-
-          expect(actualValue).toEqual(null);
-        });
-
-        it('should remove the item', () => {
-          renderHook(() => useStorage(storageKey, initialStorageValue));
-
-          expect(window.localStorage.removeItem).toHaveBeenCalled();
-        });
-      });
-    });
-
-    describe('with session storage', () => {
-      it('should return the initial value', () => {
-        const { result } = renderHook(() =>
-          useStorage(storageKey, initialStorageValue, {
-            storageType: 'session',
-          })
-        );
-
-        const [actualValue] = result.current;
-
-        expect(actualValue).toEqual(initialStorageValue);
-      });
-
-      it('should allow getting the stored value', () => {
-        const { result } = renderHook(() =>
-          useStorage(storageKey, initialStorageValue, {
-            storageType: 'session',
-          })
-        );
-
-        const [, , getValue] = result.current;
-
-        expect(getValue()).toEqual(initialStorageValue);
-      });
-
-      it('should allow setting the value', () => {
-        const nextStorageValue = 'test-storage-key-next';
-
-        const { result } = renderHook(() =>
-          useStorage(storageKey, initialStorageValue, {
-            storageType: 'session',
-          })
-        );
-
-        const [, setValue] = result.current;
-
-        act(() => {
-          setValue(nextStorageValue);
-        });
-
-        const [actualValue] = result.current;
-
-        expect(actualValue).toEqual(nextStorageValue);
-        expect(actualValue).not.toEqual(initialStorageValue);
-      });
-    });
-  });
-
-  describe('with previous value', () => {
-    describe('with local storage', () => {
-      describe('when string does not contain a nil value', () => {
-        const previouslyStoredValue = 'test-storage-value-previous';
-
-        beforeEach(() => {
-          window.localStorage.getItem.mockReturnValue(previouslyStoredValue);
-        });
-
-        it('should return the previously stored value', () => {
-          const { result } = renderHook(() =>
-            useStorage(storageKey, initialStorageValue)
-          );
-
-          const [actualValue] = result.current;
-
-          expect(actualValue).toEqual(previouslyStoredValue);
-          expect(actualValue).not.toEqual(initialStorageValue);
-        });
-
-        it('should allow setting the value', () => {
-          const nextStorageValue = 'test-storage-key-next';
-
-          const { result } = renderHook(() =>
-            useStorage(storageKey, initialStorageValue)
-          );
-
-          const [, setValue] = result.current;
-
-          act(() => {
-            setValue(nextStorageValue);
-          });
-
-          const [actualValue] = result.current;
-
-          expect(actualValue).toEqual(nextStorageValue);
-          expect(actualValue).not.toEqual(previouslyStoredValue);
-          expect(actualValue).not.toEqual(initialStorageValue);
-        });
-      });
-      describe('when string contains a nil value', () => {
-        const previouslyStoredValue = 'null';
-
-        beforeEach(() => {
-          window.localStorage.getItem.mockReturnValue(previouslyStoredValue);
-        });
-
-        it('should return the initial value', () => {
-          const { result } = renderHook(() =>
-            useStorage(storageKey, initialStorageValue)
-          );
-
-          const [actualValue] = result.current;
-
-          expect(actualValue).toEqual(initialStorageValue);
-        });
-
-        it('should remove the item', () => {
-          renderHook(() => useStorage(storageKey, initialStorageValue));
-
-          expect(window.localStorage.removeItem).toHaveBeenCalled();
-        });
-      });
-    });
-
-    describe('with session storage', () => {
-      const previouslyStoredValue = 'test-storage-value-previous';
-
-      beforeEach(() => {
-        window.sessionStorage.getItem.mockReturnValue(previouslyStoredValue);
-      });
-
-      it('should return the previously stored value', () => {
-        const { result } = renderHook(() =>
-          useStorage(storageKey, initialStorageValue, {
-            storageType: 'session',
-          })
-        );
-
-        const [actualValue] = result.current;
-
-        expect(actualValue).toEqual(previouslyStoredValue);
-        expect(actualValue).not.toEqual(initialStorageValue);
-      });
-
-      it('should allow setting the value', () => {
-        const nextStorageValue = 'test-storage-key-next';
-
-        const { result } = renderHook(() =>
-          useStorage(storageKey, initialStorageValue, {
-            storageType: 'session',
-          })
-        );
-
-        const [, setValue] = result.current;
-
-        act(() => {
-          setValue(nextStorageValue);
-        });
-
-        const [actualValue] = result.current;
-
-        expect(actualValue).toEqual(nextStorageValue);
-        expect(actualValue).not.toEqual(previouslyStoredValue);
-        expect(actualValue).not.toEqual(initialStorageValue);
-      });
-    });
-  });
-});

package/src/hooks/use-store-keys-in-data-fence/index.js

@@ -1 +0,0 @@
-export { default } from './use-store-keys-in-data-fence';

package/src/hooks/use-store-keys-in-data-fence/use-store-keys-in-data-fence.js

@@ -1,38 +0,0 @@
-import get from 'lodash.get';
-import camelCase from 'lodash.camelcase';
-import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-
-export const toPermission = (permission, resourceName) =>
-  camelCase(`can ${permission} ${resourceName}`);
-
-const createComposePath = (resourceName) => (permission) =>
-  // e.g applicationContext.dataFences?.store?.orders?.canViewOrders?.values
-  `dataFences.store.${resourceName}.${permission}.values`;
-
-const useStoreKeysInDataFences = ({ resourceName, permission = null }) => {
-  const composePath = createComposePath(resourceName);
-
-  const storeKeysInDataFences = useApplicationContext((applicationContext) => {
-    if (permission)
-      return get(
-        applicationContext,
-        composePath(toPermission(permission, resourceName)),
-        []
-      );
-    return [
-      ...get(
-        applicationContext,
-        composePath(toPermission('manage', resourceName)),
-        []
-      ),
-      ...get(
-        applicationContext,
-        composePath(toPermission('view', resourceName)),
-        []
-      ),
-    ];
-  });
-  return storeKeysInDataFences;
-};
-
-export default useStoreKeysInDataFences;

package/src/hooks/use-store-keys-in-data-fence/use-store-keys-in-data-fence.spec.js

@@ -1,141 +0,0 @@
-import PropTypes from 'prop-types';
-import {
-  renderApp,
-  denormalizeDataFences,
-} from '@commercetools-frontend/application-shell/test-utils';
-import useStoreKeysInDataFences from './use-store-keys-in-data-fence';
-
-const TestComponent = (props) => {
-  const storeKeysInDataFences = useStoreKeysInDataFences({
-    resourceName: props.resourceName ?? 'orders',
-    permission: props.permission,
-  });
-
-  return storeKeysInDataFences.length > 0 ? (
-    <ul>
-      {storeKeysInDataFences.map((storeKey) => (
-        <li key={storeKey}>{storeKey}</li>
-      ))}
-    </ul>
-  ) : (
-    'No DataFences'
-  );
-};
-TestComponent.propTypes = {
-  resourceName: PropTypes.string,
-  permission: PropTypes.string,
-};
-
-describe('with no data fences', () => {
-  it.each([null, undefined, 'x', 10, [], {}])(
-    'should return an empty list',
-    async (noDataFences) => {
-      const render = renderApp(<TestComponent />, {
-        project: {
-          allAppliedDataFences: denormalizeDataFences(noDataFences),
-        },
-      });
-      await render.findByText('No DataFences');
-    }
-  );
-});
-
-describe('with data fences', () => {
-  const manageDataFences = ['a', 'b', 'c'];
-  const viewDataFences = ['x', 'y', 'z'];
-  it('should return a list of data fences', async () => {
-    const render = renderApp(<TestComponent />, {
-      project: {
-        allAppliedDataFences: denormalizeDataFences({
-          store: {
-            orders: {
-              canManageOrders: {
-                values: manageDataFences,
-              },
-              canViewOrders: {
-                values: viewDataFences,
-              },
-            },
-          },
-        }),
-      },
-    });
-    await render.findByText('a');
-    await render.findByText('b');
-    await render.findByText('c');
-    await render.findByText('x');
-    await render.findByText('y');
-    await render.findByText('z');
-  });
-
-  describe('with permissions to request', () => {
-    describe('with manage', () => {
-      it('should return a list of data fences', async () => {
-        const render = renderApp(<TestComponent permission="manage" />, {
-          project: {
-            allAppliedDataFences: denormalizeDataFences({
-              store: {
-                orders: {
-                  canManageOrders: {
-                    values: manageDataFences,
-                  },
-                  canViewOrders: {
-                    values: viewDataFences,
-                  },
-                },
-              },
-            }),
-          },
-        });
-        await render.findByText('a');
-        await render.findByText('b');
-        await render.findByText('c');
-      });
-    });
-    describe('with view', () => {
-      it('should return a list of data fences', async () => {
-        const render = renderApp(<TestComponent permission="view" />, {
-          project: {
-            allAppliedDataFences: denormalizeDataFences({
-              store: {
-                orders: {
-                  canManageOrders: {
-                    values: manageDataFences,
-                  },
-                  canViewOrders: {
-                    values: viewDataFences,
-                  },
-                },
-              },
-            }),
-          },
-        });
-        await render.findByText('x');
-        await render.findByText('y');
-        await render.findByText('z');
-      });
-    });
-    describe('with unsupported', () => {
-      it('should not return a list of data fences', async () => {
-        const render = renderApp(<TestComponent permission="unsupported" />, {
-          project: {
-            allAppliedDataFences: denormalizeDataFences({
-              store: {
-                orders: {
-                  canManageOrders: {
-                    values: manageDataFences,
-                  },
-                  canViewOrders: {
-                    values: viewDataFences,
-                  },
-                },
-              },
-            }),
-          },
-        });
-
-        await render.findByText('No DataFences');
-      });
-    });
-  });
-});

package/src/hooks/use-stores-list-fetcher/index.js

@@ -1,2 +0,0 @@
-export { default } from './use-stores-list-fetcher';
-export { handlers as storesListConnectorMockHandlers } from './mocks';

package/src/hooks/use-stores-list-fetcher/mocks/handlers.js

@@ -1,76 +0,0 @@
-import { graphql } from 'msw';
-
-const extractKeysFromWherePredicateClause = (whereClause = '') =>
-  whereClause
-    .substring(whereClause.lastIndexOf('("') + 1, whereClause.lastIndexOf('")'))
-    .replace(/["]/g, '')
-    .split(', ');
-
-const handlers = {
-  StoresList: {
-    all: (stores) =>
-      graphql.query('FetchStoresQuery', (req, res, ctx) => {
-        // GIVEN req.variables.where is specified
-        // THEN return only stores that are being requested (filtering stores based on IDs)
-        // ELSE return all the stores (without filtering any)
-        if (req.variables.where) {
-          const requestedStoreKeys = extractKeysFromWherePredicateClause(
-            req.variables.where
-          );
-          const filteredStoreResults = stores.results.filter((store) =>
-            requestedStoreKeys.includes(store.key)
-          );
-
-          return res(
-            ctx.data({
-              stores: {
-                offset: 0,
-                total: filteredStoreResults.length,
-                count: filteredStoreResults.length,
-                results: filteredStoreResults,
-                __typename: 'StoresQueryResult',
-              },
-            })
-          );
-        }
-        return res(
-          ctx.data({
-            stores,
-          })
-        );
-      }),
-    withProductSelections: (stores) =>
-      graphql.query('FetchStoresQuery', (req, res, ctx) => {
-        // GIVEN req.variables.where is specified
-        // THEN return only stores that are being requested (filtering stores based on IDs)
-        // ELSE return all the stores (without filtering any)
-        if (req.variables.where) {
-          const requestedStoreKeys = extractKeysFromWherePredicateClause(
-            req.variables.where
-          );
-          const filteredStoreResults = stores.results.filter((store) =>
-            requestedStoreKeys.includes(store.key)
-          );
-
-          return res(
-            ctx.data({
-              stores: {
-                offset: 0,
-                total: filteredStoreResults.length,
-                count: filteredStoreResults.length,
-                results: filteredStoreResults,
-                __typename: 'StoresQueryResult',
-              },
-            })
-          );
-        }
-        return res(
-          ctx.data({
-            stores,
-          })
-        );
-      }),
-  },
-};
-
-export default handlers;

package/src/hooks/use-stores-list-fetcher/mocks/index.js

@@ -1,3 +0,0 @@
-import handlers from './handlers';
-
-export { handlers };

package/src/hooks/use-stores-list-fetcher/stores-list-query.ctp.graphql

@@ -1,52 +0,0 @@
-#import '../../utils/graphql/fragments/store-basic-info.ctp.graphql'
-
-query FetchStoresQuery(
-  $limit: Int
-  $offset: Int
-  $sort: [String!]
-  $where: String
-  $excludeExtendedStoresList: Boolean!
-  $excludeProductSelections: Boolean!
-) {
-  stores(limit: $limit, offset: $offset, sort: $sort, where: $where) {
-    total
-    count
-    offset
-    results {
-      ...StoreBasicInfo
-      countries {
-        code
-      }
-      languages @skip(if: $excludeExtendedStoresList)
-      distributionChannelsRef {
-        id
-      }
-      distributionChannels @skip(if: $excludeExtendedStoresList) {
-        id
-        key
-        nameAllLocales {
-          locale
-          value
-        }
-      }
-      supplyChannels @skip(if: $excludeExtendedStoresList) {
-        id
-        key
-        nameAllLocales {
-          locale
-          value
-        }
-      }
-      productSelections @skip(if: $excludeProductSelections) {
-        active
-        productSelection {
-          id
-          nameAllLocales {
-            locale
-            value
-          }
-        }
-      }
-    }
-  }
-}

package/src/hooks/use-stores-list-fetcher/use-stores-list-fetcher.js

@@ -1,71 +0,0 @@
-import { useQuery } from '@apollo/client/react';
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-import { FetchStoresQuery } from './stores-list-query.ctp.graphql';
-
-const filterStoresOutdatedDanglingProductSelections = (storesQueryResult) => {
-  if (!storesQueryResult) return null;
-  return {
-    total: storesQueryResult.total,
-    count: storesQueryResult.count,
-    offset: storesQueryResult.offset,
-    results: storesQueryResult.results?.map((store) => {
-      return {
-        ...store,
-        productSelections: store.productSelections?.filter(
-          (productSelectionRef) => Boolean(productSelectionRef.productSelection)
-        ),
-      };
-    }),
-  };
-};
-export const createQueryVariables = (ownProps) => ({
-  limit: ownProps.limit,
-  offset: ownProps.offset,
-  sort: ownProps.sort,
-  ...(Boolean(ownProps.stores) && {
-    where: `key in (${ownProps.stores
-      .map((store) => `"${store}"`)
-      .join(', ')})`,
-  }),
-  excludeExtendedStoresList: ownProps.excludeExtendedStoresList,
-  excludeProductSelections: ownProps.excludeProductSelections,
-});
-
-const useStoresListFetcher = (props) => {
-  const excludeExtendedStoresList = props.excludeExtendedStoresList || false;
-  const excludeProductSelections = props.excludeProductSelections || false;
-  const queryVariables = createQueryVariables({
-    limit: props.limit,
-    offset: props.offset,
-    sort: props.sort,
-    stores: props.stores,
-    excludeExtendedStoresList,
-    excludeProductSelections: excludeProductSelections,
-  });
-
-  const storesGraphqlQuery = FetchStoresQuery;
-  const { data, refetch, loading } = useQuery(storesGraphqlQuery, {
-    variables: queryVariables,
-    context: {
-      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-      projectKey: props.projectKey,
-    },
-    fetchPolicy: 'network-only',
-    onError: (graphqlErrorResponse) => props.onError?.(graphqlErrorResponse),
-  });
-
-  return {
-    isLoading: loading,
-    refetch,
-    stores: filterStoresOutdatedDanglingProductSelections(data?.stores),
-    refetchQuery: {
-      query: FetchStoresQuery,
-      variables: queryVariables,
-      context: {
-        target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-      },
-    },
-  };
-};
-
-export default useStoresListFetcher;