38 lines
3.0 KiB
TypeScript
38 lines
3.0 KiB
TypeScript
import { useState } from "react"
|
|
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { Checkbox, Progress, ToggleGroup, ToggleGroupItem, Combobox, DatePicker, FilterBarSearch, Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from "@hm-design/ui"
|
|
|
|
const meta = { title: "Verification/Publisher Regression", tags: ["verification"], parameters: { layout: "padded" } } satisfies Meta
|
|
export default meta
|
|
function Consumers() {
|
|
const [checked, setChecked] = useState(false)
|
|
const [query, setQuery] = useState("Editable")
|
|
return <div className="grid max-w-2xl gap-4">
|
|
<Checkbox asChild checked={checked} onCheckedChange={value => setChecked(value === true)} aria-label="Consumer checkbox"><button id="consumer-checkbox"><span data-consumer-child>Consumer child</span></button></Checkbox>
|
|
<Progress asChild value={35} aria-label="Consumer progress"><section id="consumer-progress"><span data-consumer-child>Consumer progress</span></section></Progress>
|
|
<ToggleGroup type="multiple" spacing={3} style={{ color: "var(--hm-sem-fg-primary)" }} aria-label="Spacing merge"><ToggleGroupItem value="one">One</ToggleGroupItem><ToggleGroupItem value="two">Two</ToggleGroupItem></ToggleGroup>
|
|
<Combobox aria-label="Department" options={[{ value: "design", label: "Design" }]} />
|
|
<Combobox aria-label="Owner" options={[{ value: "hm", label: "Hanmac" }]} />
|
|
<DatePicker aria-label="Start date" /><DatePicker aria-label="End date" />
|
|
<FilterBarSearch value="Read only" readOnly onValueChange={() => { throw Error("readOnly mutated") }} />
|
|
<FilterBarSearch value="Disabled" disabled onValueChange={() => { throw Error("disabled mutated") }} />
|
|
<FilterBarSearch value={query} onValueChange={setQuery} />
|
|
<Menubar><MenubarMenu><MenubarTrigger>File regression</MenubarTrigger><MenubarContent><MenubarItem>New regression</MenubarItem></MenubarContent></MenubarMenu><MenubarMenu><MenubarTrigger>Edit regression</MenubarTrigger><MenubarContent><MenubarItem>Undo regression</MenubarItem></MenubarContent></MenubarMenu></Menubar>
|
|
</div>
|
|
}
|
|
export const ConsumersRegression: StoryObj<typeof meta> = {
|
|
render: () => <Consumers />,
|
|
play: async ({ canvasElement }) => {
|
|
const doc = canvasElement.ownerDocument
|
|
const key = (target: HTMLElement, value: string) => { target.focus(); target.dispatchEvent(new KeyboardEvent("keydown", { key: value, bubbles: true })) }
|
|
const settle = () => new Promise(resolve => setTimeout(resolve, 160))
|
|
key(canvasElement.querySelector<HTMLElement>('[data-slot="menubar-trigger"]')!, "ArrowDown")
|
|
await settle()
|
|
key(doc.querySelector<HTMLElement>('[data-slot="menubar-item"]')!, "ArrowRight")
|
|
await settle()
|
|
const edit = canvasElement.querySelectorAll<HTMLElement>('[data-slot="menubar-trigger"]')[1]
|
|
if (edit.getAttribute("aria-expanded") !== "true" || !doc.querySelector('[data-slot="menubar-content"]')?.textContent?.includes("Undo regression")) throw Error("Menubar switch closed the next popup")
|
|
key(doc.querySelector<HTMLElement>('[data-slot="menubar-item"]')!, "Escape")
|
|
},
|
|
}
|