From 70615b1025c25945fa28d4872f955079ef7120d4 Mon Sep 17 00:00:00 2001 From: Georgii Karataev Date: Wed, 25 Oct 2023 20:55:42 +0200 Subject: [PATCH] chore(TagsModal): Convert tests to testing-library --- src/Utilities/TagsModal.test.js | 186 ++--- .../__snapshots__/TagsModal.test.js.snap | 695 +++++++++++++++++- 2 files changed, 767 insertions(+), 114 deletions(-) diff --git a/src/Utilities/TagsModal.test.js b/src/Utilities/TagsModal.test.js index a60003196..7fc84af13 100644 --- a/src/Utilities/TagsModal.test.js +++ b/src/Utilities/TagsModal.test.js @@ -1,14 +1,14 @@ /* eslint-disable no-import-assign */ +import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import debounce from 'lodash/debounce'; import React from 'react'; -import { mount } from 'enzyme'; +import { Provider } from 'react-redux'; import configureStore from 'redux-mock-store'; import { createPromise as promiseMiddleware } from 'redux-promise-middleware'; -import { Provider } from 'react-redux'; -import toJson from 'enzyme-to-json'; -import TagsModal from './TagsModal'; -import debounce from 'lodash/debounce'; - import * as api from '../api/api'; +import TagsModal from './TagsModal'; jest.mock('lodash/debounce'); describe('TagsModal', () => { @@ -26,15 +26,39 @@ describe('TagsModal', () => { }); describe('DOM', () => { it('should render loading state correctly', () => { - const store = mockStore({}); - const wrapper = mount( + const store = mockStore({ + entities: { + showTagDialog: true, + tagModalLoaded: false, + activeSystemTag: { + tagsLoaded: false, + }, + }, + }); + const view = render( ); + + // TODO: improve skeleton accessibility + // baseElement is used since the PF modal is rendered outside parent div + expect(view.baseElement).toMatchSnapshot(); + expect( + screen.getByRole('columnheader', { + name: /name/i, + }) + ).toBeVisible(); + expect( + screen.getByRole('columnheader', { + name: /value/i, + }) + ).toBeVisible(); expect( - toJson(wrapper.find('TagsModal'), { mode: 'shallow' }) - ).toMatchSnapshot(); + screen.getByRole('columnheader', { + name: /tag source/i, + }) + ).toBeVisible(); }); it('should render activeSystemTag', () => { @@ -56,17 +80,37 @@ describe('TagsModal', () => { }, }, }); - const wrapper = mount( + render( ); + + expect( + screen.getByRole('columnheader', { + name: /name/i, + }) + ).toBeVisible(); expect( - toJson(wrapper.find('TagsModal'), { mode: 'shallow' }) - ).toMatchSnapshot(); + screen.getByRole('columnheader', { + name: /value/i, + }) + ).toBeVisible(); + expect( + screen.getByRole('columnheader', { + name: /tag source/i, + }) + ).toBeVisible(); + + expect(screen.getAllByRole('cell')).toHaveLength(3); + screen + .getAllByRole('cell') + .forEach((cell, index) => + expect(cell).toHaveTextContent(['some', 'test', 'something'][index]) + ); }); - it('should render alltags', () => { + it('should render all tags', () => { const store = mockStore({ entities: { ...initialState.entities, @@ -91,14 +135,23 @@ describe('TagsModal', () => { ], }, }); - const wrapper = mount( + render( ); + + expect(screen.getByText(/all tags in inventory \(50\)/i)).toBeVisible(); + expect( + screen.getByRole('button', { + name: /apply tags/i, + }) + ).toBeDisabled(); expect( - toJson(wrapper.find('TagsModal'), { mode: 'shallow' }) - ).toMatchSnapshot(); + screen.getByRole('button', { + name: /cancel/i, + }) + ).toBeEnabled(); }); }); @@ -108,7 +161,7 @@ describe('TagsModal', () => { api.getAllTags = jest.fn().mockImplementation(() => Promise.resolve()); }); - it('should NOT call onApply select correct tag', () => { + it('should call onApply select correct tag', async () => { const onApply = jest.fn(); const store = mockStore({ entities: { @@ -134,73 +187,26 @@ describe('TagsModal', () => { ], }, }); - const wrapper = mount( + render( - + ); - wrapper - .find('tbody tr .pf-c-table__check input') - .first() - .simulate('change', { - target: { - value: 'checked', - }, - }); - wrapper - .find('.pf-c-modal-box__footer .pf-c-button.pf-m-primary') - .first() - .simulate('click'); - expect(onApply).not.toHaveBeenCalled(); - }); - it('should call onApply select correct tag', () => { - const onApply = jest.fn(); - const store = mockStore({ - entities: { - ...initialState.entities, - allTagsLoaded: true, - allTagsTotal: 50, - allTagsPagination: { - page: 1, - perPage: 10, - }, - allTags: [ - { - tags: [ - { - tag: { - key: 'some', - value: 'test', - namespace: 'something', - }, - }, - ], - }, - ], - }, - }); - const wrapper = mount( - - - + await userEvent.click( + screen.getByRole('checkbox', { + name: /select row 0/i, + }) ); - wrapper - .find('tbody tr .pf-c-table__check input') - .first() - .simulate('change', { - target: { - value: 'checked', - }, - }); - wrapper - .find('.pf-c-modal-box__footer .pf-c-button.pf-m-primary') - .first() - .simulate('click'); - expect(onApply).toHaveBeenCalled(); + await userEvent.click( + screen.getByRole('button', { + name: /apply tags/i, + }) + ); + expect(onApply).toHaveBeenCalledTimes(1); }); - it('should toggle modal', () => { + it('should toggle modal', async () => { const store = mockStore({ entities: { ...initialState.entities, @@ -225,12 +231,17 @@ describe('TagsModal', () => { ], }, }); - const wrapper = mount( + render( ); - wrapper.find('.pf-c-button.pf-m-plain').first().simulate('click'); + + await userEvent.click( + screen.getByRole('button', { + name: /close/i, + }) + ); const actions = store.getActions(); expect(actions[0]).toMatchObject({ payload: { isOpen: false }, @@ -238,7 +249,7 @@ describe('TagsModal', () => { }); }); - it('should fetch additional tags when all tags shown', () => { + it('should fetch additional tags when all tags shown', async () => { const store = mockStore({ entities: { ...initialState.entities, @@ -263,15 +274,18 @@ describe('TagsModal', () => { ], }, }); - const wrapper = mount( + render( ); - wrapper - .find('.pf-c-pagination__nav button[data-action="next"]') - .first() - .simulate('click'); + + expect( + screen.getAllByRole('button', { name: /go to next page/i }) + ).toHaveLength(2); + await userEvent.click( + screen.getAllByRole('button', { name: /go to next page/i })[0] + ); const actions = store.getActions(); expect(actions[0]).toMatchObject({ type: 'ALL_TAGS_PENDING' }); }); diff --git a/src/Utilities/__snapshots__/TagsModal.test.js.snap b/src/Utilities/__snapshots__/TagsModal.test.js.snap index 5470a7b57..341b754ea 100644 --- a/src/Utilities/__snapshots__/TagsModal.test.js.snap +++ b/src/Utilities/__snapshots__/TagsModal.test.js.snap @@ -1,32 +1,671 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`TagsModal DOM should render activeSystemTag 1`] = ` - -`; - -exports[`TagsModal DOM should render alltags 1`] = ` - -`; - exports[`TagsModal DOM should render loading state correctly 1`] = ` - + +