fix(test): unit & visual

hazelcast · Mar 1, 2024 · 583fb4b · 583fb4b
1 parent a081ec6
commit 583fb4b
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 34 deletions.
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Tooltip_Disabled.png b/packages/ui/.loki/reference/chrome_minimal_Components_Tooltip_Disabled.png
diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_Tooltip_Visible.png b/packages/ui/.loki/reference/chrome_minimal_Components_Tooltip_Visible.png
diff --git a/packages/ui/__tests__/AutocompleteFieldFormik.test.tsx b/packages/ui/__tests__/AutocompleteFieldFormik.test.tsx
@@ -38,7 +38,7 @@ describe('AutocompleteFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as SelectInstance
+    const selectInstance = wrapper.find(Select)
 
     expect(formikBag.current?.values).toEqual({
       name: null,
@@ -47,7 +47,7 @@ describe('AutocompleteFieldFormik', () => {
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[1], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[1], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -58,7 +58,7 @@ describe('AutocompleteFieldFormik', () => {
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[0], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[0], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -83,14 +83,14 @@ describe('AutocompleteFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as SelectInstance
+    const selectInstance = wrapper.find(Select)
 
     expect(wrapper.find(Error).prop('error')).toBe(undefined)
 
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[1], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[1], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -123,12 +123,12 @@ describe('AutocompleteFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as SelectInstance
+    const selectInstance = wrapper.find(Select)
 
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[1], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[1], { action: 'select-option' })
     })
     wrapper.update()
 

diff --git a/packages/ui/__tests__/EmptyState.test.tsx b/packages/ui/__tests__/EmptyState.test.tsx
@@ -1,5 +1,5 @@
 import { mountAndCheckA11Y } from '@hazelcast/test-helpers'
-import { Figma } from '@icons-pack/react-simple-icons'
+import { SiFigma } from '@icons-pack/react-simple-icons'
 import React from 'react'
 import cn from 'classnames'
 
@@ -14,7 +14,7 @@ const title = 'Figma'
 const description =
   'Figma is a vector graphics editor and prototyping tool, with additional offline features enabled by desktop applications for macOS and Windows.'
 // Icon
-const icon = Figma
+const icon = SiFigma
 const iconLabel = 'Icon Figma'
 // Action
 const action = 'Cool!'

diff --git a/packages/ui/__tests__/Pagination.test.tsx b/packages/ui/__tests__/Pagination.test.tsx
@@ -458,11 +458,11 @@ describe('Pagination', () => {
 
     expect(setPageSize).toHaveBeenCalledTimes(0)
 
-    const selectInstance = wrapper.find(Select).instance() as Select<SelectFieldOption<number>>
+    const selectInstance = wrapper.find(Select)
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.({ value: 10, label: '10' }, { action: 'select-option' })
+      selectInstance.props().onChange?.({ value: 10, label: '10' }, { action: 'select-option' })
     })
     wrapper.update()
 

diff --git a/packages/ui/__tests__/Select/MultiSelectField.test.tsx b/packages/ui/__tests__/Select/MultiSelectField.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useUID } from 'react-uid'
 import { mountAndCheckA11Y } from '@hazelcast/test-helpers'
-import ReactSelect, { OptionsType } from 'react-select'
+import ReactSelect, { Options } from 'react-select'
 import ReactSelectCreatable from 'react-select/creatable'
 import { X } from 'react-feather'
 
@@ -21,7 +21,7 @@ const selectId = 'selectId'
 const selectName = 'selectName'
 const selectLabel = 'selectLabel'
 
-const options: OptionsType<SelectFieldOption<string>> = [
+const options: Options<SelectFieldOption<string>> = [
   { value: 'darth_vader', label: 'Darth Vader' },
   { value: 'luke_skywalker', label: 'Luke Skywalker' },
   { value: 'obi', label: 'Obi-Wan Kenobi' },
@@ -33,7 +33,7 @@ const options: OptionsType<SelectFieldOption<string>> = [
 const selectedOptions = [options[1]]
 const selectedValues = selectedOptions.map(({ value }) => value)
 
-describe('SelectField', () => {
+describe('MultiSelectField', () => {
   beforeEach(() => {
     useUIDMock.mockImplementation(() => selectId)
   })

diff --git a/packages/ui/__tests__/Select/MultiSelectFieldFormik.test.tsx b/packages/ui/__tests__/Select/MultiSelectFieldFormik.test.tsx
@@ -2,7 +2,7 @@ import React, { createRef } from 'react'
 import { Formik, Form, FormikProps } from 'formik'
 import { mountAndCheckA11Y } from '@hazelcast/test-helpers'
 import { act } from 'react-dom/test-utils'
-import Select from 'react-select'
+import ReactSelect from 'react-select'
 
 import { MultiSelectFieldFormik } from '../../src/Select/MultiSelectFieldFormik'
 import { SelectFieldOption } from '../../src/Select/helpers'
@@ -38,7 +38,7 @@ describe('MultiSelectFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as Select
+    const selectInstance = wrapper.find(ReactSelect)
 
     expect(formikBag.current?.values).toEqual({
       names: [],
@@ -47,7 +47,7 @@ describe('MultiSelectFieldFormik', () => {
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.([options[1]], { action: 'select-option' })
+      selectInstance.props().onChange?.([options[1]], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -58,7 +58,7 @@ describe('MultiSelectFieldFormik', () => {
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.([options[1], options[0]], { action: 'select-option' })
+      selectInstance.props().onChange?.([options[1], options[0]], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -83,14 +83,14 @@ describe('MultiSelectFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as Select
+    const selectInstance = wrapper.find(ReactSelect)
 
     expect(wrapper.find(Error).prop('error')).toBe(undefined)
 
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.([options[1]], { action: 'select-option' })
+      selectInstance.props().onChange?.([options[1]], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -123,7 +123,7 @@ describe('MultiSelectFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as Select
+    const selectInstance = wrapper.find(ReactSelect)
 
     expect(formikBag.current?.values).toEqual({
       names: [],
@@ -132,7 +132,7 @@ describe('MultiSelectFieldFormik', () => {
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.([options[1]], { action: 'select-option' })
+      selectInstance.props().onChange?.([options[1]], { action: 'select-option' })
     })
     wrapper.update()
 

diff --git a/packages/ui/__tests__/Select/SelectField.test.tsx b/packages/ui/__tests__/Select/SelectField.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useUID } from 'react-uid'
 import { mountAndCheckA11Y } from '@hazelcast/test-helpers'
-import ReactSelect, { OptionsType } from 'react-select'
+import ReactSelect, { Options } from 'react-select'
 import ReactSelectCreatable from 'react-select/creatable'
 
 import { SelectField } from '../../src/Select/SelectField'
@@ -21,7 +21,7 @@ const selectId = 'selectId'
 const selectName = 'selectName'
 const selectLabel = 'selectLabel'
 
-const options: OptionsType<SelectFieldOption<string>> = [
+const options: Options<SelectFieldOption<string>> = [
   { value: 'darth_vader', label: 'Darth Vader' },
   { value: 'luke_skywalker', label: 'Luke Skywalker' },
   { value: 'obi', label: 'Obi-Wan Kenobi' },

diff --git a/packages/ui/__tests__/Select/SelectFieldFormik.test.tsx b/packages/ui/__tests__/Select/SelectFieldFormik.test.tsx
@@ -2,8 +2,9 @@ import React, { createRef } from 'react'
 import { Formik, Form, FormikProps } from 'formik'
 import { mountAndCheckA11Y } from '@hazelcast/test-helpers'
 import { act } from 'react-dom/test-utils'
-import Select from 'react-select'
+import ReactSelect, { SelectInstance } from 'react-select'
 
+import { SelectField } from '../../src/Select/SelectField'
 import { SelectFieldFormik } from '../../src/Select/SelectFieldFormik'
 import { SelectFieldOption } from '../../src/Select/helpers'
 import { Error } from '../../src/Error'
@@ -38,16 +39,15 @@ describe('SelectFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as Select
+    const selectInstance = wrapper.find(ReactSelect)
 
     expect(formikBag.current?.values).toEqual({
       name: null,
     })
-
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[1], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[1], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -58,7 +58,7 @@ describe('SelectFieldFormik', () => {
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[0], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[0], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -83,14 +83,14 @@ describe('SelectFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as Select
+    const selectInstance = wrapper.find(ReactSelect)
 
     expect(wrapper.find(Error).prop('error')).toBe(undefined)
 
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[1], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[1], { action: 'select-option' })
     })
     wrapper.update()
 
@@ -113,12 +113,12 @@ describe('SelectFieldFormik', () => {
     )
 
     const wrapper = await mountAndCheckA11Y(<TestForm />)
-    const selectInstance = wrapper.find(Select).instance() as Select
+    const selectInstance = wrapper.find(ReactSelect)
 
     // We need the `async` call here to wait for processing of the asynchronous 'change'
     // eslint-disable-next-line @typescript-eslint/require-await
     await act(async () => {
-      selectInstance.props.onChange?.(options[1], { action: 'select-option' })
+      selectInstance.props().onChange?.(options[1], { action: 'select-option' })
     })
     wrapper.update()
 

diff --git a/packages/ui/src/Select/SelectField.tsx b/packages/ui/src/Select/SelectField.tsx
@@ -88,7 +88,7 @@ export const SelectField = <V extends string | number = string>(props: SelectFie
     onChange,
     options,
     placeholder,
-    required = false,
+    required,
     value,
     formatGroupLabel,
     formatOptionLabel,