grafana/public/app/features/playlist/PlaylistPage.test.tsx
Uchechukwu Obasi 4e8ab0512c
PlayList: add delete functionality to remove playlist (#38120)
* WIP: add delete functionality to playlist

* fixes deleted item to be removed instantly without manual refresh

* update confirmModal to reference playlist name

* refactor confirmModal message to be clear enough

* WIP: some unit tests for the playlistPage

* added more tests and did some cleanup

* some code refactoring

* adds ability for user roles to control playlist delete

* some abstraction to cleanup code

* modified alert message for delete button to correspond with action

* tried a better approach to modify the alert message

* fixes playlist lookup on each render

* update handlers to not use anonymous function

* exposed getBackendSrv().get api to fetch all playlist

* used better naming convention

* removes unecessary async/await construct

* some code refactoring

* used the correct param structure
2021-09-01 13:23:57 +01:00

84 lines
2.6 KiB
TypeScript

import React from 'react';
import { render, waitFor } from '@testing-library/react';
import { PlaylistPage, PlaylistPageProps } from './PlaylistPage';
import { locationService } from '../../../../packages/grafana-runtime/src';
const fnMock = jest.fn();
jest.mock('@grafana/runtime', () => ({
...((jest.requireActual('@grafana/runtime') as unknown) as object),
getBackendSrv: () => ({
get: fnMock,
}),
}));
jest.mock('app/core/services/context_srv', () => ({
contextSrv: {
isEditor: true,
},
}));
function getTestContext(propOverrides?: object) {
const props: PlaylistPageProps = {
navModel: {
main: {
text: 'Playlist',
},
node: {
text: 'playlist',
},
},
route: {
path: '/playlists',
component: jest.fn(),
},
queryParams: { state: 'ok' },
match: { params: { name: 'playlist', sourceName: 'test playlist' }, isExact: false, url: 'asdf', path: '' },
history: locationService.getHistory(),
location: { pathname: '', hash: '', search: '', state: '' },
};
Object.assign(props, propOverrides);
return render(<PlaylistPage {...props} />);
}
describe('PlaylistPage', () => {
describe('when mounted without a playlist', () => {
it('page should load', () => {
fnMock.mockResolvedValue([]);
const { getByText } = getTestContext();
expect(getByText(/loading/i)).toBeInTheDocument();
});
it('then show empty list', async () => {
const { getByText } = getTestContext();
await waitFor(() => getByText('There are no playlists created yet'));
});
});
describe('when mounted with a playlist', () => {
it('page should load', () => {
fnMock.mockResolvedValue([
{
id: 0,
name: 'A test playlist',
interval: '10m',
items: [
{ title: 'First item', type: 'dashboard_by_id', order: 1, value: '1' },
{ title: 'Middle item', type: 'dashboard_by_id', order: 2, value: '2' },
{ title: 'Last item', type: 'dashboard_by_tag', order: 2, value: 'Last item' },
],
},
]);
const { getByText } = getTestContext();
expect(getByText(/loading/i)).toBeInTheDocument();
});
it('then playlist title and buttons should appear on the page', async () => {
const { getByRole, getByText } = getTestContext();
await waitFor(() => getByText('A test playlist'));
expect(getByRole('button', { name: /Start playlist/i })).toBeInTheDocument();
expect(getByRole('link', { name: /Edit playlist/i })).toBeInTheDocument();
expect(getByRole('button', { name: /Delete playlist/i })).toBeInTheDocument();
});
});
});