Fix cmd menu tests (#1739)
* - fix tests * - fixed header * - lint - fixed catalog menuitemcommand * - fix prop destructuring in test * - combine single/multiple create and goto commands
This commit is contained in:
@ -42,7 +42,7 @@ export const CommandMenu = () => {
|
||||
openCommandMenu();
|
||||
},
|
||||
AppHotkeyScope.CommandMenu,
|
||||
[openCommandMenu],
|
||||
[openCommandMenu, setSearch],
|
||||
);
|
||||
|
||||
const { data: peopleData } = useSearchPeopleQuery({
|
||||
@ -133,29 +133,27 @@ export const CommandMenu = () => {
|
||||
<StyledList>
|
||||
<StyledEmpty>No results found.</StyledEmpty>
|
||||
<CommandGroup heading="Create">
|
||||
{matchingCreateCommand.length === 1 &&
|
||||
matchingCreateCommand.map((cmd) => (
|
||||
<CommandMenuItem
|
||||
to={cmd.to}
|
||||
key={cmd.label}
|
||||
Icon={cmd.Icon}
|
||||
label={cmd.label}
|
||||
onClick={cmd.onCommandClick}
|
||||
shortcuts={cmd.shortcuts || []}
|
||||
/>
|
||||
))}
|
||||
{matchingCreateCommand.map((cmd) => (
|
||||
<CommandMenuItem
|
||||
to={cmd.to}
|
||||
key={cmd.label}
|
||||
Icon={cmd.Icon}
|
||||
label={cmd.label}
|
||||
onClick={cmd.onCommandClick}
|
||||
shortcuts={cmd.shortcuts || []}
|
||||
/>
|
||||
))}
|
||||
</CommandGroup>
|
||||
<CommandGroup heading="Navigate">
|
||||
{matchingNavigateCommand.length === 1 &&
|
||||
matchingNavigateCommand.map((cmd) => (
|
||||
<CommandMenuItem
|
||||
to={cmd.to}
|
||||
key={cmd.label}
|
||||
label={cmd.label}
|
||||
onClick={cmd.onCommandClick}
|
||||
shortcuts={cmd.shortcuts || []}
|
||||
/>
|
||||
))}
|
||||
{matchingNavigateCommand.map((cmd) => (
|
||||
<CommandMenuItem
|
||||
to={cmd.to}
|
||||
key={cmd.label}
|
||||
label={cmd.label}
|
||||
onClick={cmd.onCommandClick}
|
||||
shortcuts={cmd.shortcuts || []}
|
||||
/>
|
||||
))}
|
||||
</CommandGroup>
|
||||
<CommandGroup heading="People">
|
||||
{people.map((person) => (
|
||||
|
||||
@ -12,6 +12,8 @@ import { sleep } from '~/testing/sleep';
|
||||
|
||||
import { CommandMenu } from '../CommandMenu';
|
||||
|
||||
const openTimeout = 50;
|
||||
|
||||
const meta: Meta<typeof CommandMenu> = {
|
||||
title: 'Modules/CommandMenu/CommandMenu',
|
||||
component: CommandMenu,
|
||||
@ -70,7 +72,7 @@ export const MatchingPersonCompanyActivityCreateNavigate: Story = {
|
||||
play: async () => {
|
||||
const canvas = within(document.body);
|
||||
const searchInput = await canvas.findByPlaceholderText('Search');
|
||||
await sleep(10);
|
||||
await sleep(openTimeout);
|
||||
await userEvent.type(searchInput, 'n');
|
||||
expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
|
||||
expect(await canvas.findByText('Airbnb')).toBeInTheDocument();
|
||||
@ -84,7 +86,7 @@ export const OnlyMatchingCreateAndNavigate: Story = {
|
||||
play: async () => {
|
||||
const canvas = within(document.body);
|
||||
const searchInput = await canvas.findByPlaceholderText('Search');
|
||||
await sleep(10);
|
||||
await sleep(openTimeout);
|
||||
await userEvent.type(searchInput, 'ta');
|
||||
expect(await canvas.findByText('Create Task')).toBeInTheDocument();
|
||||
expect(await canvas.findByText('Go to Tasks')).toBeInTheDocument();
|
||||
@ -95,7 +97,7 @@ export const AtleastMatchingOnePerson: Story = {
|
||||
play: async () => {
|
||||
const canvas = within(document.body);
|
||||
const searchInput = await canvas.findByPlaceholderText('Search');
|
||||
await sleep(10);
|
||||
await sleep(openTimeout);
|
||||
await userEvent.type(searchInput, 'alex');
|
||||
expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
|
||||
},
|
||||
@ -105,7 +107,7 @@ export const NotMatchingAnything: Story = {
|
||||
play: async () => {
|
||||
const canvas = within(document.body);
|
||||
const searchInput = await canvas.findByPlaceholderText('Search');
|
||||
await sleep(10);
|
||||
await sleep(openTimeout);
|
||||
await userEvent.type(searchInput, 'asdasdasd');
|
||||
expect(await canvas.findByText('No results found.')).toBeInTheDocument();
|
||||
},
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { Command } from 'cmdk';
|
||||
|
||||
import { IconBell } from '@/ui/icon';
|
||||
import {
|
||||
@ -24,6 +25,17 @@ export const Default: Story = {
|
||||
text: 'First option',
|
||||
command: '⌘ 1',
|
||||
},
|
||||
render: (props) => (
|
||||
<Command>
|
||||
<MenuItemCommand
|
||||
LeftIcon={props.LeftIcon}
|
||||
text={props.text}
|
||||
command={props.text}
|
||||
className={props.className}
|
||||
onClick={props.onClick}
|
||||
></MenuItemCommand>
|
||||
</Command>
|
||||
),
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
@ -74,5 +86,16 @@ export const Catalog: Story = {
|
||||
} as CatalogOptions,
|
||||
},
|
||||
},
|
||||
render: (props) => (
|
||||
<Command>
|
||||
<MenuItemCommand
|
||||
LeftIcon={props.LeftIcon}
|
||||
text={props.text}
|
||||
command={props.text}
|
||||
className={props.className}
|
||||
onClick={props.onClick}
|
||||
></MenuItemCommand>
|
||||
</Command>
|
||||
),
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
|
||||
import { IconSearch, IconSettings } from '@/ui/icon';
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
|
||||
import { DoubleTextChipDisplay } from '@/ui/content-display/components/DoubleTextChipDisplay';
|
||||
import { ViewFieldDoubleTextChipMetadata } from '@/ui/editable-field/types/ViewField';
|
||||
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
|
||||
|
||||
Reference in New Issue
Block a user