diff --git a/packages/material-ui/src/Checkbox/Checkbox.test.js b/packages/material-ui/src/Checkbox/Checkbox.test.js
index a926599f6d9ee1..103d0017552daa 100644
--- a/packages/material-ui/src/Checkbox/Checkbox.test.js
+++ b/packages/material-ui/src/Checkbox/Checkbox.test.js
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { assert, expect } from 'chai';
+import { expect } from 'chai';
+import { spy } from 'sinon';
import { getClasses, createMount } from '@material-ui/core/test-utils';
import describeConformance from '../test-utils/describeConformance';
import { createClientRender } from 'test/utils/createClientRender';
@@ -27,15 +28,46 @@ describe('', () => {
}));
it('should have the classes required for Checkbox', () => {
- assert.strictEqual(typeof classes.root, 'string');
- assert.strictEqual(typeof classes.checked, 'string');
- assert.strictEqual(typeof classes.disabled, 'string');
+ expect(typeof classes.root).to.equal('string');
+ expect(typeof classes.checked).to.equal('string');
+ expect(typeof classes.disabled).to.equal('string');
+ });
+
+ it('renders an unchecked `checkbox` by default', () => {
+ const { getByRole } = render();
+
+ expect(getByRole('checkbox')).to.have.property('checked', false);
+ });
+
+ it('renders an checked `checkbox` when `checked={true}`', () => {
+ const { getByRole } = render();
+
+ expect(getByRole('checkbox')).to.have.property('checked', true);
+ });
+
+ it('flips the checked property when clicked and calls onchange with the checked state', () => {
+ const handleChange = spy((event) => event.persist());
+ const { getByRole } = render();
+
+ getByRole('checkbox').click();
+
+ expect(getByRole('checkbox')).to.have.property('checked', true);
+ expect(handleChange.callCount).to.equal(1);
+ expect(handleChange.getCall(0).args[0].target).to.have.property('checked', true);
+
+ getByRole('checkbox').click();
+
+ expect(getByRole('checkbox')).to.have.property('checked', false);
+ expect(handleChange.callCount).to.equal(2);
+ expect(handleChange.getCall(1).args[0].target).to.have.property('checked', false);
});
describe('prop: indeterminate', () => {
it('should render an indeterminate icon', () => {
- const wrapper = mount();
- assert.strictEqual(wrapper.find('svg[data-mui-test="IndeterminateCheckBoxIcon"]').length, 1);
+ const { container } = render();
+ expect(
+ container.querySelector('svg[data-mui-test="IndeterminateCheckBoxIcon"]'),
+ ).not.to.equal(null);
});
});