use renderInTestApp

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
This commit is contained in:
Fredrik Adelöw
2023-09-14 21:22:11 +02:00
parent 8a6a66f621
commit ab6474579f
72 changed files with 2587 additions and 2982 deletions
@@ -22,8 +22,8 @@ import {
configApiRef,
} from '@backstage/core-plugin-api';
import { EntityProvider } from '@backstage/plugin-catalog-react';
import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils';
import { act, fireEvent, render, waitFor } from '@testing-library/react';
import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils';
import { act, fireEvent, screen, waitFor } from '@testing-library/react';
import React from 'react';
import {
splunkOnCallApiRef,
@@ -114,22 +114,23 @@ describe('SplunkOnCallCard', () => {
.fn()
.mockImplementation(async () => [MOCK_TEAM_NO_INCIDENTS]);
const { getByText, queryByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntityNoIncidents}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntityNoIncidents}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
expect(getByText('Create Incident')).toBeInTheDocument();
await waitFor(() => !screen.queryByTestId('progress'));
expect(screen.getByText('Create Incident')).toBeInTheDocument();
await waitFor(
() => expect(getByText('Nice! No incidents found!')).toBeInTheDocument(),
() =>
expect(
screen.getByText('Nice! No incidents found!'),
).toBeInTheDocument(),
{ timeout: 2000 },
);
expect(getByText('Empty escalation policy')).toBeInTheDocument();
expect(screen.getByText('Empty escalation policy')).toBeInTheDocument();
});
it('does not render a "Create incident" link in read only mode', async () => {
@@ -140,22 +141,23 @@ describe('SplunkOnCallCard', () => {
.fn()
.mockImplementation(async () => [MOCK_TEAM_NO_INCIDENTS]);
const { getByText, queryByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntityNoIncidents}>
<EntitySplunkOnCallCard readOnly />
</EntityProvider>
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntityNoIncidents}>
<EntitySplunkOnCallCard readOnly />
</EntityProvider>
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
expect(() => getByText('Create Incident')).toThrow();
await waitFor(() => !screen.queryByTestId('progress'));
expect(() => screen.getByText('Create Incident')).toThrow();
await waitFor(
() => expect(getByText('Nice! No incidents found!')).toBeInTheDocument(),
() =>
expect(
screen.getByText('Nice! No incidents found!'),
).toBeInTheDocument(),
{ timeout: 2000 },
);
expect(getByText('Empty escalation policy')).toBeInTheDocument();
expect(screen.getByText('Empty escalation policy')).toBeInTheDocument();
});
it('handles a "splunk.com/on-call-routing-key" annotation', async () => {
@@ -171,32 +173,30 @@ describe('SplunkOnCallCard', () => {
const mockTriggerAlarmFn = jest.fn();
mockSplunkOnCallApi.incidentAction = mockTriggerAlarmFn;
const { getByRole, getByTestId, getByText, queryByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntityWithRoutingKeyAnnotation}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntityWithRoutingKeyAnnotation}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
expect(getByText(`Team: ${MOCK_TEAM.name}`)).toBeInTheDocument();
expect(getByText('Create Incident')).toBeInTheDocument();
await waitFor(() => !screen.queryByTestId('progress'));
expect(screen.getByText(`Team: ${MOCK_TEAM.name}`)).toBeInTheDocument();
expect(screen.getByText('Create Incident')).toBeInTheDocument();
await waitFor(
() => expect(getByText('test-incident')).toBeInTheDocument(),
() => expect(screen.getByText('test-incident')).toBeInTheDocument(),
{ timeout: 2000 },
);
const createIncidentButton = getByText('Create Incident');
const createIncidentButton = screen.getByText('Create Incident');
await act(async () => {
fireEvent.click(createIncidentButton);
});
expect(getByRole('dialog')).toBeInTheDocument();
expect(screen.getByRole('dialog')).toBeInTheDocument();
await expectTriggeredIncident(
'test-routing-key',
getByTestId,
screen.getByTestId,
mockTriggerAlarmFn,
);
});
@@ -206,18 +206,18 @@ describe('SplunkOnCallCard', () => {
.fn()
.mockRejectedValueOnce(new UnauthorizedError());
const { getByText, queryByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntity}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntity}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
await waitFor(() => !screen.queryByTestId('progress'));
expect(
getByText('Missing or invalid Splunk On-Call API key and/or API id'),
screen.getByText(
'Missing or invalid Splunk On-Call API key and/or API id',
),
).toBeInTheDocument();
});
@@ -225,36 +225,32 @@ describe('SplunkOnCallCard', () => {
mockSplunkOnCallApi.getUsers = jest
.fn()
.mockRejectedValueOnce(new Error('An error occurred'));
const { getByText, queryByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntity}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntity}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
await waitFor(() => !screen.queryByTestId('progress'));
expect(
getByText(
screen.getByText(
'Error encountered while fetching information. An error occurred',
),
).toBeInTheDocument();
});
it('handles warning for missing required annotations', async () => {
const { getAllByText, queryByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntityNoAnnotation}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntityNoAnnotation}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
expect(getAllByText('Missing Annotation').length).toEqual(1);
await waitFor(() => !screen.queryByTestId('progress'));
expect(screen.getAllByText('Missing Annotation').length).toEqual(1);
});
it('handles warning for incorrect team annotation', async () => {
@@ -265,18 +261,16 @@ describe('SplunkOnCallCard', () => {
.fn()
.mockImplementationOnce(async () => []);
const { getByText, queryByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntity}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntity}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
await waitFor(() => !screen.queryByTestId('progress'));
expect(
getByText(
screen.getByText(
'Splunk On-Call API returned no record of teams associated with the "test" team name',
),
).toBeInTheDocument();
@@ -293,18 +287,16 @@ describe('SplunkOnCallCard', () => {
.fn()
.mockImplementationOnce(async () => []);
const { getByText, queryByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntityWithRoutingKeyAnnotation}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntityWithRoutingKeyAnnotation}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
await waitFor(() => !screen.queryByTestId('progress'));
expect(
getByText(
screen.getByText(
`Splunk On-Call API returned no record of teams associated with the "${MOCK_ROUTING_KEY.routingKey}" routing key`,
),
).toBeInTheDocument();
@@ -318,21 +310,19 @@ describe('SplunkOnCallCard', () => {
.fn()
.mockImplementationOnce(async () => [MOCK_TEAM]);
const { getByText, queryByTestId, getByRole } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntity}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<EntityProvider entity={mockEntity}>
<EntitySplunkOnCallCard />
</EntityProvider>
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
expect(getByText('Create Incident')).toBeInTheDocument();
const triggerButton = getByText('Create Incident');
await waitFor(() => !screen.queryByTestId('progress'));
expect(screen.getByText('Create Incident')).toBeInTheDocument();
const triggerButton = screen.getByText('Create Incident');
await act(async () => {
fireEvent.click(triggerButton);
});
expect(getByRole('dialog')).toBeInTheDocument();
expect(screen.getByRole('dialog')).toBeInTheDocument();
});
});
@@ -13,10 +13,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { render, waitFor } from '@testing-library/react';
import { screen, waitFor } from '@testing-library/react';
import { EscalationPolicy } from './EscalationPolicy';
import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils';
import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils';
import { splunkOnCallApiRef } from '../../api';
import { MOCKED_ON_CALL, MOCKED_USER } from '../../api/mocks';
import { ApiProvider } from '@backstage/core-app-api';
@@ -32,21 +33,19 @@ describe('Escalation', () => {
.fn()
.mockImplementationOnce(async () => []);
const { getByText, queryByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<EscalationPolicy
users={{
[MOCKED_USER.username!]: MOCKED_USER,
}}
team="team_example"
/>
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<EscalationPolicy
users={{
[MOCKED_USER.username!]: MOCKED_USER,
}}
team="team_example"
/>
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
await waitFor(() => !screen.queryByTestId('progress'));
expect(getByText('Empty escalation policy')).toBeInTheDocument();
expect(screen.getByText('Empty escalation policy')).toBeInTheDocument();
expect(mockSplunkOnCallApi.getOnCallUsers).toHaveBeenCalled();
});
@@ -55,22 +54,20 @@ describe('Escalation', () => {
.fn()
.mockImplementationOnce(async () => MOCKED_ON_CALL);
const { getByText, queryByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<EscalationPolicy
users={{
[MOCKED_USER.username!]: MOCKED_USER,
}}
team="team_example"
/>
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<EscalationPolicy
users={{
[MOCKED_USER.username!]: MOCKED_USER,
}}
team="team_example"
/>
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
await waitFor(() => !screen.queryByTestId('progress'));
expect(getByText('FirstNameTest LastNameTest')).toBeInTheDocument();
expect(getByText('test@example.com')).toBeInTheDocument();
expect(screen.getByText('FirstNameTest LastNameTest')).toBeInTheDocument();
expect(screen.getByText('test@example.com')).toBeInTheDocument();
expect(mockSplunkOnCallApi.getOnCallUsers).toHaveBeenCalled();
});
@@ -79,22 +76,22 @@ describe('Escalation', () => {
.fn()
.mockRejectedValueOnce(new Error('Error message'));
const { getByText, queryByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<EscalationPolicy
users={{
[MOCKED_USER.username!]: MOCKED_USER,
}}
team="team_example"
/>
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<EscalationPolicy
users={{
[MOCKED_USER.username!]: MOCKED_USER,
}}
team="team_example"
/>
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
await waitFor(() => !screen.queryByTestId('progress'));
expect(
getByText('Error encountered while fetching information. Error message'),
screen.getByText(
'Error encountered while fetching information. Error message',
),
).toBeInTheDocument();
});
});
@@ -13,10 +13,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { render, waitFor } from '@testing-library/react';
import { screen, waitFor } from '@testing-library/react';
import { Incidents } from './Incidents';
import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils';
import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils';
import { splunkOnCallApiRef } from '../../api';
import { MOCK_TEAM, MOCK_INCIDENT } from '../../api/mocks';
@@ -41,16 +42,17 @@ describe('Incidents', () => {
mockSplunkOnCallApi.getIncidents.mockResolvedValue([]);
mockSplunkOnCallApi.getTeams.mockResolvedValue([MOCK_TEAM]);
const { getByText, queryByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<Incidents readOnly={false} refreshIncidents={false} team="test" />
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<Incidents readOnly={false} refreshIncidents={false} team="test" />
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
await waitFor(() => !screen.queryByTestId('progress'));
await waitFor(
() => expect(getByText('Nice! No incidents found!')).toBeInTheDocument(),
() =>
expect(
screen.getByText('Nice! No incidents found!'),
).toBeInTheDocument(),
{ timeout: 2000 },
);
});
@@ -59,69 +61,59 @@ describe('Incidents', () => {
mockSplunkOnCallApi.getIncidents.mockResolvedValue([MOCK_INCIDENT]);
mockSplunkOnCallApi.getTeams.mockResolvedValue([MOCK_TEAM]);
const {
getByText,
getByTitle,
getAllByTitle,
getByLabelText,
queryByTestId,
} = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<Incidents readOnly={false} team="test" refreshIncidents={false} />
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<Incidents readOnly={false} team="test" refreshIncidents={false} />
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
await waitFor(() => !screen.queryByTestId('progress'));
await waitFor(
() =>
expect(
getByText('user', {
screen.getByText('user', {
exact: false,
}),
).toBeInTheDocument(),
{ timeout: 2000 },
);
expect(getByText('test-incident')).toBeInTheDocument();
expect(getByTitle('Acknowledged')).toBeInTheDocument();
expect(getByLabelText('Status warning')).toBeInTheDocument();
expect(screen.getByText('test-incident')).toBeInTheDocument();
expect(screen.getByTitle('Acknowledged')).toBeInTheDocument();
expect(screen.getByLabelText('Status warning')).toBeInTheDocument();
// assert links, mailto and hrefs, date calculation
expect(getAllByTitle('View in Splunk On-Call').length).toEqual(1);
expect(screen.getAllByTitle('View in Splunk On-Call').length).toEqual(1);
});
it('does not render incident action buttons in read only mode', async () => {
mockSplunkOnCallApi.getIncidents.mockResolvedValue([MOCK_INCIDENT]);
mockSplunkOnCallApi.getTeams.mockResolvedValue([MOCK_TEAM]);
const { getByText, getAllByTitle, getByLabelText, queryByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<Incidents readOnly team="test" refreshIncidents={false} />
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<Incidents readOnly team="test" refreshIncidents={false} />
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
await waitFor(() => !screen.queryByTestId('progress'));
await waitFor(
() =>
expect(
getByText('user', {
screen.getByText('user', {
exact: false,
}),
).toBeInTheDocument(),
{ timeout: 2000 },
);
expect(getByText('test-incident')).toBeInTheDocument();
expect(getByLabelText('Status warning')).toBeInTheDocument();
expect(() => getAllByTitle('Acknowledge')).toThrow(
expect(screen.getByText('test-incident')).toBeInTheDocument();
expect(screen.getByLabelText('Status warning')).toBeInTheDocument();
expect(() => screen.getAllByTitle('Acknowledge')).toThrow(
'Unable to find an element with the title: Acknowledge.',
);
expect(() => getAllByTitle('Resolve')).toThrow(
expect(() => screen.getAllByTitle('Resolve')).toThrow(
'Unable to find an element with the title: Resolve.',
);
// assert links, mailto and hrefs, date calculation
expect(getAllByTitle('View in Splunk On-Call').length).toEqual(1);
expect(screen.getAllByTitle('View in Splunk On-Call').length).toEqual(1);
});
it('Handle errors', async () => {
@@ -130,18 +122,16 @@ describe('Incidents', () => {
);
mockSplunkOnCallApi.getTeams.mockResolvedValue([]);
const { getByText, queryByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<Incidents readOnly={false} team="test" refreshIncidents={false} />
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<Incidents readOnly={false} team="test" refreshIncidents={false} />
</ApiProvider>,
);
await waitFor(() => !queryByTestId('progress'));
await waitFor(() => !screen.queryByTestId('progress'));
await waitFor(
() =>
expect(
getByText(
screen.getByText(
'Error encountered while fetching information. Error occurred',
),
).toBeInTheDocument(),
@@ -13,10 +13,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ApiProvider } from '@backstage/core-app-api';
import { alertApiRef } from '@backstage/core-plugin-api';
import { TestApiRegistry, wrapInTestApp } from '@backstage/test-utils';
import { render } from '@testing-library/react';
import { TestApiRegistry, renderInTestApp } from '@backstage/test-utils';
import { screen } from '@testing-library/react';
import React from 'react';
import { splunkOnCallApiRef } from '../../api';
import { TriggerDialog } from './TriggerDialog';
@@ -34,25 +35,27 @@ describe('TriggerDialog', () => {
);
it('open the dialog and trigger an alarm', async () => {
const { getByText, getByRole, getByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<TriggerDialog
routingKey="Example"
showDialog
handleDialog={() => {}}
onIncidentCreated={() => {}}
/>
</ApiProvider>,
),
await renderInTestApp(
<ApiProvider apis={apis}>
<TriggerDialog
routingKey="Example"
showDialog
handleDialog={() => {}}
onIncidentCreated={() => {}}
/>
</ApiProvider>,
);
expect(getByRole('dialog')).toBeInTheDocument();
expect(screen.getByRole('dialog')).toBeInTheDocument();
expect(
getByText('This action will trigger an incident', {
screen.getByText('This action will trigger an incident', {
exact: false,
}),
).toBeInTheDocument();
await expectTriggeredIncident('Example', getByTestId, mockTriggerAlarmFn);
await expectTriggeredIncident(
'Example',
screen.getByTestId,
mockTriggerAlarmFn,
);
});
});