-
-
Notifications
You must be signed in to change notification settings - Fork 212
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
636 additions
and
189 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import { render, fireEvent, screen } from "@testing-library/vue"; | ||
import { describe, expect, test } from "vitest"; | ||
import Switch1 from "./Switch1.vue"; | ||
|
||
describe("test switch functionalities", () => { | ||
test("thumb can render", async () => { | ||
render(Switch1); | ||
screen.getByTestId("thumb"); | ||
}); | ||
|
||
test("clicking thumb will toggle value", async () => { | ||
render(Switch1); | ||
const thumb = screen.getByTestId("thumb"); | ||
screen.getByText("unchecked"); | ||
|
||
await fireEvent.click(thumb); | ||
screen.getByText("checked"); | ||
|
||
await fireEvent.click(thumb); | ||
screen.getByText("unchecked"); | ||
}); | ||
|
||
test("keydown enter thumb will toggle value", async () => { | ||
const { container } = render(Switch1); | ||
screen.getByTestId("thumb"); | ||
const input = container.querySelector("input")!; | ||
screen.getByText("unchecked"); | ||
|
||
await fireEvent.keyDown(input, { key: "Enter" }); | ||
screen.getByText("checked"); | ||
|
||
await fireEvent.keyDown(input, { key: "Enter" }); | ||
screen.getByText("unchecked"); | ||
}); | ||
|
||
test("keydown space thumb will toggle value", async () => { | ||
const { container } = render(Switch1); | ||
screen.getByTestId("thumb"); | ||
const input = container.querySelector("input")!; | ||
screen.getByText("unchecked"); | ||
|
||
await fireEvent.keyDown(input, { keyCode: 32 }); | ||
screen.getByText("checked"); | ||
|
||
await fireEvent.keyDown(input, { keyCode: 32 }); | ||
screen.getByText("unchecked"); | ||
}); | ||
|
||
test("thumb has data state & reactive", async () => { | ||
const { container } = render(Switch1); | ||
const thumb = screen.getByTestId("thumb"); | ||
const input = container.querySelector("input")!; | ||
screen.getByText("unchecked"); | ||
|
||
await fireEvent.keyDown(input, { keyCode: 32 }); | ||
screen.getByText("checked"); | ||
expect(thumb.dataset.state).toBe("checked"); | ||
|
||
await fireEvent.keyDown(input, { keyCode: 32 }); | ||
screen.getByText("unchecked"); | ||
expect(thumb.dataset.state).toBe("unchecked"); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<script setup> | ||
import SwitchRoot from "../SwitchRoot.vue"; | ||
import SwitchThumb from "../SwitchThumb.vue"; | ||
import { ref } from "vue"; | ||
const checked = ref(false); | ||
</script> | ||
|
||
<template> | ||
<p>{{ checked ? "checked" : "unchecked" }}</p> | ||
<SwitchRoot v-model:open="checked" id="airplane-mode"> | ||
<SwitchThumb data-testId="thumb"></SwitchThumb> | ||
</SwitchRoot> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,202 @@ | ||
import * as Radix from "./index"; | ||
import { expect, it } from "vitest"; | ||
|
||
it("should expose the correct components", () => { | ||
expect(Object.keys(Radix)).toEqual([ | ||
// Accordion | ||
"AccordionContent", | ||
"AccordionHeader", | ||
"AccordionItem", | ||
"AccordionRoot", | ||
"AccordionTrigger", | ||
|
||
// Checkbox | ||
"CheckboxIndicator", | ||
"CheckboxRoot", | ||
|
||
// Collapsible | ||
"CollapsibleRoot", | ||
"CollapsibleTrigger", | ||
"CollapsibleContent", | ||
|
||
// Switch | ||
"SwitchRoot", | ||
"SwitchThumb", | ||
|
||
// Separator | ||
"Separator", | ||
|
||
// Label | ||
"Label", | ||
|
||
// Toggle | ||
"Toggle", | ||
|
||
// Toggle Group | ||
"ToggleGroupRoot", | ||
"ToggleGroupItem", | ||
|
||
// AspectRatio | ||
"AspectRatio", | ||
|
||
// Tabs | ||
"TabsRoot", | ||
"TabsList", | ||
"TabsContent", | ||
"TabsTrigger", | ||
|
||
// Slider | ||
"SliderRoot", | ||
"SliderThumb", | ||
"SliderTrack", | ||
"SliderRange", | ||
|
||
// Radio Group | ||
"RadioGroupRoot", | ||
"RadioGroupItem", | ||
"RadioGroupIndicator", | ||
|
||
// Progress | ||
"ProgressRoot", | ||
"ProgressIndicator", | ||
|
||
// Dialog | ||
"DialogRoot", | ||
"DialogTrigger", | ||
"DialogContent", | ||
"DialogClose", | ||
"DialogPortal", | ||
"DialogOverlay", | ||
"DialogTitle", | ||
"DialogDescription", | ||
|
||
// Alert Dialog | ||
"AlertDialogRoot", | ||
"AlertDialogTrigger", | ||
"AlertDialogContent", | ||
"AlertDialogCancel", | ||
"AlertDialogPortal", | ||
"AlertDialogOverlay", | ||
"AlertDialogTitle", | ||
"AlertDialogDescription", | ||
"AlertDialogAction", | ||
|
||
// Toolbar | ||
"ToolbarRoot", | ||
"ToolbarButton", | ||
"ToolbarLink", | ||
"ToolbarToggleGroup", | ||
"ToolbarToggleItem", | ||
"ToolbarSeparator", | ||
|
||
// Avatar | ||
"AvatarRoot", | ||
"AvatarImage", | ||
"AvatarFallback", | ||
|
||
// Tooltip | ||
"TooltipArrow", | ||
"TooltipContent", | ||
"TooltipPortal", | ||
"TooltipRoot", | ||
"TooltipTrigger", | ||
|
||
// Hover Card | ||
"HoverCardArrow", | ||
"HoverCardContent", | ||
"HoverCardPortal", | ||
"HoverCardRoot", | ||
"HoverCardTrigger", | ||
|
||
// Popover | ||
"PopoverRoot", | ||
"PopoverTrigger", | ||
"PopoverPortal", | ||
"PopoverContent", | ||
"PopoverArrow", | ||
"PopoverClose", | ||
|
||
// Dropdown Menu | ||
"DropdownMenuArrow", | ||
"DropdownMenuContent", | ||
"DropdownMenuGroup", | ||
"DropdownMenuItem", | ||
"DropdownMenuPortal", | ||
"DropdownMenuRoot", | ||
"DropdownMenuSeparator", | ||
"DropdownMenuTrigger", | ||
"DropdownMenuCheckboxItem", | ||
"DropdownMenuItemIndicator", | ||
"DropdownMenuLabel", | ||
"DropdownMenuRadioGroup", | ||
"DropdownMenuRadioItem", | ||
"DropdownMenuSub", | ||
"DropdownMenuSubContent", | ||
"DropdownMenuSubTrigger", | ||
|
||
// Context Menu | ||
"ContextMenuArrow", | ||
"ContextMenuContent", | ||
"ContextMenuGroup", | ||
"ContextMenuItem", | ||
"ContextMenuPortal", | ||
"ContextMenuRoot", | ||
"ContextMenuSeparator", | ||
"ContextMenuTrigger", | ||
"ContextMenuCheckboxItem", | ||
"ContextMenuItemIndicator", | ||
"ContextMenuLabel", | ||
"ContextMenuRadioGroup", | ||
"ContextMenuRadioItem", | ||
"ContextMenuSub", | ||
"ContextMenuSubContent", | ||
"ContextMenuSubTrigger", | ||
|
||
// Select | ||
"SelectArrow", | ||
"SelectContent", | ||
"SelectPortal", | ||
"SelectRoot", | ||
"SelectSeparator", | ||
"SelectTrigger", | ||
"SelectItemIndicator", | ||
"SelectLabel", | ||
"SelectGroup", | ||
"SelectItem", | ||
|
||
// Menubar | ||
"MenubarArrow", | ||
"MenubarContent", | ||
"MenubarGroup", | ||
"MenubarItem", | ||
"MenubarPortal", | ||
"MenubarRoot", | ||
"MenubarSeparator", | ||
"MenubarTrigger", | ||
"MenubarCheckboxItem", | ||
"MenubarItemIndicator", | ||
"MenubarLabel", | ||
"MenubarRadioGroup", | ||
"MenubarRadioItem", | ||
"MenubarSub", | ||
"MenubarSubContent", | ||
"MenubarSubTrigger", | ||
"MenubarMenu", | ||
|
||
// Navigation Menu | ||
"NavigationMenuLink", | ||
"NavigationMenuIndicator", | ||
"NavigationMenuContent", | ||
"NavigationMenuItem", | ||
"NavigationMenuList", | ||
"NavigationMenuRoot", | ||
"NavigationMenuTrigger", | ||
"NavigationMenuViewport", | ||
|
||
// Scroll Area | ||
"ScrollAreaRoot", | ||
"ScrollAreaViewport", | ||
"ScrollAreaScrollbar", | ||
"ScrollAreaThumb", | ||
]); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
{ | ||
"files": [], | ||
"extends": ["./tsconfig.app.json"] | ||
"extends": ["./tsconfig.app.json"], | ||
} |
Oops, something went wrong.