agroptima-design-system 0.32.3-beta.0 → 0.32.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.32.3-beta.0",
+  "version": "0.32.3",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Select/SelectTrigger.tsx

@@ -59,7 +59,7 @@ export function SelectTrigger({
         size="3"
         icon="Close"
         className="clear-button"
-        accessibilityLabel="close"
+        accessibilityLabel="clear"
         onClick={handleClear}
         visible={!isEmpty}
       />

package/src/stories/Changelog.mdx

@@ -4,6 +4,11 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.32.3
+
+* Fix send form when click on deselect button in Select component
+
+
 ## 0.32.2
 
 * Fix disabled color input 

package/tests/Multiselect.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { Multiselect } from '../src/atoms/Multiselect'
-import type { Option } from '../src/atoms/Select'
+import { type Option, Select } from '../src/atoms/Select'
 
 const zelda = {
   id: '1',
@@ -112,7 +112,7 @@ describe('Multiselect', () => {
       />,
     )
 
-    await user.click(screen.getByRole('button', { name: /close/i }))
+    await user.click(screen.getByRole('button', { name: /clear/i }))
 
     expect(getByText(placeholder)).toBeInTheDocument()
     expect(mockChange).toHaveBeenCalledWith([])
@@ -143,4 +143,46 @@ describe('Multiselect', () => {
     expect(queryByText('Spyro the Dragon')).not.toBeInTheDocument()
     expect(queryByText('Halo')).not.toBeInTheDocument()
   })
+
+  it('deselects when click on deselect button', async () => {
+    const user = userEvent.setup()
+    const placeholder = 'Select your favourite gaming system...'
+    const handleSubmit = jest.fn()
+
+    render(
+      <form onSubmit={handleSubmit}>
+        <Multiselect
+          label="Videogames"
+          name="select-videogames"
+          placeholder="Select your favourite gaming system..."
+          defaultValue={[zelda.id]}
+          options={OPTIONS}
+        />
+      </form>,
+    )
+
+    await user.click(screen.getByLabelText(/clear/i))
+
+    expect(screen.getByLabelText('Videogames')).toHaveTextContent(placeholder)
+    expect(handleSubmit).toHaveBeenCalledTimes(0)
+  })
+
+  it('disables deselect button when is disabled', async () => {
+    const user = userEvent.setup()
+    render(
+      <Multiselect
+        disabled
+        label="Videogames"
+        name="select-videogames"
+        defaultValue={[zelda.id]}
+        options={OPTIONS}
+      />,
+    )
+
+    await user.click(screen.getByLabelText(/clear/i))
+
+    expect(screen.getByLabelText('Videogames')).toHaveTextContent(
+      /1 items selected/i,
+    )
+  })
 })

package/tests/Select.spec.tsx

@@ -100,7 +100,7 @@ describe('Select', () => {
       />,
     )
 
-    await user.click(screen.getByRole('button', { name: /close/i }))
+    await user.click(screen.getByRole('button', { name: /clear/i }))
 
     expect(getByText(placeholder)).toBeInTheDocument()
     expect(mockChange).toHaveBeenCalledWith('')
@@ -124,4 +124,46 @@ describe('Select', () => {
     expect(queryByText('Nintendo Switch')).not.toBeInTheDocument()
     expect(queryByText('Xbox Series S/X')).not.toBeInTheDocument()
   })
+  it('deselects when click on deselect button', async () => {
+    const user = userEvent.setup()
+    const placeholder = 'Select your favourite gaming system...'
+    const handleSubmit = jest.fn()
+
+    render(
+      <form onSubmit={handleSubmit}>
+        <Select
+          label="Videogames"
+          name="select-videogames"
+          isSearchable
+          placeholder={placeholder}
+          defaultValue={playstation5.id}
+          options={OPTIONS}
+        />
+      </form>,
+    )
+
+    await user.click(screen.getByLabelText(/clear/i))
+
+    expect(screen.getByLabelText('Videogames')).toHaveTextContent(placeholder)
+    expect(handleSubmit).toHaveBeenCalledTimes(0)
+  })
+  it('disables deselect button when is disabled', async () => {
+    const user = userEvent.setup()
+    render(
+      <Select
+        label="Videogames"
+        name="select-videogames"
+        isSearchable
+        disabled
+        defaultValue={playstation5.id}
+        options={OPTIONS}
+      />,
+    )
+
+    await user.click(screen.getByLabelText(/clear/i))
+
+    expect(screen.getByLabelText('Videogames')).toHaveTextContent(
+      playstation5.label,
+    )
+  })
 })