-
-
-
+
{isClearable && parsedValue &&
}
-
- {isFetching ? : }
-
+
{isOpen && (
;
}
- return
{value || placeholder};
+ return
{value || placeholder};
};
ValueContainer.propTypes = {
diff --git a/packages/pf4-component-mapper/src/sub-form/sub-form.js b/packages/pf4-component-mapper/src/sub-form/sub-form.js
index 717ff2138..4745c40a3 100644
--- a/packages/pf4-component-mapper/src/sub-form/sub-form.js
+++ b/packages/pf4-component-mapper/src/sub-form/sub-form.js
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { useFormApi } from '@data-driven-forms/react-form-renderer';
-import { Title, Grid, GridItem, TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { Title, Grid, GridItem, Content, ContentVariants } from '@patternfly/react-core';
const SubForm = ({ fields, title, description, validate: _validate, component, ...rest }) => {
const formOptions = useFormApi();
@@ -18,11 +18,11 @@ const SubForm = ({ fields, title, description, validate: _validate, component, .
)}
{description && (
-
-
+
+
{description}
-
-
+
+
)}
{formOptions.renderForm(fields, formOptions)}
diff --git a/packages/pf4-component-mapper/src/switch/switch.js b/packages/pf4-component-mapper/src/switch/switch.js
index 6d0a6ffe0..bd76aace6 100644
--- a/packages/pf4-component-mapper/src/switch/switch.js
+++ b/packages/pf4-component-mapper/src/switch/switch.js
@@ -6,25 +6,11 @@ import FormGroup from '../form-group/form-group';
import IsRequired from '../is-required/is-required';
const Switch = (props) => {
- const {
- label,
- offText,
- onText,
- isRequired,
- helperText,
- meta,
- validateOnMount,
- description,
- input,
- isReadOnly,
- isDisabled,
- id,
- FormGroupProps,
- ...rest
- } = useFieldApi({
- ...props,
- type: 'checkbox',
- });
+ const { label, onText, isRequired, helperText, meta, validateOnMount, description, input, isReadOnly, isDisabled, id, FormGroupProps, ...rest } =
+ useFieldApi({
+ ...props,
+ type: 'checkbox',
+ });
return (
{
id={id || input.name}
isDisabled={isDisabled || isReadOnly}
label={isRequired ? {onText || label} : onText || label}
- labelOff={isRequired ? {offText || label} : offText || label}
/>
);
@@ -58,7 +43,6 @@ Switch.propTypes = {
isDisabled: PropTypes.bool,
id: PropTypes.string,
onText: PropTypes.node,
- offText: PropTypes.node,
FormGroupProps: PropTypes.object,
};
diff --git a/packages/pf4-component-mapper/src/tests/dual-list-select.test.js b/packages/pf4-component-mapper/src/tests/dual-list-select.test.js
index e293942d5..8f766430e 100644
--- a/packages/pf4-component-mapper/src/tests/dual-list-select.test.js
+++ b/packages/pf4-component-mapper/src/tests/dual-list-select.test.js
@@ -257,7 +257,7 @@ describe('DualListSelect', () => {
};
const { container } = render(
);
- expect([...container.getElementsByClassName('pf-v5-c-dual-list-selector__item-text')].map((e) => e.textContent)).toEqual([
+ expect([...container.getElementsByClassName('pf-v6-c-dual-list-selector__item-text')].map((e) => e.textContent)).toEqual([
'cats',
'cats_1',
'cats_2',
@@ -267,7 +267,7 @@ describe('DualListSelect', () => {
await userEvent.click(screen.getByLabelText('sort-options'));
- expect([...container.getElementsByClassName('pf-v5-c-dual-list-selector__item-text')].map((e) => e.textContent)).toEqual([
+ expect([...container.getElementsByClassName('pf-v6-c-dual-list-selector__item-text')].map((e) => e.textContent)).toEqual([
'zebras',
'pigeons',
'cats_2',
@@ -277,7 +277,7 @@ describe('DualListSelect', () => {
await userEvent.click(screen.getByLabelText('sort-options'));
- expect([...container.getElementsByClassName('pf-v5-c-dual-list-selector__item-text')].map((e) => e.textContent)).toEqual([
+ expect([...container.getElementsByClassName('pf-v6-c-dual-list-selector__item-text')].map((e) => e.textContent)).toEqual([
'cats',
'cats_1',
'cats_2',
@@ -310,7 +310,7 @@ describe('DualListSelect', () => {
/>
);
- expect([...container.getElementsByClassName('pf-v5-c-dual-list-selector__item-text')].map((e) => e.textContent)).toEqual([
+ expect([...container.getElementsByClassName('pf-v6-c-dual-list-selector__item-text')].map((e) => e.textContent)).toEqual([
'cats',
'cats_1',
'cats_2',
@@ -320,7 +320,7 @@ describe('DualListSelect', () => {
await userEvent.click(screen.getByLabelText('sort-values'));
- expect([...container.getElementsByClassName('pf-v5-c-dual-list-selector__item-text')].map((e) => e.textContent)).toEqual([
+ expect([...container.getElementsByClassName('pf-v6-c-dual-list-selector__item-text')].map((e) => e.textContent)).toEqual([
'zebras',
'pigeons',
'cats_2',
@@ -330,7 +330,7 @@ describe('DualListSelect', () => {
await userEvent.click(screen.getByLabelText('sort-values'));
- expect([...container.getElementsByClassName('pf-v5-c-dual-list-selector__item-text')].map((e) => e.textContent)).toEqual([
+ expect([...container.getElementsByClassName('pf-v6-c-dual-list-selector__item-text')].map((e) => e.textContent)).toEqual([
'cats',
'cats_1',
'cats_2',
diff --git a/packages/pf4-component-mapper/src/tests/form-fields.test.js b/packages/pf4-component-mapper/src/tests/form-fields.test.js
index a8414b348..605cf5ab0 100644
--- a/packages/pf4-component-mapper/src/tests/form-fields.test.js
+++ b/packages/pf4-component-mapper/src/tests/form-fields.test.js
@@ -18,15 +18,14 @@ describe('FormFields', () => {
id: 'someIdKey',
};
- it('should render with onText/OffText Switch correctly', () => {
+ it('should render with onText Switch correctly', () => {
render(
-
+
);
- expect(screen.getByText('I am on')).toHaveClass('pf-m-on');
- expect(screen.getByText('Turned off')).not.toHaveClass('pf-m-on');
+ expect(screen.getByRole('switch')).toHaveAccessibleName('I am on');
});
describe('formFields generated tests', () => {
diff --git a/packages/pf4-component-mapper/src/tests/form-template.test.js b/packages/pf4-component-mapper/src/tests/form-template.test.js
index 45e519b25..98bd97818 100644
--- a/packages/pf4-component-mapper/src/tests/form-template.test.js
+++ b/packages/pf4-component-mapper/src/tests/form-template.test.js
@@ -7,7 +7,7 @@ describe('Layout mapper', () => {
it('should return PF4 Button', () => {
render(
);
- expect(screen.getByText('some label', { selector: 'button' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'some label' })).toBeInTheDocument();
});
it('should return PF4 ButtonGroup', () => {
@@ -17,13 +17,13 @@ describe('Layout mapper', () => {
);
- expect(screen.getByText('some label', { selector: 'button' }).closest('.pf-v5-c-form__actions')).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'some label' }).closest('.pf-v6-c-form__actions')).toBeInTheDocument();
});
it('should return PF4 Title', () => {
render(
Title);
- expect(screen.getByText('Title', { selector: 'h1' })).toBeInTheDocument();
+ expect(screen.getByRole('heading', { name: 'Title', level: 1 })).toBeInTheDocument();
});
it('should return PF4 Description', () => {
@@ -35,6 +35,6 @@ describe('Layout mapper', () => {
it('should return PF4 Button disabled', () => {
render(
);
- expect(screen.getByText('some label', { selector: 'button' })).toBeDisabled();
+ expect(screen.getByRole('button', { name: 'some label' })).toBeDisabled();
});
});
diff --git a/packages/pf4-component-mapper/src/tests/select/select.test.js b/packages/pf4-component-mapper/src/tests/select/select.test.js
index bfb67a349..fcaa9f731 100644
--- a/packages/pf4-component-mapper/src/tests/select/select.test.js
+++ b/packages/pf4-component-mapper/src/tests/select/select.test.js
@@ -57,7 +57,7 @@ describe('
', () => {
await userEvent.click(screen.getByLabelText('open menu'));
await userEvent.click(screen.getByText('Translated'));
- expect(screen.getByText('Translated', { selector: 'h1' }).closest('.pf-v5-c-select__toggle-text')).toBeInTheDocument();
+ expect(screen.getByText('Translated', { selector: 'h1' }).closest('.pf-v6-c-menu-toggle-text')).toBeInTheDocument();
});
it('should render description', async () => {
@@ -134,10 +134,10 @@ describe('
', () => {
await userEvent.click(screen.getByLabelText('open menu'));
- expect(screen.getByText('Category 1')).toHaveClass('pf-v5-c-select__menu-group-title');
- expect(screen.getByText('Category 2')).toHaveClass('pf-v5-c-select__menu-group-title');
- expect(container.getElementsByClassName('pf-v5-c-divider')).toHaveLength(3);
- expect([...container.getElementsByClassName('pf-v5-c-select__menu-item')].map((opt) => opt.textContent)).toEqual([
+ expect(screen.getByText('Category 1')).toHaveClass('pf-v6-c-menu__group-title');
+ expect(screen.getByText('Category 2')).toHaveClass('pf-v6-c-menu__group-title');
+ expect(container.getElementsByClassName('pf-v6-c-divider')).toHaveLength(3);
+ expect([...container.getElementsByClassName('pf-v6-c-menu__item-main')].map((opt) => opt.textContent)).toEqual([
'value 1',
'value 2',
'independent 1',
@@ -150,7 +150,7 @@ describe('
', () => {
await userEvent.click(screen.getByLabelText('open menu'));
- expect(screen.getByText('value 1', { selector: 'button.pf-v5-c-select__menu-item' })).toHaveClass('pf-m-selected');
+ expect(screen.getByRole('option', { name: 'value 1' })).toHaveClass('pf-m-selected');
await userEvent.click(screen.getByText('Submit'));
@@ -200,11 +200,11 @@ describe('
', () => {
await userEvent.click(screen.getByLabelText('open menu'));
await userEvent.type(screen.getByPlaceholderText('Choose...'), 'value');
- expect(screen.getByText('Category 1')).toHaveClass('pf-v5-c-select__menu-group-title');
- expect(screen.getByText('Category 2')).toHaveClass('pf-v5-c-select__menu-group-title');
- expect(container.getElementsByClassName('pf-v5-c-divider')).toHaveLength(0);
+ expect(screen.getByText('Category 1')).toHaveClass('pf-v6-c-menu__group-title');
+ expect(screen.getByText('Category 2')).toHaveClass('pf-v6-c-menu__group-title');
+ expect(container.getElementsByClassName('pf-v6-c-divider')).toHaveLength(0);
- expect([...container.getElementsByClassName('pf-v5-c-select__menu-item')].map((opt) => opt.textContent)).toEqual([
+ expect([...container.getElementsByClassName('pf-v6-c-menu__item')].map((opt) => opt.textContent)).toEqual([
'value 1',
'value 2',
'value 3',
@@ -213,13 +213,10 @@ describe('
', () => {
await userEvent.clear(screen.getByPlaceholderText('Choose...'));
await userEvent.type(screen.getByPlaceholderText('Choose...'), 'independent');
- expect(container.getElementsByClassName('pf-v5-c-divider')).toHaveLength(0);
- expect(container.getElementsByClassName('pf-v5-c-select__menu-group-title')).toHaveLength(0);
+ expect(container.getElementsByClassName('pf-v6-c-divider')).toHaveLength(0);
+ expect(container.getElementsByClassName('pf-v6-c-menu__group-title')).toHaveLength(0);
- expect([...container.getElementsByClassName('pf-v5-c-select__menu-item')].map((opt) => opt.textContent)).toEqual([
- 'independent 1',
- 'independent 2',
- ]);
+ expect([...container.getElementsByClassName('pf-v6-c-menu__item')].map((opt) => opt.textContent)).toEqual(['independent 1', 'independent 2']);
});
it('should return single simple value', async () => {
@@ -247,7 +244,7 @@ describe('
', () => {
render(
);
await userEvent.click(screen.getByLabelText('open menu'));
- await userEvent.click(screen.getByText('First option', { selector: '.pf-v5-c-select__menu-item' }));
+ await userEvent.click(screen.getByText('First option', { selector: '.pf-v6-c-menu__item-main' }));
await userEvent.click(screen.getByText('Second option'));
expect(onChange).toHaveBeenCalledTimes(2);
@@ -261,7 +258,7 @@ describe('
', () => {
render(
);
await userEvent.click(screen.getByLabelText('open menu'));
- await userEvent.click(screen.getByText('First option', { selector: '.pf-v5-c-select__menu-item' }));
+ await userEvent.click(screen.getByText('First option', { selector: '.pf-v6-c-menu__item-main' }));
await userEvent.click(screen.getByText('Second option'));
expect(onChange).toHaveBeenCalledTimes(2);
@@ -283,12 +280,12 @@ describe('
', () => {
];
const { container } = render(
);
- expect(container.querySelectorAll('.pf-v5-c-chip-group')).toHaveLength(1);
- expect(container.querySelectorAll('div.pf-v5-c-chip')).toHaveLength(3);
+ expect(container.querySelectorAll('.pf-v6-c-label-group')).toHaveLength(1);
+ expect(container.querySelectorAll('div.pf-v6-c-label')).toHaveLength(3);
await userEvent.click(screen.getByText('1 more'));
- expect(container.querySelectorAll('div.pf-v5-c-chip')).toHaveLength(4);
+ expect(container.querySelectorAll('div.pf-v6-c-label')).toHaveLength(4);
});
it('should call on change when removing chip', async () => {
@@ -348,7 +345,7 @@ describe('
', () => {
);
await userEvent.click(screen.getByLabelText('open menu'));
- await waitFor(() => expect(screen.getByText('label', { selector: '.pf-v5-c-select__menu-item' })).toBeInTheDocument());
+ await waitFor(() => expect(screen.getByText('label', { selector: '.pf-v6-c-menu__item-main' })).toBeInTheDocument());
expect(onChange).toHaveBeenCalledWith(['123']);
});
@@ -370,7 +367,7 @@ describe('
', () => {
);
await userEvent.click(screen.getByLabelText('open menu'));
- await waitFor(() => expect(screen.getByText('label', { selector: '.pf-v5-c-select__menu-item' })).toBeInTheDocument());
+ await waitFor(() => expect(screen.getByText('label', { selector: '.pf-v6-c-menu__item-main' })).toBeInTheDocument());
expect(onChange).toHaveBeenCalledWith([{ label: 'label', value: '123' }]);
});
@@ -410,15 +407,13 @@ describe('
', () => {
await userEvent.click(screen.getByLabelText('open menu'));
- expect([...container.getElementsByClassName('pf-v5-c-select__menu-item')].map((opt) => opt.textContent)).toEqual(
+ expect([...container.getElementsByClassName('pf-v6-c-menu__item')].map((opt) => opt.textContent)).toEqual(
initialProps.options.map((opt) => opt.label)
);
rerender(
);
- expect([...container.getElementsByClassName('pf-v5-c-select__menu-item')].map((opt) => opt.textContent)).toEqual(
- NEW_OPTIONS.map((opt) => opt.label)
- );
+ expect([...container.getElementsByClassName('pf-v6-c-menu__item')].map((opt) => opt.textContent)).toEqual(NEW_OPTIONS.map((opt) => opt.label));
});
it('should change the options when loadOptions prop is changed', async () => {
@@ -426,7 +421,7 @@ describe('
', () => {
await userEvent.click(screen.getByLabelText('open menu'));
- expect([...container.getElementsByClassName('pf-v5-c-select__menu-item')].map((opt) => opt.textContent)).toEqual(
+ expect([...container.getElementsByClassName('pf-v6-c-menu__item')].map((opt) => opt.textContent)).toEqual(
initialProps.options.map((opt) => opt.label)
);
@@ -434,9 +429,7 @@ describe('
', () => {
rerender(
);
});
- expect([...container.getElementsByClassName('pf-v5-c-select__menu-item')].map((opt) => opt.textContent)).toEqual(
- NEW_OPTIONS.map((opt) => opt.label)
- );
+ expect([...container.getElementsByClassName('pf-v6-c-menu__item')].map((opt) => opt.textContent)).toEqual(NEW_OPTIONS.map((opt) => opt.label));
});
it('should change the value when new options do not include it', async () => {
diff --git a/packages/pf4-component-mapper/src/tests/tabs.test.js b/packages/pf4-component-mapper/src/tests/tabs.test.js
index 969b6a9c3..06f224da5 100644
--- a/packages/pf4-component-mapper/src/tests/tabs.test.js
+++ b/packages/pf4-component-mapper/src/tests/tabs.test.js
@@ -52,10 +52,10 @@ describe('Tabs component', () => {
);
- expect(screen.getByText('cosiTitle').closest('.pf-v5-c-tabs__item')).toHaveClass('pf-m-current');
+ expect(screen.getByText('cosiTitle').closest('.pf-v6-c-tabs__item')).toHaveClass('pf-m-current');
await userEvent.click(screen.getByText('cosiTitle2'));
- expect(screen.getByText('cosiTitle2').closest('.pf-v5-c-tabs__item')).toHaveClass('pf-m-current');
+ expect(screen.getByText('cosiTitle2').closest('.pf-v6-c-tabs__item')).toHaveClass('pf-m-current');
});
});
diff --git a/packages/pf4-component-mapper/src/tests/wizard/wizard.test.js b/packages/pf4-component-mapper/src/tests/wizard/wizard.test.js
index 9a0df7f7b..09dd33636 100644
--- a/packages/pf4-component-mapper/src/tests/wizard/wizard.test.js
+++ b/packages/pf4-component-mapper/src/tests/wizard/wizard.test.js
@@ -142,7 +142,7 @@ describe('
', () => {
it('should render correctly and unrender', () => {
render(
);
- expect(screen.getByText('foo-step', { selector: 'button' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'foo-step' })).toBeInTheDocument();
cleanup();
});
@@ -150,11 +150,11 @@ describe('
', () => {
it('should open nav', async () => {
render(
);
- expect(screen.getByText('foo-step', { selector: 'button.pf-m-current' }).closest('.pf-m-expanded')).toBeNull();
+ expect(screen.getByRole('button', { name: 'foo-step' }).closest('.pf-m-expanded')).toBeNull();
await userEvent.click(screen.getByLabelText('Wizard Toggle'));
- expect(screen.getByText('foo-step', { selector: 'button.pf-m-current' }).closest('.pf-m-expanded')).toBeDefined();
+ expect(screen.getByRole('button', { name: 'foo-step' }).closest('.pf-m-expanded')).toBeDefined();
});
it('should call enter handler when pressing enter', async () => {
@@ -364,7 +364,7 @@ describe('
', () => {
render(
);
- expect(screen.getByText('foo-step', { selector: 'button' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'foo-step' })).toBeInTheDocument();
cleanup();
});
@@ -422,11 +422,13 @@ describe('
', () => {
render(
);
- expect(screen.getByText('foo-step', { selector: '.pf-m-current' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'foo-step' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'foo-step' })).toHaveClass('pf-m-current');
await userEvent.click(screen.getByText('Next'));
- expect(screen.getByText('bar-step', { selector: '.pf-m-current' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'bar-step' })).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'bar-step' })).toHaveClass('pf-m-current');
await userEvent.click(screen.getByText('Submit'));
const formOptions = expect.any(Object);
@@ -524,8 +526,8 @@ describe('
', () => {
it('should build simple navigation', () => {
render(
);
- expect(screen.getByText('foo-step', { selector: '.pf-v5-c-wizard__nav-link' })).toBeInTheDocument();
- expect(screen.getByText('bar-step', { selector: '.pf-v5-c-wizard__nav-link' })).toBeInTheDocument();
+ expect(screen.getByText('foo-step', { selector: '.pf-v6-c-wizard__nav-link-main' })).toBeInTheDocument();
+ expect(screen.getByText('bar-step', { selector: '.pf-v6-c-wizard__nav-link-main' })).toBeInTheDocument();
});
it('should jump when click simple navigation', async () => {
@@ -537,11 +539,11 @@ describe('
', () => {
expect(screen.getByLabelText('bar', { selector: 'input' })).toBeInTheDocument();
- await userEvent.click(screen.getByText('foo-step', { selector: '.pf-v5-c-wizard__nav-link' }));
+ await userEvent.click(screen.getByText('foo-step', { selector: '.pf-v6-c-wizard__nav-link-main' }));
expect(screen.getByLabelText('foo', { selector: 'input' })).toBeInTheDocument();
- await userEvent.click(screen.getByText('bar-step', { selector: '.pf-v5-c-wizard__nav-link' }));
+ await userEvent.click(screen.getByText('bar-step', { selector: '.pf-v6-c-wizard__nav-link-main' }));
expect(screen.getByLabelText('bar', { selector: 'input' })).toBeInTheDocument();
});
@@ -551,7 +553,7 @@ describe('
', () => {
expect(screen.getByLabelText('foo', { selector: 'input' })).toBeInTheDocument();
- await userEvent.click(screen.getByText('foo-step', { selector: '.pf-v5-c-wizard__nav-link' }));
+ await userEvent.click(screen.getByText('foo-step', { selector: '.pf-v6-c-wizard__nav-link-main' }));
expect(screen.getByLabelText('foo', { selector: 'input' })).toBeInTheDocument();
});
@@ -594,9 +596,9 @@ describe('
', () => {
render(
);
- expect(screen.getAllByText('foo-step', { selector: '.pf-v5-c-wizard__nav-link' })).toBeTruthy();
- expect(screen.getAllByText('bar-step', { selector: '.pf-v5-c-wizard__nav-link' })).toBeTruthy();
- expect(screen.getAllByText('barbar', { selector: '.pf-v5-c-wizard__nav-link' })).toBeTruthy();
+ expect(screen.getAllByText('foo-step', { selector: '.pf-v6-c-wizard__nav-link-main' })).toBeTruthy();
+ expect(screen.getAllByText('bar-step', { selector: '.pf-v6-c-wizard__nav-link-main' })).toBeTruthy();
+ expect(screen.getAllByText('barbar', { selector: '.pf-v6-c-wizard__nav-link-main' })).toBeTruthy();
});
it('should jump with substeps', async () => {
@@ -643,11 +645,11 @@ describe('
', () => {
expect(screen.getByLabelText('bar', { selector: 'input' })).toBeInTheDocument();
- await userEvent.click(screen.getByText('foo-step', { selector: '.pf-v5-c-wizard__nav-link' }));
+ await userEvent.click(screen.getByText('foo-step', { selector: '.pf-v6-c-wizard__nav-link-main' }));
expect(screen.getByLabelText('foo', { selector: 'input' })).toBeInTheDocument();
- await userEvent.click(screen.getByText('barbar', { selector: '.pf-v5-c-wizard__nav-link' }));
+ await userEvent.click(screen.getByText('barbar', { selector: '.pf-v6-c-wizard__nav-link-main' }));
expect(screen.getByLabelText('bar', { selector: 'input' })).toBeInTheDocument();
@@ -655,7 +657,7 @@ describe('
', () => {
expect(screen.getByLabelText('foo', { selector: 'input' })).toBeInTheDocument();
- await userEvent.click(screen.getByText('bar-step', { selector: '.pf-v5-c-wizard__nav-link' }));
+ await userEvent.click(screen.getByText('bar-step', { selector: '.pf-v6-c-wizard__nav-link-main' }));
expect(screen.getByLabelText('bar', { selector: 'input' })).toBeInTheDocument();
});
@@ -700,23 +702,23 @@ describe('
', () => {
const { container } = render(
);
expect(screen.getByLabelText('foo', { selector: 'input' })).toBeInTheDocument();
- expect(container.querySelectorAll('.pf-v5-c-wizard__nav-item')).toHaveLength(3);
- expect(container.querySelectorAll('.pf-v5-c-wizard__nav-link.pf-m-disabled')).toHaveLength(2); // steps + substep
+ expect(container.querySelectorAll('.pf-v6-c-wizard__nav-item')).toHaveLength(3);
+ expect(container.querySelectorAll('.pf-v6-c-wizard__nav-link.pf-m-disabled')).toHaveLength(2); // steps + substep
await userEvent.click(screen.getByText('Next'));
expect(screen.getByLabelText('bar', { selector: 'input' })).toBeInTheDocument();
- expect(container.querySelectorAll('.pf-v5-c-wizard__nav-link.pf-m-disabled')).toHaveLength(0);
+ expect(container.querySelectorAll('.pf-v6-c-wizard__nav-link.pf-m-disabled')).toHaveLength(0);
- await userEvent.click(screen.getByText('foo-step', { selector: '.pf-v5-c-wizard__nav-link' }));
+ await userEvent.click(screen.getByText('foo-step', { selector: '.pf-v6-c-wizard__nav-link-main' }));
expect(screen.getByLabelText('foo', { selector: 'input' })).toBeInTheDocument();
- expect(container.querySelectorAll('.pf-v5-c-wizard__nav-item')).toHaveLength(3);
+ expect(container.querySelectorAll('.pf-v6-c-wizard__nav-item')).toHaveLength(3);
await userEvent.click(screen.getByText('Next'));
expect(screen.getByLabelText('bar', { selector: 'input' })).toBeInTheDocument();
- expect(container.querySelectorAll('.pf-v5-c-wizard__nav-item')).toHaveLength(3);
+ expect(container.querySelectorAll('.pf-v6-c-wizard__nav-item')).toHaveLength(3);
});
it('should disabled button when validating', async () => {
@@ -757,9 +759,9 @@ describe('
', () => {
render(
);
- expect(screen.getByText('Next')).toBeDisabled();
+ expect(screen.getByRole('button', { name: 'Next' })).toBeDisabled();
- await waitFor(() => expect(screen.getByText('Next')).not.toBeDisabled());
+ await waitFor(() => expect(screen.getByRole('button', { name: 'Next' })).not.toBeDisabled());
});
it('should disabled navigation when validating', async () => {
@@ -810,21 +812,21 @@ describe('
', () => {
resFn();
- await waitFor(() => expect(screen.getByText('Next')).not.toBeDisabled());
+ await waitFor(() => expect(screen.getByRole('button', { name: 'Next' })).not.toBeDisabled());
await userEvent.click(screen.getByText('Next'));
- await waitFor(() => expect(screen.getByText('bar-step', { selector: '.pf-v5-c-wizard__nav-link' })).not.toBeDisabled());
+ expect(screen.getByRole('button', { name: 'bar-step' })).not.toBeDisabled();
await userEvent.click(screen.getByText('Back'));
await userEvent.type(screen.getByLabelText('foo'), 'X');
- expect(screen.getByText('bar-step', { selector: '.pf-v5-c-wizard__nav-link' })).toBeDisabled();
+ expect(screen.getByRole('button', { name: 'bar-step' })).toBeDisabled();
resFn();
- await waitFor(() => expect(screen.getByText('bar-step', { selector: '.pf-v5-c-wizard__nav-link' })).not.toBeDisabled());
+ await waitFor(() => expect(screen.getByRole('button', { name: 'bar-step' })).not.toBeDisabled());
});
it('should disable steps when invalid', async () => {
@@ -907,7 +909,7 @@ describe('
', () => {
await userEvent.click(screen.getByText('Next'));
// voila
expect(screen.getByLabelText('conan')).toBeInTheDocument();
- expect(screen.getByText('conan-step', { selector: '.pf-v5-c-wizard__nav-link' })).not.toBeDisabled();
+ expect(screen.getByText('conan-step', { selector: '.pf-v6-c-wizard__nav-link-main' })).not.toBeDisabled();
await userEvent.click(screen.getByText('Back'));
@@ -919,21 +921,21 @@ describe('
', () => {
expect(screen.getByLabelText('bar')).toBeInTheDocument();
// let's look if last nav item is disabled (click event is working with 'disabled'
element)
- expect(screen.getByText('conan-step', { selector: '.pf-v5-c-wizard__nav-link' })).toBeDisabled();
+ expect(screen.getByRole('button', { name: 'conan-step' })).toBeDisabled();
// go to first step
- await userEvent.click(screen.getByText('foo-step', { selector: '.pf-v5-c-wizard__nav-link' }));
+ await userEvent.click(screen.getByText('foo-step', { selector: '.pf-v6-c-wizard__nav-link-main' }));
// still invalid :(
expect(screen.getByLabelText('foo')).toBeInTheDocument();
- expect(screen.getByText('conan-step', { selector: '.pf-v5-c-wizard__nav-link' })).toBeDisabled();
+ expect(screen.getByRole('button', { name: 'conan-step' })).toBeDisabled();
// make form valid again
await userEvent.click(screen.getByText('Next'));
await userEvent.type(screen.getByLabelText('bar'), 'hello');
await userEvent.click(screen.getByText('Next'));
- expect(screen.getByText('conan-step', { selector: '.pf-v5-c-wizard__nav-link' })).not.toBeDisabled();
+ expect(screen.getByRole('button', { name: 'conan-step' })).not.toBeDisabled();
});
describe('predicting steps', () => {
@@ -1014,12 +1016,12 @@ describe('', () => {
/>
);
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.textContent)).toEqual([FIRST_TITLE]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.textContent)).toEqual([FIRST_TITLE]);
await userEvent.type(screen.getByLabelText('source_type'), 'aws');
await userEvent.click(screen.getByText('Next'));
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.textContent)).toEqual([
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.textContent)).toEqual([
FIRST_TITLE,
SECOND_TITLE_AWS,
THIRD_TITLE,
@@ -1041,7 +1043,7 @@ describe('', () => {
await userEvent.click(screen.getByText('Next'));
await userEvent.click(screen.getByText('Back'));
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true, true]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true, true]);
});
it('disable nav when jumped into compileMapper step from invalid step', async () => {
@@ -1100,12 +1102,12 @@ describe('', () => {
await userEvent.type(screen.getByLabelText('source_type'), 'aws');
await userEvent.click(screen.getByText('Next'));
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, false]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, false]);
await userEvent.type(screen.getByLabelText('aws'), '{backspace}');
await userEvent.click(screen.getByText('Back'));
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true]);
});
it('disable nav when jumped into step with function nextStep', async () => {
@@ -1166,11 +1168,11 @@ describe('', () => {
await userEvent.type(screen.getByLabelText('source_type'), 'aws');
await userEvent.click(screen.getByText('Next'));
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, false]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, false]);
await userEvent.click(screen.getByText('Back'));
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true]);
const firstArgumentOfLastNextStepCall = NEXTSTEP_FUNCTION.mock.calls[NEXTSTEP_FUNCTION.mock.calls.length - 1][0];
expect(firstArgumentOfLastNextStepCall).toEqual({ values: EXPECTED_VALUES });
@@ -1227,11 +1229,11 @@ describe('', () => {
await userEvent.type(screen.getByLabelText('source_type'), 'aws');
await userEvent.click(screen.getByText('Next'));
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, false]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, false]);
await userEvent.click(screen.getByText('Back'));
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true]);
});
it('crossroads variable predicts in realtime', async () => {
@@ -1279,13 +1281,13 @@ describe('', () => {
const { container } = render();
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false]);
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step']);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step']);
await userEvent.type(screen.getByLabelText('source_type'), 'aws');
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true, true]);
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.textContent)).toEqual([
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true, true]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.textContent)).toEqual([
'first-step',
'second-step',
'summary',
@@ -1295,25 +1297,25 @@ describe('', () => {
await userEvent.type(screen.getByLabelText('source_type'), 'google');
// predict steps for google
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true]);
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step', 'summary']);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step', 'summary']);
await userEvent.click(screen.getByText('Next'));
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, false]);
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step', 'summary']);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, false]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step', 'summary']);
// click on first nav link
await userEvent.click(screen.getByText('first-step'));
// keep the second step enabled
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, false]);
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step', 'summary']);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, false]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step', 'summary']);
await userEvent.clear(screen.getByLabelText('source_type'));
await userEvent.type(screen.getByLabelText('source_type'), 'aws');
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true, true]);
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.textContent)).toEqual([
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true, true]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.textContent)).toEqual([
'first-step',
'second-step',
'summary',
@@ -1322,8 +1324,8 @@ describe('', () => {
await userEvent.clear(screen.getByLabelText('source_type'));
await userEvent.type(screen.getByLabelText('source_type'), 'google');
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true]);
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step', 'summary']);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step', 'summary']);
});
it('crossroads variable predicts in realtime - disableForwardJumping', async () => {
@@ -1372,24 +1374,24 @@ describe('', () => {
const { container } = render();
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false]);
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step']);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step']);
await userEvent.clear(screen.getByLabelText('source_type'));
await userEvent.type(screen.getByLabelText('source_type'), 'google');
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true]);
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step', 'summary']);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step', 'summary']);
await userEvent.click(screen.getByText('Next'));
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, false]);
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step', 'summary']);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, false]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step', 'summary']);
await userEvent.click(screen.getByText('first-step'));
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true]);
- expect([...container.getElementsByClassName('pf-v5-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step', 'summary']);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.disabled)).toEqual([false, true]);
+ expect([...container.getElementsByClassName('pf-v6-c-wizard__nav-link')].map((e) => e.textContent)).toEqual(['first-step', 'summary']);
});
});
diff --git a/packages/pf4-component-mapper/src/wizard/wizard-components/step-buttons.js b/packages/pf4-component-mapper/src/wizard/wizard-components/step-buttons.js
index b5836c1ba..56e3028fe 100644
--- a/packages/pf4-component-mapper/src/wizard/wizard-components/step-buttons.js
+++ b/packages/pf4-component-mapper/src/wizard/wizard-components/step-buttons.js
@@ -41,7 +41,7 @@ const WizardStepButtons = ({
formOptions,
conditionalSubmitFlag,
}) => (
-