Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Cloud Posture] add tests for findings flyout toggling #150551

Merged
merged 5 commits into from
Feb 22, 2023
Merged

[Cloud Posture] add tests for findings flyout toggling #150551

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b7188a6
add tests for findings flyout toggling
orouz Feb 8, 2023
a8fb9b3
update test title
orouz Feb 8, 2023
f1791d3
export test ids
orouz Feb 21, 2023
5b647ee
import test id
orouz Feb 22, 2023
cab0aba
Merge branch 'main' into csp_findings_flyout_toggle_test
orouz Feb 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .../plugins/cloud_security_posture/public/pages/findings/findings_flyout/findings_flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ export const FindingsRuleFlyout = ({ onClose, findings }: FindingFlyoutProps) =>
const [tab, setTab] = useState<FindingsTab>(tabs[0]);

return (
<EuiFlyout onClose={onClose}>
<EuiFlyout onClose={onClose} data-test-subj="findings_flyout">
orouz marked this conversation as resolved.
Show resolved Hide resolved
<EuiFlyoutHeader>
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={false}>
Expand Down
66 changes: 32 additions & 34 deletions ...oud_security_posture/public/pages/findings/latest_findings/latest_findings_table.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,40 @@ const chance = new Chance();
type TableProps = PropsOf<typeof FindingsTable>;

describe('<FindingsTable />', () => {
it('renders the zero state when status success and data has a length of zero ', async () => {
const renderWrapper = (opts?: Partial<TableProps>) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added this to simplify all tests in file

const props: TableProps = {
loading: false,
items: [],
items: opts?.items || [],
sorting: { sort: { field: '@timestamp', direction: 'desc' } },
pagination: { pageSize: 10, pageIndex: 1, totalItemCount: 0 },
pagination: { pageSize: 10, pageIndex: 1, totalItemCount: opts?.items?.length || 0 },
setTableOptions: jest.fn(),
onAddFilter: jest.fn(),
...opts,
};

render(
<TestProvider>
<FindingsTable {...props} />
</TestProvider>
);
return props;
};

it('opens/closes the flyout when clicked on expand/close buttons ', () => {
renderWrapper({ items: [getFindingsFixture()] });

expect(screen.queryByTestId('findings_flyout')).not.toBeInTheDocument();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

turns out we need to use queryByTestId and not getByTestId for .not stuff because it throws.

expect(screen.queryByTestId('findings_table_expand_column')).toBeInTheDocument();

userEvent.click(screen.getByTestId('findings_table_expand_column'));
expect(screen.getByTestId('findings_flyout')).toBeInTheDocument();

userEvent.click(screen.getByTestId('euiFlyoutCloseButton'));
expect(screen.queryByTestId('findings_flyout')).not.toBeInTheDocument();
});
orouz marked this conversation as resolved.
Show resolved Hide resolved

it('renders the zero state when status success and data has a length of zero ', async () => {
renderWrapper({ items: [] });

expect(
screen.getByTestId(TEST_SUBJECTS.LATEST_FINDINGS_TABLE_NO_FINDINGS_EMPTY_STATE)
Expand All @@ -42,22 +61,12 @@ describe('<FindingsTable />', () => {

it('renders the table with provided items', () => {
const names = chance.unique(chance.sentence, 10);
const data = names.map(getFindingsFixture);
const data = names.map((name) => {
const fixture = getFindingsFixture();
return { ...fixture, rule: { ...fixture.rule, name } };
});

const props: TableProps = {
loading: false,
items: data,
sorting: { sort: { field: '@timestamp', direction: 'desc' } },
pagination: { pageSize: 10, pageIndex: 1, totalItemCount: 0 },
setTableOptions: jest.fn(),
onAddFilter: jest.fn(),
};

render(
<TestProvider>
<FindingsTable {...props} />
</TestProvider>
);
renderWrapper({ items: data });

data.forEach((item) => {
expect(screen.getByText(item.rule.name)).toBeInTheDocument();
Expand All @@ -66,23 +75,12 @@ describe('<FindingsTable />', () => {

it('adds filter with a cell button click', () => {
const names = chance.unique(chance.sentence, 10);
const data = names.map(getFindingsFixture);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getFindingsFixture doesn't take any arguments so we're not using the unique names anymore. this used fail on CI because sometimes our tests would find identical strings. changed this to include unique rule names


const filterProps = { onAddFilter: jest.fn() };
const props: TableProps = {
loading: false,
items: data,
sorting: { sort: { field: '@timestamp', direction: 'desc' } },
pagination: { pageSize: 10, pageIndex: 1, totalItemCount: 0 },
setTableOptions: jest.fn(),
...filterProps,
};
const data = names.map((name) => {
const fixture = getFindingsFixture();
return { ...fixture, rule: { ...fixture.rule, name } };
});

render(
<TestProvider>
<FindingsTable {...props} />
</TestProvider>
);
const props = renderWrapper({ items: data });

const row = data[0];

Expand Down
1 change: 1 addition & 0 deletions x-pack/plugins/cloud_security_posture/public/pages/findings/layout/findings_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export const getExpandColumn = <T extends unknown>({
width: '40px',
actions: [
{
'data-test-subj': 'findings_table_expand_column',
orouz marked this conversation as resolved.
Show resolved Hide resolved
name: i18n.translate('xpack.csp.expandColumnNameLabel', { defaultMessage: 'Expand' }),
description: i18n.translate('xpack.csp.expandColumnDescriptionLabel', {
defaultMessage: 'Expand',
Expand Down