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:
brendanlaschke
2023-09-27 15:19:33 +02:00
committed by GitHub
parent a4cde44b13
commit 9282885233
5 changed files with 49 additions and 28 deletions

View File

@ -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) => (

View File

@ -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();
},

View File

@ -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],
};

View File

@ -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';

View File

@ -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';