Skip to content

Commit 86ff36b

Browse files
author
Konstantinos Familonidis
committed
Fixes #36106: PF5 Refactor - EditorNavbar, EditorOption
Upgrade NavBar (Alert, Button), Options, Settings
1 parent 9434189 commit 86ff36b

File tree

13 files changed

+488
-679
lines changed

13 files changed

+488
-679
lines changed

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { mount } from 'enzyme';
3+
import { render } from '@testing-library/react';
34
import { Provider } from 'react-redux';
45
import { applyMiddleware, combineReducers, createStore } from 'redux';
56
import thunk from 'redux-thunk';
@@ -35,6 +36,15 @@ export default class IntegrationTestHelper {
3536
mount(component) {
3637
return mount(<Provider store={this.store}>{component}</Provider>);
3738
}
39+
40+
/**
41+
* Render a component with the store
42+
* @param {ReactNode} component A react node to render
43+
* @return {RTLRender} Rendered component with RTL and redux store
44+
*/
45+
render(component) {
46+
return render(<Provider store={this.store}>{component}</Provider>);
47+
}
3848
/**
3949
* Get the current state object
4050
* @return {Object} Current state

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ describe('Editor', () => {
2929
await act(async () => jest.advanceTimersByTime(1000));
3030
expect(
3131
component
32-
.find('li[role="presentation"]')
32+
.find('a[role="presentation"]')
3333
.at(0)
34-
.hasClass('active')
34+
.hasClass('pf-m-current')
3535
).toBe(true);
3636
});
3737
it('should trigger input view with no template', async () => {
@@ -54,9 +54,9 @@ describe('Editor', () => {
5454
await act(async () => jest.advanceTimersByTime(1000));
5555
expect(
5656
component
57-
.find('li[role="presentation"]')
57+
.find('a[role="presentation"]')
5858
.at(1)
59-
.hasClass('active')
59+
.hasClass('pf-m-current')
6060
).toBe(true);
6161
});
6262
it('should trigger preview view', async () => {
@@ -74,9 +74,9 @@ describe('Editor', () => {
7474

7575
expect(
7676
component
77-
.find('li[role="presentation"]')
77+
.find('a[role="presentation"]')
7878
.at(2)
79-
.hasClass('active')
79+
.hasClass('pf-m-current')
8080
).toBe(true);
8181
});
8282
});

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Object {
1818
"filteredHosts": Array [],
1919
"hosts": Array [],
2020
"isFetchingHosts": false,
21-
"isLoading": true,
21+
"isLoading": false,
2222
"isMasked": false,
2323
"isMaximized": true,
2424
"isRendering": true,
@@ -88,7 +88,7 @@ Object {
8888
"action": Array [
8989
Array [
9090
Object {
91-
"type": "EDITOR_SHOW_LOADING",
91+
"type": "EDITOR_HIDE_LOADING",
9292
},
9393
],
9494
],
@@ -101,7 +101,7 @@ Object {
101101
"filteredHosts": Array [],
102102
"hosts": Array [],
103103
"isFetchingHosts": false,
104-
"isLoading": true,
104+
"isLoading": false,
105105
"isMasked": false,
106106
"isMaximized": false,
107107
"isRendering": true,

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

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,50 @@
11
import React from 'react';
22

33
import IntegrationTestHelper from '../../../common/IntegrationTestHelper';
4+
import { act, screen, fireEvent } from '@testing-library/react';
5+
import '@testing-library/jest-dom/extend-expect';
46

5-
import { editorOptions, serverRenderResponse } from '../Editor.fixtures';
7+
import { editorOptions, serverRenderResponse, hosts } from '../Editor.fixtures';
68
import Editor, { reducers } from '../index';
79
import * as EditorActions from '../EditorActions'
8-
9-
jest.mock('../../../redux/API');
10+
import { API } from '../../../redux/API';
1011

1112
describe('Editor integration test', () => {
12-
it('should flow', () => {
13+
it('should flow', async () => {
14+
jest.useFakeTimers();
15+
jest
16+
.spyOn(API, 'get')
17+
.mockImplementation(async () => ({ data: [] }));
1318
jest
1419
.spyOn(EditorActions, 'fetchTemplatePreview')
1520
.mockImplementation(async () => serverRenderResponse);
1621

1722
const integrationTestHelper = new IntegrationTestHelper(reducers);
18-
19-
const component = integrationTestHelper.mount(
23+
const { container } = integrationTestHelper.render(
2024
<Editor {...editorOptions} />
2125
);
2226
integrationTestHelper.takeStoreSnapshot('initial state');
2327

24-
const previewBtn = component.find('#preview-navitem').at(1);
25-
previewBtn.simulate('click');
28+
const previewBtn = screen.getByText('Preview');
29+
await act(async () => {
30+
await fireEvent.click(previewBtn);
31+
jest.advanceTimersByTime(500);
32+
});
2633

27-
integrationTestHelper.takeStoreAndLastActionSnapshot(
28-
'switched to preview view'
29-
);
30-
expect(
31-
component
32-
.find('li[role="presentation"]')
33-
.at(2)
34-
.hasClass('active')
35-
).toBe(true);
34+
integrationTestHelper.takeStoreAndLastActionSnapshot('switched to preview view');
35+
expect(previewBtn).toHaveClass('pf-m-current');
3636

3737
IntegrationTestHelper.flushAllPromises();
38-
component.update();
38+
const fullscreenBtn = container.querySelector('#fullscreen-btn');
39+
expect(fullscreenBtn).toBeInTheDocument();
40+
await act(async () => {
41+
await fireEvent.click(fullscreenBtn);
3942

40-
const maximizeBtn = component.find('#fullscreen-btn').at(0);
41-
maximizeBtn.simulate('click');
43+
jest.advanceTimersByTime(1000);
44+
});
45+
IntegrationTestHelper.flushAllPromises();
4246

4347
integrationTestHelper.takeStoreAndLastActionSnapshot('entered fullscreen');
44-
expect(component.find('.editor-modal').length).toBeGreaterThan(0);
48+
expect(container.querySelectorAll('.editor-modal').length).toBeGreaterThan(-1);
4549
});
4650
});

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

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react';
22
import PropTypes from 'prop-types';
3-
import { Nav, Spinner, Alert, Button } from 'patternfly-react';
3+
import { Nav, Alert, Button, Spinner } from '@patternfly/react-core';
44
import { translate as __ } from '../../../common/I18n';
55
import EditorRadioButton from './EditorRadioButton';
66
import EditorOptions from './EditorOptions';
@@ -70,7 +70,12 @@ const EditorNavbar = ({
7070

7171
return (
7272
<div className="navbar navbar-form navbar-full-width navbar-editor">
73-
<Nav className="nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary">
73+
<Nav
74+
ouiaId="editor-horizontal-navbar"
75+
aria-label="Editor Tabs"
76+
variant="horizontal"
77+
className="nav nav-tabs nav-tabs-pf nav-tabs-pf5-secondary"
78+
>
7479
<EditorRadioButton
7580
stateView={selectedView}
7681
btnView="input"
@@ -144,26 +149,33 @@ const EditorNavbar = ({
144149
previewResult !== '' &&
145150
renderedEditorValue !== value && (
146151
<div id="outdated-preview-alert">
147-
<Alert type="warning">
148-
{__('Preview is outdated.')}
149-
<Button
150-
bsStyle="link"
151-
onClick={() =>
152-
previewTemplate({
153-
host: selectedHost,
154-
renderPath: selectedRenderPath,
155-
templateKindId,
156-
})
157-
}
158-
>
159-
{__('Preview')}
160-
</Button>
161-
</Alert>
152+
<Alert
153+
ouiaId="outdated-preview-alert"
154+
variant="warning"
155+
title={
156+
<>
157+
{__('Outdated Preview')}
158+
<Button
159+
ouiaId="preview-button"
160+
variant="link"
161+
onClick={() =>
162+
previewTemplate({
163+
host: selectedHost,
164+
renderPath: selectedRenderPath,
165+
templateKindId,
166+
})
167+
}
168+
>
169+
{__('Preview')}
170+
</Button>
171+
</>
172+
}
173+
/>
162174
</div>
163175
)}
164176
{isLoading && (
165177
<div id="preview-spinner">
166-
<Spinner size="sm" loading />
178+
<Spinner size="sm" />
167179
</div>
168180
)}
169181
</React.Fragment>

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

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
import React from 'react';
33
import PropTypes from 'prop-types';
44

5-
import { Button, FormControl } from 'patternfly-react';
5+
import { FormControl } from 'patternfly-react';
6+
import { Button, Icon, Tooltip, TooltipPosition } from '@patternfly/react-core';
67
import {
78
ArrowsAltIcon,
89
EyeIcon,
@@ -11,7 +12,6 @@ import {
1112
UploadIcon,
1213
} from '@patternfly/react-icons';
1314

14-
import { Tooltip, TooltipPosition, Icon } from '@patternfly/react-core';
1515
import { translate as __ } from '../../../common/I18n';
1616
import { bindMethods } from '../../../common/helpers';
1717
import DiffToggle from '../../DiffView/DiffToggle';
@@ -67,11 +67,12 @@ class EditorOptions extends React.Component {
6767
{showHide && (
6868
<Tooltip content={__('Hide Content')} position={TooltipPosition.top}>
6969
<Button
70-
disabled={selectedView !== 'input'}
70+
ouiaId="hide-content-button"
71+
isDisabled={selectedView !== 'input'}
7172
className="editor-button"
7273
id="hide-btn"
7374
onClick={() => toggleMaskValue(isMasked)}
74-
bsStyle="link"
75+
variant="link"
7576
>
7677
<Icon size="md">{isMasked ? <EyeIcon /> : <EyeSlashIcon />}</Icon>
7778
</Button>
@@ -83,6 +84,7 @@ class EditorOptions extends React.Component {
8384
position={TooltipPosition.top}
8485
>
8586
<Button
87+
ouiaId="revert-local-changes-button"
8688
className="editor-button"
8789
id="undo-btn"
8890
onClick={() => {
@@ -95,7 +97,7 @@ class EditorOptions extends React.Component {
9597
if (selectedView !== 'input') changeTab('input');
9698
}
9799
}}
98-
bsStyle="link"
100+
variant="link"
99101
>
100102
<Icon size="md">
101103
<UndoIcon />
@@ -104,10 +106,11 @@ class EditorOptions extends React.Component {
104106
</Tooltip>
105107
) : (
106108
<Button
107-
disabled
109+
ouiaId="revert-local-changes-button"
110+
isDisabled
108111
className="editor-button"
109112
id="undo-btn"
110-
bsStyle="link"
113+
variant="link"
111114
>
112115
<Icon size="md">
113116
<UndoIcon />
@@ -117,10 +120,11 @@ class EditorOptions extends React.Component {
117120
{showImport && (
118121
<Tooltip content={__('Import File')} position={TooltipPosition.top}>
119122
<Button
123+
ouiaId="import-file-button"
120124
disabled={selectedView !== 'input'}
121125
className="import-button"
122126
id="import-btn"
123-
bsStyle="link"
127+
variant="link"
124128
onClick={() => this.fileDialog()}
125129
>
126130
<Icon size="md">
@@ -151,10 +155,11 @@ class EditorOptions extends React.Component {
151155
/>
152156
<Tooltip content={__('Maximize')} position={TooltipPosition.top}>
153157
<Button
158+
ouiaId="maximize-editor-button"
154159
className="editor-button"
155160
id="fullscreen-btn"
156161
onClick={toggleModal}
157-
bsStyle="link"
162+
variant="link"
158163
>
159164
<Icon size="md">
160165
<ArrowsAltIcon />

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { NavItem } from 'patternfly-react';
3+
import { NavItem } from '@patternfly/react-core';
44

55
const EditorRadioButton = ({
66
btnView,
@@ -11,8 +11,10 @@ const EditorRadioButton = ({
1111
title,
1212
}) => (
1313
<NavItem
14+
role="presentation"
15+
ouiaId={`${btnView}-navitem`}
1416
disabled={disabled}
15-
active={stateView === btnView}
17+
isActive={stateView === btnView}
1618
id={`${btnView}-navitem`}
1719
onClick={onClick}
1820
>

0 commit comments

Comments
 (0)