Dsy 4653 - test build-storybook

.cicd/build-storybook.sh

@@ -1,24 +1,24 @@
 #!/bin/bash
 set -e
-
+export NODE_OPTIONS=--openssl-legacy-provider
+
 BRANCH_NAME=$(bash ./.cicd/get-branch-name.sh)
 FOLDER_NAME=${BRANCH_NAME//[\/]/-}
 OUTPUT_PATH=build
-
+ 
 mkdir -p build
-
-if [ -z $(./.cicd/skip-commit.sh) ]; then
-
-    if [ -z $1 ]; then
+ 
+if [ -z "$(./.cicd/skip-commit.sh)" ]; then
+ 
+    if [ -z "$1" ]; then
         OUTPUT_PATH=build/${FOLDER_NAME}
-        mkdir -p ${OUTPUT_PATH}
+        mkdir -p "${OUTPUT_PATH}"
         echo "Created ${FOLDER_NAME} folder"
     fi
-
-    yarn build:storybook
-    cp -r packages/web/docs/dist/* ${OUTPUT_PATH}
-
-    mkdir -p ${OUTPUT_PATH}/react
+
+    yarn --cwd packages/react build:storybook
+
+    mkdir -p "${OUTPUT_PATH}/react"
     cp -r packages/react/docs/dist/* ${OUTPUT_PATH}/react
-
-fi
+ 
+fi

.cicd/quality-check.sh

@@ -1,9 +1,9 @@
 #!/bin/bash
 set -e
-
+ 
 if [ -z $(./.cicd/skip-commit.sh) ]; then
     echo "Quality Check"
-
-    yarn lint
-    yarn test:ci ${NATDS_CODECOV_WEB}
-fi
+ 
+    yarn --cwd packages/react 
+    yarn --cwd packages/react test:ci
+fi

.cicd/setup.sh

@@ -1,9 +1,9 @@
 #!/bin/bash
 set -e
-
+ 
 if [ -z $(./.cicd/skip-commit.sh) ]; then
     bash .cicd/configure-git.sh
-
-    yarn install
-    yarn build
+ 
+    yarn --cwd packages/react install
+    yarn --cwd packages/react build
 fi

package.json

@@ -143,8 +143,9 @@
     }
   },
   "resolutions": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "@types/react": "17.0.39"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.18",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18"
   }
 }

packages/react/package.json

@@ -62,12 +62,12 @@
     "react-jss": "10.9.0"
   },
   "devDependencies": {
-    "@types/react": "17.0.39",
-    "@types/react-dom": "17.0.13",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
     "plop": "3.0.5",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-test-renderer": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-test-renderer": "18.2.0",
     "storybook-dark-mode": "1.0.9"
   },
   "peerDependencies": {

packages/react/src/components/AccordionGroup/AccordionGroup.props.ts

@@ -8,4 +8,6 @@ export interface AccordionGroupProps {
    * Optional ID for testing
    */
   testID?: string;
+
+  children?: React.ReactNode
 }

packages/react/src/components/Divider/Divider.stories.tsx

@@ -48,7 +48,7 @@ export const Middle: Story<DividerProps> = (args) => (
 )
 FullBleed.args = { ...Playground.args }
 
-const Template: React.FC = ({ children }) => (
+const Template = ({ children }: {children: React.ReactNode}) => (
   <div style={{ maxWidth: 200, border: '1px solid #00000014', padding: '16px 0' }}>
     {children}
   </div>

packages/react/src/components/Icon/Icon.stories.tsx

@@ -38,7 +38,7 @@ export default {
 export const Playground: Story<IconProps> = (args) => <Icon {...args} />
 export const Icons: Story<IconProps> = (args) => <Icon {...args} />
 
-export const SearchIcon: Story<IconProps> = (args) => {
+export const SearchIcon: Story<IconProps> = () => {
   const [value, setValue] = useState(iconNames[0])
   const [filterOptionsN] = useState<OptionProps[]>(iconNames.map((icon) => ({ value: icon, label: icon })))
   const [filterOptions, setFilterOptions] = useState<OptionProps[]>(iconNames.map((icon) => ({ value: icon, label: icon })))
@@ -47,6 +47,7 @@ export const SearchIcon: Story<IconProps> = (args) => {
     setValue(values.label)
     handleChange(values.label)
   }
+
   const handleChange = (values: string) => {
     setValue(values)
 
@@ -107,7 +108,7 @@ export const SearchIcon: Story<IconProps> = (args) => {
 }
 SearchIcon.args = { ...Playground.args }
 
-export const ListIcon: Story<IconProps> = (args) => {
+export const ListIcon: Story<IconProps> = () => {
   const [filterOptionsN] = useState<OptionProps[]>(iconNames.map((icon) => ({ value: icon, label: icon })))
   const [filterOptions] = useState<OptionProps[]>(filterOptionsN)
 

packages/react/src/helpers/StoryContainer.tsx

@@ -1,6 +1,10 @@
 import React from 'react'
 import { createUseStyles } from 'react-jss'
 
+interface StoryContainerProps {
+  children: React.ReactNode
+}
+
 const styles = createUseStyles({
   container: {
     display: 'flex',
@@ -11,7 +15,7 @@ const styles = createUseStyles({
   }
 })
 
-const StoryContainer: React.FC = ({ children }) => {
+const StoryContainer = ({ children }: StoryContainerProps): JSX.Element => {
   const classes = styles()
 
   return (

packages/react/src/hooks/useWindowSize.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import {
+  act, fireEvent, render, screen
+} from '@testing-library/react'
+// import { renderHook } from '@testing-library/react-hooks'
+import useWindowSize from './useWindowSize'
+
+const TestSizeComponent = (): JSX.Element => {
+  const { width, height } = useWindowSize()
+  return <div>{`Width: ${width}, Height: ${height}`}</div>
+}
+
+jest.useFakeTimers('legacy')
+
+describe('hooks/useWindowSize', () => {
+  beforeEach(() => {
+    global.innerWidth = 768
+    global.innerHeight = 664
+    fireEvent(window, new Event('resize'))
+  })
+
+  it('should read initial innerWidth and innerHeight values from window', () => {
+    // const { result } = renderHook(() => useWindowSize())
+
+    render(<TestSizeComponent />)
+
+    expect(screen.getByText(/Width:/)).toHaveTextContent(`Width: ${window.innerWidth}`)
+    expect(screen.getByText(/Height:/)).toHaveTextContent(`Height: ${window.innerHeight}`)
+
+    // Simule a mudança do tamanho da janela
+
+    // act(() => {
+    //   window.innerWidth = 500
+    //   window.innerHeight = 300
+    //   window.dispatchEvent(new Event('resize'))
+    // })
+    // Verifique se os valores foram atualizados
+    // expect(screen.getByText(/Width:/)).toHaveTextContent('Width: 500')
+    // expect(screen.getByText(/Height:/)).toHaveTextContent('Height: 300')
+
+    // expect(result.current.width).toEqual(768)
+    // expect(result.current.height).toEqual(664)
+    // expect(setTimeout).toHaveBeenCalledTimes(1)
+  })
+
+  it('should update innerWidth and innerHeight values when window resizes', () => {
+    // const { result } = renderHook(() => useWindowSize())
+
+    // expect(result.current.width).toEqual(768)
+    // expect(result.current.height).toEqual(664)
+    render(<TestSizeComponent />)
+    act(() => {
+      global.innerWidth = 320
+      global.innerHeight = 664
+      fireEvent(window, new Event('resize'))
+    })
+
+    jest.advanceTimersByTime(500)
+
+    // expect(result.current.width).toBe(320)
+    // expect(result.current.height).toBe(664)
+
+    expect(screen.getByText(/Width:/)).toHaveTextContent(`Width: ${window.innerWidth}`)
+    expect(screen.getByText(/Height:/)).toHaveTextContent(`Height: ${window.innerHeight}`)
+    expect(setTimeout).toHaveBeenCalledTimes(1)
+  })
+})