Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CIF-1657: [React Components] Clean up the unit tests warnings #419

Merged
merged 6 commits into from
Oct 22, 2020
Merged

CIF-1657: [React Components] Clean up the unit tests warnings #419

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
efc46d9
CIF-1657: [React Components] Clean up the unit tests warnings
hbacila Oct 8, 2020
233037d
Merge branch 'master' into issues/CIF-1657
hbacila Oct 8, 2020
2616726
CIF-1657: cleanup changes
hbacila Oct 8, 2020
8ed4bb8
CIF-1657 - refactor unit tests so they all use the custom render (uti…
hbacila Oct 14, 2020
5db3af3
Merge branch 'master' into issues/CIF-1657
hbacila Oct 14, 2020
af18858
Merge branch 'master' into issues/CIF-1657
alkim91 Oct 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions react-components/src/actions/user/__test__/actions.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ const setCartCookie = jest.fn();
const setUserCookie = jest.fn();
const dispatch = jest.fn();

// avoid console errors logged during testing
console.error = jest.fn();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would rather add the --silent parameter to the jest call than mocking the console.error calls here. This has the advantage that you can easily decide whether or not you want to print the console statements. Sometimes they are useful.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem with --silent is that it supresses all console logs including the warnings that may indicate an issue (such the ones we fixed here).


describe('User actions', () => {
beforeEach(() => {
setCartCookie.mockReset();
Expand Down
34 changes: 14 additions & 20 deletions react-components/src/components/AccountContainer/__test__/accountContainer.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,31 +12,25 @@
*
******************************************************************************/
import React from 'react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
import { render } from '@testing-library/react';

import UserContextProvider from '../../../context/UserContext';
import { CartProvider } from '../../Minicart/cartContext';
import i18n from '../../../../__mocks__/i18nForTests';

import { render } from '../../../utils/test-utils';
import { CartProvider } from '../../Minicart';
import AccountContainer from '../accountContainer';
import ConfigContextProvider from '../../../context/ConfigContext';

describe('<AccountContainer>', () => {
it('renders the component', () => {
const config = {
graphqlEndpoint: 'endpoint',
storeView: 'default',
pagePaths: {
accountDetails: '/accountDetails'
}
};

const { asFragment } = render(
<I18nextProvider i18n={i18n}>
<ConfigContextProvider config={{ pagePaths: { accountDetails: '/accountDetails' } }}>
<MockedProvider>
<UserContextProvider>
<CartProvider initialState={{ cartId: null }} reducerFactory={() => state => state}>
<AccountContainer />
</CartProvider>
</UserContextProvider>
</MockedProvider>
</ConfigContextProvider>
</I18nextProvider>
<CartProvider initialState={{ cartId: null }} reducerFactory={() => state => state}>
<AccountContainer />
</CartProvider>,
{ config: config }
);
expect(asFragment()).toMatchSnapshot();
});
Expand Down
108 changes: 34 additions & 74 deletions react-components/src/components/AccountContainer/__test__/accountDropdown.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,33 +12,28 @@
*
******************************************************************************/
import React from 'react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
import { render } from '@testing-library/react';

import UserContextProvider from '../../../context/UserContext';
import { CartProvider } from '../../Minicart/cartContext';
import i18n from '../../../../__mocks__/i18nForTests';
import ConfigContextProvider from '../../../context/ConfigContext';
import { render } from '../../../utils/test-utils';
import { CartProvider } from '../../Minicart';
import AccountDropdown from '../accountDropdown';

const config = {
graphqlEndpoint: 'endpoint',
storeView: 'default',
pagePaths: {
accountDetails: '/accountDetails'
}
};

describe('<AccountDropdown>', () => {
it('renders the component when account dropdown is open', () => {
const stateWithAccountDropdownOpen = { isAccountDropdownOpen: true };
const accountDropdownOpenClass = 'root_open';

const { getByLabelText } = render(
<I18nextProvider i18n={i18n}>
<ConfigContextProvider config={{ pagePaths: { accountDetails: '/accountDetails' } }}>
<MockedProvider>
<UserContextProvider initialState={stateWithAccountDropdownOpen}>
<CartProvider initialState={{ cartId: null }} reducerFactory={() => state => state}>
<AccountDropdown />
</CartProvider>
</UserContextProvider>
</MockedProvider>
</ConfigContextProvider>
</I18nextProvider>
<CartProvider initialState={{ cartId: null }} reducerFactory={() => state => state}>
<AccountDropdown />
</CartProvider>,
{ config: config, userContext: stateWithAccountDropdownOpen }
);
expect(getByLabelText('account dropdown').getAttribute('class')).toEqual(accountDropdownOpenClass);
});
Expand All @@ -55,17 +50,10 @@ describe('<AccountDropdown>', () => {
};

const { asFragment } = render(
<I18nextProvider i18n={i18n}>
<ConfigContextProvider config={{ pagePaths: { accountDetails: '/accountDetails' } }}>
<MockedProvider>
<UserContextProvider initialState={stateWithMyAccountView}>
<CartProvider initialState={{ cartId: null }} reducerFactory={() => state => state}>
<AccountDropdown />
</CartProvider>
</UserContextProvider>
</MockedProvider>
</ConfigContextProvider>
</I18nextProvider>
<CartProvider initialState={{ cartId: null }} reducerFactory={() => state => state}>
<AccountDropdown />
</CartProvider>,
{ config: config, userContext: stateWithMyAccountView }
);
expect(asFragment()).toMatchSnapshot();
});
Expand All @@ -77,17 +65,10 @@ describe('<AccountDropdown>', () => {
};

const { asFragment } = render(
<I18nextProvider i18n={i18n}>
<ConfigContextProvider config={{ pagePaths: { accountDetails: '/accountDetails' } }}>
<MockedProvider>
<UserContextProvider initialState={stateWithChangePasswordView}>
<CartProvider initialState={{ cartId: null }} reducerFactory={() => state => state}>
<AccountDropdown />
</CartProvider>
</UserContextProvider>
</MockedProvider>
</ConfigContextProvider>
</I18nextProvider>
<CartProvider initialState={{ cartId: null }} reducerFactory={() => state => state}>
<AccountDropdown />
</CartProvider>,
{ config: config, userContext: stateWithChangePasswordView }
);
expect(asFragment()).toMatchSnapshot();
});
Expand All @@ -99,17 +80,10 @@ describe('<AccountDropdown>', () => {
};

const { asFragment } = render(
<I18nextProvider i18n={i18n}>
<ConfigContextProvider config={{ pagePaths: { accountDetails: '/accountDetails' } }}>
<MockedProvider>
<UserContextProvider initialState={stateWithForgotPasswordView}>
<CartProvider initialState={{ cartId: null }} reducerFactory={() => state => state}>
<AccountDropdown />
</CartProvider>
</UserContextProvider>
</MockedProvider>
</ConfigContextProvider>
</I18nextProvider>
<CartProvider initialState={{ cartId: null }} reducerFactory={() => state => state}>
<AccountDropdown />
</CartProvider>,
{ config: config, userContext: stateWithForgotPasswordView }
);
expect(asFragment()).toMatchSnapshot();
});
Expand All @@ -120,17 +94,10 @@ describe('<AccountDropdown>', () => {
};

const { asFragment } = render(
<I18nextProvider i18n={i18n}>
<ConfigContextProvider config={{ pagePaths: { accountDetails: '/accountDetails' } }}>
<MockedProvider>
<UserContextProvider initialState={stateWithCreateAccountView}>
<CartProvider initialState={{ cartId: null }} reducerFactory={() => state => state}>
<AccountDropdown />
</CartProvider>
</UserContextProvider>
</MockedProvider>
</ConfigContextProvider>
</I18nextProvider>
<CartProvider initialState={{ cartId: null }} reducerFactory={() => state => state}>
<AccountDropdown />
</CartProvider>,
{ config: config, userContext: stateWithCreateAccountView }
);
expect(asFragment()).toMatchSnapshot();
});
Expand All @@ -141,17 +108,10 @@ describe('<AccountDropdown>', () => {
};

const { asFragment } = render(
<I18nextProvider i18n={i18n}>
<ConfigContextProvider config={{ pagePaths: { accountDetails: '/accountDetails' } }}>
<MockedProvider>
<UserContextProvider initialState={stateWithAccountCreatedView}>
<CartProvider initialState={{ cartId: null }} reducerFactory={() => state => state}>
<AccountDropdown />
</CartProvider>
</UserContextProvider>
</MockedProvider>
</ConfigContextProvider>
</I18nextProvider>
<CartProvider initialState={{ cartId: null }} reducerFactory={() => state => state}>
<AccountDropdown />
</CartProvider>,
{ config: config, userContext: stateWithAccountCreatedView }
);
expect(asFragment()).toMatchSnapshot();
});
Expand Down
33 changes: 10 additions & 23 deletions react-components/src/components/AccountContainer/__test__/accountTrigger.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,41 +12,28 @@
*
******************************************************************************/
import React from 'react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
import { render, fireEvent } from '@testing-library/react';

import i18n from '../../../../__mocks__/i18nForTests';

import { render } from '../../../utils/test-utils';
import { fireEvent } from '@testing-library/react';
import AccountTrigger from '../accountTrigger';
import UserContextProvider from '../../../context/UserContext';

const mockToggleAccountDropdown = jest.fn();

jest.mock('../../../context/UserContext', () => ({
useUserContext: () => {
return [{}, { toggleAccountDropdown: mockToggleAccountDropdown }];
}
}));
const mockToggleAccountDropdown = jest.fn(state => state);

describe('<AccountTrigger>', () => {
it('renders the component', () => {
const { asFragment } = render(
<I18nextProvider i18n={i18n}>
<MockedProvider>
<AccountTrigger />
</MockedProvider>
</I18nextProvider>
<UserContextProvider reducerFactory={() => mockToggleAccountDropdown}>
<AccountTrigger />
</UserContextProvider>
);
expect(asFragment()).toMatchSnapshot();
});

it('calls the handler function when clicked', () => {
const { getByRole } = render(
<I18nextProvider i18n={i18n}>
<MockedProvider>
<AccountTrigger />
</MockedProvider>
</I18nextProvider>
<UserContextProvider reducerFactory={() => mockToggleAccountDropdown}>
<AccountTrigger />
</UserContextProvider>
);
fireEvent.click(getByRole('button'));

Expand Down
21 changes: 11 additions & 10 deletions react-components/src/components/AccountDetails/__test__/__snapshots__/editForm.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ exports[`<EditForm> renders a form with the "Change password" button 1`] = `
<span
class="label"
>
account:firstname
First Name
</span>
<span
class="root"
Expand Down Expand Up @@ -49,7 +49,7 @@ exports[`<EditForm> renders a form with the "Change password" button 1`] = `
<span
class="label"
>
account:lastname
Last Name
</span>
<span
class="root"
Expand Down Expand Up @@ -84,7 +84,7 @@ exports[`<EditForm> renders a form with the "Change password" button 1`] = `
<span
class="label"
>
account:email
Email address
</span>
<span
class="root"
Expand Down Expand Up @@ -119,7 +119,7 @@ exports[`<EditForm> renders a form with the "Change password" button 1`] = `
<span
class="label"
>
account:password
Password
</span>
<span
class="root"
Expand Down Expand Up @@ -181,11 +181,12 @@ exports[`<EditForm> renders a form with the "Change password" button 1`] = `
class="changePasswordButtonContainer"
>
<button
class="changePasswordButton"
classes="[object Object]"
type="button"
>
<span>
account:change-password
Change Password
</span>
</button>
</div>
Expand All @@ -207,7 +208,7 @@ exports[`<EditForm> renders a form without the "Change password" button 1`] = `
<span
class="label"
>
account:firstname
First Name
</span>
<span
class="root"
Expand Down Expand Up @@ -242,7 +243,7 @@ exports[`<EditForm> renders a form without the "Change password" button 1`] = `
<span
class="label"
>
account:lastname
Last Name
</span>
<span
class="root"
Expand Down Expand Up @@ -277,7 +278,7 @@ exports[`<EditForm> renders a form without the "Change password" button 1`] = `
<span
class="label"
>
account:email
Email address
</span>
<span
class="root"
Expand Down Expand Up @@ -312,7 +313,7 @@ exports[`<EditForm> renders a form without the "Change password" button 1`] = `
<span
class="label"
>
account:current-password
Current Password
</span>
<span
class="root"
Expand Down Expand Up @@ -380,7 +381,7 @@ exports[`<EditForm> renders a form without the "Change password" button 1`] = `
<span
class="label"
>
account:new-password
New Password
</span>
<span
class="root"
Expand Down
Loading