The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
grafana/public/app/features/gops/configuration-tracker/components/Essentials.test.tsx

128 lines
4.2 KiB

import { render, screen, within } from '@testing-library/react';
import React from 'react';
import { byRole } from 'testing-library-selector';
import { SectionsDto } from '../irmHooks';
import { Essentials } from './Essentials';
function mockSectionsDto(): SectionsDto {
return {
sections: [
{
title: 'Detect',
description: 'Configure something1',
steps: [
{
title: 'Create something1',
description: 'description1',
button: {
type: 'openLink',
urlLink: {
url: '/url1',
},
label: 'label1',
},
done: true,
},
{
title: 'Create something2',
description: 'description2',
button: {
type: 'openLink',
urlLink: {
url: '/url2',
},
label: 'label2',
},
done: false,
},
{
title: 'testing step',
description: 'description3',
button: {
type: 'openLink',
urlLink: {
url: '/url3',
},
label: 'label3',
},
},
{
title: 'testing step',
description: 'description3',
button: {
type: 'openLink',
urlLink: {
url: '/url4',
},
urlLinkOnDone: {
url: '/url4',
},
label: 'testNotDone',
labelOnDone: 'testDone',
},
done: true,
},
],
},
],
};
}
describe('Essentials', () => {
it('renders progress status correctly', async () => {
const essentialsConfig = mockSectionsDto();
const stepsDone = 2;
const totalStepsToDo = 5;
render(
<Essentials
essentialsConfig={essentialsConfig}
stepsDone={stepsDone}
totalStepsToDo={totalStepsToDo}
onClose={jest.fn()}
/>
);
const progressBar = screen.getByText(/your progress/i);
expect(within(progressBar).getByText(/2/i)).toBeInTheDocument();
expect(within(progressBar).getByText(/of 5/i)).toBeInTheDocument();
});
it('renders steps correctly', async () => {
const essentialsConfig = mockSectionsDto();
const stepsDone = 0;
const totalStepsToDo = 5;
render(
<Essentials
essentialsConfig={essentialsConfig}
stepsDone={stepsDone}
totalStepsToDo={totalStepsToDo}
onClose={jest.fn()}
/>
);
// step1 is done and labelonDone is not defined
expect(byRole('heading', { name: /detect/i }).get()).toBeInTheDocument();
const step1 = screen.getAllByTestId('step')[0];
expect(within(step1).getByText(/create something1/i)).toBeInTheDocument();
expect(within(step1).getByTestId('checked-step')).toBeInTheDocument();
expect(within(step1).queryByRole('link', { name: /label1/i })).not.toBeInTheDocument();
// step2 is not done
const step2 = screen.getAllByTestId('step')[1];
expect(within(step2).getByText(/create something2/i)).toBeInTheDocument();
expect(within(step2).getByTestId('unckecked-step')).toBeInTheDocument();
expect(byRole('link', { name: /label2/i }).get()).toBeInTheDocument();
// step3 , done is not defined
const step3 = screen.getAllByTestId('step')[2];
expect(within(step3).getByText(/testing step/i)).toBeInTheDocument();
expect(within(step3).queryByTestId('checked-step')).not.toBeInTheDocument();
expect(within(step3).queryByTestId('unckecked-step')).not.toBeInTheDocument();
expect(within(step3).queryByTestId('step-button')).not.toBeInTheDocument();
expect(within(step3).queryByRole('link', { name: /label3/i })).toBeInTheDocument();
// step4 is done and labelonDone is defined
const step4 = screen.getAllByTestId('step')[3];
expect(within(step4).getByText(/testing step/i)).toBeInTheDocument();
expect(within(step4).getByTestId('checked-step')).toBeInTheDocument();
expect(within(step4).queryByRole('link', { name: /testNotDone/i })).not.toBeInTheDocument();
expect(within(step4).queryByRole('link', { name: /testDone/i })).toBeInTheDocument();
});
});