Skip to content

Commit

Permalink
fix(combobox): remove escape test
Browse files Browse the repository at this point in the history
  • Loading branch information
@maiieul
maiieul committed Jan 15, 2024
1 parent de63afc commit e79b9b6
Showing 1 changed file with 71 additions and 83 deletions.
154 changes: 71 additions & 83 deletions packages/kit-headless/src/components/combobox/combobox.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,37 @@ import {
ComboboxLabel,
ComboboxListbox,
ComboboxOption,
ComboboxPopover,
ComboboxTrigger,
ResolvedOption,
} from './index';

import './combobox-test.css';
import createFakeFruitsList from './combobox.faketory';

type StringCombobox = {
defaultLabel?: string;
};
const StringCombobox = component$(
({ defaultLabel, ...props }: { defaultLabel?: string }) => {
const fruits = createFakeFruitsList();

const StringCombobox = component$(({ defaultLabel, ...props }: StringCombobox) => {
const fruits = createFakeFruitsList();

return (
<>
return (
<Combobox
class="w-fit"
options={fruits}
defaultLabel={defaultLabel && defaultLabel}
defaultLabel={defaultLabel}
filter$={(value: string, options) =>
options.filter(({ option }) => {
return option.toLowerCase().includes(value.toLowerCase());
return option.toLowerCase().startsWith(value.toLowerCase());
})
}
{...props}
>
<ComboboxLabel>Fruits</ComboboxLabel>
<ComboboxControl style={{ display: 'flex' }}>
<ComboboxInput />
<ComboboxTrigger data-testid="trigger">
<ComboboxLabel class=" font-semibold">Fruits 🍓</ComboboxLabel>
<ComboboxControl class="relative flex items-center rounded-sm border">
<ComboboxInput
class="px-d2 bg-background placeholder:text-muted-foreground w-44 rounded-sm px-2 pr-6"
placeholder="Papaya"
/>
<ComboboxTrigger class="group absolute right-0 h-6 w-6">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
Expand All @@ -49,23 +50,25 @@ const StringCombobox = component$(({ defaultLabel, ...props }: StringCombobox) =
</svg>
</ComboboxTrigger>
</ComboboxControl>
<ComboboxListbox
style={{ width: 'fit-content' }}
optionRenderer$={(resolved: ResolvedOption, index: number) => (
<ComboboxOption
key={resolved.key}
class="group rounded-sm border-2 border-transparent px-2 hover:bg-[#496080] aria-selected:border-[#abbbce] aria-selected:bg-[#496080]"
index={index}
resolved={resolved}
>
{resolved.label}
</ComboboxOption>
)}
/>
<ComboboxPopover gutter={8} hide="escaped">
<ComboboxListbox
class="w-44 rounded-sm border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
optionRenderer$={(option: ResolvedOption, index: number) => (
<ComboboxOption
key={option.key}
class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
index={index}
resolved={option}
>
{option.label}
</ComboboxOption>
)}
/>
</ComboboxPopover>
</Combobox>
</>
);
});
);
},
);

describe('Critical Functionality', () => {
it('INIT', () => {
Expand Down Expand Up @@ -214,7 +217,7 @@ describe('Default Label', () => {
WHEN there is a default label and it exactly matches an option label
THEN it should display the default label within the input AND the listbox should be closed.
`, () => {
cy.mount(<StringCombobox defaultLabel="Apple" />);
cy.mount(<StringCombobox defaultLabel={'Apple'} />);

cy.get('input').should('have.value', 'Apple');

Expand All @@ -234,20 +237,6 @@ describe('Default Label', () => {
});

describe('Keyboard Navigation', () => {
it(`GIVEN a Combobox component with an open listbox
WHEN the user presses the 'Escape' key,
THEN the listbox should close`, () => {
cy.mount(<StringCombobox />);

cy.findByTestId('trigger').click();

cy.findByRole('listbox');

cy.get('body').type(`{esc}`);

cy.findByRole('listbox').should('not.exist');
});

it(`GIVEN a Combobox component with an input,
WHEN the user hits the downarrow to open the listbox, then the home key,
THEN the first enabled option in the listbox should be selected.`, () => {
Expand Down Expand Up @@ -387,51 +376,50 @@ const DisabledCombobox = component$(() => {
];

return (
<>
<Combobox
options={objectExample}
filter$={(value: string, options) =>
options.filter(({ option }) => {
return option.testLabel.toLowerCase().includes(value.toLowerCase());
})
}
optionLabelKey="testLabel"
optionValueKey="testValue"
optionDisabledKey="disabled"
>
<ComboboxLabel>Fruits</ComboboxLabel>
<ComboboxControl style={{ display: 'flex' }}>
<ComboboxInput />
<ComboboxTrigger data-testid="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="20px"
style="stroke: black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</ComboboxTrigger>
</ComboboxControl>
<Combobox
options={objectExample}
filter$={(value: string, options) =>
options.filter(({ option }) => {
return option.testLabel.toLowerCase().includes(value.toLowerCase());
})
}
optionLabelKey="testLabel"
optionValueKey="testValue"
optionDisabledKey="disabled"
>
<ComboboxLabel>Fruits</ComboboxLabel>
<ComboboxControl style={{ display: 'flex' }}>
<ComboboxInput />
<ComboboxTrigger data-testid="trigger">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="20px"
style="stroke: black"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</ComboboxTrigger>
</ComboboxControl>
<ComboboxPopover flip={true} gutter={8}>
<ComboboxListbox
style={{ width: 'fit-content' }}
optionRenderer$={(resolved: ResolvedOption, index: number) => (
class="w-44 rounded-sm border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
optionRenderer$={(option: ResolvedOption, index: number) => (
<ComboboxOption
key={resolved.key}
class="group rounded-sm border-2 border-transparent px-2 hover:bg-[#496080] aria-selected:border-[#abbbce] aria-selected:bg-[#496080]"
key={option.key}
class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
index={index}
resolved={resolved}
style={{ color: resolved.disabled ? 'gray' : undefined }}
resolved={option}
>
{resolved.label}
{option.label}
</ComboboxOption>
)}
/>
</Combobox>
</>
</ComboboxPopover>
</Combobox>
);
});

Expand Down

0 comments on commit e79b9b6

Please # to comment.