Add more tests for Create Image Wizard

- sanity validation of each of the 4 steps
- click through buttons Next/Back/Cancel

Notes:

- add data-testid attribute for the release select field b/c
there's no better way to query it
- add @testing-library/jest-dom for additional asserts

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",

src/SmartComponents/CreateImageWizard/CreateImageWizard.js

@@ -32,7 +32,7 @@ const ReleaseComponent = (props) => {
         <Form isHorizontal>
             <FormGroup label="Release" fieldId="release-select">
                 <FormSelect value={ props.value } onChange={ value => 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 => <FormSelectOption key={ option.value } value={ option.value } label={ option.label }/>) }
                 </FormSelect>
             </FormGroup>

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(<CreateImageWizard />);
     });
+
     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(<CreateImageWizard />);
+
+        // 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(<CreateImageWizard />);
+
+        // 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(<CreateImageWizard />);
+
+        // 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(<CreateImageWizard />);
+
+        // 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);
+    });
 });