diff --git a/package.json b/package.json index 3ed068fc..95c68845 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "@babel/preset-react": "^7.8.3", "@redhat-cloud-services/frontend-components-config": "1.0.0", "@testing-library/react": "^11.0.4", + "@testing-library/jest-dom": "^5.10.1", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.0.3", "babel-jest": "^26.1.0", diff --git a/src/SmartComponents/CreateImageWizard/CreateImageWizard.js b/src/SmartComponents/CreateImageWizard/CreateImageWizard.js index dcccc5d2..1ddbaccd 100644 --- a/src/SmartComponents/CreateImageWizard/CreateImageWizard.js +++ b/src/SmartComponents/CreateImageWizard/CreateImageWizard.js @@ -32,7 +32,7 @@ const ReleaseComponent = (props) => {
props.setRelease(value) } - aria-label="Select release input" id="release-select"> + aria-label="Select release input" id="release-select" data-testid="release-select"> { options.map(option => ) } diff --git a/src/test/SmartComponents/CreateImageWizard/CreateImageWizard.test.js b/src/test/SmartComponents/CreateImageWizard/CreateImageWizard.test.js index d03743b2..41a14e11 100644 --- a/src/test/SmartComponents/CreateImageWizard/CreateImageWizard.test.js +++ b/src/test/SmartComponents/CreateImageWizard/CreateImageWizard.test.js @@ -1,26 +1,178 @@ +import '@testing-library/jest-dom'; + import React from 'react'; -import { screen, getByText } from '@testing-library/react'; +import { screen, getByText, waitFor } from '@testing-library/react'; import { renderWithReduxRouter } from '../../testUtils'; import CreateImageWizard from '../../../SmartComponents/CreateImageWizard/CreateImageWizard'; -describe('Landing Page', () => { +function verifyButtons() { + // these buttons exist everywhere + const next = screen.getByRole('button', { name: /Next/ }); + const back = screen.getByRole('button', { name: /Back/ }); + const cancel = screen.getByRole('button', { name: /Cancel/ }); + + return [ next, back, cancel ]; +} + +async function verifyCancelButton(cancel) { + cancel.click(); + + // this goes back to the landing page + await waitFor( + () => [ + screen.getByRole('heading', { name: /Image Builder/ }), + screen.getByText('Create a new image'), + ] + ); +} + +describe('Create Image Wizard', () => { beforeEach(() => { renderWithReduxRouter(); }); + test('renders component', () => { // check heading screen.getByRole('heading', { name: /Create a new image/ }); // left sidebar navigation - const nav = screen.getByRole('navigation'); - getByText(nav, 'Release'); - getByText(nav, 'Target environment'); - getByText(nav, 'Registration'); - getByText(nav, 'Review'); + const sidebar = screen.getByRole('navigation'); - // buttons - screen.getByRole('button', { name: /Next/ }); + getByText(sidebar, 'Release'); + getByText(sidebar, 'Target environment'); + getByText(sidebar, 'Registration'); + getByText(sidebar, 'Review'); + }); +}); + +describe('Step Release', () => { + beforeEach(() => { + renderWithReduxRouter(); + + // left sidebar navigation + const sidebar = screen.getByRole('navigation'); + const anchor = getByText(sidebar, 'Release'); + + // load from sidebar + anchor.click(); + }); + + test('clicking Next loads Target environment', () => { + const [ next, , ] = verifyButtons(); + next.click(); + + screen.getByText('Destination'); + screen.getByText('Secret access key'); + }); + + test('Back button is disabled', () => { + const [ , back, ] = verifyButtons(); + + // note: there is no `disabled` attribute and + // .toBeDissabled() fails + expect(back).toHaveClass('pf-m-disabled'); + }); + + test('clicking Cancel loads landing page', async () => { + const [ , , cancel ] = verifyButtons(); + verifyCancelButton(cancel); + }); +}); + +describe('Step Target environment', () => { + beforeEach(() => { + renderWithReduxRouter(); + + // left sidebar navigation + const sidebar = screen.getByRole('navigation'); + const anchor = getByText(sidebar, 'Target environment'); + + // load from sidebar + anchor.click(); + }); + + test('clicking Next loads Registration', () => { + const [ next, , ] = verifyButtons(); + next.click(); + + screen.getByText('Register the system'); + }); + + test('clicking Back loads Release', () => { + const [ , back, ] = verifyButtons(); + back.click(); + + screen.getByTestId('release-select'); + }); + + test('clicking Cancel loads landing page', async () => { + const [ , , cancel ] = verifyButtons(); + verifyCancelButton(cancel); + }); +}); + +describe('Step Registration', () => { + beforeEach(() => { + renderWithReduxRouter(); + + // left sidebar navigation + const sidebar = screen.getByRole('navigation'); + const anchor = getByText(sidebar, 'Registration'); + + // load from sidebar + anchor.click(); + }); + + test('clicking Next loads Review', () => { + const [ next, , ] = verifyButtons(); + next.click(); + + screen.getByText('Review the information and click Create image to create the image using the following criteria.'); + }); + + test('clicking Back loads Target environment', () => { + const [ , back, ] = verifyButtons(); + back.click(); + + screen.getByText('Destination'); + screen.getByText('Secret access key'); + }); + + test('clicking Cancel loads landing page', async () => { + const [ , , cancel ] = verifyButtons(); + verifyCancelButton(cancel); + }); +}); + +describe('Step Review', () => { + beforeEach(() => { + renderWithReduxRouter(); + + // left sidebar navigation + const sidebar = screen.getByRole('navigation'); + const anchor = getByText(sidebar, 'Review'); + + // load from sidebar + anchor.click(); + }); + + test('has 3 buttons', () => { + screen.getByRole('button', { name: /Create/ }); screen.getByRole('button', { name: /Back/ }); screen.getByRole('button', { name: /Cancel/ }); }); + + // todo: add test for the Create button + + test('clicking Back loads Register', () => { + const back = screen.getByRole('button', { name: /Back/ }); + back.click(); + + screen.getByText('Register the system'); + }); + + test('clicking Cancel loads landing page', async () => { + const cancel = screen.getByRole('button', { name: /Cancel/ }); + verifyCancelButton(cancel); + }); });