particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

test/ShareImageModal: only render the modal

Browse source 
Before, the LandingPage was not properly rendering because
EdgeImagesTable has a dependency to Scalprum. Scalprum is a service that
is provided by Insight that enables up to access shared components.
However scalprum wasn't getting initialized properly during the
execution of the unit tests making the entire LandingPage not rendering.

There are ways to mock scalprum but this commit takes another decision
to fix the issue. Instead of having a test environment rendering the
LandingPage and the Wizard to test the ShareImageModal, the rendering is
tailored to ShareImageModal needs, which only contains the rendering of
that said module + static routes to avoid 404 on final redirections.

This makes the scalprum errors go without hurting the coverage of the
tests.
This commit is contained in:
Thomas Lavocat 2023-08-07 14:59:24 +02:00 • committed by Thomas Lavocat
parent 9361ee8224
commit 8144aaa76d
2 changed files with 54 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/test/Components/ShareImageModal/ShareImageModal.test.js
View file

@ -1,10 +1,13 @@
import React from 'react';
import '@testing-library/jest-dom';
import { act, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import api from '../../../api.js';
import ShareImageModal from '../../../Components/ShareImageModal/ShareImageModal';
import { mockState } from '../../fixtures/composes';
import { renderWithReduxRouter } from '../../testUtils';
import { renderCustomRoutesWithReduxRouter } from '../../testUtils';
jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({
useChrome: () => ({
@ -16,10 +19,25 @@ jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({
const composeId = '1579d95b-8f1d-4982-8c53-8c2afa4ab04c';
const routes = [
{
path: 'insights/image-builder/*',
element: <div />,
},
{
path: 'insights/image-builder/imagewizard/:composeId?',
element: <div />,
},
{
path: 'insights/image-builder/share/:composeId',
element: <ShareImageModal />,
},
];
describe('Create Share To Regions Modal', () => {
const user = userEvent.setup();
test('validation', async () => {
renderWithReduxRouter(`share/${composeId}`, mockState);
renderCustomRoutesWithReduxRouter(`share/${composeId}`, mockState, routes);
const shareButton = screen.getByRole('button', { name: /share/i });
expect(shareButton).toBeDisabled();
@ -51,7 +69,11 @@ describe('Create Share To Regions Modal', () => {
});
test('cancel button redirects to landing page', async () => {
const { router } = renderWithReduxRouter(`share/${composeId}`, mockState);
const { router } = renderCustomRoutesWithReduxRouter(
`share/${composeId}`,
mockState,
routes
);
const cancelButton = screen.getByRole('button', { name: /cancel/i });
cancelButton.click();
@ -63,7 +85,11 @@ describe('Create Share To Regions Modal', () => {
});
test('close button redirects to landing page', async () => {
const { router } = renderWithReduxRouter(`share/${composeId}`, mockState);
const { router } = renderCustomRoutesWithReduxRouter(
`share/${composeId}`,
mockState,
routes
);
const closeButton = screen.getByRole('button', { name: /close/i });
closeButton.click();
@ -75,7 +101,7 @@ describe('Create Share To Regions Modal', () => {
});
test('select options disabled correctly based on status and region', async () => {
renderWithReduxRouter(`share/${composeId}`, mockState);
renderCustomRoutesWithReduxRouter(`share/${composeId}`, mockState, routes);
const selectToggle = screen.getByRole('button', { name: /options menu/i });
// eslint-disable-next-line testing-library/no-unnecessary-act
@ -111,9 +137,10 @@ describe('Create Share To Regions Modal', () => {
});
test('cloning an image results in successful store updates', async () => {
const { router, store } = renderWithReduxRouter(
const { router, store } = renderCustomRoutesWithReduxRouter(
`share/${composeId}`,
mockState
mockState,
routes
);
const selectToggle = screen.getByRole('button', { name: /options menu/i });