mirror of
https://github.com/apache/superset.git
synced 2024-09-16 10:39:55 -04:00
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 { styled } from '@superset-ui/core';
|
||||||
import Icon from 'src/components/Icon';
|
import Icon from 'src/components/Icon';
|
||||||
|
|
||||||
interface IndeterminateCheckboxProps {
|
export interface IndeterminateCheckboxProps {
|
||||||
indeterminate: boolean;
|
indeterminate: boolean;
|
||||||
id: string;
|
id: string;
|
||||||
checked: boolean;
|
checked: boolean;
|
Loading…
Reference in New Issue
Block a user