test(grid): add testcase

fix(grid): fix error when size exceeds limit

components/grid/__tests__/index.test.tsx

@@ -0,0 +1,114 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Grid } from 'components'
+
+describe('Grid', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(
+      <Grid.Container>
+        <Grid>test</Grid>
+        <Grid>test</Grid>
+      </Grid.Container>,
+    )
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
+  it('all breakpoint values should be supported', () => {
+    const wrapper = mount(
+      <Grid.Container xs={1} sm={2} md={3} lg={4} xl={5}>
+        <Grid xs={1} sm={2} md={3} lg={4} xl={5}>
+          test
+        </Grid>
+      </Grid.Container>,
+    )
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
+  it('css value should be passed through', () => {
+    const wrapper = mount(
+      <Grid.Container
+        justify="center"
+        alignItems="center"
+        alignContent="center"
+        direction="column"
+        wrap="wrap">
+        <Grid justify="center" alignItems="center" alignContent="center" direction="column">
+          test
+        </Grid>
+      </Grid.Container>,
+    )
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
+  it('decimal spacing should be supported', () => {
+    const wrapper = mount(
+      <Grid.Container gap={0.11123}>
+        <Grid>test</Grid>
+      </Grid.Container>,
+    )
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
+  it('nested components should be supported', () => {
+    const wrapper = mount(
+      <Grid.Container>
+        <Grid>test</Grid>
+        <Grid.Container>
+          <Grid>test</Grid>
+          <Grid.Container>
+            <Grid>test</Grid>
+            <Grid.Container>
+              <Grid>test</Grid>
+            </Grid.Container>
+            ,
+          </Grid.Container>
+          ,
+        </Grid.Container>
+        ,
+      </Grid.Container>,
+    )
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
+  it('there should be no alignment class when not set', () => {
+    let wrapper = mount(<Grid.Container justify="flex-end" />)
+    expect(wrapper.find('.item').hasClass('justify')).toBeTruthy()
+    wrapper = mount(<Grid.Container />)
+    expect(wrapper.find('.item').hasClass('justify')).not.toBeTruthy()
+  })
+
+  it('there should be no responsive class when not set', () => {
+    let wrapper = mount(<Grid.Container sm={2} />)
+    expect(wrapper.find('.item').hasClass('sm')).toBeTruthy()
+    expect(wrapper.find('.item').hasClass('xs')).not.toBeTruthy()
+    wrapper = mount(<Grid.Container />)
+    expect(wrapper.find('.item').hasClass('sm')).not.toBeTruthy()
+  })
+
+  it('should work correctly when use alone', () => {
+    const wrapper = mount(<Grid />)
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
+  it('should work correctly when size exceeds', () => {
+    const wrapper = mount(
+      <Grid.Container>
+        <Grid xs={25}>test</Grid>
+        <Grid xs={-1}>test</Grid>
+      </Grid.Container>,
+    )
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+})

components/grid/basic-item.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react'
 import useTheme from '../styles/use-theme'
-import withDefaults from '../utils/with-defaults'
-import { Justify, Direction, AlignItems, AlignContent } from './grid-props'
+import { Justify, Direction, AlignItems, AlignContent } from './grid-types'
 
 type BreakpointsValue = number | boolean
 interface Props {
@@ -18,11 +17,11 @@ interface Props {
 }
 
 const defaultProps = {
-  xs: false,
-  sm: false,
-  md: false,
-  lg: false,
-  xl: false,
+  xs: false as BreakpointsValue,
+  sm: false as BreakpointsValue,
+  md: false as BreakpointsValue,
+  lg: false as BreakpointsValue,
+  xl: false as BreakpointsValue,
   className: '',
 }
 
@@ -36,11 +35,12 @@ type ItemLayoutValue = {
 }
 const getItemLayout = (val: BreakpointsValue): ItemLayoutValue => {
   if (typeof val === 'number') {
-    const widthRatio = `${(100 / 24) * val}%`
+    const width = (100 / 24) * val
+    const ratio = width > 100 ? '100%' : width < 0 ? '0' : `${width}%`
     return {
       grow: 0,
-      width: widthRatio,
-      basis: widthRatio,
+      width: ratio,
+      basis: ratio,
     }
   }
   return {
@@ -171,6 +171,11 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
   )
 }
 
-const MemoBasicItem = React.memo(GridBasicItem)
+type MemoBasicItemComponent<P = {}> = React.NamedExoticComponent<P>
+export type GridBasicItemComponentProps = Partial<typeof defaultProps> &
+  Omit<Props, keyof typeof defaultProps> &
+  NativeAttrs
 
-export default withDefaults(MemoBasicItem, defaultProps)
+GridBasicItem.defaultProps = defaultProps
+
+export default React.memo(GridBasicItem) as MemoBasicItemComponent<GridBasicItemComponentProps>

components/grid/grid-container.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import useTheme from '../styles/use-theme'
-import GridBasicItem, { GridBasicItemProps } from './basic-item'
-import { Wrap } from './grid-props'
+import GridBasicItem, { GridBasicItemComponentProps } from './basic-item'
+import { Wrap } from './grid-types'
 
 interface Props {
   gap: number
@@ -15,7 +15,7 @@ const defaultProps = {
   className: '',
 }
 
-export type GridContainerProps = Props & typeof defaultProps & GridBasicItemProps
+export type GridContainerProps = Props & typeof defaultProps & GridBasicItemComponentProps
 
 const GridContainer: React.FC<React.PropsWithChildren<GridContainerProps>> = ({
   gap,
@@ -49,7 +49,7 @@ const GridContainer: React.FC<React.PropsWithChildren<GridContainerProps>> = ({
 type MemoGridContainerComponent<P = {}> = React.NamedExoticComponent<P>
 type ComponentProps = Partial<typeof defaultProps> &
   Omit<Props, keyof typeof defaultProps> &
-  GridBasicItemProps
+  GridBasicItemComponentProps
 
 GridContainer.defaultProps = defaultProps
 

components/grid/grid.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import GridContainer from './grid-container'
-import GridBasicItem, { GridBasicItemProps } from './basic-item'
-// import { tuple } from '../utils/prop-types'
+import GridBasicItem, { GridBasicItemComponentProps } from './basic-item'
 
 interface Props {
   className: string
@@ -11,7 +10,7 @@ const defaultProps = {
   className: '',
 }
 
-export type GridProps = Props & typeof defaultProps & GridBasicItemProps
+export type GridProps = Props & typeof defaultProps & GridBasicItemComponentProps
 
 const Grid: React.FC<React.PropsWithChildren<GridProps>> = ({ children, className, ...props }) => {
   return (
@@ -33,7 +32,7 @@ type MemoGridComponent<P = {}> = React.NamedExoticComponent<P> & {
 }
 type ComponentProps = Partial<typeof defaultProps> &
   Omit<Props, keyof typeof defaultProps> &
-  GridBasicItemProps
+  GridBasicItemComponentProps
 
 Grid.defaultProps = defaultProps