test: Tests and Storybook entry for the IndeterminateCheckbox Component (#13502)

* Add tests for IndeterminateCheckbox

* Add storybook entry

* Fix linting issue

* Remove mocked icon

* Add jest.fn to mockedProps
This commit is contained in:
Geido 2021-04-07 23:34:19 +03:00 committed by GitHub
parent dcb9f7cff1
commit 6c06866583
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 128 additions and 1 deletions

View File

@ -0,0 +1,45 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import IndeterminateCheckbox, { IndeterminateCheckboxProps } from '.';
export default {
title: 'IndeterminateCheckbox',
component: IndeterminateCheckbox,
};
export const InteractiveIndeterminateCheckbox = (
args: IndeterminateCheckboxProps,
) => <IndeterminateCheckbox {...args} />;
InteractiveIndeterminateCheckbox.args = {
checked: false,
id: 'checkbox-id',
indeterminate: false,
title: 'Checkbox title',
onChange: () => null,
};
InteractiveIndeterminateCheckbox.story = {
parameters: {
knobs: {
disable: true,
},
},
};

View File

@ -0,0 +1,82 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import IndeterminateCheckbox from '.';
const mockedProps = {
checked: false,
id: 'checkbox-id',
indeterminate: false,
title: 'Checkbox title',
onChange: jest.fn(),
};
test('should render', () => {
const { container } = render(<IndeterminateCheckbox {...mockedProps} />);
expect(container).toBeInTheDocument();
});
test('should render the label', () => {
render(<IndeterminateCheckbox {...mockedProps} />);
expect(screen.getByTitle('Checkbox title')).toBeInTheDocument();
});
test('should render the checkbox', () => {
render(<IndeterminateCheckbox {...mockedProps} />);
expect(screen.getByRole('checkbox')).toBeInTheDocument();
});
test('should render the checkbox-half icon', () => {
const indeterminateProps = {
...mockedProps,
indeterminate: true,
};
render(<IndeterminateCheckbox {...indeterminateProps} />);
expect(screen.getByRole('img')).toBeInTheDocument();
expect(screen.getByRole('img')).toHaveAttribute(
'aria-label',
'checkbox-half',
);
});
test('should render the checkbox-off icon', () => {
render(<IndeterminateCheckbox {...mockedProps} />);
expect(screen.getByRole('img')).toBeInTheDocument();
expect(screen.getByRole('img')).toHaveAttribute('aria-label', 'checkbox-off');
});
test('should render the checkbox-on icon', () => {
const checkboxOnProps = {
...mockedProps,
checked: true,
};
render(<IndeterminateCheckbox {...checkboxOnProps} />);
expect(screen.getByRole('img')).toBeInTheDocument();
expect(screen.getByRole('img')).toHaveAttribute('aria-label', 'checkbox-on');
});
test('should call the onChange', () => {
render(<IndeterminateCheckbox {...mockedProps} />);
const label = screen.getByTitle('Checkbox title');
userEvent.click(label);
expect(mockedProps.onChange).toHaveBeenCalledTimes(1);
});

View File

@ -20,7 +20,7 @@ import React from 'react';
import { styled } from '@superset-ui/core';
import Icon from 'src/components/Icon';
interface IndeterminateCheckboxProps {
export interface IndeterminateCheckboxProps {
indeterminate: boolean;
id: string;
checked: boolean;