Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SwitchBase] Fix ignoring disabled from FormControl #19319

Merged
merged 12 commits into from
Jan 23, 2020
Merged

[SwitchBase] Fix ignoring disabled from FormControl #19319

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
294f276
Update Framer X components
rostislavbobo Jan 20, 2020
e06b2eb
[Checkbox][Radio][Switch] Reset disabled prop to undefined
rostislavbobo Jan 20, 2020
5c3e6fc
[Checkbox][Radio][Switch] Update docs by resetting default disabled prop
rostislavbobo Jan 20, 2020
d7d3165
Update framerConfig by specifying disabled prop for [Checkbox][Radio]…
rostislavbobo Jan 20, 2020
860f0ae
[SwitchBase] Fix override disabled by prop test to check the expected…
rostislavbobo Jan 21, 2020
3b176f0
[Checkbox] Test disabled state with FormControl
rostislavbobo Jan 21, 2020
8652b8e
[Radio] Test disabled state with FormControl
rostislavbobo Jan 21, 2020
4580023
[Switch] Test disabled state with FormControl
rostislavbobo Jan 21, 2020
2c52b24
[SwitchBase] Test disabled against IconButton and input
rostislavbobo Jan 22, 2020
5c97816
[Checkbox][Radio][Switch] Test disabled attribute instead of class name
rostislavbobo Jan 22, 2020
85ea482
[SwitchBase] Update test by generalizing underlying component
rostislavbobo Jan 22, 2020
b3cd783
[Checkbox][Radio] Fix describeConformance by adding after callback
rostislavbobo Jan 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 20 additions & 17 deletions packages/material-ui/src/Checkbox/Checkbox.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import describeConformance from '../test-utils/describeConformance';
import { createClientRender } from 'test/utils/createClientRender';
import Checkbox from './Checkbox';
import FormControl from '../FormControl';
import IconButton from '../IconButton';

describe('<Checkbox />', () => {
const render = createClientRender();
Expand All @@ -17,17 +16,21 @@ describe('<Checkbox />', () => {
mount = createMount({ strict: true });
});

after(() => {
mount.cleanUp();
});
describeConformance(<Checkbox />, () => ({
mount,
only: ['refForwarding'],
refInstanceof: window.HTMLSpanElement,
after: () => mount.cleanUp(),
}));

/* TODO Checkbox violates root component
rostislavbobo marked this conversation as resolved.
Show resolved Hide resolved
describeConformance(<Checkbox checked />, () => ({
classes,
inheritComponent: IconButton,
mount,
refInstanceof: window.HTMLSpanElement,
skip: ['componentProp'],
}));
})); */

it('should have the classes required for Checkbox', () => {
assert.strictEqual(typeof classes.root, 'string');
Expand All @@ -45,45 +48,45 @@ describe('<Checkbox />', () => {
describe('with FormControl', () => {
describe('enabled', () => {
it('should not have the disabled class', () => {
const { getByTestId } = render(
const { getByRole } = render(
<FormControl>
<Checkbox data-testid="root" />
<Checkbox />
</FormControl>,
);

expect(getByTestId('root')).not.to.have.class(classes.disabled);
expect(getByRole('checkbox')).not.to.have.attribute('disabled');
});

it('should be overridden by props', () => {
const { getByTestId } = render(
const { getByRole } = render(
<FormControl>
<Checkbox data-testid="root" disabled />
<Checkbox disabled />
</FormControl>,
);

expect(getByTestId('root')).to.have.class(classes.disabled);
expect(getByRole('checkbox')).to.have.attribute('disabled');
});
});

describe('disabled', () => {
it('should have the disabled class', () => {
const { getByTestId } = render(
const { getByRole } = render(
<FormControl disabled>
<Checkbox data-testid="root" />
<Checkbox />
</FormControl>,
);

expect(getByTestId('root')).to.have.class(classes.disabled);
expect(getByRole('checkbox')).to.have.attribute('disabled');
});

it('should be overridden by props', () => {
const { getByTestId } = render(
const { getByRole } = render(
<FormControl disabled>
<Checkbox data-testid="root" disabled={false} />
<Checkbox disabled={false} />
</FormControl>,
);

expect(getByTestId('root')).not.to.have.class(classes.disabled);
expect(getByRole('checkbox')).not.to.have.attribute('disabled');
});
});
});
Expand Down
37 changes: 20 additions & 17 deletions packages/material-ui/src/Radio/Radio.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import describeConformance from '@material-ui/core/test-utils/describeConformanc
import { createClientRender } from 'test/utils/createClientRender';
import FormControl from '../FormControl';
import Radio from './Radio';
import IconButton from '../IconButton';

describe('<Radio />', () => {
const render = createClientRender();
Expand All @@ -17,17 +16,21 @@ describe('<Radio />', () => {
mount = createMount({ strict: true });
});

after(() => {
mount.cleanUp();
});
describeConformance(<Radio />, () => ({
mount,
only: ['refForwarding'],
refInstanceof: window.HTMLSpanElement,
after: () => mount.cleanUp(),
}));

/* TODO Radio violates root component
describeConformance(<Radio />, () => ({
classes,
inheritComponent: IconButton,
mount,
refInstanceof: window.HTMLSpanElement,
skip: ['componentProp'],
}));
})); */

describe('styleSheet', () => {
it('should have the classes required for SwitchBase', () => {
Expand All @@ -54,45 +57,45 @@ describe('<Radio />', () => {
describe('with FormControl', () => {
describe('enabled', () => {
it('should not have the disabled class', () => {
const { getByTestId } = render(
const { getByRole } = render(
<FormControl>
<Radio data-testid="root" />
<Radio />
</FormControl>,
);

expect(getByTestId('root')).not.to.have.class(classes.disabled);
expect(getByRole('radio')).not.to.have.attribute('disabled');
});

it('should be overridden by props', () => {
const { getByTestId } = render(
const { getByRole } = render(
<FormControl>
<Radio data-testid="root" disabled />
<Radio disabled />
</FormControl>,
);

expect(getByTestId('root')).to.have.class(classes.disabled);
expect(getByRole('radio')).to.have.attribute('disabled');
});
});

describe('disabled', () => {
it('should have the disabled class', () => {
const { getByTestId } = render(
const { getByRole } = render(
<FormControl disabled>
<Radio data-testid="root" />
<Radio />
</FormControl>,
);

expect(getByTestId('root')).to.have.class(classes.disabled);
expect(getByRole('radio')).to.have.attribute('disabled');
});

it('should be overridden by props', () => {
const { getByTestId } = render(
const { getByRole } = render(
<FormControl disabled>
<Radio data-testid="root" disabled={false} />
<Radio disabled={false} />
</FormControl>,
);

expect(getByTestId('root')).not.to.have.class(classes.disabled);
expect(getByRole('radio')).not.to.have.attribute('disabled');
});
});
});
Expand Down
24 changes: 12 additions & 12 deletions packages/material-ui/src/Switch/Switch.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,45 +92,45 @@ describe('<Switch />', () => {
describe('with FormControl', () => {
describe('enabled', () => {
it('should not have the disabled class', () => {
const { getByTestId } = render(
const { getByRole } = render(
<FormControl>
<Switch data-testid="root" />
<Switch />
</FormControl>,
);

expect(getByTestId('root')).not.to.have.class(classes.disabled);
expect(getByRole('checkbox')).not.to.have.attribute('disabled');
});

it('should be overridden by props', () => {
const { getByTestId } = render(
const { getByRole } = render(
<FormControl>
<Switch data-testid="root" disabled />
<Switch disabled />
</FormControl>,
);

expect(getByTestId('root')).to.have.class(classes.disabled);
expect(getByRole('checkbox')).to.have.attribute('disabled');
});
});

describe('disabled', () => {
it('should have the disabled class', () => {
const { getByTestId } = render(
const { getByRole } = render(
<FormControl disabled>
<Switch data-testid="root" />
<Switch />
</FormControl>,
);

expect(getByTestId('root')).to.have.class(classes.disabled);
expect(getByRole('checkbox')).to.have.attribute('disabled');
});

it('should be overridden by props', () => {
eps1lon marked this conversation as resolved.
Show resolved Hide resolved
const { getByTestId } = render(
const { getByRole } = render(
<FormControl disabled>
<Switch data-testid="root" disabled={false} />
<Switch disabled={false} />
</FormControl>,
);

expect(getByTestId('root')).not.to.have.class(classes.disabled);
expect(getByRole('checkbox')).not.to.have.attribute('disabled');
});
});
});
Expand Down
39 changes: 26 additions & 13 deletions packages/material-ui/src/internal/SwitchBase.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,57 +259,71 @@ describe('<SwitchBase />', () => {
describe('with FormControl', () => {
describe('enabled', () => {
it('should not have the disabled class', () => {
const { getByTestId } = render(
const { getByRole, getByTestId } = render(
<FormControl>
<SwitchBase data-testid="root" icon="unchecked" checkedIcon="checked" type="checkbox" />
<SwitchBase
data-testid="IconButton"
icon="unchecked"
checkedIcon="checked"
type="checkbox"
/>
</FormControl>,
);

expect(getByTestId('root')).not.to.have.class(classes.disabled);
expect(getByTestId('IconButton')).not.to.have.class(classes.disabled);
expect(getByRole('checkbox')).not.to.have.attribute('disabled');
});

it('should be overridden by props', () => {
const { getByTestId } = render(
const { getByRole, getByTestId } = render(
<FormControl>
<SwitchBase
disabled
data-testid="root"
data-testid="IconButton"
icon="unchecked"
checkedIcon="checked"
type="checkbox"
/>
</FormControl>,
);

expect(getByTestId('root')).to.have.class(classes.disabled);
expect(getByTestId('IconButton')).to.have.class(classes.disabled);
expect(getByRole('checkbox')).to.have.attribute('disabled');
});
});

describe('disabled', () => {
it('should have the disabled class', () => {
const { getByTestId } = render(
const { getByRole, getByTestId } = render(
<FormControl disabled>
<SwitchBase data-testid="root" icon="unchecked" checkedIcon="checked" type="checkbox" />
<SwitchBase
data-testid="IconButton"
eps1lon marked this conversation as resolved.
Show resolved Hide resolved
icon="unchecked"
checkedIcon="checked"
type="checkbox"
/>
</FormControl>,
);

expect(getByTestId('root')).to.have.class(classes.disabled);
expect(getByTestId('IconButton')).to.have.class(classes.disabled);
expect(getByRole('checkbox')).to.have.attribute('disabled');
});

it('should be overridden by props', () => {
const { getByTestId } = render(
const { getByRole, getByTestId } = render(
<FormControl disabled>
eps1lon marked this conversation as resolved.
Show resolved Hide resolved
<SwitchBase
disabled={false}
data-testid="root"
data-testid="IconButton"
icon="unchecked"
checkedIcon="checked"
type="checkbox"
/>
</FormControl>,
);

expect(getByTestId('root')).not.to.have.class(classes.disabled);
expect(getByTestId('IconButton')).not.to.have.class(classes.disabled);
expect(getByRole('checkbox')).not.to.have.attribute('disabled');
});
});
});
Expand All @@ -327,7 +341,6 @@ describe('<SwitchBase />', () => {
<FormControl>
<FocusMonitor data-testid="focus-monitor" />
<SwitchBase
data-testid="root"
onBlur={handleBlur}
onFocus={handleFocus}
icon="unchecked"
Expand Down