superset-frontend/src/components/DropdownSelectableIcon/DropdownSelectableIcon.test.tsx
/**
* 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 { render, screen, waitFor } from 'spec/helpers/testing-library';
import Icons from 'src/components/Icons';
import userEvent from '@testing-library/user-event';
import DropdownSelectableIcon, { DropDownSelectableProps } from '.';
const mockedProps = {
menuItems: [
{
key: 'vertical',
label: 'vertical',
},
{
key: 'horizontal',
label: 'horizontal',
},
],
selectedKeys: [],
icon: <Icons.Gear name="gear" />,
};
const asyncRender = (props: DropDownSelectableProps) =>
waitFor(() => render(<DropdownSelectableIcon {...props} />));
const openMenu = () => {
userEvent.click(screen.getByRole('img', { name: 'gear' }));
};
test('should render', async () => {
const { container } = await asyncRender(mockedProps);
expect(container).toBeInTheDocument();
});
test('should render the icon', async () => {
await asyncRender(mockedProps);
expect(screen.getByRole('img', { name: 'gear' })).toBeInTheDocument();
});
test('should not render the info', async () => {
await asyncRender(mockedProps);
openMenu();
expect(
screen.queryByTestId('dropdown-selectable-info'),
).not.toBeInTheDocument();
});
test('should render the info', async () => {
const infoProps = {
...mockedProps,
info: 'Test',
};
await asyncRender(infoProps);
openMenu();
expect(screen.getByTestId('dropdown-selectable-info')).toBeInTheDocument();
expect(screen.getByText('Test')).toBeInTheDocument();
});
test('should render the menu items', async () => {
await asyncRender(mockedProps);
openMenu();
expect(screen.getAllByRole('menuitem')).toHaveLength(2);
expect(screen.getByText('vertical')).toBeInTheDocument();
expect(screen.getByText('horizontal')).toBeInTheDocument();
});
test('should not render any selected menu item', async () => {
await asyncRender(mockedProps);
openMenu();
expect(screen.getAllByRole('menuitem')).toHaveLength(2);
expect(screen.queryByRole('img', { name: 'check' })).not.toBeInTheDocument();
});
test('should render the selected menu items', async () => {
const selectedProps = {
...mockedProps,
selectedKeys: ['vertical'],
};
await asyncRender(selectedProps);
openMenu();
expect(screen.getByRole('img', { name: 'check' })).toBeInTheDocument();
});