Skip to content

Commit

Permalink
chore(TagsModal): Convert tests to testing-library
Browse files Browse the repository at this point in the history
  • Loading branch information
@gkarat
gkarat committed Oct 25, 2023
1 parent 89a8cf4 commit 70615b1
Show file tree
Hide file tree
Showing 2 changed files with 767 additions and 114 deletions.
186 changes: 100 additions & 86 deletions src/Utilities/TagsModal.test.js
View file
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand All @@ -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(
<Provider store={store}>
<TagsModal />
</Provider>
);

// 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', () => {
Expand All @@ -56,17 +80,37 @@ describe('TagsModal', () => {
},
},
});
const wrapper = mount(
render(
<Provider store={store}>
<TagsModal />
</Provider>
);

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,
Expand All @@ -91,14 +135,23 @@ describe('TagsModal', () => {
],
},
});
const wrapper = mount(
render(
<Provider store={store}>
<TagsModal store={store} />
</Provider>
);

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();
});
});

Expand All @@ -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: {
Expand All @@ -134,73 +187,26 @@ describe('TagsModal', () => {
],
},
});
const wrapper = mount(
render(
<Provider store={store}>
<TagsModal />
<TagsModal onApply={onApply} />
</Provider>
);
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(
<Provider store={store}>
<TagsModal onApply={onApply} />
</Provider>
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,
Expand All @@ -225,20 +231,25 @@ describe('TagsModal', () => {
],
},
});
const wrapper = mount(
render(
<Provider store={store}>
<TagsModal />
</Provider>
);
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 },
type: 'TOGGLE_TAG_MODAL',
});
});

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,
Expand All @@ -263,15 +274,18 @@ describe('TagsModal', () => {
],
},
});
const wrapper = mount(
render(
<Provider store={store}>
<TagsModal />
</Provider>
);
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' });
});
Expand Down
Loading

0 comments on commit 70615b1

Please sign in to comment.