Merge pull request #9093 from marshmalien/fix-setting-toggle-id

Fix setting toggle on click behavior

Reviewed-by: John Hill <johill@redhat.com>
             https://github.com/unlikelyzero
This commit is contained in:
softwarefactory-project-zuul[bot]
2021-01-26 17:16:43 +00:00
committed by GitHub
2 changed files with 30 additions and 18 deletions

View File

@@ -48,10 +48,10 @@ const SettingGroup = withI18n()(
<FormGroup <FormGroup
fieldId={fieldId} fieldId={fieldId}
helperTextInvalid={helperTextInvalid} helperTextInvalid={helperTextInvalid}
id={`${fieldId}-field`}
isRequired={isRequired} isRequired={isRequired}
label={label} label={label}
validated={validated} validated={validated}
id={fieldId}
labelIcon={ labelIcon={
<> <>
<Popover <Popover

View File

@@ -1,5 +1,7 @@
import React from 'react'; import React from 'react';
import { mount } from 'enzyme';
import { Formik } from 'formik'; import { Formik } from 'formik';
import { I18nProvider } from '@lingui/react';
import { act } from 'react-dom/test-utils'; import { act } from 'react-dom/test-utils';
import { mountWithContexts } from '../../../../testUtils/enzymeHelpers'; import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
import { import {
@@ -12,28 +14,38 @@ import {
describe('Setting form fields', () => { describe('Setting form fields', () => {
test('BooleanField renders the expected content', async () => { test('BooleanField renders the expected content', async () => {
const wrapper = mountWithContexts( const outerNode = document.createElement('div');
<Formik document.body.appendChild(outerNode);
initialValues={{ const wrapper = mount(
boolean: true, <I18nProvider>
}} <Formik
> initialValues={{
{() => ( boolean: true,
<BooleanField }}
name="boolean" >
config={{ {() => (
label: 'test', <BooleanField
help_text: 'test', name="boolean"
}} config={{
/> label: 'test',
)} help_text: 'test',
</Formik> }}
/>
)}
</Formik>
</I18nProvider>,
{
attachTo: outerNode,
}
); );
expect(wrapper.find('Switch')).toHaveLength(1); expect(wrapper.find('Switch')).toHaveLength(1);
expect(wrapper.find('Switch').prop('isChecked')).toBe(true); expect(wrapper.find('Switch').prop('isChecked')).toBe(true);
expect(wrapper.find('Switch').prop('isDisabled')).toBe(false); expect(wrapper.find('Switch').prop('isDisabled')).toBe(false);
await act(async () => { await act(async () => {
wrapper.find('Switch').invoke('onChange')(false); wrapper
.find('Switch label')
.instance()
.dispatchEvent(new Event('click'));
}); });
wrapper.update(); wrapper.update();
expect(wrapper.find('Switch').prop('isChecked')).toBe(false); expect(wrapper.find('Switch').prop('isChecked')).toBe(false);