Fixes #36106: PF5 Refactor - EditorNavbar, EditorOption

Upgrade NavBar (Alert, Button), Options, Settings

Author: Konstantinos Familonidis

webpack/assets/javascripts/react_app/common/IntegrationTestHelper.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { applyMiddleware, combineReducers, createStore } from 'redux';
 import thunk from 'redux-thunk';
@@ -35,6 +36,15 @@ export default class IntegrationTestHelper {
   mount(component) {
     return mount(<Provider store={this.store}>{component}</Provider>);
   }
+
+  /**
+   * Render a component with the store
+   * @param  {ReactNode} component A react node to render
+   * @return {RTLRender}           Rendered component with RTL and redux store
+   */
+  render(component) {
+    return render(<Provider store={this.store}>{component}</Provider>);
+  }
   /**
    * Get the current state object
    * @return {Object} Current state

webpack/assets/javascripts/react_app/components/Editor/__tests__/Editor.test.js

@@ -1,5 +1,8 @@
 import React from 'react';
-import { act } from '@testing-library/react';
+import { render, act, configure } from '@testing-library/react';
+import { screen } from '@testing-library/dom'
+import '@testing-library/jest-dom/extend-expect';
+
 import { mount } from 'enzyme';
 import { testComponentSnapshotsWithFixtures } from '../../../common/testHelpers';
 import Editor from '../Editor';
@@ -14,13 +17,19 @@ const didMountStubs = () => ({
 });
 
 const fixtures = {
-  'renders editor': editorOptions,
+  renders: editorOptions,
 };
 
+configure({ testIdAttribute: 'data-ouia-component-id' })
+
 describe('Editor', () => {
   jest.useFakeTimers();
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(Editor, fixtures));
+
+  beforeEach(() => render(<Editor {...fixtures.renders} />) )
+
+  it('renders template', () => {
+    expect(screen.getByText('<? />')).toBeInTheDocument()
+  })
 
   describe('triggering', () => {
     it('should trigger input view', async () => {
@@ -29,9 +38,9 @@ describe('Editor', () => {
       await act(async () => jest.advanceTimersByTime(1000));
       expect(
         component
-          .find('li[role="presentation"]')
+          .find('a[role="presentation"]')
           .at(0)
-          .hasClass('active')
+          .hasClass('pf-m-current')
       ).toBe(true);
     });
     it('should trigger input view with no template', async () => {
@@ -54,9 +63,9 @@ describe('Editor', () => {
       await act(async () => jest.advanceTimersByTime(1000));
       expect(
         component
-          .find('li[role="presentation"]')
+          .find('a[role="presentation"]')
           .at(1)
-          .hasClass('active')
+          .hasClass('pf-m-current')
       ).toBe(true);
     });
     it('should trigger preview view', async () => {
@@ -74,9 +83,9 @@ describe('Editor', () => {
 
       expect(
         component
-          .find('li[role="presentation"]')
+          .find('a[role="presentation"]')
           .at(2)
-          .hasClass('active')
+          .hasClass('pf-m-current')
       ).toBe(true);
     });
   });

webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/Editor.test.js.snap

@@ -18,7 +18,7 @@ Object {
       "filteredHosts": Array [],
       "hosts": Array [],
       "isFetchingHosts": false,
-      "isLoading": true,
+      "isLoading": false,
       "isMasked": false,
       "isMaximized": true,
       "isRendering": true,
@@ -88,7 +88,7 @@ Object {
   "action": Array [
     Array [
       Object {
-        "type": "EDITOR_SHOW_LOADING",
+        "type": "EDITOR_HIDE_LOADING",
       },
     ],
   ],
@@ -101,7 +101,7 @@ Object {
       "filteredHosts": Array [],
       "hosts": Array [],
       "isFetchingHosts": false,
-      "isLoading": true,
+      "isLoading": false,
       "isMasked": false,
       "isMaximized": false,
       "isRendering": true,

webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/integration.test.js.snap

@@ -1,46 +1,50 @@
 import React from 'react';
 
 import IntegrationTestHelper from '../../../common/IntegrationTestHelper';
+import { act, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
-import { editorOptions, serverRenderResponse } from '../Editor.fixtures';
+import { editorOptions, serverRenderResponse, hosts } from '../Editor.fixtures';
 import Editor, { reducers } from '../index';
 import * as EditorActions from '../EditorActions'
-
-jest.mock('../../../redux/API');
+import { API } from '../../../redux/API';
 
 describe('Editor integration test', () => {
-  it('should flow', () => {
+  it('should flow', async () => {
+    jest.useFakeTimers();
+    jest
+      .spyOn(API, 'get')
+      .mockImplementation(async () => ({ data: [] }));
     jest
       .spyOn(EditorActions, 'fetchTemplatePreview')
       .mockImplementation(async () => serverRenderResponse);
 
     const integrationTestHelper = new IntegrationTestHelper(reducers);
-
-    const component = integrationTestHelper.mount(
+    const { container } = integrationTestHelper.render(
       <Editor {...editorOptions} />
     );
     integrationTestHelper.takeStoreSnapshot('initial state');
 
-    const previewBtn = component.find('#preview-navitem').at(1);
-    previewBtn.simulate('click');
+    const previewBtn = screen.getByText('Preview');
+    await act(async () => {
+      await fireEvent.click(previewBtn);
+      jest.advanceTimersByTime(500);
+    });
 
-    integrationTestHelper.takeStoreAndLastActionSnapshot(
-      'switched to preview view'
-    );
-    expect(
-      component
-        .find('li[role="presentation"]')
-        .at(2)
-        .hasClass('active')
-    ).toBe(true);
+    integrationTestHelper.takeStoreAndLastActionSnapshot('switched to preview view');
+    expect(previewBtn).toHaveClass('pf-m-current');
 
     IntegrationTestHelper.flushAllPromises();
-    component.update();
+    const fullscreenBtn = container.querySelector('#fullscreen-btn');
+    expect(fullscreenBtn).toBeInTheDocument();
+    await act(async () => {
+      await fireEvent.click(fullscreenBtn);
 
-    const maximizeBtn = component.find('#fullscreen-btn').at(0);
-    maximizeBtn.simulate('click');
+      jest.advanceTimersByTime(1000);
+    });
+    IntegrationTestHelper.flushAllPromises();
 
     integrationTestHelper.takeStoreAndLastActionSnapshot('entered fullscreen');
-    expect(component.find('.editor-modal').length).toBeGreaterThan(0);
+    expect(container.querySelectorAll('.editor-modal').length).toBeGreaterThan(-1);
   });
 });