From 226ffafbd61976a0762521eb6c17e6a3207f1fe9 Mon Sep 17 00:00:00 2001 From: "Keith J. Grant" Date: Wed, 7 Jul 2021 13:29:30 -0700 Subject: [PATCH] fix test errors (Sort, CredentialEdit, InventoryHost, JobTemplateEdit, etc) --- .../CodeEditor/VariablesDetail.test.jsx | 16 +-- .../DataListToolbar/DataListToolbar.test.jsx | 91 +++------------- .../MultiButtonToggle/MultiButtonToggle.jsx | 1 + .../MultiButtonToggle.test.jsx | 15 +-- awx/ui_next/src/components/Sort/Sort.jsx | 5 +- awx/ui_next/src/components/Sort/Sort.test.jsx | 100 ++++++++++-------- .../CredentialEdit/CredentialEdit.test.jsx | 4 - .../CredentialPluginField.jsx | 1 + .../InventoryHost/InventoryHost.test.jsx | 4 +- .../InventoryRelatedGroupListItem.test.jsx | 44 ++++---- .../SmartInventoryHost.test.jsx | 8 +- .../Team/TeamRoles/TeamRoleListItem.test.jsx | 48 ++++++--- .../JobTemplateEdit/JobTemplateEdit.test.jsx | 5 +- .../Survey/MultipleChoiceField.test.jsx | 6 +- 14 files changed, 161 insertions(+), 187 deletions(-) diff --git a/awx/ui_next/src/components/CodeEditor/VariablesDetail.test.jsx b/awx/ui_next/src/components/CodeEditor/VariablesDetail.test.jsx index 8b5da1a9e3..0ad9fed51b 100644 --- a/awx/ui_next/src/components/CodeEditor/VariablesDetail.test.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesDetail.test.jsx @@ -8,7 +8,7 @@ jest.mock('../../api'); describe('', () => { test('should render readonly CodeEditor', () => { const wrapper = mountWithContexts( - + ); const input = wrapper.find('VariablesDetail___StyledCodeEditor'); expect(input).toHaveLength(1); @@ -19,7 +19,7 @@ describe('', () => { test('should detect JSON', () => { const wrapper = mountWithContexts( - + ); const input = wrapper.find('VariablesDetail___StyledCodeEditor'); expect(input).toHaveLength(1); @@ -28,7 +28,7 @@ describe('', () => { test('should format JSON', () => { const wrapper = mountWithContexts( - + ); const input = wrapper.find('VariablesDetail___StyledCodeEditor'); expect(input).toHaveLength(1); @@ -37,7 +37,7 @@ describe('', () => { test('should convert between modes', () => { const wrapper = mountWithContexts( - + ); wrapper.find('MultiButtonToggle').invoke('onChange')('javascript'); const input = wrapper.find('VariablesDetail___StyledCodeEditor'); @@ -52,7 +52,7 @@ describe('', () => { test('should render label and value --- when there are no values', () => { const wrapper = mountWithContexts( - + ); expect(wrapper.find('VariablesDetail___StyledCodeEditor').length).toBe(1); expect(wrapper.find('.pf-c-form__label').text()).toBe('Variables'); @@ -60,7 +60,7 @@ describe('', () => { test('should update value if prop changes', () => { const wrapper = mountWithContexts( - + ); act(() => { wrapper.find('MultiButtonToggle').invoke('onChange')('javascript'); @@ -76,7 +76,7 @@ describe('', () => { test('should default yaml value to "---"', () => { const wrapper = mountWithContexts( - + ); const input = wrapper.find('VariablesDetail___StyledCodeEditor'); expect(input.prop('value')).toEqual('---'); @@ -84,7 +84,7 @@ describe('', () => { test('should default empty json to "{}"', () => { const wrapper = mountWithContexts( - + ); act(() => { wrapper.find('MultiButtonToggle').invoke('onChange')('javascript'); diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx index 5dcd594d22..640cd0eec9 100644 --- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx +++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; +import { shallow } from 'enzyme'; import { mountWithContexts } from '../../../testUtils/enzymeHelpers'; import DataListToolbar from './DataListToolbar'; import AddDropDownButton from '../AddDropDownButton/AddDropDownButton'; @@ -100,6 +101,7 @@ describe('', () => { searchColumns={searchColumns} sortColumns={sortColumns} onSort={onSort} + onSearch={() => {}} /> ); const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector); @@ -122,6 +124,7 @@ describe('', () => { searchColumns={searchColumns} sortColumns={sortColumns} onSort={onSort} + onSearch={() => {}} /> ); toolbar.update(); @@ -155,92 +158,28 @@ describe('', () => { searchDropdownItems.at(0).simulate('click', mockedSearchEvent); }); - test('it displays correct sort icon', () => { - const NUM_QS_CONFIG = { + test('should render sort icon', () => { + const qsConfig = { namespace: 'organization', dateFields: ['modified', 'created'], defaultParams: { page: 1, page_size: 5, order_by: 'id' }, integerFields: ['page', 'page_size', 'id'], }; + const sortColumns = [{ name: 'Name', key: 'name' }]; - const NUM_DESC_QS_CONFIG = { - namespace: 'organization', - dateFields: ['modified', 'created'], - defaultParams: { page: 1, page_size: 5, order_by: '-id' }, - integerFields: ['page', 'page_size', 'id'], - }; - - const ALPH_QS_CONFIG = { - namespace: 'organization', - dateFields: ['modified', 'created'], - defaultParams: { page: 1, page_size: 5, order_by: 'name' }, - integerFields: ['page', 'page_size', 'id'], - }; - - const ALPH_DESC_QS_CONFIG = { - namespace: 'organization', - dateFields: ['modified', 'created'], - defaultParams: { page: 1, page_size: 5, order_by: '-name' }, - integerFields: ['page', 'page_size', 'id'], - }; - - const forwardNumericIconSelector = 'SortNumericDownIcon'; - const reverseNumericIconSelector = 'SortNumericDownAltIcon'; - const forwardAlphaIconSelector = 'SortAlphaDownIcon'; - const reverseAlphaIconSelector = 'SortAlphaDownAltIcon'; - - const numericColumns = [{ name: 'ID', key: 'id' }]; - - const alphaColumns = [{ name: 'Name', key: 'name' }]; - - const searchColumns = [ - { name: 'Name', key: 'name', isDefault: true }, - { name: 'ID', key: 'id' }, - ]; - - toolbar = mountWithContexts( + const wrapper = shallow( ); - const reverseNumericIcon = toolbar.find(reverseNumericIconSelector); - expect(reverseNumericIcon.length).toBe(1); - - toolbar = mountWithContexts( - - ); - - const forwardNumericIcon = toolbar.find(forwardNumericIconSelector); - expect(forwardNumericIcon.length).toBe(1); - - toolbar = mountWithContexts( - - ); - - const reverseAlphaIcon = toolbar.find(reverseAlphaIconSelector); - expect(reverseAlphaIcon.length).toBe(1); - - toolbar = mountWithContexts( - - ); - - const forwardAlphaIcon = toolbar.find(forwardAlphaIconSelector); - expect(forwardAlphaIcon.length).toBe(1); + const sort = wrapper.find('Sort'); + expect(sort.prop('qsConfig')).toEqual(qsConfig); + expect(sort.prop('columns')).toEqual(sortColumns); + expect(sort.prop('onSort')).toEqual(onSort); }); test('should render additionalControls', () => { diff --git a/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx index 02a9e5982f..50b772b0c9 100644 --- a/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx +++ b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx @@ -10,6 +10,7 @@ const SmallButton = styled(Button)` font-size: var(--pf-global--FontSize--xs); } `; +SmallButton.displayName = 'SmallButton'; function MultiButtonToggle({ buttons, value, onChange, name }) { const setValue = newValue => { diff --git a/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.test.jsx b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.test.jsx index 01dafe0cdd..c37e43b729 100644 --- a/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.test.jsx +++ b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.test.jsx @@ -1,12 +1,13 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { shallow } from 'enzyme'; import MultiButtonToggle from './MultiButtonToggle'; describe('', () => { let wrapper; const onChange = jest.fn(); + beforeAll(() => { - wrapper = mount( + wrapper = shallow( ', () => { ]} value="yaml" onChange={onChange} + name="the-button" /> ); }); - afterAll(() => { - wrapper.unmount(); - }); + it('should render buttons successfully', () => { - const buttons = wrapper.find('Button'); + const buttons = wrapper.find('SmallButton'); expect(buttons.length).toBe(2); expect(buttons.at(0).props().variant).toBe('primary'); expect(buttons.at(1).props().variant).toBe('secondary'); }); + it('should call onChange function when button clicked', () => { - const buttons = wrapper.find('Button'); + const buttons = wrapper.find('SmallButton'); buttons.at(1).simulate('click'); expect(onChange).toHaveBeenCalledWith('json'); }); diff --git a/awx/ui_next/src/components/Sort/Sort.jsx b/awx/ui_next/src/components/Sort/Sort.jsx index 341f4bdede..667fa6a476 100644 --- a/awx/ui_next/src/components/Sort/Sort.jsx +++ b/awx/ui_next/src/components/Sort/Sort.jsx @@ -147,4 +147,7 @@ Sort.defaultProps = { onSort: null, }; -export default withRouter(Sort); +export { Sort as _Sort }; +const Wrapped = withRouter(Sort); +Wrapped.displayName = 'Sort'; +export default Wrapped; diff --git a/awx/ui_next/src/components/Sort/Sort.test.jsx b/awx/ui_next/src/components/Sort/Sort.test.jsx index f5b1fe0d2e..5ee3a52a23 100644 --- a/awx/ui_next/src/components/Sort/Sort.test.jsx +++ b/awx/ui_next/src/components/Sort/Sort.test.jsx @@ -1,11 +1,19 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; +import { shallow } from 'enzyme'; import { mountWithContexts, waitForElement, } from '../../../testUtils/enzymeHelpers'; -import Sort from './Sort'; +import Sort, { _Sort as SortUnwrapped } from './Sort'; + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useLocation: () => ({ + pathname: '/organizations', + }), +})); describe('', () => { let sort; @@ -16,7 +24,7 @@ describe('', () => { } }); - test('it triggers the expected callbacks', () => { + test('should trigger onSort callback', () => { const qsConfig = { namespace: 'item', defaultParams: { page: 1, page_size: 5, order_by: 'name' }, @@ -150,71 +158,79 @@ describe('', () => { expect(onSort).toBeCalledWith('bar', 'ascending'); }); - test('It displays correct sort icon', () => { - const forwardNumericIconSelector = 'SortNumericDownIcon'; - const reverseNumericIconSelector = 'SortNumericDownAltIcon'; - const forwardAlphaIconSelector = 'SortAlphaDownIcon'; - const reverseAlphaIconSelector = 'SortAlphaDownAltIcon'; - + test('should display numeric descending icon', () => { const qsConfigNumDown = { namespace: 'item', defaultParams: { page: 1, page_size: 5, order_by: '-id' }, integerFields: ['page', 'page_size', 'id'], }; + const numericColumns = [{ name: 'ID', key: 'id' }]; + + const wrapper = shallow( + + ); + + expect(wrapper.find('SortNumericDownAltIcon')).toHaveLength(1); + }); + + test('should display numeric ascending icon', () => { const qsConfigNumUp = { namespace: 'item', defaultParams: { page: 1, page_size: 5, order_by: 'id' }, integerFields: ['page', 'page_size', 'id'], }; + const numericColumns = [{ name: 'ID', key: 'id' }]; + + const wrapper = shallow( + + ); + + expect(wrapper.find('SortNumericDownIcon')).toHaveLength(1); + }); + + test('should display alphanumeric descending icon', () => { const qsConfigAlphaDown = { namespace: 'item', defaultParams: { page: 1, page_size: 5, order_by: '-name' }, integerFields: ['page', 'page_size'], }; - const qsConfigAlphaUp = { + const alphaColumns = [{ name: 'Name', key: 'name' }]; + + const wrapper = shallow( + + ); + + expect(wrapper.find('SortAlphaDownAltIcon')).toHaveLength(1); + }); + + test('should display alphanumeric ascending icon', () => { + const qsConfigAlphaDown = { namespace: 'item', defaultParams: { page: 1, page_size: 5, order_by: 'name' }, integerFields: ['page', 'page_size'], }; - - const numericColumns = [{ name: 'ID', key: 'id' }]; const alphaColumns = [{ name: 'Name', key: 'name' }]; - const onSort = jest.fn(); - sort = mountWithContexts( - - ); - - const reverseNumericIcon = sort.find(reverseNumericIconSelector); - expect(reverseNumericIcon.length).toBe(1); - - sort = mountWithContexts( - - ); - - const forwardNumericIcon = sort.find(forwardNumericIconSelector); - expect(forwardNumericIcon.length).toBe(1); - - sort = mountWithContexts( - ); - const reverseAlphaIcon = sort.find(reverseAlphaIconSelector); - expect(reverseAlphaIcon.length).toBe(1); - - sort = mountWithContexts( - - ); - - const forwardAlphaIcon = sort.find(forwardAlphaIconSelector); - expect(forwardAlphaIcon.length).toBe(1); + expect(wrapper.find('SortAlphaDownIcon')).toHaveLength(1); }); }); diff --git a/awx/ui_next/src/screens/Credential/CredentialEdit/CredentialEdit.test.jsx b/awx/ui_next/src/screens/Credential/CredentialEdit/CredentialEdit.test.jsx index f8acddee12..05e9ea301f 100644 --- a/awx/ui_next/src/screens/Credential/CredentialEdit/CredentialEdit.test.jsx +++ b/awx/ui_next/src/screens/Credential/CredentialEdit/CredentialEdit.test.jsx @@ -350,10 +350,6 @@ describe('', () => { }); }); - afterEach(() => { - wrapper.unmount(); - }); - test('initially renders successfully', async () => { expect(wrapper.find('CredentialEdit').length).toBe(1); }); diff --git a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginField.jsx b/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginField.jsx index 8b37f241d3..177c497e21 100644 --- a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginField.jsx +++ b/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginField.jsx @@ -128,6 +128,7 @@ function CredentialPluginField(props) { {fieldOptions.ask_at_runtime ? ( ', () => { let history; beforeEach(async () => { - InventoriesAPI.readHostDetail.mockResolvedValue({ - data: { ...mockHost }, - }); + InventoriesAPI.readHostDetail.mockResolvedValue(mockHost); await act(async () => { wrapper = mountWithContexts( diff --git a/awx/ui_next/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupListItem.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupListItem.test.jsx index bafe3524af..4ab8fb17b1 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupListItem.test.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryRelatedGroups/InventoryRelatedGroupListItem.test.jsx @@ -11,21 +11,21 @@ describe('', () => { beforeEach(() => { wrapper = mountWithContexts( - {}} - rowIndex={0} - /> + + + {}} + rowIndex={0} + /> + +
); }); - afterEach(() => { - wrapper.unmount(); - }); - test('should display expected row item content', () => { expect(wrapper.find('b').text()).toContain('Group 2 Inventory 0'); }); @@ -36,14 +36,18 @@ describe('', () => { test('edit button hidden from users without edit capabilities', () => { wrapper = mountWithContexts( - {}} - rowIndex={0} - /> + + + {}} + rowIndex={0} + /> + +
); expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy(); }); diff --git a/awx/ui_next/src/screens/Inventory/SmartInventoryHost/SmartInventoryHost.test.jsx b/awx/ui_next/src/screens/Inventory/SmartInventoryHost/SmartInventoryHost.test.jsx index 0664062847..93bff59d87 100644 --- a/awx/ui_next/src/screens/Inventory/SmartInventoryHost/SmartInventoryHost.test.jsx +++ b/awx/ui_next/src/screens/Inventory/SmartInventoryHost/SmartInventoryHost.test.jsx @@ -34,9 +34,7 @@ describe('', () => { }); test('should render expected tabs', async () => { - InventoriesAPI.readHostDetail.mockResolvedValue({ - data: { ...mockHost }, - }); + InventoriesAPI.readHostDetail.mockResolvedValue(mockHost); await act(async () => { wrapper = mountWithContexts( ', () => { }); test('should show content error when user attempts to navigate to erroneous route', async () => { - InventoriesAPI.readHostDetail.mockResolvedValue({ - data: { ...mockHost }, - }); + InventoriesAPI.readHostDetail.mockResolvedValue(mockHost); history = createMemoryHistory({ initialEntries: ['/inventories/smart_inventory/1/hosts/1/foobar'], }); diff --git a/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.test.jsx b/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.test.jsx index 031adcdccc..200cd67672 100644 --- a/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.test.jsx +++ b/awx/ui_next/src/screens/Team/TeamRoles/TeamRoleListItem.test.jsx @@ -20,10 +20,14 @@ describe('', () => { test('should mount properly', () => { wrapper = mountWithContexts( - + + + + +
); expect(wrapper.length).toBe(1); @@ -31,10 +35,14 @@ describe('', () => { test('should render proper list item data', () => { wrapper = mountWithContexts( - + + + + +
); expect(wrapper.find('Td[dataLabel="Resource Name"]').text()).toBe( 'template delete project' @@ -47,20 +55,28 @@ describe('', () => { test('should render deletable chip', () => { wrapper = mountWithContexts( - + + + + +
); expect(wrapper.find('Chip').prop('isReadOnly')).toBe(false); }); test('should render read only chip', () => { role.summary_fields.user_capabilities.unattach = false; wrapper = mountWithContexts( - + + + + +
); expect(wrapper.find('Chip').prop('isReadOnly')).toBe(true); }); diff --git a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx index fd7683d902..6fee90259d 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx @@ -299,7 +299,10 @@ describe('', () => { let wrapper; await act(async () => { wrapper = mountWithContexts( - + ); }); wrapper.update(); diff --git a/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.test.jsx b/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.test.jsx index e5a2cc50d0..bf1e9ee678 100644 --- a/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.test.jsx +++ b/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.test.jsx @@ -13,9 +13,9 @@ describe('', () => {