richie-education 2.15.1 → 2.16.0

package/.storybook/main.js

@@ -0,0 +1,17 @@
+module.exports = {
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+    "../js/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  },
+  staticDirs: ['../../richie/static', '../../richie/apps/core/templates/richie'],
+}

package/.storybook/preview-body.html

@@ -0,0 +1 @@
+<div id="modal-exclude" style="min-height: 0;"></div>

package/.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" type="text/css" href="/richie/css/main.css">

package/.storybook/preview.tsx

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { useAsyncEffect } from "../js/utils/useAsyncEffect";
+
+export const parameters = {
+  actions: {argTypesRegex: "^on[A-Z].*"},
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
+
+const IconsWrapper = props => {
+  const [symbols, setSymbols] = useState('');
+
+  useAsyncEffect(async () => {
+    const response = await fetch('/icons.html');
+    const body = await response.text();
+    setSymbols(body);
+  }, []);
+
+  return (
+    <div>
+      <div dangerouslySetInnerHTML={{__html: symbols}}/>
+      {props.children}
+    </div>
+  );
+};
+
+export const decorators = [
+  (Story) => (
+    <IconsWrapper>
+      <Story/>
+    </IconsWrapper>
+  ),
+];

package/jest/setup.ts

@@ -4,6 +4,23 @@ import '@testing-library/jest-dom/extend-expect';
 import { setLogger } from 'react-query';
 import { noop } from 'utils';
 
+/*
+ * A little trick to prevent so package to be reset when using `jest.resetModules()`.
+ * https://github.com/facebook/jest/issues/8987#issuecomment-584898030
+ */
+const RESET_MODULE_EXCEPTIONS = ['react', 'react-intl'];
+
+const mockActualRegistry: Record<PropertyKey, any> = {};
+
+RESET_MODULE_EXCEPTIONS.forEach((moduleName) => {
+  jest.doMock(moduleName, () => {
+    if (!mockActualRegistry[moduleName]) {
+      mockActualRegistry[moduleName] = jest.requireActual(moduleName);
+    }
+    return mockActualRegistry[moduleName];
+  });
+});
+
 /* Prevent log error during tests */
 setLogger({
   // eslint-disable-next-line no-console

package/js/components/AddressesManagement/AddressForm.spec.tsx

@@ -0,0 +1,191 @@
+import { act } from '@testing-library/react-hooks';
+import { fireEvent, getByText, render, screen } from '@testing-library/react';
+import * as mockFactories from 'utils/test/factories';
+import { AddressFactory } from 'utils/test/factories';
+import countries from 'i18n-iso-countries';
+import { IntlProvider } from 'react-intl';
+import { Address } from 'types/Joanie';
+import { ErrorKeys } from './validationSchema';
+import AddressForm from './AddressForm';
+
+jest.mock('hooks/useAddresses', () => ({
+  useAddresses: () => ({
+    states: {
+      creating: false,
+      updating: false,
+    },
+  }),
+}));
+
+describe('AddressForm', () => {
+  const handleReset = jest.fn();
+  const onSubmit = jest.fn();
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    jest.resetModules();
+  });
+
+  it('renders a button with label "Use this address" when no address is provided', () => {
+    render(
+      <IntlProvider locale="en">
+        <AddressForm handleReset={handleReset} onSubmit={onSubmit} />
+      </IntlProvider>,
+    );
+
+    screen.getByRole('button', { name: 'Use this address' });
+    expect(screen.queryByRole('button', { name: 'Cancel' })).toBeNull();
+  });
+
+  it('renders a button with label "Use this address" and a cancel button when no address is provided', async () => {
+    const address: Address = AddressFactory.generate();
+    render(
+      <IntlProvider locale="en">
+        <AddressForm handleReset={handleReset} onSubmit={onSubmit} address={address} />
+      </IntlProvider>,
+    );
+
+    screen.getByRole('button', { name: 'Update this address' });
+
+    const $button = screen.getByRole('button', { name: 'Cancel' });
+    await act(async () => {
+      fireEvent.click($button);
+    });
+    expect(handleReset).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders an error message when a value in the form is invalid', async () => {
+    render(
+      <IntlProvider locale="en">
+        <AddressForm handleReset={handleReset} onSubmit={onSubmit} />
+      </IntlProvider>,
+    );
+
+    screen.getByRole('form');
+    const $titleInput = screen.getByRole('textbox', { name: 'Address title' });
+    const $firstnameInput = screen.getByRole('textbox', { name: "Recipient's first name" });
+    const $lastnameInput = screen.getByRole('textbox', { name: "Recipient's last name" });
+    const $addressInput = screen.getByRole('textbox', { name: 'Address' });
+    const $cityInput = screen.getByRole('textbox', { name: 'City' });
+    const $postcodeInput = screen.getByRole('textbox', { name: 'Postcode' });
+    const $countryInput = screen.getByRole('combobox', { name: 'Country' });
+    const $submitButton = screen.getByRole('button', {
+      name: 'Use this address',
+    }) as HTMLButtonElement;
+
+    // - Until form is not fulfill, submit button should be disabled
+    expect($submitButton.disabled).toBe(true);
+
+    // - User fulfills address fields
+    const address = mockFactories.AddressFactory.generate();
+
+    await act(async () => {
+      fireEvent.input($titleInput, { target: { value: address.title } });
+      fireEvent.change($firstnameInput, { target: { value: address.first_name } });
+      fireEvent.change($lastnameInput, { target: { value: address.last_name } });
+      fireEvent.change($addressInput, { target: { value: address.address } });
+      fireEvent.change($cityInput, { target: { value: address.city } });
+      fireEvent.change($postcodeInput, { target: { value: address.postcode } });
+      fireEvent.change($countryInput, { target: { value: address.country } });
+      // - As form validation is triggered on blur, we need to trigger this event in
+      //   order to update form state.
+      fireEvent.blur($countryInput);
+    });
+
+    // Once the form has been fulfilled properly, submit button should be enabled.
+    expect($submitButton.disabled).toBe(false);
+
+    // Before submitting, we change field values to corrupt the form data
+    await act(async () => {
+      fireEvent.input($titleInput, { target: { value: 'a' } });
+      fireEvent.input($firstnameInput, { target: { value: '' } });
+      fireEvent.change($countryInput, { target: { value: '-' } });
+      fireEvent.click($submitButton);
+    });
+
+    expect(onSubmit).not.toHaveBeenCalled();
+
+    // Error messages should have been displayed.
+    // Title field should have a message saying that the value is too short.
+    getByText($titleInput.closest('.form-field')!, 'The minimum length is 2 chars.');
+    // Firstname field should have a message saying that the value is required.
+    getByText($firstnameInput.closest('.form-field')!, 'This field is required.');
+    // Country field should have a message saying that the value is not valid.
+    getByText(
+      $countryInput.closest('.form-field')!,
+      `You must select a value within: ${Object.keys(countries.getAlpha2Codes()).join(', ')}.`,
+    );
+  });
+
+  it('renders default error message when error message does not exist', async () => {
+    jest.doMock('./validationSchema', () => ({
+      __esModule: true,
+      ...jest.requireActual('./validationSchema'),
+      errorMessages: {
+        [ErrorKeys.MIXED_INVALID]: {
+          id: 'components.AddressesManagement.validationSchema.mixedInvalid',
+          defaultMessage: 'This field is invalid.',
+          description: 'Error message displayed when a field value is invalid.',
+        },
+      },
+    }));
+
+    // Import locally to get module with mocked error messages.
+    const Form = jest.requireActual('./AddressForm').default;
+
+    render(
+      <IntlProvider locale="en">
+        <Form handleReset={handleReset} onSubmit={onSubmit} />
+      </IntlProvider>,
+    );
+
+    screen.getByRole('form');
+    const $titleInput = screen.getByRole('textbox', { name: 'Address title' });
+    const $firstnameInput = screen.getByRole('textbox', { name: "Recipient's first name" });
+    const $lastnameInput = screen.getByRole('textbox', { name: "Recipient's last name" });
+    const $addressInput = screen.getByRole('textbox', { name: 'Address' });
+    const $cityInput = screen.getByRole('textbox', { name: 'City' });
+    const $postcodeInput = screen.getByRole('textbox', { name: 'Postcode' });
+    const $countryInput = screen.getByRole('combobox', { name: 'Country' });
+    const $submitButton = screen.getByRole('button', {
+      name: 'Use this address',
+    }) as HTMLButtonElement;
+
+    // - Until form is not fulfill, submit button should be disabled
+    expect($submitButton.disabled).toBe(true);
+
+    // - User fulfills address fields
+    const address = mockFactories.AddressFactory.generate();
+
+    await act(async () => {
+      fireEvent.input($titleInput, { target: { value: address.title } });
+      fireEvent.change($firstnameInput, { target: { value: address.first_name } });
+      fireEvent.change($lastnameInput, { target: { value: address.last_name } });
+      fireEvent.change($addressInput, { target: { value: address.address } });
+      fireEvent.change($cityInput, { target: { value: address.city } });
+      fireEvent.change($postcodeInput, { target: { value: address.postcode } });
+      fireEvent.change($countryInput, { target: { value: address.country } });
+      // - As form validation is triggered on blur, we need to trigger this event in
+      //   order to update form state.
+      fireEvent.blur($countryInput);
+    });
+
+    // Once the form has been fulfilled properly, submit button should be enabled.
+    expect($submitButton.disabled).toBe(false);
+
+    // Before submitting, we change field values to corrupt the form data
+    await act(async () => {
+      fireEvent.input($titleInput, { target: { value: 'a' } });
+      fireEvent.input($firstnameInput, { target: { value: '' } });
+      fireEvent.change($countryInput, { target: { value: '-' } });
+      fireEvent.click($submitButton);
+    });
+
+    expect(onSubmit).not.toHaveBeenCalled();
+
+    // Default error messages should have been displayed.
+    getByText($titleInput.closest('.form-field')!, 'This field is invalid.');
+    getByText($firstnameInput.closest('.form-field')!, 'This field is invalid.');
+    getByText($countryInput.closest('.form-field')!, `This field is invalid.`);
+  });
+});

package/js/components/AddressesManagement/AddressForm.tsx

@@ -7,7 +7,8 @@ import { messages } from 'components/AddressesManagement/index';
 import { CheckboxField, SelectField, TextField } from 'components/Form';
 import { useAddresses } from 'hooks/useAddresses';
 import type { Address } from 'types/Joanie';
-import validationSchema from './validationSchema';
+import { Maybe } from 'types/utils';
+import validationSchema, { ErrorKeys, errorMessages } from './validationSchema';
 
 export type AddressFormValues = Omit<Address, 'id' | 'is_main'> & { save: boolean };
 
@@ -41,6 +42,25 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
   const [languageCode] = intl.locale.split('-');
   const countryList = countries.getNames(languageCode);
 
+  const getLocalizedErrorMessage = (
+    error: Maybe<
+      | string
+      | {
+          key: ErrorKeys;
+          values: Record<PropertyKey, string | number | Array<string | number>>;
+        }
+    >,
+  ) => {
+    if (!error) return undefined;
+
+    if (typeof error === 'string' || errorMessages[error.key] === undefined) {
+      // If the error has not been translated we return a default error message.
+      return intl.formatMessage(errorMessages[ErrorKeys.MIXED_INVALID]);
+    }
+
+    return intl.formatMessage(errorMessages[error.key], error.values);
+  };
+
   /**
    * Prevent form to be submitted and clear `editedAddress` state.
    */
@@ -62,6 +82,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
         id="title"
         label={intl.formatMessage(messages.titleInputLabel)}
         error={!!formState.errors.title}
+        message={getLocalizedErrorMessage(formState.errors.title?.message)}
         {...register('title')}
       />
       <div className="form-group">
@@ -71,6 +92,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
           id="first_name"
           label={intl.formatMessage(messages.first_nameInputLabel)}
           error={!!formState.errors.first_name}
+          message={getLocalizedErrorMessage(formState.errors.first_name?.message)}
           {...register('first_name')}
         />
         <TextField
@@ -79,6 +101,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
           id="last_name"
           label={intl.formatMessage(messages.last_nameInputLabel)}
           error={!!formState.errors.last_name}
+          message={getLocalizedErrorMessage(formState.errors.last_name?.message)}
           {...register('last_name')}
         />
       </div>
@@ -88,6 +111,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
         id="address"
         label={intl.formatMessage(messages.addressInputLabel)}
         error={!!formState.errors.address}
+        message={getLocalizedErrorMessage(formState.errors.address?.message)}
         {...register('address')}
       />
       <div className="form-group">
@@ -97,6 +121,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
           id="postcode"
           label={intl.formatMessage(messages.postcodeInputLabel)}
           error={!!formState.errors.postcode}
+          message={getLocalizedErrorMessage(formState.errors.postcode?.message)}
           {...register('postcode')}
         />
         <TextField
@@ -105,6 +130,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
           id="city"
           label={intl.formatMessage(messages.cityInputLabel)}
           error={!!formState.errors.city}
+          message={getLocalizedErrorMessage(formState.errors.city?.message)}
           {...register('city')}
         />
       </div>
@@ -114,6 +140,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
         id="country"
         label={intl.formatMessage(messages.countryInputLabel)}
         error={!!formState.errors.country}
+        message={getLocalizedErrorMessage(formState.errors.country?.message)}
         {...register('country', { value: address?.country, required: true })}
       >
         <option disabled value="-">
@@ -132,6 +159,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
           id="save"
           label={intl.formatMessage(messages.saveInputLabel)}
           error={!!formState.errors?.save}
+          message={getLocalizedErrorMessage(formState.errors.save?.message)}
           {...register('save')}
         />
       ) : null}

package/js/components/AddressesManagement/index.spec.tsx

@@ -1,20 +1,16 @@
 /**
  * Test suite for AddressesManagement component
  */
-import { yupResolver } from '@hookform/resolvers/yup';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { act, renderHook } from '@testing-library/react-hooks';
-import faker from 'faker';
+import { act } from '@testing-library/react-hooks';
 import fetchMock from 'fetch-mock';
 import * as mockFactories from 'utils/test/factories';
 import { IntlProvider } from 'react-intl';
 import { QueryClientProvider } from 'react-query';
-import { useForm } from 'react-hook-form';
 import { SessionProvider } from 'data/SessionProvider';
 import { REACT_QUERY_SETTINGS, RICHIE_USER_TOKEN } from 'settings';
 import type * as Joanie from 'types/Joanie';
 import createQueryClient from 'utils/react-query/createQueryClient';
-import validationSchema from './validationSchema';
 import AddressesManagement from '.';
 
 jest.mock('utils/context', () => ({
@@ -31,142 +27,6 @@ jest.mock('utils/indirection/window', () => ({
   confirm: jest.fn(() => true),
 }));
 
-describe('validationSchema', () => {
-  // Creation and Update form validation relies on a schema resolves by Yup.
-  it('should not have error if values are valid', async () => {
-    const defaultValues = {
-      address: faker.address.streetAddress(),
-      city: faker.address.city(),
-      country: faker.address.countryCode(),
-      first_name: faker.name.firstName(),
-      last_name: faker.name.lastName(),
-      postcode: faker.address.zipCode(),
-      title: faker.random.word(),
-      save: false,
-    };
-
-    const { result } = renderHook(() =>
-      useForm({
-        defaultValues,
-        resolver: yupResolver(validationSchema),
-      }),
-    );
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    result.current.formState.errors;
-    result.current.register('address');
-    result.current.register('city');
-    result.current.register('country');
-    result.current.register('first_name');
-    result.current.register('last_name');
-    result.current.register('postcode');
-    result.current.register('title');
-    result.current.register('save');
-
-    await act(async () => {
-      result.current.trigger();
-    });
-
-    const { formState } = result.current;
-
-    expect(formState.errors.address).not.toBeDefined();
-    expect(formState.errors.city).not.toBeDefined();
-    expect(formState.errors.country).not.toBeDefined();
-    expect(formState.errors.first_name).not.toBeDefined();
-    expect(formState.errors.last_name).not.toBeDefined();
-    expect(formState.errors.postcode).not.toBeDefined();
-    expect(formState.errors.title).not.toBeDefined();
-    expect(formState.errors.save).not.toBeDefined();
-    expect(formState.isValid).toBe(true);
-  });
-
-  it('should have an error if values are invalid', async () => {
-    const { result } = renderHook(() =>
-      useForm({
-        resolver: yupResolver(validationSchema),
-      }),
-    );
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    result.current.formState.errors;
-    result.current.register('address');
-    result.current.register('city');
-    result.current.register('country');
-    result.current.register('first_name');
-    result.current.register('last_name');
-    result.current.register('postcode');
-    result.current.register('title');
-    result.current.register('save');
-
-    // - Trigger form validation with empty values
-    await act(async () => {
-      result.current.trigger();
-    });
-
-    let { formState } = result.current;
-    expect(formState.errors.address?.type).toEqual('required');
-    expect(formState.errors.address?.message).toEqual('address is a required field');
-    expect(formState.errors.city?.type).toEqual('required');
-    expect(formState.errors.city?.message).toEqual('city is a required field');
-    expect(formState.errors.country?.type).toEqual('required');
-    expect(formState.errors.country?.message).toEqual('country is a required field');
-    expect(formState.errors.first_name?.type).toEqual('required');
-    expect(formState.errors.first_name?.message).toEqual('first_name is a required field');
-    expect(formState.errors.last_name?.type).toEqual('required');
-    expect(formState.errors.last_name?.message).toEqual('last_name is a required field');
-    expect(formState.errors.postcode?.type).toEqual('required');
-    expect(formState.errors.postcode?.message).toEqual('postcode is a required field');
-    expect(formState.errors.title?.type).toEqual('required');
-    expect(formState.errors.title?.message).toEqual('title is a required field');
-    expect(formState.errors.save).not.toBeDefined();
-    expect(formState.isValid).toBe(false);
-
-    // - Set values for all field but with a wrong one for country field
-    await act(async () => {
-      result.current.setValue('address', faker.address.streetAddress());
-      result.current.setValue('city', faker.address.city());
-      // set country value with an invalid country code
-      result.current.setValue('country', 'AA');
-      result.current.setValue('first_name', faker.name.firstName());
-      result.current.setValue('last_name', faker.name.lastName());
-      result.current.setValue('postcode', faker.address.zipCode());
-      result.current.setValue('title', faker.random.word());
-      result.current.trigger();
-    });
-
-    formState = result.current.formState;
-    expect(formState.errors.address).not.toBeDefined();
-    expect(formState.errors.city).not.toBeDefined();
-    expect(formState.errors.country?.type).toEqual('oneOf');
-    expect(formState.errors.country?.message).toContain(
-      'country must be one of the following values:',
-    );
-    expect(formState.errors.first_name).not.toBeDefined();
-    expect(formState.errors.last_name).not.toBeDefined();
-    expect(formState.errors.postcode).not.toBeDefined();
-    expect(formState.errors.title).not.toBeDefined();
-    expect(formState.errors.save).not.toBeDefined();
-    expect(formState.isValid).toBe(false);
-
-    // - Set country value with a valid country code
-    await act(async () => {
-      result.current.setValue('country', 'FR');
-      result.current.trigger();
-    });
-
-    formState = result.current.formState;
-    expect(formState.errors.address).not.toBeDefined();
-    expect(formState.errors.city).not.toBeDefined();
-    expect(formState.errors.country).not.toBeDefined();
-    expect(formState.errors.first_name).not.toBeDefined();
-    expect(formState.errors.last_name).not.toBeDefined();
-    expect(formState.errors.postcode).not.toBeDefined();
-    expect(formState.errors.title).not.toBeDefined();
-    expect(formState.errors.save).not.toBeDefined();
-    expect(formState.isValid).toBe(true);
-  });
-});
-
 describe('AddressesManagement', () => {
   const initializeUser = () => {
     const user = mockFactories.FonzieUserFactory.generate();
@@ -221,6 +81,46 @@ describe('AddressesManagement', () => {
     expect(handleClose).toHaveBeenCalledTimes(1);
   });
 
+  it("renders the user's addresses", async () => {
+    initializeUser();
+    const addresses = mockFactories.AddressFactory.generate(Math.ceil(Math.random() * 5));
+    fetchMock.get('https://joanie.endpoint/api/addresses/', addresses);
+
+    let container: HTMLElement;
+
+    await act(async () => {
+      ({ container } = render(
+        <QueryClientProvider client={createQueryClient({ persistor: true })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <AddressesManagement handleClose={handleClose} selectAddress={selectAddress} />
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>,
+      ));
+    });
+
+    // All user's addresses should be displayed
+    const $addresses = container!.querySelectorAll('.registered-addresses-item');
+    expect($addresses).toHaveLength(addresses.length);
+
+    addresses.forEach((address: Joanie.Address) => {
+      const $address = screen.getByTestId(`address-${address.id}-title`);
+      expect($address.textContent).toEqual(address.title);
+    });
+
+    // - User selects one of its existing address
+    const address = addresses[0];
+    const $selectButton = screen.getByRole('button', {
+      name: `Select "${address.title}" address`,
+      exact: true,
+    });
+    await act(async () => {
+      fireEvent.click($selectButton);
+    });
+    expect(selectAddress).toHaveBeenNthCalledWith(1, address);
+  });
+
   it('renders a form to create an address', async () => {
     initializeUser();
     fetchMock.get('https://joanie.endpoint/api/addresses/', []);
@@ -307,47 +207,7 @@ describe('AddressesManagement', () => {
     });
   });
 
-  it("renders the user's addresses", async () => {
-    initializeUser();
-    const addresses = mockFactories.AddressFactory.generate(Math.ceil(Math.random() * 5));
-    fetchMock.get('https://joanie.endpoint/api/addresses/', addresses);
-
-    let container: HTMLElement;
-
-    await act(async () => {
-      ({ container } = render(
-        <QueryClientProvider client={createQueryClient({ persistor: true })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <AddressesManagement handleClose={handleClose} selectAddress={selectAddress} />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      ));
-    });
-
-    // All user's addresses should be displayed
-    const $addresses = container!.querySelectorAll('.registered-addresses-item');
-    expect($addresses).toHaveLength(addresses.length);
-
-    addresses.forEach((address: Joanie.Address) => {
-      const $address = screen.getByTestId(`address-${address.id}-title`);
-      expect($address.textContent).toEqual(address.title);
-    });
-
-    // - User selects one of its existing address
-    const address = addresses[0];
-    const $selectButton = screen.getByRole('button', {
-      name: `Select "${address.title}" address`,
-      exact: true,
-    });
-    await act(async () => {
-      fireEvent.click($selectButton);
-    });
-    expect(selectAddress).toHaveBeenNthCalledWith(1, address);
-  });
-
-  it('renders an updated form when user selects an address to edit', async () => {
+  it('renders a form to edit an address when user selects an address to edit', async () => {
     initializeUser();
     const address = mockFactories.AddressFactory.generate();
     fetchMock.get('https://joanie.endpoint/api/addresses/', [address]);