feat: tests (chakra-ui#1442)

* chore: wip * docs: update types and storydocs * chore: wip * docs: update types and storydocs --------- Co-authored-by: cschroeter <[email protected]>
ryoid · Sep 20, 2023 · 1033e93 · 1033e93
1 parent 0171578
commit 1033e93
Show file tree

Hide file tree

Showing 78 changed files with 433 additions and 141 deletions.
diff --git a/packages/anatomy/src/toggle-group/index.ts b/packages/anatomy/src/toggle-group/index.ts
@@ -1,4 +1 @@
-import { createAnatomy } from '@zag-js/anatomy'
-
-// TODO replace with zagjs version
-export const anatomy = createAnatomy('toggle-group').parts('root', 'toggle')
+export { anatomy } from '@zag-js/toggle-group'
diff --git a/packages/frameworks/react/package.json b/packages/frameworks/react/package.json
@@ -90,6 +90,7 @@
  "eslint-plugin-react-hooks": "4.6.0",
  "globby": "13.2.2",
  "jsdom": "22.1.0",
+ "lucide-react": "0.279.0",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-frame-component": "5.2.6",

diff --git a/packages/frameworks/react/src/accordion/accordion.test.tsx b/packages/frameworks/react/src/accordion/accordion.test.tsx
@@ -107,7 +107,7 @@ describe('Accordion', () => {
 
  // TODO @segunadebayo
  it.skip('should render text direction based on dir prop', async () => {
- render(<ComponentUnderTest dir="ltr" />)
+ render(<ComponentUnderTest dir="rtl" />)
  expect(screen.getByRole('button', { name: 'React Trigger' })).toHaveAttribute('dir', 'rtl')
  })
 

diff --git a/packages/frameworks/react/src/avatar/avatar.test.tsx b/packages/frameworks/react/src/avatar/avatar.test.tsx
@@ -14,7 +14,7 @@ const ComponentUnderTest = (props: AvatarProps) => {
 
 describe('Avatar', () => {
  it.each(getParts(avatarAnatomy))('should render part %s', async (part) => {
- const { container } = render(<ComponentUnderTest />)
- expect(container.querySelector(part)).toBeInTheDocument()
+ render(<ComponentUnderTest />)
+ expect(document.querySelector(part)).toBeInTheDocument()
  })
 })
diff --git a/packages/frameworks/react/src/carousel/carousel.test.tsx b/packages/frameworks/react/src/carousel/carousel.test.tsx
@@ -52,9 +52,10 @@ const ComponentUnderTest = () => {
 
 describe('Carousel', () => {
  it.each(getParts(carouselAnatomy))('should render part %s', async (part) => {
- const { container } = render(<ComponentUnderTest />)
- expect(container.querySelector(part)).toBeInTheDocument()
+ render(<ComponentUnderTest />)
+ expect(document.querySelector(part)).toBeInTheDocument()
  })
+
  it('should have the correct disabled / enabled states for control buttons', async () => {
  render(<ComponentUnderTest />)
  const prevButton = screen.getByRole('button', { name: 'Previous Slide' })

diff --git a/packages/frameworks/react/src/checkbox/checkbox.test.tsx b/packages/frameworks/react/src/checkbox/checkbox.test.tsx
@@ -20,8 +20,8 @@ const ComponentUnderTest = (props: Omit<CheckboxProps, 'children'>) => (
 
 describe('Checkbox', () => {
  it.each(getParts(checkboxAnatomy))('should render part %s', async (part) => {
- const { container } = render(<ComponentUnderTest />)
- expect(container.querySelector(part)).toBeInTheDocument()
+ render(<ComponentUnderTest />)
+ expect(document.querySelector(part)).toBeInTheDocument()
  })
 
  it('should handle check and unchecked', async () => {

diff --git a/packages/frameworks/react/src/combobox/combobox.stories.tsx b/packages/frameworks/react/src/combobox/combobox.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta } from '@storybook/react'
-import { Portal } from '@zag-js/react'
+import { Portal } from '../'
 import { Combobox } from './'
 import './combobox.css'
 

diff --git a/packages/frameworks/react/src/combobox/combobox.test.tsx b/packages/frameworks/react/src/combobox/combobox.test.tsx
@@ -1,7 +1,9 @@
+import { comboboxAnatomy } from '@ark-ui/anatomy'
 import { render, screen, waitFor } from '@testing-library/react'
 import user from '@testing-library/user-event'
 import { vi } from 'vitest'
 import { Portal } from '..'
+import { getParts } from '../setup-test'
 import type { Optional } from '../types'
 import {
  Combobox,
@@ -61,8 +63,9 @@ const ComponentUnderTest = (props: Optional<ComboboxProps<Item>, 'items'>) => {
 }
 
 describe('Combobox', () => {
- it('should render', () => {
+ it.each(getParts(comboboxAnatomy))('should render part! %s', async (part) => {
  render(<ComponentUnderTest />)
+ expect(document.querySelector(part)).toBeInTheDocument()
  })
 
  it('should show options on click', async () => {

diff --git a/packages/frameworks/react/src/date-picker/date-picker.stories.tsx b/packages/frameworks/react/src/date-picker/date-picker.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta } from '@storybook/react'
-import { Portal } from '@zag-js/react'
+import { Portal } from '../'
 import {
  DatePicker,
  DatePickerClearTrigger,

diff --git a/packages/frameworks/react/src/dialog/dialog.stories.tsx b/packages/frameworks/react/src/dialog/dialog.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta } from '@storybook/react'
-import { Portal } from '@zag-js/react'
 import { useState } from 'react'
+import { Portal } from '../'
 import {
  Dialog,
  DialogBackdrop,

diff --git a/packages/frameworks/react/src/dialog/dialog.test.tsx b/packages/frameworks/react/src/dialog/dialog.test.tsx
@@ -1,7 +1,9 @@
+import { dialogAnatomy } from '@ark-ui/anatomy'
 import { render, screen } from '@testing-library/react'
 import user from '@testing-library/user-event'
-import { Portal } from '@zag-js/react'
 import { vi } from 'vitest'
+import { Portal } from '../'
+import { getParts } from '../setup-test'
 import {
  Dialog,
  DialogBackdrop,
@@ -34,8 +36,9 @@ const ComponentUnderTest = (props: DialogProps) => (
 )
 
 describe('Dialog', () => {
- it('should render', async () => {
- render(<ComponentUnderTest open />)
+ it.each(getParts(dialogAnatomy))('should render part! %s', async (part) => {
+ render(<ComponentUnderTest />)
+ expect(document.querySelector(part)).toBeInTheDocument()
  })
 
  it('should invoke onClose if dialog is closed', async () => {

diff --git a/packages/frameworks/react/src/hover-card/hover-card.stories.tsx b/packages/frameworks/react/src/hover-card/hover-card.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta } from '@storybook/react'
-import { Portal } from '@zag-js/react'
 import { useState } from 'react'
+import { Portal } from '../'
 import {
  HoverCard,
  HoverCardArrow,

diff --git a/packages/frameworks/react/src/hover-card/hover-card.test.tsx b/packages/frameworks/react/src/hover-card/hover-card.test.tsx
@@ -1,6 +1,6 @@
+import { hoverCardAnatomy } from '@ark-ui/anatomy'
 import { render, screen, waitFor } from '@testing-library/react'
 import user from '@testing-library/user-event'
-import { Portal } from '@zag-js/react'
 import { vi } from 'vitest'
 import {
  HoverCard,
@@ -11,6 +11,8 @@ import {
  HoverCardTrigger,
  type HoverCardProps,
 } from '.'
+import { Portal } from '../'
+import { getParts } from '../setup-test'
 
 const ComponentUnderTest = (props: HoverCardProps) => (
  <HoverCard openDelay={0} closeDelay={0} {...props}>
@@ -29,8 +31,9 @@ const ComponentUnderTest = (props: HoverCardProps) => (
 )
 
 describe('HoverCard', () => {
- it('should render', async () => {
+ it.each(getParts(hoverCardAnatomy))('should render part! %s', async (part) => {
  render(<ComponentUnderTest />)
+ expect(document.querySelector(part)).toBeInTheDocument()
  })
 
  it('should open on hover', async () => {

diff --git a/packages/frameworks/react/src/menu/menu.stories.tsx b/packages/frameworks/react/src/menu/menu.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta } from '@storybook/react'
-import { Portal } from '@zag-js/react'
 import { useState } from 'react'
+import { Portal } from '../'
 import {
  Menu,
  MenuContent,

diff --git a/packages/frameworks/react/src/menu/menu.test.tsx b/packages/frameworks/react/src/menu/menu.test.tsx
@@ -1,6 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import user from '@testing-library/user-event'
-import { Portal } from '@zag-js/react'
 import { useState } from 'react'
 import { vi } from 'vitest'
 import {
@@ -16,6 +15,7 @@ import {
  MenuTrigger,
  MenuTriggerItem,
 } from '.'
+import { Portal } from '../'
 
 describe('Menu', () => {
  it('should set correct aria attributes on disabled MenuItems', () => {

diff --git a/packages/frameworks/react/src/number-input/number-input.test.tsx b/packages/frameworks/react/src/number-input/number-input.test.tsx
@@ -1,19 +1,23 @@
+import { numberInputAnatomy } from '@ark-ui/anatomy'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import user from '@testing-library/user-event'
+import { getParts } from '../setup-test'
 import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrementTrigger,
  NumberInputIncrementTrigger,
  NumberInputInput,
  NumberInputLabel,
+ NumberInputScrubber,
  type NumberInputProps,
 } from './'
 
 const ComponentUnderTest = (props: NumberInputProps) => (
  <NumberInput {...props}>
  <NumberInputLabel>Label</NumberInputLabel>
  <NumberInputInput />
+ <NumberInputScrubber />
  <NumberInputControl>
  <NumberInputDecrementTrigger>-1</NumberInputDecrementTrigger>
  <NumberInputIncrementTrigger>+1</NumberInputIncrementTrigger>
@@ -22,11 +26,9 @@ const ComponentUnderTest = (props: NumberInputProps) => (
 )
 
 describe('NumberInput', () => {
- it('should render', () => {
+ it.each(getParts(numberInputAnatomy))('should render part! %s', async (part) => {
  render(<ComponentUnderTest />)
- expect(screen.getByText('Label')).toBeInTheDocument()
- expect(screen.getByText('-1')).toBeInTheDocument()
- expect(screen.getByText('+1')).toBeInTheDocument()
+ expect(document.querySelector(part)).toBeInTheDocument()
  })
 
  it('should handle wheel event when allowMouseWheel is true', async () => {

diff --git a/packages/frameworks/react/src/pagination/pagination.test.tsx b/packages/frameworks/react/src/pagination/pagination.test.tsx
@@ -1,43 +1,55 @@
+import { paginationAnatomy } from '@ark-ui/anatomy'
 import { render, screen } from '@testing-library/react'
 import user from '@testing-library/user-event'
 import {
  Pagination,
  PaginationEllipsis,
  PaginationList,
+ PaginationListItem,
  PaginationNextPageTrigger,
  PaginationPageTrigger,
  PaginationPrevPageTrigger,
  type PaginationProps,
 } from '.'
+import { getParts } from '../setup-test'
 
 const ComponentUnderTest = (props: Omit<PaginationProps, 'children'>) => (
  <Pagination {...props}>
  {({ pages }) => (
  <PaginationList>
- <PaginationPrevPageTrigger>
- Previous <span className="visually-hidden">Page</span>
- </PaginationPrevPageTrigger>
+ <PaginationListItem>
+ <PaginationPrevPageTrigger>
+ Previous <span className="visually-hidden">Page</span>
+ </PaginationPrevPageTrigger>
+ </PaginationListItem>
 
  {pages.map((page, index) =>
  page.type === 'page' ? (
- <PaginationPageTrigger key={index} {...page}>
- {page.value}
- </PaginationPageTrigger>
+ <PaginationListItem key={index}>
+ <PaginationPageTrigger {...page}>{page.value}</PaginationPageTrigger>
+ </PaginationListItem>
  ) : (
- <PaginationEllipsis key={index} index={index}>
- &#8230;
- </PaginationEllipsis>
+ <PaginationListItem key={index}>
+ <PaginationEllipsis index={index}>&#8230;</PaginationEllipsis>
+ </PaginationListItem>
  ),
  )}
- <PaginationNextPageTrigger>
- Next <span className="visually-hidden">Page</span>
- </PaginationNextPageTrigger>
+ <PaginationListItem>
+ <PaginationNextPageTrigger>
+ Next <span className="visually-hidden">Page</span>
+ </PaginationNextPageTrigger>
+ </PaginationListItem>
  </PaginationList>
  )}
  </Pagination>
 )
 
 describe('Pagination', () => {
+ it.each(getParts(paginationAnatomy))('should render part! %s', async (part) => {
+ render(<ComponentUnderTest count={100} pageSize={10} />)
+ expect(document.querySelector(part)).toBeInTheDocument()
+ })
+
  it('should update page when item is clicked', async () => {
  render(<ComponentUnderTest count={100} pageSize={10} />)
  const pageTwoLink = screen.getByLabelText('page 2')

diff --git a/packages/frameworks/react/src/pin-input/pin-input.test.tsx b/packages/frameworks/react/src/pin-input/pin-input.test.tsx
@@ -1,9 +1,11 @@
+import { pinInputAnatomy } from '@ark-ui/anatomy'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import user from '@testing-library/user-event'
 import { vi } from 'vitest'
+import { getParts } from '../setup-test'
 import { PinInput, PinInputControl, PinInputInput, PinInputLabel, type PinInputProps } from './'
 
-const Component = (props: PinInputProps) => (
+const ComponentUnderTest = (props: PinInputProps) => (
  <PinInput {...props}>
  <PinInputLabel>Label</PinInputLabel>
  <PinInputControl>
@@ -15,20 +17,25 @@ const Component = (props: PinInputProps) => (
 )
 
 describe('PinInput', () => {
+ it.each(getParts(pinInputAnatomy))('should render part! %s', async (part) => {
+ render(<ComponentUnderTest />)
+ expect(document.querySelector(part)).toBeInTheDocument()
+ })
+
  it('should have the proper aria labels', async () => {
- render(<Component />)
+ render(<ComponentUnderTest />)
  expect(screen.queryAllByLabelText('pin code 1 of 3')).toHaveLength(1)
  expect(screen.queryAllByLabelText('pin code 2 of 3')).toHaveLength(1)
  expect(screen.queryAllByLabelText('pin code 3 of 3')).toHaveLength(1)
  })
 
  it('should autofocus the first input', async () => {
- render(<Component autoFocus />)
+ render(<ComponentUnderTest autoFocus />)
  await waitFor(() => expect(screen.getByLabelText('pin code 1 of 3')).toHaveFocus())
  })
 
  it('should move focus to the next item when enter a value', async () => {
- render(<Component />)
+ render(<ComponentUnderTest />)
 
  await user.type(screen.getByLabelText('pin code 1 of 3'), '1')
  await waitFor(() => expect(screen.getByLabelText('pin code 2 of 3')).toHaveFocus())
@@ -38,7 +45,7 @@ describe('PinInput', () => {
  })
 
  it('should clear the previous input when pressing backspace', async () => {
- render(<Component />)
+ render(<ComponentUnderTest />)
 
  await user.type(screen.getByLabelText('pin code 1 of 3'), '1')
  await user.type(screen.getByLabelText('pin code 2 of 3'), '2')
@@ -53,7 +60,7 @@ describe('PinInput', () => {
 
  it('should invoke onComplete when all inputs are filled out', async () => {
  const onComplete = vi.fn()
- render(<Component onValueComplete={onComplete} />)
+ render(<ComponentUnderTest onValueComplete={onComplete} />)
 
  await user.type(screen.getByLabelText('pin code 1 of 3'), '1')
  await user.type(screen.getByLabelText('pin code 2 of 3'), '2')
@@ -65,7 +72,7 @@ describe('PinInput', () => {
  })
 
  it('should set one-time-code for autocomplete on fields', async () => {
- render(<Component otp />)
+ render(<ComponentUnderTest otp />)
 
  expect(screen.getByLabelText('pin code 1 of 3')).toHaveAttribute(
  'autocomplete',
@@ -83,7 +90,7 @@ describe('PinInput', () => {
 
  it('should replace last input calls onComplete correctly', async () => {
  const onComplete = vi.fn()
- render(<Component onValueComplete={onComplete} />)
+ render(<ComponentUnderTest onValueComplete={onComplete} />)
 
  const input1 = screen.getByLabelText('pin code 1 of 3')
  const input2 = screen.getByLabelText('pin code 2 of 3')

diff --git a/packages/frameworks/react/src/popover/index.ts b/packages/frameworks/react/src/popover/index.ts
@@ -6,6 +6,7 @@ import { PopoverCloseTrigger, type PopoverCloseTriggerProps } from './popover-cl
 import { PopoverContent, type PopoverContentProps } from './popover-content'
 import { usePopoverContext, type PopoverContext } from './popover-context'
 import { PopoverDescription, type PopoverDescriptionProps } from './popover-description'
+import { PopoverIndicator, type PopoverIndicatorProps } from './popover-indicator'
 import { PopoverPositioner, type PopoverPositionerProps } from './popover-positioner'
 import { PopoverTitle, type PopoverTitleProps } from './popover-title'
 import { PopoverTrigger, type PopoverTriggerProps } from './popover-trigger'
@@ -18,6 +19,7 @@ const Popover = Object.assign(PopoverRoot, {
  CloseTrigger: PopoverCloseTrigger,
  Content: PopoverContent,
  Description: PopoverDescription,
+ Indicator: PopoverIndicator,
  Positioner: PopoverPositioner,
  Title: PopoverTitle,
  Trigger: PopoverTrigger,
@@ -31,6 +33,7 @@ export {
  PopoverCloseTrigger,
  PopoverContent,
  PopoverDescription,
+ PopoverIndicator,
  PopoverPositioner,
  PopoverTitle,
  PopoverTrigger,
@@ -45,6 +48,7 @@ export type {
  PopoverContentProps,
  PopoverContext,
  PopoverDescriptionProps,
+ PopoverIndicatorProps,
  PopoverPositionerProps,
  PopoverProps,
  PopoverTitleProps,