mirror of https://github.com/apache/superset.git
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:
parent
dcb9f7cff1
commit
6c06866583
|
@ -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,
|
||||
},
|
||||
},
|
||||
};
|
|
@ -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);
|
||||
});
|
|
@ -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;
|
Loading…
Reference in New Issue