IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Convert FolderSettingsPage.test.tsx to RTL (#53307)

Browse Source
This commit is contained in:
eledobleefe 2022-08-04 16:00:04 +02:00 committed by GitHub
parent 0c5b71694f
commit c65b4c732f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 110 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -80,9 +80,6 @@ exports[`no enzyme tests`] = {
"public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx:4164297658": [
[0, 17, 13, "RegExp match", "2409514259"]
],
"public/app/features/folders/FolderSettingsPage.test.tsx:1208063654": [
[0, 19, 13, "RegExp match", "2409514259"]
],
"public/app/plugins/datasource/cloudwatch/components/ConfigEditor.test.tsx:4057721851": [
[1, 19, 13, "RegExp match", "2409514259"]
],

125
public/app/features/folders/FolderSettingsPage.test.tsx
View File

@ -1,4 +1,5 @@
import { shallow } from 'enzyme';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { mockToolkitActionCreator } from 'test/core/redux/mocks';
@ -33,23 +34,16 @@ const setup = (propOverrides?: object) => {
Object.assign(props, propOverrides);
const wrapper = shallow(<FolderSettingsPage {...props} />);
const instance = wrapper.instance() as FolderSettingsPage;
return {
wrapper,
instance,
};
render(<FolderSettingsPage {...props} />);
};
describe('Render', () => {
it('should render component', () => {
const { wrapper } = setup();
expect(wrapper).toMatchSnapshot();
describe('FolderSettingsPage', () => {
it('should render without error', () => {
expect(() => setup()).not.toThrow();
});
it('should enable save button', () => {
const { wrapper } = setup({
it('should enable save button when canSave is true and hasChanged is true', () => {
setup({
folder: {
id: 1,
uid: '1234',
@ -60,6 +54,107 @@ describe('Render', () => {
version: 1,
},
});
expect(wrapper).toMatchSnapshot();
const saveButton = screen.getByRole('button', { name: 'Save' });
expect(saveButton).not.toBeDisabled();
});
it('should disable save button when canSave is false and hasChanged is false', () => {
setup({
folder: {
id: 1,
uid: '1234',
title: 'loading',
canSave: false,
canDelete: true,
hasChanged: false,
version: 1,
},
});
const saveButton = screen.getByRole('button', { name: 'Save' });
expect(saveButton).toBeDisabled();
});
it('should disable save button when canSave is true and hasChanged is false', () => {
setup({
folder: {
id: 1,
uid: '1234',
title: 'loading',
canSave: true,
canDelete: true,
hasChanged: false,
version: 1,
},
});
const saveButton = screen.getByRole('button', { name: 'Save' });
expect(saveButton).toBeDisabled();
});
it('should disable save button when canSave is false and hasChanged is true', () => {
setup({
folder: {
id: 1,
uid: '1234',
title: 'loading',
canSave: false,
canDelete: true,
hasChanged: true,
version: 1,
},
});
const saveButton = screen.getByRole('button', { name: 'Save' });
expect(saveButton).toBeDisabled();
});
it('should call onSave when the saveButton is clicked', async () => {
const mockSaveFolder = jest.fn();
const mockFolder = {
id: 1,
uid: '1234',
title: 'loading',
canSave: true,
canDelete: true,
hasChanged: true,
version: 1,
};
setup({
folder: mockFolder,
saveFolder: mockSaveFolder,
});
const saveButton = screen.getByRole('button', { name: 'Save' });
await userEvent.click(saveButton);
expect(mockSaveFolder).toHaveBeenCalledWith(mockFolder);
});
it('should disable delete button when canDelete is false', () => {
setup({
folder: {
id: 1,
uid: '1234',
title: 'loading',
canSave: true,
canDelete: false,
hasChanged: true,
version: 1,
},
});
const deleteButton = screen.getByRole('button', { name: 'Delete' });
expect(deleteButton).toBeDisabled();
});
it('should enable delete button when canDelete is true', () => {
setup({
folder: {
id: 1,
uid: '1234',
title: 'loading',
canSave: true,
canDelete: true,
hasChanged: true,
version: 1,
},
});
const deleteButton = screen.getByRole('button', { name: 'Delete' });
expect(deleteButton).not.toBeDisabled();
});
});

115
public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap
View File

@ -1,115 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should enable save button 1`] = `
<OldPage
navId="dashboards/browse"
>
<PageContents
isLoading={false}
>
<h3
className="page-sub-heading"
>
Folder settings
</h3>
<div
className="section gf-form-group"
>
<form
name="folderSettingsForm"
onSubmit={[Function]}
>
<div
className="gf-form"
>
<label
className="gf-form-label width-7"
>
Name
</label>
<Input
className="gf-form-input width-30"
onChange={[Function]}
type="text"
value="loading"
/>
</div>
<div
className="gf-form-button-row"
>
<Button
disabled={false}
type="submit"
>
Save
</Button>
<Button
disabled={false}
onClick={[Function]}
variant="destructive"
>
Delete
</Button>
</div>
</form>
</div>
</PageContents>
</OldPage>
`;
exports[`Render should render component 1`] = `
<OldPage
navId="dashboards/browse"
>
<PageContents
isLoading={false}
>
<h3
className="page-sub-heading"
>
Folder settings
</h3>
<div
className="section gf-form-group"
>
<form
name="folderSettingsForm"
onSubmit={[Function]}
>
<div
className="gf-form"
>
<label
className="gf-form-label width-7"
>
Name
</label>
<Input
className="gf-form-input width-30"
onChange={[Function]}
type="text"
value="loading"
/>
</div>
<div
className="gf-form-button-row"
>
<Button
disabled={true}
type="submit"
>
Save
</Button>
<Button
disabled={false}
onClick={[Function]}
variant="destructive"
>
Delete
</Button>
</div>
</form>
</div>
</PageContents>
</OldPage>
`;