Skip to content

Commit

Permalink
Reorganize tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaldudak
michaldudak committed Mar 21, 2024
1 parent 165ab0e commit 9ffee33
Showing 1 changed file with 128 additions and 110 deletions.
238 changes: 128 additions & 110 deletions packages/mui-base/src/Switch/Switch.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,68 +14,98 @@ describe('<Switch />', () => {
render,
}));

describe('extra props', () => {
it('should override the built-in attributes', () => {
const { container } = render(<Switch data-state="checked" role="checkbox" />);
expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'checkbox');
expect(container.firstElementChild as HTMLElement).to.have.attribute('data-state', 'checked');
});
});
describe('interaction', () => {
it('should change its state when clicked', () => {
const { getByRole } = render(<Switch />);
const switchElement = getByRole('switch');

it('should change its state when clicked', () => {
const { getByRole } = render(<Switch />);
const switchElement = getByRole('switch');
expect(switchElement).to.have.attribute('aria-checked', 'false');

expect(switchElement).to.have.attribute('aria-checked', 'false');
act(() => {
switchElement.click();
});

act(() => {
switchElement.click();
expect(switchElement).to.have.attribute('aria-checked', 'true');
});

expect(switchElement).to.have.attribute('aria-checked', 'true');
});
it('should update its state when changed from outside', () => {
function Test() {
const [checked, setChecked] = React.useState(false);
return (
<div>
<button onClick={() => setChecked((c) => !c)}>Toggle</button>
<Switch checked={checked} />;
</div>
);
}

const { getByRole, getByText } = render(<Test />);
const switchElement = getByRole('switch');
const button = getByText('Toggle');

it('should update its state when changed from outside', () => {
function Test() {
const [checked, setChecked] = React.useState(false);
return (
<div>
<button onClick={() => setChecked((c) => !c)}>Toggle</button>
<Switch checked={checked} />;
</div>
);
}
expect(switchElement).to.have.attribute('aria-checked', 'false');
act(() => {
button.click();
});

const { getByRole, getByText } = render(<Test />);
const switchElement = getByRole('switch');
const button = getByText('Toggle');
expect(switchElement).to.have.attribute('aria-checked', 'true');

expect(switchElement).to.have.attribute('aria-checked', 'false');
act(() => {
button.click();
act(() => {
button.click();
});

expect(switchElement).to.have.attribute('aria-checked', 'false');
});

expect(switchElement).to.have.attribute('aria-checked', 'true');
it('should update its state if the underlying input is toggled', () => {
const { getByRole, container } = render(<Switch />);
const switchElement = getByRole('switch');
const internalInput = container.querySelector('input[type="checkbox"]')! as HTMLInputElement;

act(() => {
internalInput.click();
});

act(() => {
button.click();
expect(switchElement).to.have.attribute('aria-checked', 'true');
});
});

expect(switchElement).to.have.attribute('aria-checked', 'false');
describe('extra props', () => {
it('should override the built-in attributes', () => {
const { container } = render(<Switch data-state="checked" role="checkbox" />);
expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'checkbox');
expect(container.firstElementChild as HTMLElement).to.have.attribute('data-state', 'checked');
});
});

it('should call onChange when clicked', () => {
const handleChange = spy();
const { getByRole, container } = render(<Switch onChange={handleChange} />);
const switchElement = getByRole('switch');
const internalInput = container.querySelector('input[type="checkbox"]')!;
describe('prop: onChange', () => {
it('should call onChange when clicked', () => {
const handleChange = spy();
const { getByRole, container } = render(<Switch onChange={handleChange} />);
const switchElement = getByRole('switch');
const internalInput = container.querySelector('input[type="checkbox"]')!;

act(() => {
switchElement.click();
});

act(() => {
switchElement.click();
expect(handleChange.callCount).to.equal(1);
expect(handleChange.firstCall.args[0].target).to.equal(internalInput);
});
});

describe('prop: onClick', () => {
it('should call onClick when clicked', () => {
const handleClick = spy();
const { getByRole } = render(<Switch onClick={handleClick} />);
const switchElement = getByRole('switch');

act(() => {
switchElement.click();
});

expect(handleChange.callCount).to.equal(1);
expect(handleChange.firstCall.args[0].target).to.equal(internalInput);
expect(handleClick.callCount).to.equal(1);
});
});

describe('prop: disabled', () => {
Expand Down Expand Up @@ -138,46 +168,6 @@ describe('<Switch />', () => {
});
});

it('should update its state if the underlying input is toggled', () => {
const { getByRole, container } = render(<Switch />);
const switchElement = getByRole('switch');
const internalInput = container.querySelector('input[type="checkbox"]')! as HTMLInputElement;

act(() => {
internalInput.click();
});

expect(switchElement).to.have.attribute('aria-checked', 'true');
});

it('should place the style hooks on the root and the thumb', () => {
const { getByRole } = render(
<Switch defaultChecked disabled readOnly required>
<Switch.Thumb />
</Switch>,
);

const switchElement = getByRole('switch');
const thumb = switchElement.querySelector('span');

expect(switchElement).to.have.attribute('data-state', 'checked');
expect(switchElement).to.have.attribute('data-disabled', 'true');
expect(switchElement).to.have.attribute('data-readonly', 'true');
expect(switchElement).to.have.attribute('data-required', 'true');

expect(thumb).to.have.attribute('data-state', 'checked');
expect(thumb).to.have.attribute('data-disabled', 'true');
expect(thumb).to.have.attribute('data-readonly', 'true');
expect(thumb).to.have.attribute('data-required', 'true');
});

it('should set the name attribute on the input', () => {
const { container } = render(<Switch name="switch-name" />);
const internalInput = container.querySelector('input[type="checkbox"]')! as HTMLInputElement;

expect(internalInput).to.have.attribute('name', 'switch-name');
});

describe('form handling', () => {
it('should toggle the switch when a parent label is clicked', () => {
const { getByTestId, getByRole } = render(
Expand Down Expand Up @@ -220,42 +210,70 @@ describe('<Switch />', () => {

expect(switchElement).to.have.attribute('aria-checked', 'true');
});
});

it('should include the switch value in the form submission', function test() {
if (/jsdom/.test(window.navigator.userAgent)) {
// FormData is not available in JSDOM
this.skip();
}
it('should include the switch value in the form submission', function test() {
if (/jsdom/.test(window.navigator.userAgent)) {
// FormData is not available in JSDOM
this.skip();
}

let stringifiedFormData = '';

const { getByRole } = render(
<form
onSubmit={(event) => {
event.preventDefault();
const formData = new FormData(event.currentTarget);
stringifiedFormData = new URLSearchParams(formData as any).toString();
}}
>
<Switch name="test-switch" />
<button type="submit">Submit</button>
</form>,
);

let stringifiedFormData = '';
const switchElement = getByRole('switch');
const submitButton = getByRole('button')!;

submitButton.click();

expect(stringifiedFormData).to.equal('test-switch=off');

act(() => {
switchElement.click();
});

submitButton.click();

expect(stringifiedFormData).to.equal('test-switch=on');
});
});

it('should place the style hooks on the root and the thumb', () => {
const { getByRole } = render(
<form
onSubmit={(event) => {
event.preventDefault();
const formData = new FormData(event.currentTarget);
stringifiedFormData = new URLSearchParams(formData as any).toString();
}}
>
<Switch name="test-switch" />
<button type="submit">Submit</button>
</form>,
<Switch defaultChecked disabled readOnly required>
<Switch.Thumb />
</Switch>,
);

const switchElement = getByRole('switch');
const submitButton = getByRole('button')!;

submitButton.click();
const thumb = switchElement.querySelector('span');

expect(stringifiedFormData).to.equal('test-switch=off');
expect(switchElement).to.have.attribute('data-state', 'checked');
expect(switchElement).to.have.attribute('data-disabled', 'true');
expect(switchElement).to.have.attribute('data-readonly', 'true');
expect(switchElement).to.have.attribute('data-required', 'true');

act(() => {
switchElement.click();
});
expect(thumb).to.have.attribute('data-state', 'checked');
expect(thumb).to.have.attribute('data-disabled', 'true');
expect(thumb).to.have.attribute('data-readonly', 'true');
expect(thumb).to.have.attribute('data-required', 'true');
});

submitButton.click();
it('should set the name attribute on the input', () => {
const { container } = render(<Switch name="switch-name" />);
const internalInput = container.querySelector('input[type="checkbox"]')! as HTMLInputElement;

expect(stringifiedFormData).to.equal('test-switch=on');
expect(internalInput).to.have.attribute('name', 'switch-name');
});
});

0 comments on commit 9ffee33

Please sign in to comment.