From 53def33627ea860b0f6657b38536d484d93e7893 Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Sun, 24 Mar 2019 14:02:54 -0400 Subject: [PATCH] Updating Header to use react-testing-library --- .../Header/__snapshots__/test.js.snap | 687 +++++++++++------- src/components/Header/index.js | 5 +- src/components/Header/test.js | 60 +- 3 files changed, 465 insertions(+), 287 deletions(-) diff --git a/src/components/Header/__snapshots__/test.js.snap b/src/components/Header/__snapshots__/test.js.snap index 6838977..0016f11 100644 --- a/src/components/Header/__snapshots__/test.js.snap +++ b/src/components/Header/__snapshots__/test.js.snap @@ -1,182 +1,30 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Header closing the Privacy Policy modal 1`] = ` - - - - -
-

- - Regexper - -

- -
- -`; - -exports[`Header closing the Privacy Policy modal 2`] = ` - - - - -
-

- - Regexper - -

- -
- -`; - exports[`Header opening the Privacy Policy modal 1`] = ` - - + - - +

- Regexper - +

- + +`; + +exports[`Header opening the Privacy Policy modal while holding alt key 1`] = ` + + + + +
+

+ + Regexper + +

+ +
+ +`; + +exports[`Header opening the Privacy Policy modal while holding ctrl key 1`] = ` + + + + +
+

+ + Regexper + +

+ +
+ +`; + +exports[`Header opening the Privacy Policy modal while holding meta key 1`] = ` + + + + +
+

+ + Regexper + +

+ +
+ +`; + +exports[`Header opening the Privacy Policy modal while holding shift key 1`] = ` + + + + +
+

+ + Regexper + +

+ +
+ `; exports[`Header rendering 1`] = ` - - + - - +

- Regexper - +

- + `; exports[`Header rendering with no banner 1`] = ` - - + - - +

- Regexper - +

- + `; diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 5e54d30..651598d 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -64,7 +64,10 @@ class Header extends React.PureComponent {
  • - + Privacy Policy
    • diff --git a/src/components/Header/test.js b/src/components/Header/test.js index bc75c45..00ebf38 100644 --- a/src/components/Header/test.js +++ b/src/components/Header/test.js @@ -1,60 +1,62 @@ +jest.mock('react-modal', () => + require('__mocks__/component-mock')('react-modal')); +jest.mock('react-feather/dist/icons/gitlab', () => + require('__mocks__/component-mock')('react-feather/dist/icons/gitlab')); +jest.mock('components/LocaleSwitcher', () => + require('__mocks__/component-mock')('components/LocaleSwitcher')); +jest.mock('components/InstallPrompt', () => + require('__mocks__/component-mock')('components/InstallPrompt')); +jest.mock('components/PrivacyPolicy', () => + require('__mocks__/component-mock')('components/PrivacyPolicy')); + import React from 'react'; -import { shallow } from 'enzyme'; +import { render, fireEvent } from 'react-testing-library'; import { Header } from 'components/Header'; describe('Header', () => { test('rendering', () => { - const component = shallow( + const { asFragment } = render(
    ); - expect(component).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('rendering with no banner', () => { - const component = shallow( + const { asFragment } = render(
    ); - expect(component).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('opening the Privacy Policy modal', () => { - const component = shallow( + const { asFragment, getByTestId } = render(
    ); - const eventObj = { preventDefault: jest.fn() }; + const event = new MouseEvent('click', { bubbles: true }); + jest.spyOn(event, 'preventDefault'); - component.instance().handleOpen(eventObj); + fireEvent(getByTestId('privacy-link'), event); - expect(eventObj.preventDefault).toHaveBeenCalled(); - expect(component).toMatchSnapshot(); + expect(event.preventDefault).toHaveBeenCalled(); + expect(asFragment()).toMatchSnapshot(); }); ['shift', 'ctrl', 'alt', 'meta'].forEach(key => { test(`opening the Privacy Policy modal while holding ${ key } key`, () => { - const component = shallow( + const { asFragment, getByTestId } = render(
    ); - const eventObj = { preventDefault: jest.fn() }; + const event = new MouseEvent('click', { + bubbles: true, + [key + 'Key']: true + }); + jest.spyOn(event, 'preventDefault'); - component.instance().handleOpen({ [key + 'Key']: true, ...eventObj }); + fireEvent(getByTestId('privacy-link'), event); - expect(eventObj.preventDefault).not.toHaveBeenCalled(); - expect(component.state('showModal')).toEqual(false); + expect(event.preventDefault).not.toHaveBeenCalled(); + expect(asFragment()).toMatchSnapshot(); }); }); - - test('closing the Privacy Policy modal', () => { - const component = shallow( -
    - ); - - component.setState({ showModal: true }); - - expect(component).toMatchSnapshot(); - - component.instance().handleClose(); - - expect(component).toMatchSnapshot(); - }); });