Merge pull request #90 from BouyguesTelecom/native/tests

Fix and add test on native

.github/workflows/publish.yml

@@ -36,6 +36,7 @@ jobs:
           npm run lint
           npm run test
           npm run check-types
+          npm run test:native
 
       - name: Publish React package on NPM 📦
         run:  npm publish --workspace packages/react --access public

examples/react-template/screens/Input.tsx

@@ -36,7 +36,6 @@ export const InputScreen = (): JSX.Element => {
         hovered
         placeholder={'Input, search icon'}
         help='Search helper input'
-        type={InputType.TEXT}
         onKeyUp={(e) => console.log(e)}
       />
 

package.json

@@ -26,6 +26,7 @@
     "storybook": "cd docs/storybook && start-storybook -p 6006",
     "style:size-limit": "cd config && size-limit",
     "test": "npm --workspace=@trilogy-ds/react run test",
+    "test:native": "npm --workspace=@trilogy-ds/react run test:native",
     "check-types": "npm --workspace=@trilogy-ds/react run check-types",
     "watch:css": "npm --workspace=trilogy-ds run watch:css",
     "watch:cssMangled": "npm --workspace=trilogy-ds run watch:cssMangled"
@@ -145,7 +146,8 @@
     "webpack": "^5.90.3",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.15.1",
-    "webpack-iconfont-plugin-nodejs": "^1.0.33"
+    "webpack-iconfont-plugin-nodejs": "^1.0.33",
+    "metro-react-native-babel-preset": "^0.77.0"
   },
   "workspaces": [
     "packages/react",

packages/react/babel.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+}

packages/react/components/accordion/body/test/AccordionBody.native.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen, userEvent } from '@testing-library/react-native'
+import * as React from 'react'
+import Text from '../../../text/Text.native'
+import Accordion from '../../Accordion.native'
+import AccordionBody from '../../body/AccordionBody.native'
+import AccordionHeader from '../../header/AccordionHeader.native'
+import AccordionItem from '../../item/AccordionItem.native'
+
+describe('Accordion', () => {
+  it('should render correctly', () => {
+    render(
+      <Accordion>
+        <AccordionItem active={false}>
+          <AccordionHeader>
+            <Text>header</Text>
+          </AccordionHeader>
+          <AccordionBody>
+            <Text>body</Text>
+          </AccordionBody>
+        </AccordionItem>
+      </Accordion>,
+    )
+
+    expect(screen.getByText('body')).toBeOnTheScreen()
+  })
+
+})

packages/react/components/accordion/header/test/AccordionHeader.native.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen, userEvent } from '@testing-library/react-native'
+import * as React from 'react'
+import Text from '../../../text/Text.native'
+import Accordion from '../../Accordion.native'
+import AccordionBody from '../../body/AccordionBody.native'
+import AccordionHeader from '../AccordionHeader.native'
+import AccordionItem from '../../item/AccordionItem.native'
+
+describe('Accordion', () => {
+  it('should render correctly', () => {
+    render(
+      <Accordion>
+        <AccordionItem active={false}>
+          <AccordionHeader>
+            <Text>header</Text>
+          </AccordionHeader>
+          <AccordionBody>
+            <Text>body</Text>
+          </AccordionBody>
+        </AccordionItem>
+      </Accordion>,
+    )
+
+    expect(screen.getByText('header')).toBeOnTheScreen()
+  })
+
+})

packages/react/components/accordion/item/test/AccordionItem.native.test.tsx

@@ -0,0 +1,90 @@
+import { render, screen, userEvent } from '@testing-library/react-native'
+import * as React from 'react'
+import Text from '../../../text/Text.native'
+import Accordion from '../../Accordion.native'
+import AccordionBody from '../../body/AccordionBody.native'
+import AccordionHeader from '../../header/AccordionHeader.native'
+import AccordionItem from '../../item/AccordionItem.native'
+
+jest.useFakeTimers()
+
+describe('Accordion', () => {
+  it('should render correctly', () => {
+    render(
+      <Accordion>
+        <AccordionItem active={false}>
+          <AccordionHeader>
+            <Text>header</Text>
+          </AccordionHeader>
+          <AccordionBody>
+            <Text>body</Text>
+          </AccordionBody>
+        </AccordionItem>
+      </Accordion>,
+    )
+
+    expect(screen.getByText('header')).toBeOnTheScreen()
+  })
+
+  test('should be disabled', async () => {
+    const onClick = jest.fn()
+
+    render(
+      <Accordion>
+        <AccordionItem disabled onClick={onClick}>
+          <AccordionHeader>
+            <Text>header</Text>
+          </AccordionHeader>
+          <AccordionBody>
+            <Text>body</Text>
+          </AccordionBody>
+        </AccordionItem>
+      </Accordion>,
+    )
+    const user = userEvent.setup()
+    await user.press(screen.getByText('header'))
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  test('should execute onOpen function', async () => {
+    const onOpen = jest.fn()
+    const user = userEvent.setup()
+
+    render(
+      <Accordion>
+        <AccordionItem id={'accordion'} onOpen={onOpen}>
+          <AccordionHeader>
+            <Text>header</Text>
+          </AccordionHeader>
+          <AccordionBody>
+            <Text>body</Text>
+          </AccordionBody>
+        </AccordionItem>
+      </Accordion>,
+    )
+
+    await user.press(screen.getByTestId('accordion'))
+    expect(onOpen).toHaveBeenCalled()
+  })
+
+  test('should execute onClose function', async () => {
+    const onClose = jest.fn()
+    const user = userEvent.setup()
+
+    render(
+      <Accordion>
+        <AccordionItem active id={'accordion'} onClose={onClose}>
+          <AccordionHeader>
+            <Text>header</Text>
+          </AccordionHeader>
+          <AccordionBody>
+            <Text>body</Text>
+          </AccordionBody>
+        </AccordionItem>
+      </Accordion>,
+    )
+
+    await user.press(screen.getByTestId('accordion'))
+    expect(onClose).toHaveBeenCalled()
+  })
+})

packages/react/components/accordion/test/Accordion.native.test.tsx

@@ -0,0 +1,19 @@
+import { render } from '@testing-library/react-native'
+import * as React from 'react'
+import Accordion from '../Accordion.native'
+import AccordionBody from '../body/AccordionBody.native'
+import AccordionHeader from '../header/AccordionHeader.native'
+import AccordionItem from '../item/AccordionItem.native'
+
+describe('Accordion', () => {
+  it('should render correctly', () => {
+    render(
+      <Accordion>
+        <AccordionItem>
+          <AccordionHeader>Accordion Header</AccordionHeader>
+          <AccordionBody> content </AccordionBody>
+        </AccordionItem>
+      </Accordion>,
+    )
+  })
+})

packages/react/components/alert/test/Alert.native.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react-native'
+import * as React from 'react'
+import { AlertState } from '../../../objects'
+import Alert from '../Alert.native'
+
+describe('Alert', () => {
+  it('should render correctly', () => {
+    render(
+      <Alert
+        testId={'alert'}
+        display
+        alert={AlertState.INFO}
+        title='Alert information'
+        description='Lorem Ipsum is simply dummy text of the printing and type..'
+      />,
+    )
+
+    expect(screen.getByText('Alert information')).toBeOnTheScreen()
+  })
+})

packages/react/components/autolayout/test/AutoLayout.native.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react-native'
+import * as React from 'react'
+import Text from '../../text/Text.native'
+import AutoLayout from '../AutoLayout'
+import AutoLayoutWrapper from '../AutoLayoutWrapper'
+
+describe('AutoLayout component', () => {
+  it('should render its children', () => {
+    render(
+      <AutoLayoutWrapper autolayout={false}>
+        <AutoLayout>
+          <Text>Hello world!</Text>
+        </AutoLayout>
+      </AutoLayoutWrapper>,
+    )
+
+    expect(screen.getByText('Hello world!')).toBeOnTheScreen()
+  })
+})

packages/react/components/badge/Badge.native.tsx

@@ -21,6 +21,7 @@ const Badge = ({
   direction,
   color,
   onClick,
+  testId,
   ...others
 }: BadgeProps): JSX.Element => {
   const badgeColor = color
@@ -88,7 +89,7 @@ const Badge = ({
 
   return onClick ? (
     <View>
-      <TouchableOpacity onPress={onClick} activeOpacity={0.85}>
+      <TouchableOpacity onPress={onClick} activeOpacity={0.85} testID={testId}>
         {badgeView}
       </TouchableOpacity>
     </View>

packages/react/components/badge/test/Badge.native.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen, userEvent } from '@testing-library/react-native'
+import * as React from 'react'
+import Text from '../../text/Text.native'
+import Badge from '../Badge.native'
+
+jest.useFakeTimers()
+
+describe('Badge component', () => {
+  test('should contain toto as text', () => {
+    render(
+      <Badge>
+        <Text>toto</Text>
+      </Badge>,
+    )
+    expect(screen.getByText('toto')).toBeOnTheScreen()
+  })
+
+  test('should have a text content', () => {
+    render(<Badge textContent={'TEXT'}>TEXTCONTENT</Badge>)
+    expect(screen.getByText('TEXT')).toBeOnTheScreen()
+  })
+
+  test('should have a content', () => {
+    render(<Badge content={'CONTENT'}>TEXT</Badge>)
+    expect(screen.getByText('CONTENT')).toBeOnTheScreen()
+  })
+
+  test('should onClick attribut work', async () => {
+    const onClick = jest.fn()
+    const user = userEvent.setup()
+
+    render(<Badge testId="badge" onClick={onClick}>DEFAULT</Badge>)
+
+    await user.press(screen.getByTestId('badge'))
+    expect(onClick).toHaveBeenCalled()
+  })
+})

packages/react/components/box/Box.native.tsx

@@ -85,9 +85,8 @@ const Box = ({
       borderTopStartRadius: boxRadius,
       borderBottomStartRadius: boxRadius,
       height: boxHeight,
-      backgroundColor:
-        getColorStyle(leftBorder as TrilogyColor | TrilogyColorValues) ||
-        "transparent",
+      backgroundColor: leftBorder ? getColorStyle(leftBorder as TrilogyColor | TrilogyColorValues) : 'transparent',
+
     },
     column: {
       flexDirection: "column",
@@ -108,7 +107,7 @@ const Box = ({
   const boxTestId = testId || "NotSpecified"
 
   const BoxSkeleton = () => (
-    <ContentLoader style={styles.skeleton} {...others}>
+    <ContentLoader style={styles.skeleton} {...others} testID="skeleton">
       <View style={{ opacity: 0 }}>{children}</View>
 
       {Platform.OS === "android" && (