Fixes #36106: PF5 Refactor - EditorNavbar, EditorOption

Upgrade NavBar (Alert, Button), Options (RadioButton, View), Settings.
Remove enzyme in tests including DiffView, HostSelect, EditorView. Keep
actions, and selectors tests.

Author: Konstantinos Familonidis

webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/__tests__/DiffModal.test.js

@@ -15,7 +15,7 @@ const fixtures = {
     changeViewType: changeState,
   },
 };
-configure({ testIdAttribute: 'data-ouia-component-id'})
+configure({ testIdAttribute: 'data-ouia-component-id' });
 
 describe('DiffModal', () => {
   describe('rendering', () => {

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,26 @@
+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")
+      expect(screen.getByText('hello there friend')).toBeInTheDocument()
+    })
+
+    it('render DiffView w/Patch', () => {
+      render(<DiffView {...fixtures.patchMock} />)
+      const table = screen.getByRole('table')
+
+      expect(table).toHaveClass("diff-unified")
+      expect(screen.getByText('fooo')).toBeInTheDocument()
+    })
+  })
 });

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
-
 import { noop } from '../../common/helpers';
 import DiffView from '../DiffView/DiffView';
 import EditorView from './components/EditorView';
@@ -11,6 +10,7 @@ import {
   EDITOR_THEMES,
   EDITOR_KEYBINDINGS,
   EDITOR_MODES,
+  EDITOR_TAB_NAMES,
 } from './EditorConstants';
 import './editor.scss';
 
@@ -185,19 +185,19 @@ class Editor extends React.Component {
           {...editorViewProps}
           key="editorPreview"
           name={editorNameTab.preview}
-          isSelected={selectedView === 'preview'}
+          isSelected={selectedView === EDITOR_TAB_NAMES.preview}
           className="ace_editor_form ace_preview"
         />
         <EditorView
           {...editorViewProps}
           key="editorCode"
           name={editorNameTab.input}
-          isSelected={selectedView === 'input'}
+          isSelected={selectedView === EDITOR_TAB_NAMES.input}
           className="ace_editor_form ace_input"
         />
         <div
           id="diff-table"
-          className={selectedView === 'diff' ? '' : 'hidden'}
+          className={selectedView === EDITOR_TAB_NAMES.diff ? '' : 'hidden'}
         >
           <DiffView
             oldText={template || ''}

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

@@ -20,6 +20,7 @@ export const EDITOR_HOST_SELECT_CLEAR = 'EDITOR_HOST_SELECT_CLEAR';
 export const EDITOR_HOST_SELECT_RESET = 'EDITOR_HOST_SELECT_RESET';
 export const EDITOR_HOST_INITIAL_FETCH = 'EDITOR_HOST_INITIAL_FETCH';
 export const EDITOR_CHANGE_KIND = 'EDITOR_CHANGE_KIND';
+export const EDITOR_TAB_NAMES = { input: 'input', diff: 'diff', preview: 'preview' };
 
 export const EDITOR_HOSTS_URL = '/hosts/preview_host_collection.json';
 export const EDITOR_HOST_ARR = 'hosts';

webpack/assets/javascripts/react_app/components/Editor/EditorConstants.js

@@ -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,67 @@ 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') || '').match(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);
+      const inputTab = getTabById('input-navitem');
+
+      expect(inputTab).toBeInTheDocument();
+      expect(inputTab.parentElement).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);
+      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);
+      const diffTab = getTabById('diff-navitem');
+
+      expect(diffTab).toBeInTheDocument();
+      expect(diffTab.parentElement).toHaveClass('pf-m-current');
+      expect(diffTab).toHaveTextContent('Changes');
     });
     it('should trigger preview view', async () => {
       const props = {
@@ -66,18 +83,14 @@ 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));
+      const previewTab = getTabById('preview-navitem');
+
+      expect(previewTab).toBeInTheDocument();
+      expect(previewTab.parentElement).toHaveClass('pf-m-current');
     });
   });
   it('should trigger hidden value editor', async () => {
@@ -88,20 +101,29 @@ 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);
+    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);
+
+    expect(getTextAreasHidden().length).toBe(1);
+
+    const newProps = {
+      ...props,
+      readOnly: true,
+    };
+    rerender(<Editor {...newProps} />);
+
+    expect(getTextAreasHidden().length).toBe(0);
   });
 });