IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-24 09:50:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Replaces enzyme with RTL in ConfirmButton.test.tsx (#45435)

Browse Source
This commit is contained in:
Hugo Häggmark 2022-02-16 09:46:46 +01:00 committed by GitHub
parent a1a96a7324
commit 6584735bef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -17,9 +17,6 @@ exports[`no enzyme tests`] = {
"packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx:1355456933": [
[1, 31, 13, "RegExp match", "2409514259"]
],
"packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.test.tsx:3194817479": [
[2, 33, 13, "RegExp match", "2409514259"]
],
"packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx:3838344574": [
[1, 17, 13, "RegExp match", "2409514259"]
],

84
packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.test.tsx
View File

@ -1,34 +1,72 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ConfirmButton } from './ConfirmButton';
import { mount, ShallowWrapper } from 'enzyme';
import { Button } from '../Button';
import { expect } from '../../../../../public/test/lib/common';
describe('ConfirmButton', () => {
let wrapper: any;
let deleted: any;
beforeAll(() => {
deleted = false;
function deleteItem() {
deleted = true;
}
wrapper = mount(
<ConfirmButton confirmText="Confirm delete" onConfirm={() => deleteItem()}>
it('should show confirm delete when clicked', () => {
const onConfirm = jest.fn();
render(
<ConfirmButton confirmText="Confirm delete" onConfirm={onConfirm}>
Delete
</ConfirmButton>
);
// Confirm button should not be visible before clicking the Delete button
expect(screen.queryByRole('button', { name: 'Confirm delete' })).not.toBeInTheDocument();
userEvent.click(screen.getByRole('button', { name: 'Delete' }));
// Confirm button should now be visible
expect(screen.getByRole('button', { name: 'Confirm delete' })).toBeInTheDocument();
userEvent.click(screen.getByRole('button', { name: 'Confirm delete' }));
expect(onConfirm).toHaveBeenCalled();
// Confirm button should be visible if closeOnConfirm is false
expect(screen.queryByRole('button', { name: 'Confirm delete' })).toBeInTheDocument();
});
it('should show confirm delete when clicked', () => {
expect(deleted).toBe(false);
wrapper
.find(Button)
.findWhere((n: ShallowWrapper) => {
return n.text() === 'Confirm delete' && n.type() === Button;
})
.simulate('click');
expect(deleted).toBe(true);
it('should hide confirm delete when closeOnConfirm is true', () => {
render(
<ConfirmButton confirmText="Confirm delete" onConfirm={() => {}} closeOnConfirm={true}>
Delete
</ConfirmButton>
);
// Confirm button should not be visible before clicking the Delete button
expect(screen.queryByRole('button', { name: 'Confirm delete' })).not.toBeInTheDocument();
userEvent.click(screen.getByRole('button', { name: 'Delete' }));
// Confirm button should now be visible
expect(screen.getByRole('button', { name: 'Confirm delete' })).toBeInTheDocument();
userEvent.click(screen.getByRole('button', { name: 'Confirm delete' }));
// Confirm button should not be visible if closeOnConfirm is true
expect(screen.queryByRole('button', { name: 'Confirm delete' })).not.toBeInTheDocument();
});
it('should show cancel when clicked', () => {
const onCancel = jest.fn();
render(
<ConfirmButton confirmText="Confirm delete" onCancel={onCancel} onConfirm={() => {}}>
Delete
</ConfirmButton>
);
// Cancel button should not be visible before clicking the Delete button
expect(screen.queryByRole('button', { name: 'Cancel' })).not.toBeInTheDocument();
userEvent.click(screen.getByRole('button', { name: 'Delete' }));
// Cancel button should now be visible
expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
expect(onCancel).toHaveBeenCalled();
// Cancel button should not be visible after click
expect(screen.queryByRole('button', { name: 'Cancel' })).not.toBeInTheDocument();
});
});