Merge pull request #15 from glassonion1/feature/as_to_aschild

Improve unit tests

examples/package.json

@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sakura-ui/core": "^0.3.0-beta.1",
+    "@sakura-ui/core": "^0.3.0",
     "@sakura-ui/forms": "^0.2.1",
     "@sakura-ui/tailwind-theme-plugin": "^0.2.1",
     "clsx": "^2.1.0",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.3.0-beta.1",
+  "version": "0.3.0",
   "description": "",
   "keywords": [
     "react",

packages/core/src/index.ts

@@ -35,7 +35,8 @@ export {
   LangSelector,
   NavigationItem,
   PopoverMenu,
-  PopoverMenuItem
+  PopoverMenuItem,
+  Slot
 } from './components'
 
 export type {

packages/core/tests/Button.test.tsx

@@ -4,27 +4,30 @@ import { render, screen } from '@testing-library/react'
 
 import { Button } from '../src'
 
-describe('should labeled text from Button', () => {
-  test('text', async () => {
-    render(<Button>Button</Button>)
-
-    const text = screen.getByText(/Button/)
-    expect(text).toBeInTheDocument()
-  })
-  test('as button', async () => {
+describe('given a Button with Slot', () => {
+  test('without asChild', async () => {
     render(<Button>Button</Button>)
 
     const button = screen.getByRole('button')
     expect(button).toBeInTheDocument()
   })
-  test('as link', async () => {
+  test('with asChild', async () => {
     render(
-      <Button as="a" href="https://example.com">
-        Button
+      <Button asChild>
+        <a href="https://example.com">Button</a>
       </Button>
     )
 
     const button = screen.getByRole('link')
     expect(button).toBeInTheDocument()
   })
 })
+
+describe('should labeled text from Button', () => {
+  test('text', async () => {
+    render(<Button>button</Button>)
+
+    const text = screen.getByText(/button/)
+    expect(text).toBeInTheDocument()
+  })
+})

packages/core/tests/IconButton.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { IconButton } from '../src'
+
+describe('given a IconButton with Slot', () => {
+  describe('without asChild', () => {
+    it('should render a button with icon', async () => {
+      render(<IconButton icon="home">Button with icon</IconButton>)
+
+      const button = screen.getByRole('button')
+      expect(button).toBeInTheDocument()
+
+      const text = screen.getByText(/home/)
+      expect(text).toBeInTheDocument()
+    })
+  })
+
+  describe('with asChild', () => {
+    it('should render a link with icon', async () => {
+      render(
+        <IconButton icon="home" asChild>
+          <a href="https://googl.com">Button with icon</a>
+        </IconButton>
+      )
+
+      const button = screen.getByRole('link')
+      expect(button).toBeInTheDocument()
+
+      const text = screen.getByText(/home/)
+      expect(text).toBeInTheDocument()
+    })
+  })
+})
+
+describe('given a IconButton', () => {
+  it('should aria-hidden true', async () => {
+    render(<IconButton icon="home">button</IconButton>)
+
+    const text = screen.getByText(/home/)
+    expect(text).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('should aria-hidden false', async () => {
+    render(<IconButton icon="home" />)
+
+    const text = screen.getByText(/home/)
+    expect(text).toHaveAttribute('aria-hidden', 'false')
+  })
+})

packages/core/tests/Slot.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { describe, beforeEach, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+
+import { Slot } from '../src'
+
+type TriggerProps = React.ComponentProps<'button'> & { as: React.ElementType }
+
+const Trigger = ({ as: Comp = 'button', ...props }: TriggerProps) => (
+  <Comp {...props} />
+)
+
+describe('given a slotted Trigger', () => {
+  describe('with onClick on itself', () => {
+    const handleClick = vi.fn()
+
+    beforeEach(() => {
+      handleClick.mockReset()
+      render(
+        <Trigger as={Slot} onClick={handleClick}>
+          <button type="button">Click me</button>
+        </Trigger>
+      )
+      fireEvent.click(screen.getByRole('button'))
+    })
+
+    it('should call the onClick passed to the Trigger', async () => {
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('with onClick on the child', () => {
+    const handleClick = vi.fn()
+
+    beforeEach(() => {
+      handleClick.mockReset()
+      render(
+        <Trigger as={Slot}>
+          <button type="button" onClick={handleClick}>
+            Click me
+          </button>
+        </Trigger>
+      )
+      fireEvent.click(screen.getByRole('button'))
+    })
+
+    it("should call the child's onClick", async () => {
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('with onClick on itself AND the child', () => {
+    const handleTriggerClick = vi.fn()
+    const handleChildClick = vi.fn()
+
+    beforeEach(() => {
+      handleTriggerClick.mockReset()
+      handleChildClick.mockReset()
+      render(
+        <Trigger as={Slot} onClick={handleTriggerClick}>
+          <button type="button" onClick={handleChildClick}>
+            Click me
+          </button>
+        </Trigger>
+      )
+      fireEvent.click(screen.getByRole('button'))
+    })
+
+    it("should not call the Trigger's onClick", async () => {
+      expect(handleTriggerClick).not.toHaveBeenCalledTimes(1)
+    })
+
+    it("should call the child's onClick", async () => {
+      expect(handleChildClick).toHaveBeenCalledTimes(1)
+    })
+  })
+})