import React from "react" ; import TestRenderer from "react-test-renderer" ; import { PropTypesOf } from "coral-ui/types" ; import Flex from "./Flex" ; it ( "renders correctly" , ( ) => { const props = { justifyContent : "center" , alignItems : "center" , direction : "row" , } ; const renderer = TestRenderer . create ( < Flex { ... props } > < div > Hello World < /div> < /Flex>); expect ( renderer . toJSON ( ) ) . toMatchSnapshot ( ) ; } ) ; it ( "renders with wrap" , ( ) => { const props = { wrap : true , } ; const renderer = TestRenderer . create ( < Flex { ... props } > < div > Hello World < /div> < /Flex>); expect ( renderer . toJSON ( ) ) . toMatchSnapshot ( ) ; } ) ; it ( "renders with wrap reverse" , ( ) => { const props = { wrap : "reverse" , } ; const renderer = TestRenderer . create ( < Flex { ... props } > < div > Hello World < /div> < /Flex>); expect ( renderer . toJSON ( ) ) . toMatchSnapshot ( ) ; } ) ; it ( "renders with item gutter" , ( ) => { const props = { itemGutter : true , } ; const renderer = TestRenderer . create ( < Flex { ... props } > < div > Hello World < /div> < /Flex>); expect ( renderer . toJSON ( ) ) . toMatchSnapshot ( ) ; } ) ; it ( "renders with half item gutter" , ( ) => { const props = { itemGutter : "half" , } ; const renderer = TestRenderer . create ( < Flex { ... props } > < div > Hello World < /div> < /Flex>); expect ( renderer . toJSON ( ) ) . toMatchSnapshot ( ) ; } ) ;