import React from 'react';
import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
import { Route } from 'react-router-dom';
import { act } from '@testing-library/react';
import ContentViewFilterDetails from '../ContentViewFilterDetails';
import { cvFilterDetailsKey } from '../../../ContentViewsConstants';
import {
nockInstance,
assertNockRequest,
mockAutocomplete,
} from '../../../../../test-utils/nockWrapper';
import api from '../../../../../services/api';
import allErrata from './allFilterErrata.fixtures.json';
import cvFilterDetails from './cvErratumFilterDetails.fixtures.json';
import cvFilterFixtures from './contentViewFilters.fixtures.json';
import details from '../../../__tests__/mockDetails.fixtures.json';
const cvFiltersPath = api.getApiUrl('/content_view_filters');
const cvRefreshCallbackPath = api.getApiUrl('/content_views/1');
const cvFilterDetailsPath = api.getApiUrl('/content_view_filters/6');
const cvAddFilterRulePath = api.getApiUrl('/content_view_filters/6/rules');
const cvRemoveFilterRulePath = api.getApiUrl('/content_view_filters/6/rules/4');
const cvBulkRemoveFilterRulesPath = api.getApiUrl('/content_view_filters/6/remove_filter_rules');
const cvBulkAddFilterRulesPath = api.getApiUrl('/content_view_filters/6/add_filter_rules');
const errataPath = api.getApiUrl('/errata');
const autocompleteUrl = '/errata/auto_complete_search';
const renderOptions = {
apiNamespace: cvFilterDetailsKey(1, 6),
routerParams: {
initialEntries: [{ pathname: '/content_views/1#/filters/6' }],
initialIndex: 1,
},
};
const withCVRoute = component => {component};
test('Can enable and disable add filter button', async (done) => {
const { name: cvFilterName } = cvFilterDetails;
const cvFilterScope = nockInstance
.get(cvFilterDetailsPath)
.query(true)
.reply(200, cvFilterDetails);
const cvFiltersScope = nockInstance
.get(cvFiltersPath)
.query(true)
.reply(200, cvFilterFixtures);
const errataScope = nockInstance
.get(errataPath)
.query(true)
.reply(200, allErrata);
const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
const { getByText, queryByText, getByLabelText } =
renderWithRedux(withCVRoute(), renderOptions);
// Nothing will show at first, page is loading
expect(queryByText(cvFilterName)).toBeNull();
await patientlyWaitFor(() => {
expect(getByText(cvFilterName)).toBeInTheDocument();
expect(getByLabelText('Select all rows')).toBeInTheDocument();
});
expect(getByLabelText('add_filter_rule')).toHaveAttribute('aria-disabled', 'true');
getByLabelText('Select all rows').click();
await patientlyWaitFor(() => {
expect(getByLabelText('add_filter_rule')).toHaveAttribute('aria-disabled', 'false');
});
assertNockRequest(autocompleteScope);
assertNockRequest(cvFilterScope);
assertNockRequest(cvFiltersScope);
assertNockRequest(errataScope, done);
act(done);
});
test('Can add a filter rule', async (done) => {
const { rules } = cvFilterDetails;
const errataId = rules[0].errata_id;
const cvFilterScope = nockInstance
.get(cvFilterDetailsPath)
.query(true)
.reply(200, cvFilterDetails);
const cvFiltersScope = nockInstance
.get(cvFiltersPath)
.query(true)
.reply(200, cvFilterFixtures);
const cvFiltersRuleScope = nockInstance
.post(cvAddFilterRulePath)
.query(true)
.reply(200, {});
const errataScope = nockInstance
.get(errataPath)
.query(true)
.reply(200, allErrata);
const cvRequestCallbackScope = nockInstance
.get(cvRefreshCallbackPath)
.query(true)
.reply(200, cvFilterDetails);
const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
const { getAllByLabelText, getByText, queryByText } =
renderWithRedux(withCVRoute(), renderOptions);
// Nothing will show at first, page is loading
expect(queryByText(errataId)).toBeNull();
await patientlyWaitFor(() => {
expect(getByText(errataId)).toBeInTheDocument();
expect(getAllByLabelText('Actions')[3]).toHaveAttribute('aria-expanded', 'false');
});
fireEvent.click(getAllByLabelText('Actions')[3]);
expect(getAllByLabelText('Actions')[3]).toHaveAttribute('aria-expanded', 'true');
await patientlyWaitFor(() => expect(getByText('Add')).toBeInTheDocument());
act(() => { fireEvent.click(getByText('Add')); });
assertNockRequest(autocompleteScope);
assertNockRequest(cvFilterScope);
assertNockRequest(cvFiltersScope);
assertNockRequest(cvFiltersRuleScope);
assertNockRequest(cvRequestCallbackScope);
assertNockRequest(errataScope, done);
act(done);
});
test('Can remove a filter rule', async (done) => {
const { rules } = cvFilterDetails;
const errataId = rules[0].errata_id; // 'RHEA-2012:0055'
const cvFilterScope = nockInstance
.get(cvFilterDetailsPath)
.query(true)
.reply(200, cvFilterDetails);
const cvFiltersScope = nockInstance
.get(cvFiltersPath)
.query(true)
.reply(200, cvFilterFixtures);
const cvFiltersRuleScope = nockInstance
.delete(cvRemoveFilterRulePath)
.reply(200, {});
const errataScope = nockInstance
.get(errataPath)
.query(true)
.reply(200, allErrata);
const cvRequestCallbackScope = nockInstance
.get(cvRefreshCallbackPath)
.query(true)
.reply(200, cvFilterDetails);
const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
const { getAllByLabelText, getByText, queryByText } =
renderWithRedux(withCVRoute(), renderOptions);
// Nothing will show at first, page is loading
expect(queryByText(errataId)).toBeNull();
await patientlyWaitFor(() => {
expect(getByText(errataId)).toBeInTheDocument();
expect(getAllByLabelText('Actions')[2]).toHaveAttribute('aria-expanded', 'false');
});
fireEvent.click(getAllByLabelText('Actions')[2]);
expect(getAllByLabelText('Actions')[2]).toHaveAttribute('aria-expanded', 'true');
await patientlyWaitFor(() => expect(getByText('Remove')).toBeInTheDocument());
act(() => { fireEvent.click(getByText('Remove')); });
assertNockRequest(autocompleteScope);
assertNockRequest(cvFilterScope);
assertNockRequest(cvFiltersScope);
assertNockRequest(cvFiltersRuleScope);
assertNockRequest(cvRequestCallbackScope);
assertNockRequest(errataScope, done);
act(done);
});
test('Can bulk remove filter rules', async (done) => {
const { rules } = cvFilterDetails;
const errataId = rules[0].errata_id;
const cvFilterScope = nockInstance
.get(cvFilterDetailsPath)
.query(true)
.reply(200, cvFilterDetails);
const cvFiltersScope = nockInstance
.get(cvFiltersPath)
.query(true)
.reply(200, cvFilterFixtures);
const bulkDeleteParams = { rule_ids: [1, 4] };
const cvFiltersRuleBulkDeleteScope = nockInstance
.put(cvBulkRemoveFilterRulesPath, bulkDeleteParams)
.reply(200, {});
const errataScope = nockInstance
.get(errataPath)
.query(true)
.reply(200, allErrata);
const cvRequestCallbackScope = nockInstance
.get(cvRefreshCallbackPath)
.query(true)
.reply(200, cvFilterDetails);
const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
const { getByText, queryByText, getByLabelText } =
renderWithRedux(withCVRoute(), renderOptions);
// Nothing will show at first, page is loading
expect(queryByText(errataId)).toBeNull();
await patientlyWaitFor(() => {
expect(getByText(errataId)).toBeInTheDocument();
// "Select all rows"
expect(getByLabelText('Select all rows')).toBeInTheDocument();
expect(getByLabelText('bulk_actions')).toHaveAttribute('aria-expanded', 'false');
});
fireEvent.click(getByLabelText('Select all rows'));
fireEvent.click(getByLabelText('bulk_actions'));
await patientlyWaitFor(() => {
expect(getByLabelText('bulk_actions')).toHaveAttribute('aria-expanded', 'true');
expect(getByLabelText('bulk_remove')).toBeInTheDocument();
});
act(() => { fireEvent.click(getByLabelText('bulk_remove')); });
assertNockRequest(autocompleteScope);
assertNockRequest(cvFilterScope);
assertNockRequest(cvFiltersScope);
assertNockRequest(cvFiltersRuleBulkDeleteScope);
assertNockRequest(cvRequestCallbackScope);
assertNockRequest(errataScope, done);
act(done);
});
test('Can bulk add filter rules', async (done) => {
const { rules } = cvFilterDetails;
const errataId = rules[0].errata_id;
const cvFilterScope = nockInstance
.get(cvFilterDetailsPath)
.query(true)
.reply(200, cvFilterDetails);
const cvFiltersScope = nockInstance
.get(cvFiltersPath)
.query(true)
.reply(200, cvFilterFixtures);
const bulkAddParams = { rules_params: [{ errata_ids: ['RHEA-2012:0056'] }, { errata_ids: ['RHEA-2012:0057'] }] };
const cvFiltersRuleBulkAddScope = nockInstance
.put(cvBulkAddFilterRulesPath, bulkAddParams)
.reply(200, {});
const errataScope = nockInstance
.get(errataPath)
.query(true)
.reply(200, allErrata);
const cvRequestCallbackScope = nockInstance
.get(cvRefreshCallbackPath)
.query(true)
.reply(200, cvFilterDetails);
const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
const { getByText, queryByText, getByLabelText } =
renderWithRedux(withCVRoute(), renderOptions);
// Nothing will show at first, page is loading
expect(queryByText(errataId)).toBeNull();
await patientlyWaitFor(() => {
expect(getByText(errataId)).toBeInTheDocument();
expect(getByLabelText('Select all rows')).toBeInTheDocument();
expect(getByLabelText('bulk_actions')).toHaveAttribute('aria-expanded', 'false');
});
expect(getByLabelText('add_filter_rule')).toHaveAttribute('aria-disabled', 'true');
fireEvent.click(getByLabelText('Select all rows'));
await patientlyWaitFor(() => {
expect(getByLabelText('add_filter_rule')).toHaveAttribute('aria-disabled', 'false');
});
act(() => { fireEvent.click(getByLabelText('add_filter_rule')); });
assertNockRequest(autocompleteScope);
assertNockRequest(cvFilterScope);
assertNockRequest(cvFiltersScope);
assertNockRequest(cvFiltersRuleBulkAddScope);
assertNockRequest(cvRequestCallbackScope);
assertNockRequest(errataScope, done);
act(done);
});
test('Can show filters and chips', async (done) => {
const { rules, name: cvFilterName } = cvFilterDetails;
const errataId = rules[0].errata_id;
const cvFilterScope = nockInstance
.get(cvFilterDetailsPath)
.query(true)
.reply(200, cvFilterDetails);
const cvFiltersScope = nockInstance
.get(cvFiltersPath)
.query(true)
.reply(200, cvFilterFixtures);
const errataScope = nockInstance
.get(errataPath)
.times(5)
.query(true)
.reply(200, allErrata);
const cvRequestCallbackScope = nockInstance
.get(cvRefreshCallbackPath)
.query(true)
.reply(200, cvFilterDetails);
const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
const {
getByText, getAllByText, queryByText, getByLabelText, getByTestId,
} =
renderWithRedux(withCVRoute(), renderOptions);
// Nothing will show at first, page is loading
expect(queryByText(cvFilterName)).toBeNull();
// Selected status filter
await patientlyWaitFor(() => {
expect(getByText(cvFilterName)).toBeInTheDocument();
expect(getByTestId('allAddedNotAdded')).toBeInTheDocument();
});
fireEvent.click(getByTestId('allAddedNotAdded')?.childNodes[0]?.childNodes[1]?.childNodes[0]?.childNodes[0]);
await patientlyWaitFor(() => {
expect(getByLabelText('select Added')).toBeInTheDocument();
});
act(() => { getByLabelText('select Added').click(); });
await patientlyWaitFor(() => {
expect(getByText(errataId)).toBeInTheDocument();
expect(queryByText('All')).not.toBeInTheDocument();
});
expect(getByText('Errata type')).toBeInTheDocument();
act(() => { getByText('Errata type').click(); });
await patientlyWaitFor(() => {
expect(getByLabelText('security_selection')).toBeInTheDocument();
});
getByLabelText('security_selection').click();
await patientlyWaitFor(() => {
expect(getAllByText('ANY')).toHaveLength(2);
});
fireEvent.change(getByLabelText('start_date_input'), { target: { value: '08/15/1990' } });
await patientlyWaitFor(() => {
expect(getAllByText('ANY')).toHaveLength(1);
});
fireEvent.change(getByLabelText('end_date_input'), { target: { value: '08/15/2020' } });
await patientlyWaitFor(() => {
expect(queryByText('ANY')).toBeNull();
});
assertNockRequest(autocompleteScope);
assertNockRequest(cvFilterScope);
assertNockRequest(cvFiltersScope);
assertNockRequest(cvRequestCallbackScope);
assertNockRequest(errataScope); // 1st call on component load
assertNockRequest(errataScope); // 2nd call on status selection
assertNockRequest(errataScope); // 3rd call on errata type selection
assertNockRequest(errataScope); // 4th call on start date change
assertNockRequest(errataScope, done); // Last call on end date change
act(done);
});