49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { render, screen,} from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import '@testing-library/jest-dom';
|
|
import Checkbox from './Checkbox';
|
|
|
|
test('verify check', () => {
|
|
const handleChange = () => {console.log("You clicked!")};
|
|
render(<>
|
|
<Checkbox onChange={handleChange}>One</Checkbox>
|
|
</>);
|
|
|
|
// get checkbox by text
|
|
const checkboxOne = screen.getByRole("checkbox", { name: "One" });
|
|
userEvent.click(checkboxOne);
|
|
|
|
expect(checkboxOne).toBeChecked();
|
|
});
|
|
|
|
test('disabled checkbox not clickable', () => {
|
|
const handleChange = () => {console.log("You clicked!")};
|
|
render(<>
|
|
<Checkbox disabled onChange={handleChange}>One</Checkbox>
|
|
</>);
|
|
|
|
// get checkbox by text
|
|
const checkboxOne = screen.getByRole("checkbox", { name: "One" });
|
|
userEvent.click(checkboxOne);
|
|
|
|
expect(checkboxOne).not.toBeChecked();
|
|
});
|
|
|
|
test('checked checkbox becomes unchecked', () => {
|
|
const handleChange = () => {console.log("You clicked!")};
|
|
render(<>
|
|
<Checkbox defaultChecked onChange={handleChange}>One</Checkbox>
|
|
</>);
|
|
|
|
// get checkbox by text
|
|
const checkboxOne = screen.getByRole("checkbox", { name: "One" });
|
|
//make sure the checkbox is checked by default
|
|
expect(checkboxOne).toBeChecked();
|
|
//now uncheck it
|
|
userEvent.click(checkboxOne);
|
|
|
|
expect(checkboxOne).not.toBeChecked();
|
|
});
|
|
|