@jetshop/ui 5.7.0

package/ChannelSelector/ChannelSelector.test.js

@@ -0,0 +1,167 @@
+import React from 'react';
+import ChannelSelector from './ChannelSelector';
+
+xdescribe('ChannelSelector', () => {
+  let props;
+  let state;
+  let mountedChannelSelector;
+  const SWE = {
+    name: 'Sweden',
+    code: 'SE',
+    region: 'Europe',
+    defaultLanguage: 'SWE',
+    defaultCurrency: 'SEK',
+    language: [
+      { val: 'SWE', label: 'SWE' },
+      { val: 'ENG', label: 'ENG' }
+    ],
+    currency: [
+      { val: 'SEK', label: 'SEK' },
+      { val: 'USD', label: 'USD' }
+    ]
+  };
+  const AUS = {
+    name: 'Australia',
+    code: 'AU',
+    region: 'Oceania',
+    defaultLanguage: 'ENG',
+    defaultCurrency: 'AUD',
+    language: [
+      { val: 'GER', label: 'GER' },
+      { val: 'ENG', label: 'ENG' }
+    ],
+    currency: [
+      { val: 'AUD', label: 'AUD' },
+      { val: 'USD', label: 'USD' }
+    ]
+  };
+  let countries = [
+    AUS,
+    {
+      name: 'New Zealand',
+      code: 'NZ',
+      region: 'Oceania',
+      defaultLanguage: 'ENG',
+      defaultCurrency: 'NZD',
+      language: [
+        { val: 'GER', label: 'GER' },
+        { val: 'ENG', label: 'ENG' }
+      ],
+      currency: [
+        { val: 'EUR', label: 'EUR' },
+        { val: 'NZD', label: 'NDZ' }
+      ]
+    },
+    SWE
+  ];
+
+  /** @returns {ReactWrapper} */
+  const channelSelector = () =>
+    (mountedChannelSelector = !mountedChannelSelector
+      ? (mountedChannelSelector = mount(<ChannelSelector {...props} />))
+      : mountedChannelSelector);
+
+  beforeEach(() => {
+    props = {
+      countries: countries,
+      initialCountry: SWE,
+      initialCurrency: 'USD',
+      initialLanguage: 'GER',
+      render: jest.fn().mockReturnValue(null)
+    };
+    state = {
+      selectedCountry: props.initialCountry,
+      selectedCurrency: props.initialCurrency,
+      selectedLanguage: props.initialLanguage,
+      hasChanged: false
+    };
+    mountedChannelSelector = undefined;
+  });
+
+  describe('renders', () => {
+    it('only what the `render` prop returns', () => {
+      props.render = jest.fn().mockReturnValue('hello');
+      expect(channelSelector().text()).toBe('hello');
+    });
+  });
+  describe('calls `render`', () => {
+    it('when mounted', () => {
+      channelSelector();
+      expect(props.render).toHaveBeenCalledTimes(1);
+    });
+    it('with initial state, countries, and state modifier instance methods', () => {
+      channelSelector();
+      const instance = channelSelector().instance();
+      expect(props.render).toHaveBeenCalledWith({
+        ...state,
+        countries,
+        onSelect: instance.selectCountry,
+        onCurrencySelect: instance.selectCurrency,
+        onLanguageSelect: instance.selectLanguage
+      });
+    });
+    describe('with `hasChanged` set to true', () => {
+      // Is there a better way to mock this?
+      afterEach(() => {
+        channelSelector()
+          .children()
+          .props()
+          .onClick();
+
+        expect(props.render).toHaveBeenLastCalledWith(
+          expect.objectContaining({ hasChanged: true })
+        );
+      });
+      it('if the selectedCountry changes', () => {
+        props.render = jest.fn(({ onSelect }) => (
+          <div onClick={() => onSelect(AUS)} />
+        ));
+      });
+      it('if the selectedCurrency changes', () => {
+        props.render = jest.fn(({ onCurrencySelect }) => (
+          <div onClick={() => onCurrencySelect('AUD')} />
+        ));
+      });
+      it('if the selectedLanguage changes', () => {
+        props.render = jest.fn(({ onLanguageSelect }) => (
+          <div onClick={() => onLanguageSelect('ENG')} />
+        ));
+      });
+    });
+  });
+
+  describe('when selectedCountry changes', () => {
+    it("sets the `selectedCurrency` and `selectedLanguage` to that country's default", () => {
+      props.render = jest.fn(({ onSelect }) => (
+        <div onClick={() => onSelect(AUS)} />
+      ));
+      channelSelector()
+        .children()
+        .props()
+        .onClick();
+
+      expect(props.render).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          selectedLanguage: 'ENG',
+          selectedCurrency: 'AUD'
+        })
+      );
+    });
+  });
+
+  describe('accepts props to define initial state', () => {
+    // Are these necessary, or just testing implementation details?
+    it('for the selected country', () => {
+      props.initialCountry = SWE;
+      expect(channelSelector().state().selectedCountry).toBe(SWE);
+    });
+    it('for the selected currency', () => {
+      props.initialCurrency = 'AUD';
+      expect(channelSelector().state().selectedCurrency).toBe('AUD');
+    });
+    it('for the selected language', () => {
+      props.initialLanguage = 'ENG';
+      expect(channelSelector().state().selectedLanguage).toBe('ENG');
+    });
+  });
+});

package/ChannelSelector/ChannelSelectorButtons.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const CommitButton: import("linaria/lib/StyledMeta").StyledMeta & import("react").SFC<import("../Button/Button").ButtonProps>;
+export declare const CancelButton: import("linaria/lib/StyledMeta").StyledMeta & import("react").SFC<import("../Button/Button").ButtonProps>;

package/ChannelSelector/ChannelSelectorButtons.js

@@ -0,0 +1,20 @@
+import { styled } from 'linaria/react';
+import Button from '../Button/Button';
+const commonStyles = `
+  font-size: 1rem;
+  border: 1px solid transparent;
+  padding: 1rem;
+  /* Button is a child of a flex container, so this aligns to bottom */
+  margin-top: auto;
+  width: 100%;
+`;
+export const CommitButton = styled(Button) `
+  background: #2f80ed;
+  ${commonStyles};
+`;
+export const CancelButton = styled(Button) `
+  background: white;
+  color: #000;
+  ${commonStyles};
+`;
+//# sourceMappingURL=ChannelSelectorButtons.js.map

package/ChannelSelector/ChannelSelectorButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelSelectorButtons.js","sourceRoot":"","sources":["ChannelSelectorButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,MAAM,YAAY,GAAG;;;;;;;CAOpB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;IAEtC,YAAY;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;IAGtC,YAAY;CACf,CAAC"}

package/ChannelSelector/Channels.d.ts

@@ -0,0 +1,17 @@
+import { SelectedChannel } from '@jetshop/core/components/ChannelContext/ChannelContext';
+import { Channel } from '@jetshop/core/types';
+import React from 'react';
+import { SelectChannel } from './ChannelSelector';
+export interface ChannelsProps {
+    /** An array of channels */
+    channels: Channel[];
+    /** The selected channel obj */
+    selectedChannel: SelectedChannel;
+    /** Called with the country obj when a country is selected */
+    onSelect: SelectChannel;
+}
+declare const Channels: React.SFC<ChannelsProps>;
+export default Channels;
+export declare const ChannelList: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement> & {
+    as?: React.ElementType<any>;
+}>;

package/ChannelSelector/Channels.js

@@ -0,0 +1,12 @@
+import { styled } from 'linaria/react';
+import React from 'react';
+import CountryListItem from './ChannelListItem';
+const Channels = ({ channels, selectedChannel, onSelect }) => {
+    return channels ? (React.createElement(ChannelList, null, channels.map((channel) => (React.createElement(CountryListItem, { channel: channel, key: channel.name, isSelected: channel.name === selectedChannel.name, onSelect: onSelect }))))) : null;
+};
+export default Channels;
+export const ChannelList = styled('ul') `
+  margin: 0;
+  padding: 0;
+`;
+//# sourceMappingURL=Channels.js.map

package/ChannelSelector/Channels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Channels.js","sourceRoot":"","sources":["Channels.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAYhD,MAAM,QAAQ,GAA6B,CAAC,EAC1C,QAAQ,EACR,eAAe,EACf,QAAQ,EACT,EAAE,EAAE;IACH,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,oBAAC,WAAW,QACT,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAgB,EAAE,EAAE,CAAC,CAClC,oBAAC,eAAe,IACd,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,OAAO,CAAC,IAAI,EACjB,UAAU,EAAE,OAAO,CAAC,IAAI,KAAK,eAAe,CAAC,IAAI,EACjD,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC,CACU,CACf,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAGtC,CAAC"}

package/ChannelSelector/Channels.test.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import Countries from './Channels';
+import CountryListItem from './ChannelListItem';
+
+xdescribe('Countries', () => {
+  const AUS = { name: 'Australia', code: 'AUS' };
+  const SWE = { name: 'Sweden', code: 'SWE' };
+  const validCountries = {
+    selectedCountry: AUS,
+    countries: [AUS, SWE]
+  };
+  let props;
+  let mountedCountries;
+
+  const countries = () =>
+    (mountedCountries = !mountedCountries
+      ? (mountedCountries = shallow(<Countries {...props} />))
+      : mountedCountries);
+
+  beforeEach(() => {
+    props = {
+      countries: undefined,
+      selectedCountry: undefined,
+      onSelect: undefined
+    };
+    mountedCountries = undefined;
+  });
+
+  describe('when `countries` is undefined', () => {
+    it('no children are rendered', () => {
+      expect(countries().children()).toHaveLength(0);
+    });
+  });
+  describe('when `countries` is an empty array', () => {
+    it('no children are rendered', () => {
+      props.countries = [];
+      expect(countries().children()).toHaveLength(0);
+    });
+  });
+  describe('when `countries` contains an array of countries', () => {
+    beforeEach(() => {
+      props = validCountries;
+    });
+    it('a `CountryListItem` is rendered for each country', () => {
+      expect(
+        countries()
+          .children()
+          .find(CountryListItem)
+      ).toHaveLength(2);
+    });
+    describe('and `selectedCountry` matches the country being rendered', () => {
+      it("the `CountryListItem`'s `isSelected` prop is true", () => {
+        const AusChild = countries().childAt(1);
+        expect('isSelected' in AusChild.props()).toEqual(true);
+      });
+    });
+    describe('and `selectedCountry` does not match the country being rendered', () => {
+      it("the `CountryListItem`'s `isSelected` prop is false", () => {
+        const SweChild = countries().childAt(2);
+        expect('isSelected' in SweChild.props()).toEqual(false);
+      });
+    });
+  });
+
+  describe('when `onSelect` is defined', () => {
+    beforeEach(() => {
+      props = Object.assign(validCountries, { onSelect: jest.fn() });
+    });
+
+    it("sets the rendered `CountryListItem`'s `onSelect` prop to the same value", () => {
+      const countryListItem = countries()
+        .find(CountryListItem)
+        .first();
+      expect(countryListItem.props().onSelect).toBe(props.onSelect);
+    });
+  });
+
+  describe('when `onSelect` is undefined', () => {
+    beforeEach(() => {
+      props = Object.assign(validCountries, { onSelect: undefined });
+    });
+
+    it("sets the rendered `CountryListItem`'s `onSelect` prop to undefined", () => {
+      const countryListItem = countries()
+        .find(CountryListItem)
+        .first();
+      expect(countryListItem.props().onSelect).toBe(undefined);
+    });
+  });
+});

package/ChannelSelector/LargeSelector.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const LargeSelector: React.SFC;
+export default LargeSelector;

package/ChannelSelector/LargeSelector.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { styled } from 'linaria/react';
+import { RegionGroup, RegionWrapper } from './Region';
+import { CommitButton, CancelButton } from './ChannelSelectorButtons';
+import { LangCurrWrapper, SelectorBody, Title } from './ChannelSelector';
+import { CheckboxWrapper } from '../Checkbox/CheckboxGroup';
+const SelectorWrapper = styled('div') `
+  display: flex;
+  flex-direction: column;
+  font-size: 1rem;
+  border: 1px solid #e8e8e8;
+  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.07);
+
+  ${RegionGroup} {
+    max-width: calc(20% - 2rem);
+    margin: 0 1rem;
+    min-width: 15rem;
+    flex-grow: 1;
+  }
+
+  ${RegionWrapper} {
+    display: flex;
+    margin: 0 -1rem;
+  }
+
+  ${Title} {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 1rem;
+    padding-bottom: 3rem;
+    font-weight: 600;
+    text-align: left;
+  }
+
+  ${CommitButton}, ${CancelButton} {
+    width: 20%;
+    max-width: 15rem;
+    margin-left: auto;
+  }
+
+  ${CancelButton} {
+    border-color: #cccccc;
+  }
+
+  ${LangCurrWrapper} {
+    display: flex;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  ${CheckboxWrapper} {
+    margin-right: 2rem;
+    width: calc(20% + 1rem);
+    strong {
+      font-weight: 600;
+    }
+  }
+  ${SelectorBody} {
+    padding: 1rem;
+  }
+`;
+const LargeSelector = ({ children }) => {
+    return React.createElement(SelectorWrapper, null, children);
+};
+export default LargeSelector;
+//# sourceMappingURL=LargeSelector.js.map

package/ChannelSelector/LargeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LargeSelector.js","sourceRoot":"","sources":["LargeSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;IAOjC,WAAkB;;;;;;;IAOlB,aAAoB;;;;;IAKpB,KAAY;;;;;;;;;;IAUZ,YAAmB,KAAK,YAAmB;;;;;;IAM3C,YAAmB;;;;IAInB,eAAsB;;;;;;IAMtB,eAAsB;;;;;;;IAOtB,YAAmB;;;CAGtB,CAAC;AAEF,MAAM,aAAa,GAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAChD,OAAO,oBAAC,eAAe,QAAE,QAAQ,CAAmB,CAAC;AACvD,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/ChannelSelector/MiniSelector.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const MiniSelector: React.SFC;
+/** @component */
+export default MiniSelector;

package/ChannelSelector/MiniSelector.js

@@ -0,0 +1,58 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { styled } from 'linaria/react';
+import { LangCurrWrapper, SelectorBody, Title } from './ChannelSelector';
+import { CheckboxWrapper } from '../Checkbox/CheckboxGroup';
+const SelectorWrapper = styled('div') `
+  display: flex;
+  flex-direction: column;
+  font-size: 1rem;
+  max-width: 16em;
+  border: 1px solid #e8e8e8;
+  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.07);
+  background-color: white;
+
+  /* Style the wrapper around language and currency radios */
+  ${LangCurrWrapper} {
+    padding: 1rem;
+    margin: 0.5rem;
+    font-size: 0.875rem;
+    ${CheckboxWrapper} {
+      margin-top: 1rem;
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  ${SelectorBody} {
+    padding: 1rem;
+  }
+
+  ${Title} {
+    margin: 0;
+    padding: 0;
+    padding-bottom: 1rem;
+    font-weight: 600;
+    font-size: 0.875em;
+    border-bottom: 1px solid #e8e8e8;
+    text-align: center;
+  }
+`;
+const MiniSelector = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return React.createElement(SelectorWrapper, Object.assign({}, props), children);
+};
+/** @component */
+export default MiniSelector;
+//# sourceMappingURL=MiniSelector.js.map

package/ChannelSelector/MiniSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniSelector.js","sourceRoot":"","sources":["MiniSelector.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;;;;;IAUjC,eAAsB;;;;MAIpB,eAAsB;;;;;;;;IAQxB,YAAmB;;;;IAInB,KAAY;;;;;;;;;CASf,CAAC;AAEF,MAAM,YAAY,GAAc,CAAC,EAAsB,EAAE,EAAE;QAA1B,EAAE,QAAQ,OAAY,EAAP,KAAK,cAApB,YAAsB,CAAF;IACnD,OAAO,oBAAC,eAAe,oBAAK,KAAK,GAAG,QAAQ,CAAmB,CAAC;AAClE,CAAC,CAAC;AAEF,iBAAiB;AACjB,eAAe,YAAY,CAAC"}

package/ChannelSelector/Region.d.ts

@@ -0,0 +1,28 @@
+import { Channel } from '@jetshop/core/types';
+import React, { SFC } from 'react';
+export interface ChannelWithRegion extends Channel {
+    region: string;
+}
+export interface RenderCallback {
+    (props: {
+        regionCountries: {
+            [key: string]: Channel[];
+        };
+        region: string;
+    }): React.ReactElement<any>;
+}
+export interface RegionProps {
+    channels: ChannelWithRegion[];
+    render: RenderCallback;
+}
+export declare const Region: SFC<RegionProps>;
+export default Region;
+export declare const RegionName: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const RegionWrapper: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    as?: React.ElementType<any>;
+}>;
+export declare const RegionGroup: import("linaria/lib/StyledMeta").StyledMeta & React.FunctionComponent<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    as?: React.ElementType<any>;
+}>;

package/ChannelSelector/Region.js

@@ -0,0 +1,21 @@
+import { styled } from 'linaria/react';
+import React from 'react';
+import groupBy from './groupBy';
+export const Region = ({ channels, render }) => {
+    const groupedCountries = groupBy(channels, channel => channel.region);
+    return (React.createElement(RegionWrapper, null, Object.keys(groupedCountries).map(region => {
+        const regionCountries = groupedCountries[region];
+        return render({ regionCountries, region });
+    })));
+};
+export default Region;
+export const RegionName = styled('h2') `
+  text-transform: uppercase;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 600;
+  margin: 1rem 0 0.5rem 0;
+`;
+export const RegionWrapper = styled('div') ``;
+export const RegionGroup = styled('div') ``;
+//# sourceMappingURL=Region.js.map

package/ChannelSelector/Region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Region.js","sourceRoot":"","sources":["Region.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,KAAc,MAAM,OAAO,CAAC;AACnC,OAAO,OAAO,MAAM,WAAW,CAAC;AAiBhC,MAAM,CAAC,MAAM,MAAM,GAAqB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE;IAC/D,MAAM,gBAAgB,GAAG,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAEnE,CAAC;IACF,OAAO,CACL,oBAAC,aAAa,QACX,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QAC1C,MAAM,eAAe,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAEjD,OAAO,MAAM,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC;IAC7C,CAAC,CAAC,CACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;CAMrC,CAAC;AACF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,EAAE,CAAC;AAC7C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,EAAE,CAAC"}

package/ChannelSelector/Region.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Region from './Region';
+import { render } from '@testing-library/react';
+
+xdescribe('Region', () => {
+  let countries = [
+    {
+      name: 'Sweden',
+      code: 'SE',
+      region: 'Europe'
+    },
+    {
+      name: 'Australia',
+      code: 'AU',
+      region: 'Oceania'
+    }
+  ];
+  const grouped = {
+    Europe: [{ name: 'Sweden', code: 'SE', region: 'Europe' }],
+    Oceania: [{ name: 'Australia', code: 'AU', region: 'Oceania' }]
+  };
+
+  describe('calls `render`', () => {
+    const renderFn = jest.fn();
+
+    it('once for each region in `countries` array', () => {
+      render(<Region render={renderFn} countries={countries} />);
+      expect(renderFn).toHaveBeenCalledTimes(2);
+    });
+    it("with region name and region's countries", () => {
+      expect(renderFn).toHaveBeenCalledWith({
+        region: 'Europe' || 'Oceania',
+        regionCountries: grouped['Europe'] || grouped['Oceania']
+      });
+    });
+  });
+});