tests: Spy on history.push instead of trying to assert page change

When the SUT calls history.push that will cause a page redirect
inside the browser. However it doesn't cause the new page to be
rendered when running the test suite hence all assertions fail!

The reason for this is that Jest + RTL use jsdom under the hood,
which partially implements HTML/DOM APIs but **IS NOT** a browser!

It also turns out RTL is not well suited for end-to-end scenarios
which cover multiple pages.

This commit:

- patches renderWithReduxRouter() to also return the history object
  so we can set a spy on it later
- changes eslint confirugration to ignore unused variables starting
  with underscore
- updates the verifyCancelButton() function and scenarios which
  make use of it

src/test/SmartComponents/CreateImageWizard/CreateImageWizard.test.js

@@ -1,12 +1,14 @@
 import '@testing-library/jest-dom';
 
 import React from 'react';
-import { screen, getByText, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import { screen, getByText, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderWithReduxRouter } from '../../testUtils';
 import CreateImageWizard from '../../../SmartComponents/CreateImageWizard/CreateImageWizard';
 import api from '../../../api.js';
 
+let historySpy = undefined;
+
 function verifyButtons() {
     // these buttons exist everywhere
     const next = screen.getByRole('button', { name: /Next/ });
@@ -16,16 +18,13 @@ function verifyButtons() {
     return [ next, back, cancel ];
 }
 
-function verifyCancelButton(cancel) {
+function verifyCancelButton(cancel, history) {
     cancel.click();
 
     // this goes back to the landing page
-    return waitFor(
-        () => [
-            screen.getByTestId('create-image-action'),
-            screen.getByTestId('images-table'),
-        ]
-    );
+    // but jsdom will not render the new page so we can't assert on that
+    expect(history).toHaveBeenCalledTimes(1);
+    expect(history).toHaveBeenCalledWith('/landing');
 }
 
 // mock the insights dependency
@@ -47,6 +46,11 @@ beforeAll(() => {
     };
 });
 
+afterEach(() => {
+    jest.clearAllMocks();
+    historySpy = undefined;
+});
+
 // restore global mock
 afterAll(() => {
     global.insights = undefined;
@@ -73,7 +77,8 @@ describe('Create Image Wizard', () => {
 
 describe('Step Release', () => {
     beforeEach(() => {
-        renderWithReduxRouter(<CreateImageWizard />);
+        const { _component, history } = renderWithReduxRouter(<CreateImageWizard />);
+        historySpy = jest.spyOn(history, 'push');
 
         // left sidebar navigation
         const sidebar = screen.getByRole('navigation');
@@ -99,9 +104,9 @@ describe('Step Release', () => {
         expect(back).toHaveClass('pf-m-disabled');
     });
 
-    test('clicking Cancel loads landing page', async () => {
+    test('clicking Cancel loads landing page', () => {
         const [ , , cancel ] = verifyButtons();
-        await verifyCancelButton(cancel);
+        verifyCancelButton(cancel, historySpy);
     });
 
     test('allows chosing a release', () => {
@@ -114,7 +119,8 @@ describe('Step Release', () => {
 
 describe('Step Target environment', () => {
     beforeEach(() => {
-        renderWithReduxRouter(<CreateImageWizard />);
+        const { _component, history } = renderWithReduxRouter(<CreateImageWizard />);
+        historySpy = jest.spyOn(history, 'push');
 
         // left sidebar navigation
         const sidebar = screen.getByRole('navigation');
@@ -138,9 +144,9 @@ describe('Step Target environment', () => {
         screen.getByTestId('release-select');
     });
 
-    test('clicking Cancel loads landing page', async () => {
+    test('clicking Cancel loads landing page', () => {
         const [ , , cancel ] = verifyButtons();
-        await verifyCancelButton(cancel);
+        verifyCancelButton(cancel, historySpy);
     });
 
     test('choosing S3 shows region and bucket fields', () => {
@@ -205,7 +211,8 @@ describe('Step Target environment', () => {
 
 describe('Step Registration', () => {
     beforeEach(() => {
-        renderWithReduxRouter(<CreateImageWizard />);
+        const { _component, history } = renderWithReduxRouter(<CreateImageWizard />);
+        historySpy = jest.spyOn(history, 'push');
 
         // left sidebar navigation
         const sidebar = screen.getByRole('navigation');
@@ -230,9 +237,9 @@ describe('Step Registration', () => {
         screen.getByText('Secret access key');
     });
 
-    test('clicking Cancel loads landing page', async () => {
+    test('clicking Cancel loads landing page', () => {
         const [ , , cancel ] = verifyButtons();
-        await verifyCancelButton(cancel);
+        verifyCancelButton(cancel, historySpy);
     });
 
     test('should allow choosing activation keys', () => {
@@ -274,7 +281,8 @@ describe('Step Registration', () => {
 
 describe('Step Review', () => {
     beforeEach(() => {
-        renderWithReduxRouter(<CreateImageWizard />);
+        const { _component, history } = renderWithReduxRouter(<CreateImageWizard />);
+        historySpy = jest.spyOn(history, 'push');
 
         // left sidebar navigation
         const sidebar = screen.getByRole('navigation');
@@ -297,9 +305,9 @@ describe('Step Review', () => {
         screen.getByText('Register the system');
     });
 
-    test('clicking Cancel loads landing page', async () => {
+    test('clicking Cancel loads landing page', () => {
         const cancel = screen.getByRole('button', { name: /Cancel/ });
-        await verifyCancelButton(cancel);
+        verifyCancelButton(cancel, historySpy);
     });
 });
 

src/test/testUtils.js

@@ -18,6 +18,7 @@ export const renderWithReduxRouter = (component, mockedStore = defaultStore, rou
             <Provider store={ store }>
                 <Router history={ history }>{component}</Router>
             </Provider>
-        )
+        ),
+        history
     };
 };