Skip to content

Commit

Permalink
Generalize generic table filtering tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@arbulu89
arbulu89 committed Feb 22, 2023
1 parent 2928bf4 commit 59ce766
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 188 deletions.
41 changes: 2 additions & 39 deletions assets/js/components/ClustersList.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import { screen, fireEvent } from '@testing-library/react';
import { screen } from '@testing-library/react';
import 'intersection-observer';
import '@testing-library/jest-dom';
import { clusterFactory } from '@lib/test-utils/factories';

import { renderWithRouter, withDefaultState, withState } from '@lib/test-utils';
import { renderWithRouter, withState } from '@lib/test-utils';

import { filterTable, clearFilter } from '@lib/test-utils/table';

Expand Down Expand Up @@ -123,42 +123,5 @@ describe('ClustersList component', () => {
});
}
);

it('should put the filters values in the query string when filters are selected', () => {
const [StatefulClustersList] = withDefaultState(<ClustersList />);
renderWithRouter(StatefulClustersList);

['Health', 'Name', 'SID', 'Type', 'Tags'].forEach((filter) => {
fireEvent.click(screen.getByTestId(`filter-${filter}`));

fireEvent.click(
screen
.getByTestId(`filter-${filter}-options`)
.querySelector('li > div > span').firstChild
);
});

expect(window.location.search).toEqual(
'?health=unknown&name=drbd_cluster&sid=HDD&type=unknown&tags=tag1'
);
});

it('should reset the pagination and go the 1st page when a filter is selected', () => {
const clusters = [].concat(
clusterFactory.buildList(15),
clusterFactory.buildList(1, { tags: [{ value: 'Tag1' }] })
);
const state = { ...cleanInitialState, clustersList: { clusters } };
const [StatefulClustersList] = withState(<ClustersList />, state);

const { container } = renderWithRouter(StatefulClustersList);

fireEvent.click(container.querySelector('.tn-page-item:nth-child(2)'));

filterTable('Tags', 'Tag1');

const table = screen.getByRole('table');
expect(table.querySelectorAll('tbody > tr')).toHaveLength(1);
});
});
});
62 changes: 1 addition & 61 deletions assets/js/components/DatabasesOverview/DatabasesOverview.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { screen, fireEvent } from '@testing-library/react';
import { screen } from '@testing-library/react';
import 'intersection-observer';
import '@testing-library/jest-dom';
import { databaseFactory } from '@lib/test-utils/factories';
Expand Down Expand Up @@ -96,65 +96,5 @@ describe('DatabasesOverview component', () => {
});
}
);

it('should put the filters values in the query string when filters are selected', () => {
const state = {
...cleanInitialState,
databasesList: {
databases: databaseFactory.buildList(2, {
sid: 'NWD',
health: 'passing',
tags: [{ value: 'tag1' }],
}),
databaseInstances: [],
},
};

const [StatefulDatabasesOverview] = withState(
<DatabasesOverview />,
state
);
renderWithRouter(StatefulDatabasesOverview);

['Health', 'SID', 'Tags'].forEach((filter) => {
fireEvent.click(screen.getByTestId(`filter-${filter}`));

fireEvent.click(
screen
.getByTestId(`filter-${filter}-options`)
.querySelector('li > div > span').firstChild
);
});

expect(window.location.search).toEqual(
'?health=passing&sid=NWD&tags=tag1'
);
});

it('should reset the pagination and go the 1st page when a filter is selected', () => {
const databases = [].concat(
databaseFactory.buildList(15),
databaseFactory.buildList(1, { tags: [{ value: 'Tag1' }] })
);
const state = {
...cleanInitialState,
databasesList: {
databases,
databaseInstances: [],
},
};
const [StatefulDatabasesList] = withState(<DatabasesOverview />, state);

const { container } = renderWithRouter(StatefulDatabasesList);

fireEvent.click(container.querySelector('.tn-page-item:nth-child(2)'));

filterTable('Tags', 'Tag1');

const table = screen.getByRole('table');
expect(table.querySelectorAll('tbody > tr.cursor-pointer')).toHaveLength(
1
);
});
});
});
39 changes: 1 addition & 38 deletions assets/js/components/HostsList.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { screen, fireEvent } from '@testing-library/react';
import { screen } from '@testing-library/react';
import 'intersection-observer';
import '@testing-library/jest-dom';
import { hostFactory } from '@lib/test-utils/factories';
Expand Down Expand Up @@ -161,42 +161,5 @@ describe('HostsLists component', () => {
});
}
);

it('should put the filters values in the query string when filters are selected', () => {
const [StatefulHostsList] = withDefaultState(<HostsList />);
renderWithRouter(StatefulHostsList);

['Health', 'Hostname', 'Tags', 'SID'].forEach((filter) => {
fireEvent.click(screen.getByTestId(`filter-${filter}`));

fireEvent.click(
screen
.getByTestId(`filter-${filter}-options`)
.querySelector('li > div > span').firstChild
);
});

expect(window.location.search).toEqual(
'?heartbeat=unknown&hostname=vmdrbddev01&tags=tag1&sid=HDD'
);
});

it('should reset the pagination and go the 1st page when a filter is selected', () => {
const hosts = [].concat(
hostFactory.buildList(15),
hostFactory.buildList(1, { tags: [{ value: 'Tag1' }] })
);
const state = { ...cleanInitialState, hostsList: { hosts } };
const [StatefulHostsList] = withState(<HostsList />, state);

const { container } = renderWithRouter(StatefulHostsList);

fireEvent.click(container.querySelector('.tn-page-item:nth-child(2)'));

filterTable('Tags', 'Tag1');

const table = screen.getByRole('table');
expect(table.querySelectorAll('tbody > tr')).toHaveLength(1);
});
});
});
52 changes: 2 additions & 50 deletions assets/js/components/SapSystemsOverview/SapSystemsOverview.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import { screen, fireEvent } from '@testing-library/react';
import { screen } from '@testing-library/react';
import 'intersection-observer';
import '@testing-library/jest-dom';
import { sapSystemFactory } from '@lib/test-utils/factories';

import { renderWithRouter, withDefaultState, withState } from '@lib/test-utils';
import { renderWithRouter, withState } from '@lib/test-utils';

import { filterTable, clearFilter } from '@lib/test-utils/table';

Expand Down Expand Up @@ -103,53 +103,5 @@ describe('SapSystemsOverviews component', () => {
});
}
);

it('should put the filters values in the query string when filters are selected', () => {
const [StatefulSapSystemsOverview] = withDefaultState(
<SapSystemsOverview />
);
renderWithRouter(StatefulSapSystemsOverview);

['Health', 'SID', 'Tags'].forEach((filter) => {
fireEvent.click(screen.getByTestId(`filter-${filter}`));

fireEvent.click(
screen
.getByTestId(`filter-${filter}-options`)
.querySelector('li > div > span').firstChild
);
});

expect(window.location.search).toEqual(
'?health=passing&sid=NWD&tags=tag1'
);
});

it('should reset the pagination and go the 1st page when a filter is selected', () => {
const sapSystems = [].concat(
sapSystemFactory.buildList(15),
sapSystemFactory.buildList(1, { tags: [{ value: 'Tag1' }] })
);
const state = {
...cleanInitialState,
sapSystemsList: {
sapSystems,
applicationInstances: [],
databaseInstances: [],
},
};
const [StatefulSapSystemList] = withState(<SapSystemsOverview />, state);

const { container } = renderWithRouter(StatefulSapSystemList);

fireEvent.click(container.querySelector('.tn-page-item:nth-child(2)'));

filterTable('Tags', 'Tag1');

const table = screen.getByRole('table');
expect(table.querySelectorAll('tbody > tr.cursor-pointer')).toHaveLength(
1
);
});
});
});
113 changes: 113 additions & 0 deletions assets/js/components/Table/Table.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import React from 'react';
import { useSearchParams } from 'react-router-dom';

import { screen, fireEvent } from '@testing-library/react';
import 'intersection-observer';
import '@testing-library/jest-dom';

import { faker } from '@faker-js/faker';
import { Factory } from 'fishery';

import { renderWithRouter } from '@lib/test-utils';

import { filterTable } from '@lib/test-utils/table';

import Table from './Table';

const tableConfig = {
pagination: true,
columns: [
{
title: 'Column1',
key: 'column1',
filter: true,
filterFromParams: true,
},
{
title: 'Column2',
key: 'column2',
filter: true,
filterFromParams: true,
},
{
title: 'Column3',
key: 'column3',
filter: true,
filterFromParams: true,
},
],
};

const tableFactory = Factory.define(() => ({
column1: faker.name.firstName(),
column2: faker.name.firstName(),
column3: faker.name.firstName(),
}));

function TestTable({ config, data }) {
const [searchParams, setSearchParams] = useSearchParams();

return (
<Table
config={config}
data={data}
searchParams={searchParams}
setSearchParams={setSearchParams}
/>
);
}

describe('Table component', () => {
describe('filtering', () => {
it('should filter by the chosen filter option', () => {
const data = tableFactory.buildList(10);
const { column1: value1 } = data[0];

renderWithRouter(<TestTable config={tableConfig} data={data} />);

filterTable('Column1', value1);

const table = screen.getByRole('table');
expect(table.querySelectorAll('tbody > tr')).toHaveLength(1);
});

it('should put the filters values in the query string when filters are selected', () => {
const data = tableFactory.buildList(10);
const { column1: value1, column2: value2, column3: value3 } = data[0];

renderWithRouter(<TestTable config={tableConfig} data={data} />);

['Column1', 'Column2', 'Column3'].forEach((filter) => {
fireEvent.click(screen.getByTestId(`filter-${filter}`));

fireEvent.click(
screen
.getByTestId(`filter-${filter}-options`)
.querySelector('li > div > span').firstChild
);
});

expect(window.location.search).toEqual(
`?column1=${value1}&column2=${value2}&column3=${value3}`
);
});

it('should reset the pagination and go the 1st page when a filter is selected', () => {
const data = [].concat(
tableFactory.buildList(15),
tableFactory.buildList(1, { column3: 'value3' })
);

const { container } = renderWithRouter(
<TestTable config={tableConfig} data={data} />
);

fireEvent.click(container.querySelector('.tn-page-item:nth-child(2)'));

filterTable('Column3', 'value3');

const table = screen.getByRole('table');
expect(table.querySelectorAll('tbody > tr')).toHaveLength(1);
});
});
});

0 comments on commit 59ce766

Please sign in to comment.