@jetshop/core 5.13.0 → 5.13.10-0

package/components/Auth/useAddressFields.test.js

@@ -1,294 +1,294 @@
-import React from 'react';
-import { render, fireEvent, waitForElement } from '@testing-library/react';
-import useAddressFields from './useAddressFields';
-import ChannelContext from '@jetshop/core/components/ChannelContext';
-import SignupProvider from './signup-context';
-import { ApolloClient } from 'apollo-client';
-import { MockLink } from 'apollo-link-mock';
-import { ApolloProvider } from 'react-apollo';
-import { InMemoryCache } from 'apollo-cache-inmemory';
-import gql from 'graphql-tag';
-
-const fields = [
-  {
-    id: 'firstName',
-    name: 'firstName',
-    fields: [],
-    pattern: null,
-    required: true,
-    expectedLabel: 'firstName',
-    __typename: 'CustomerField'
-  },
-  {
-    id: 'lastName',
-    name: 'lastName',
-    fields: [],
-    pattern: null,
-    required: true,
-    expectedLabel: 'lastName',
-    __typename: 'CustomerField'
-  }
-];
-
-const countryField = {
-  name: 'country',
-  id: 'country',
-  fields: [],
-  pattern: null,
-  required: true,
-  expectedLabel: 'country'
-};
-
-const channelCountries = [
-  {
-    id: 'AU',
-    code: 'AU',
-    name: 'Australia',
-    isDefault: true
-  },
-  {
-    code: 'NZ',
-    id: 'NZ',
-    name: 'New Zealand',
-    isDefault: false
-  }
-];
-
-describe('useAddressFields', () => {
-  it('returns a list of fields to render', async () => {
-    const { getAllByTestId } = setup({ fields });
-    const testFields = await waitForElement(() => getAllByTestId('field'));
-
-    fields.map((field, index) => {
-      expect(testFields[index]).toHaveTextContent(field.expectedLabel);
-    });
-  });
-
-  it('ignores the country field', async () => {
-    const { getAllByTestId } = setup({ fields: [...fields, countryField] });
-    const testFields = await waitForElement(() => getAllByTestId('field'));
-
-    expect(testFields).toHaveLength(2);
-    testFields.map(field => expect(field.id).not.toBe('country'));
-  });
-
-  it('changes the form fields based on selected country', async () => {
-    const { getByTestId, getAllByTestId } = setup({ fields });
-    const switchToNZ = await waitForElement(() => getByTestId('switchCountry'));
-
-    const testFieldsBefore = await waitForElement(() =>
-      getAllByTestId('field')
-    );
-    expect(testFieldsBefore).toHaveLength(2);
-
-    fireEvent.click(switchToNZ);
-
-    const testFieldsAfter = await waitForElement(() => getAllByTestId('field'));
-    expect(testFieldsAfter).toHaveLength(3);
-  });
-
-  it('passes through the countries from the selected channel', async () => {
-    const { getAllByTestId } = setup({ fields });
-    const countries = await waitForElement(() => getAllByTestId('country'));
-
-    expect(countries).toHaveLength(2);
-    countries.map((country, index) =>
-      expect(country).toHaveTextContent(channelCountries[index].code)
-    );
-  });
-});
-const countrySettingsQuery = gql`
-  query CountrySettingsQuery($id: String) {
-    channel(id: $id) {
-      id
-      settings {
-        countrySettings {
-          countryCode
-          privateCustomerFields {
-            id
-            required
-            pattern
-            name
-            fields {
-              id
-              pattern
-              required
-              name
-            }
-          }
-          businessCustomerFields {
-            id
-            required
-            pattern
-            name
-            fields {
-              id
-              pattern
-              required
-              name
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
-function createCountrySettingsMock(fields) {
-  return [
-    {
-      request: {
-        query: countrySettingsQuery,
-        variables: {
-          id: '1'
-        }
-      },
-      result: {
-        data: {
-          channel: {
-            id: 1,
-            settings: {
-              countrySettings: [
-                {
-                  countryCode: 'AU',
-                  privateCustomerFields: [
-                    {
-                      id: 'billingAddress',
-                      name: 'billingAddress',
-                      required: true,
-                      pattern: null,
-                      fields
-                    }
-                  ],
-                  businessCustomerFields: [
-                    {
-                      id: 'billingAddress',
-                      name: 'billingAddress',
-                      required: true,
-                      pattern: null,
-                      fields
-                    }
-                  ]
-                },
-
-                {
-                  countryCode: 'NZ',
-                  privateCustomerFields: [
-                    {
-                      id: 'billingAddress',
-                      name: 'billingAddress',
-                      required: true,
-                      pattern: null,
-                      fields: [
-                        ...fields,
-                        {
-                          id: 'extraField',
-                          fields: [],
-                          name: 'extraField',
-                          pattern: null,
-                          required: false
-                        }
-                      ]
-                    }
-                  ],
-                  businessCustomerFields: [
-                    {
-                      id: 'billingAddress',
-                      name: 'billingAddress',
-                      required: true,
-                      pattern: null,
-                      fields: [
-                        ...fields,
-                        {
-                          id: 'extraField',
-                          fields: [],
-                          name: 'extraField',
-                          pattern: null,
-                          required: false
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          }
-        }
-      }
-    }
-  ];
-}
-
-function createClient(mocks) {
-  return new ApolloClient({
-    cache: new InMemoryCache({ addTypename: false }),
-    link: new MockLink(mocks)
-  });
-}
-
-function setup({ fields }) {
-  const client = createClient(createCountrySettingsMock(fields));
-  const utils = render(
-    <ApolloProvider client={client}>
-      <ChannelContext.Provider
-        value={{
-          channels: [
-            {
-              id: 1,
-              countries: [
-                {
-                  id: 'AU',
-                  code: 'AU',
-                  name: 'Australia',
-                  isDefault: true
-                }
-              ]
-            }
-          ],
-          selectedChannel: {
-            id: 1,
-            countries: channelCountries,
-            country: {
-              code: 'AU'
-            },
-            settings: {}
-          }
-        }}
-      >
-        <SignupProvider>
-          <Wrapper />
-        </SignupProvider>
-      </ChannelContext.Provider>
-    </ApolloProvider>
-  );
-
-  return { ...utils };
-}
-
-function Wrapper() {
-  const { fields, countries, setCountryByCode } = useAddressFields();
-  return (
-    <>
-      <div>
-        {fields.map(field => (
-          <span data-testid="field" key={field.name}>
-            {field.name}
-          </span>
-        ))}
-      </div>
-
-      <button
-        data-testid="switchCountry"
-        onClick={() => setCountryByCode('NZ')}
-      >
-        Set country from form
-      </button>
-
-      {countries.map(country => (
-        <span data-testid="country" key={country.id}>
-          {country.code}
-        </span>
-      ))}
-    </>
-  );
-}
+import React from 'react';
+import { render, fireEvent, waitForElement } from '@testing-library/react';
+import useAddressFields from './useAddressFields';
+import ChannelContext from '@jetshop/core/components/ChannelContext';
+import SignupProvider from './signup-context';
+import { ApolloClient } from 'apollo-client';
+import { MockLink } from 'apollo-link-mock';
+import { ApolloProvider } from 'react-apollo';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import gql from 'graphql-tag';
+
+const fields = [
+  {
+    id: 'firstName',
+    name: 'firstName',
+    fields: [],
+    pattern: null,
+    required: true,
+    expectedLabel: 'firstName',
+    __typename: 'CustomerField'
+  },
+  {
+    id: 'lastName',
+    name: 'lastName',
+    fields: [],
+    pattern: null,
+    required: true,
+    expectedLabel: 'lastName',
+    __typename: 'CustomerField'
+  }
+];
+
+const countryField = {
+  name: 'country',
+  id: 'country',
+  fields: [],
+  pattern: null,
+  required: true,
+  expectedLabel: 'country'
+};
+
+const channelCountries = [
+  {
+    id: 'AU',
+    code: 'AU',
+    name: 'Australia',
+    isDefault: true
+  },
+  {
+    code: 'NZ',
+    id: 'NZ',
+    name: 'New Zealand',
+    isDefault: false
+  }
+];
+
+describe('useAddressFields', () => {
+  it('returns a list of fields to render', async () => {
+    const { getAllByTestId } = setup({ fields });
+    const testFields = await waitForElement(() => getAllByTestId('field'));
+
+    fields.map((field, index) => {
+      expect(testFields[index]).toHaveTextContent(field.expectedLabel);
+    });
+  });
+
+  it('ignores the country field', async () => {
+    const { getAllByTestId } = setup({ fields: [...fields, countryField] });
+    const testFields = await waitForElement(() => getAllByTestId('field'));
+
+    expect(testFields).toHaveLength(2);
+    testFields.map(field => expect(field.id).not.toBe('country'));
+  });
+
+  it('changes the form fields based on selected country', async () => {
+    const { getByTestId, getAllByTestId } = setup({ fields });
+    const switchToNZ = await waitForElement(() => getByTestId('switchCountry'));
+
+    const testFieldsBefore = await waitForElement(() =>
+      getAllByTestId('field')
+    );
+    expect(testFieldsBefore).toHaveLength(2);
+
+    fireEvent.click(switchToNZ);
+
+    const testFieldsAfter = await waitForElement(() => getAllByTestId('field'));
+    expect(testFieldsAfter).toHaveLength(3);
+  });
+
+  it('passes through the countries from the selected channel', async () => {
+    const { getAllByTestId } = setup({ fields });
+    const countries = await waitForElement(() => getAllByTestId('country'));
+
+    expect(countries).toHaveLength(2);
+    countries.map((country, index) =>
+      expect(country).toHaveTextContent(channelCountries[index].code)
+    );
+  });
+});
+const countrySettingsQuery = gql`
+  query CountrySettingsQuery($id: String) {
+    channel(id: $id) {
+      id
+      settings {
+        countrySettings {
+          countryCode
+          privateCustomerFields {
+            id
+            required
+            pattern
+            name
+            fields {
+              id
+              pattern
+              required
+              name
+            }
+          }
+          businessCustomerFields {
+            id
+            required
+            pattern
+            name
+            fields {
+              id
+              pattern
+              required
+              name
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+function createCountrySettingsMock(fields) {
+  return [
+    {
+      request: {
+        query: countrySettingsQuery,
+        variables: {
+          id: '1'
+        }
+      },
+      result: {
+        data: {
+          channel: {
+            id: 1,
+            settings: {
+              countrySettings: [
+                {
+                  countryCode: 'AU',
+                  privateCustomerFields: [
+                    {
+                      id: 'billingAddress',
+                      name: 'billingAddress',
+                      required: true,
+                      pattern: null,
+                      fields
+                    }
+                  ],
+                  businessCustomerFields: [
+                    {
+                      id: 'billingAddress',
+                      name: 'billingAddress',
+                      required: true,
+                      pattern: null,
+                      fields
+                    }
+                  ]
+                },
+
+                {
+                  countryCode: 'NZ',
+                  privateCustomerFields: [
+                    {
+                      id: 'billingAddress',
+                      name: 'billingAddress',
+                      required: true,
+                      pattern: null,
+                      fields: [
+                        ...fields,
+                        {
+                          id: 'extraField',
+                          fields: [],
+                          name: 'extraField',
+                          pattern: null,
+                          required: false
+                        }
+                      ]
+                    }
+                  ],
+                  businessCustomerFields: [
+                    {
+                      id: 'billingAddress',
+                      name: 'billingAddress',
+                      required: true,
+                      pattern: null,
+                      fields: [
+                        ...fields,
+                        {
+                          id: 'extraField',
+                          fields: [],
+                          name: 'extraField',
+                          pattern: null,
+                          required: false
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          }
+        }
+      }
+    }
+  ];
+}
+
+function createClient(mocks) {
+  return new ApolloClient({
+    cache: new InMemoryCache({ addTypename: false }),
+    link: new MockLink(mocks)
+  });
+}
+
+function setup({ fields }) {
+  const client = createClient(createCountrySettingsMock(fields));
+  const utils = render(
+    <ApolloProvider client={client}>
+      <ChannelContext.Provider
+        value={{
+          channels: [
+            {
+              id: 1,
+              countries: [
+                {
+                  id: 'AU',
+                  code: 'AU',
+                  name: 'Australia',
+                  isDefault: true
+                }
+              ]
+            }
+          ],
+          selectedChannel: {
+            id: 1,
+            countries: channelCountries,
+            country: {
+              code: 'AU'
+            },
+            settings: {}
+          }
+        }}
+      >
+        <SignupProvider>
+          <Wrapper />
+        </SignupProvider>
+      </ChannelContext.Provider>
+    </ApolloProvider>
+  );
+
+  return { ...utils };
+}
+
+function Wrapper() {
+  const { fields, countries, setCountryByCode } = useAddressFields();
+  return (
+    <>
+      <div>
+        {fields.map(field => (
+          <span data-testid="field" key={field.name}>
+            {field.name}
+          </span>
+        ))}
+      </div>
+
+      <button
+        data-testid="switchCountry"
+        onClick={() => setCountryByCode('NZ')}
+      >
+        Set country from form
+      </button>
+
+      {countries.map(country => (
+        <span data-testid="country" key={country.id}>
+          {country.code}
+        </span>
+      ))}
+    </>
+  );
+}