Fixes #36106: PF5 Refactor - EditorNavbar, EditorOption

Upgrade NavBar (Alert, Button), Options (RadioButton, View), Settings.
Remove enzyme in tests including DiffView. Keep store integration tests.

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/DiffView/Diff.fixtures.js

@@ -30,8 +30,8 @@ export const patchMock = {
 };
 
 export const fixtures = {
-    'render DiffView w/oldText & newText': diffMock,
-    'render DiffView w/Patch': patchMock,
+    diffMock,
+    patchMock,
   };
 
 export const PF_SELECTED = 'pf-m-selected';

webpack/assets/javascripts/react_app/components/DiffView/DiffView.test.js

@@ -1,9 +1,24 @@
+import React from 'react';
 import { fixtures } from './Diff.fixtures';
-import { testComponentSnapshotsWithFixtures } from '../../common/testHelpers';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
 import DiffView from './DiffView';
 
 describe('DiffView', () => {
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(DiffView, fixtures));
+  describe('rendering', () => {
+    it('render DiffView w/oldText & newText', () => {
+      render(<DiffView {...fixtures.diffMock} />)
+      const table = screen.getByRole('table')
+
+      expect(table).toHaveClass("diff-split")
+    })
+
+    it('render DiffView w/Patch', () => {
+      render(<DiffView {...fixtures.patchMock} />)
+      const table = screen.getByRole('table')
+
+      expect(table).toHaveClass("diff-unified")
+    })
+  })
 });

webpack/assets/javascripts/react_app/components/DiffView/__snapshots__/DiffView.test.js.snap

@@ -1,7 +1,7 @@
 import React from 'react';
-import { act } from '@testing-library/react';
-import { mount } from 'enzyme';
-import { testComponentSnapshotsWithFixtures } from '../../../common/testHelpers';
+import { render, screen, act, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
 import Editor from '../Editor';
 import { editorOptions } from '../Editor.fixtures';
 
@@ -14,50 +14,73 @@ const didMountStubs = () => ({
 });
 
 const fixtures = {
-  'renders editor': editorOptions,
+  renders: editorOptions,
 };
 
+const renderEditor = (props = fixtures.renders) =>  render(<Editor {...props} />);
+
 describe('Editor', () => {
   jest.useFakeTimers();
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(Editor, fixtures));
+
+  describe('rendering', () => {
+    const getAceEditors = () => screen.getAllByRole('textbox', { name: 'Cursor at row 1' })
+
+    it('renders', () => {
+      renderEditor();
+
+      expect(screen.getByText('<? />')).toBeInTheDocument();
+      expect(getAceEditors().length).toBe(2);
+    });
+    it('re-renders', () => {
+      const { rerender } = renderEditor();
+      const props = { ...editorOptions, ...didMountStubs() };
+      rerender(<Editor {...props} />);
+
+      expect(getAceEditors().length).toBe(2);
+    });
+  });
 
   describe('triggering', () => {
+    const getTabById = id =>
+      screen.getAllByRole('presentation', { current: "page" })
+            .find(tab => tab.getAttribute('id') === id)
+
     it('should trigger input view', async () => {
       const props = { ...editorOptions, ...didMountStubs() };
-      const component = mount(<Editor {...props} />);
-      await act(async () => jest.advanceTimersByTime(1000));
-      expect(
-        component
-          .find('li[role="presentation"]')
-          .at(0)
-          .hasClass('active')
-      ).toBe(true);
+      renderEditor(props);
+      await act(async () => jest.advanceTimersByTime(1));
+      const inputTab = getTabById('input-navitem');
+
+      expect(inputTab).toBeInTheDocument();
+      expect(inputTab).toHaveClass('pf-m-current');
+      expect(inputTab).toHaveTextContent('Editor');
     });
     it('should trigger input view with no template', async () => {
       const props = {
         ...editorOptions,
         ...didMountStubs(),
         data: { ...editorOptions.data, template: null },
       };
-      const component = mount(<Editor {...props} />);
-      await act(async () => jest.advanceTimersByTime(1000));
-      expect(component.props().template).toBe('<? />');
+      renderEditor(props);
+      await act(async () => jest.advanceTimersByTime(1));
+      const aceEditors = document.querySelectorAll('.ace_editor_form');
+      const hasTemplateText = Array.from(aceEditors).some(container => container.textContent.includes('<? />'));
+
+      expect(hasTemplateText).toBe(false);
     });
     it('should trigger diff view', async () => {
       const props = {
         ...editorOptions,
         ...didMountStubs(),
         selectedView: 'diff',
       };
-      const component = mount(<Editor {...props} />);
-      await act(async () => jest.advanceTimersByTime(1000));
-      expect(
-        component
-          .find('li[role="presentation"]')
-          .at(1)
-          .hasClass('active')
-      ).toBe(true);
+      renderEditor(props);
+      await act(async () => jest.advanceTimersByTime(1));
+      const diffTab = getTabById('diff-navitem');
+
+      expect(diffTab).toBeInTheDocument();
+      expect(diffTab).toHaveClass('pf-m-current');
+      expect(diffTab).toHaveTextContent('Changes');
     });
     it('should trigger preview view', async () => {
       const props = {
@@ -66,18 +89,20 @@ describe('Editor', () => {
         selectedView: 'preview',
         isRendering: true,
       };
-      const wrapper = mount(<Editor {...props} />);
-      wrapper.find('button.close').simulate('click');
-      await act(async () => jest.advanceTimersByTime(1000));
-      const component = mount(<Editor {...props} />);
-      await act(async () => jest.advanceTimersByTime(1000));
-
-      expect(
-        component
-          .find('li[role="presentation"]')
-          .at(2)
-          .hasClass('active')
-      ).toBe(true);
+      renderEditor(props);
+      const closeButton = screen.queryByLabelText(/close danger alert/i);
+
+      if (closeButton)
+        await act(async () => {
+          await fireEvent.click(closeButton);
+
+          jest.advanceTimersByTime(500);
+        });
+      await act(async () => jest.advanceTimersByTime(1));
+      const previewTab = getTabById('preview-navitem');
+
+      expect(previewTab).toBeInTheDocument();
+      expect(previewTab).toHaveClass('pf-m-current');
     });
   });
   it('should trigger hidden value editor', async () => {
@@ -88,20 +113,32 @@ describe('Editor', () => {
       isRendering: true,
       isMasked: true,
     };
-    const wrapper = mount(<Editor {...props} />);
-    await act(async () => jest.advanceTimersByTime(1000));
-    expect(wrapper.find('.mask-editor').exists()).toBe(true);
+    renderEditor(props);
+    await act(async () => jest.advanceTimersByTime(1));
+    const maskedEditor = document.querySelector('.mask-editor');
+
+    expect(maskedEditor).toBeInTheDocument();
   });
   it('textarea disappears if readOnly', async () => {
+    const getTextAreasHidden = () => document.querySelectorAll('textarea.hidden')
     const props = {
       ...editorOptions,
       ...didMountStubs(),
       selectedView: 'input',
+      readOnly: false,
     };
-    const wrapper = mount(<Editor {...props} />);
-    await act(async () => jest.advanceTimersByTime(1000));
-    expect(wrapper.find('textarea.hidden').exists()).toBe(true);
-    wrapper.setProps({ readOnly: true });
-    expect(wrapper.find('textarea.hidden').exists()).toBe(false);
+    const { rerender } = renderEditor(props);
+    await act(async () => jest.advanceTimersByTime(1));
+
+    expect(getTextAreasHidden().length).toBe(1);
+
+    const newProps = {
+      ...props,
+      readOnly: true,
+    };
+    rerender(<Editor {...newProps} />);
+    await act(async () => jest.advanceTimersByTime(1));
+
+    expect(getTextAreasHidden().length).toBe(0);
   });
 });