text: import React from 'react';
  import { Box } from '../index';
  import Enzyme, { mount } from 'enzyme';
  import { css } from '@emotion/css';
  import { matchers } from '@emotion/jest';
  
  import Adapter from 'enzyme-adapter-react-16';
  
  Enzyme.configure({ adapter: new Adapter() });
  expect.extend(matchers);
  
  describe('Box', () => {
    it('should render children', () => {
      const wrapper = mount(<Box>Lorem ipsum</Box>);
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should default to direction column', () => {
      const wrapper = mount(
        <Box>
          <span>Lorem ipsum</span>
          <button>OK</button>
        </Box>
      );
      expect(wrapper.find('div')).toHaveStyleRule('flex-direction', 'column');
      expect(wrapper.find('div span').text()).toEqual('Lorem ipsum');
      expect(wrapper.find('div button').text()).toEqual('OK');
    });
    it('should render children with direction column', () => {
      const wrapper = mount(
        <Box direction="column">
          <span>Lorem ipsum</span>
          <button>OK</button>
        </Box>
      );
      expect(wrapper.find('div')).toHaveStyleRule('flex-direction', 'column');
      expect(wrapper.find('div span').text()).toEqual('Lorem ipsum');
      expect(wrapper.find('div button').text()).toEqual('OK');
    });
    it('should render children with direction row', () => {
      const wrapper = mount(
        <Box direction="row">
          <span>Lorem ipsum</span>
          <button>OK</button>
        </Box>
      );
      expect(wrapper.find('div')).toHaveStyleRule('flex-direction', 'row');
      expect(wrapper.find('div span').text()).toEqual('Lorem ipsum');
      expect(wrapper.find('div button').text()).toEqual('OK');
    });
    it('should render with border', () => {
      const wrapper = mount(<Box border>Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'border',
        '1px solid var(--color-border-form-default)'
      );
      expect(wrapper.find('div')).toHaveStyleRule('border-radius', '2px');
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with padding small', () => {
      const wrapper = mount(<Box padding="small">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'padding',
        'var(--spacing-small)'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with padding medium', () => {
      const wrapper = mount(<Box padding="medium">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'padding',
        'var(--spacing-medium)'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with padding large', () => {
      const wrapper = mount(<Box padding="large">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'padding',
        'var(--spacing-large)'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with paddingLeft small', () => {
      const wrapper = mount(<Box paddingLeft="small">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'padding-left',
        'var(--spacing-small)'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with paddingLeft medium', () => {
      const wrapper = mount(<Box paddingLeft="medium">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'padding-left',
        'var(--spacing-medium)'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with paddingLeft large', () => {
      const wrapper = mount(<Box paddingLeft="large">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'padding-left',
        'var(--spacing-large)'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with paddingRight small', () => {
      const wrapper = mount(<Box paddingRight="small">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'padding-right',
        'var(--spacing-small)'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with paddingRight medium', () => {
      const wrapper = mount(<Box paddingRight="medium">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'padding-right',
        'var(--spacing-medium)'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with paddingRight large', () => {
      const wrapper = mount(<Box paddingRight="large">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'padding-right',
        'var(--spacing-large)'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with paddingTop small', () => {
      const wrapper = mount(<Box paddingTop="small">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'padding-top',
        'var(--spacing-small)'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with paddingTop medium', () => {
      const wrapper = mount(<Box paddingTop="medium">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'padding-top',
        'var(--spacing-medium)'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with paddingTop large', () => {
      const wrapper = mount(<Box paddingTop="large">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'padding-top',
        'var(--spacing-large)'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with paddingBottom small', () => {
      const wrapper = mount(<Box paddingBottom="small">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'padding-bottom',
        'var(--spacing-small)'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with paddingBottom medium', () => {
      const wrapper = mount(<Box paddingBottom="medium">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'padding-bottom',
        'var(--spacing-medium)'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with paddingBottom large', () => {
      const wrapper = mount(<Box paddingBottom="large">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'padding-bottom',
        'var(--spacing-large)'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
  
    it('should render with gap small', () => {
      const wrapper = mount(<Box gap="small">Lorem ipsum</Box>);
      expect(
        wrapper.find('div').hasClass(
          css`
            @supports (gap = 1px) {
              gap: var(--spacing-small);
            }
          `
        )
      ).toBeTruthy();
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with gap medium', () => {
      const wrapper = mount(<Box gap="medium">Lorem ipsum</Box>);
      expect(
        wrapper.find('div').hasClass(
          css`
            @supports (gap = 1px) {
              gap: var(--spacing-medium);
            }
          `
        )
      ).toBeTruthy();
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with gap large', () => {
      const wrapper = mount(<Box gap="large">Lorem ipsum</Box>);
      expect(
        wrapper.find('div').hasClass(
          css`
            @supports (gap = 1px) {
              gap: var(--spacing-large);
            }
          `
        )
      ).toBeTruthy();
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with align center', () => {
      const wrapper = mount(<Box align="center">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule('align-items', 'center');
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with align start', () => {
      const wrapper = mount(<Box align="start">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule('align-items', 'flex-start');
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with align end', () => {
      const wrapper = mount(<Box align="end">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule('align-items', 'flex-end');
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with justify center', () => {
      const wrapper = mount(<Box justify="center">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule('justify-content', 'center');
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with justify start', () => {
      const wrapper = mount(<Box justify="start">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'justify-content',
        'flex-start'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with justify end', () => {
      const wrapper = mount(<Box justify="end">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule('justify-content', 'flex-end');
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with justify space-around', () => {
      const wrapper = mount(<Box justify="space-around">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'justify-content',
        'space-around'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with justify space-between', () => {
      const wrapper = mount(<Box justify="space-between">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'justify-content',
        'space-between'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with justify space-evenly', () => {
      const wrapper = mount(<Box justify="space-evenly">Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule(
        'justify-content',
        'space-evenly'
      );
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with expand', () => {
      const wrapper = mount(<Box expand>Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule('flex', '1');
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with wrap', () => {
      const wrapper = mount(<Box wrap>Lorem ipsum</Box>);
      expect(wrapper.find('div')).toHaveStyleRule('flex-wrap', 'wrap');
      expect(wrapper.find('div').text()).toEqual('Lorem ipsum');
    });
    it('should render with arbitrary data-id prop', () => {
      const wrapper = mount(<Box data-id="test">Lorem ipsum</Box>);
      expect(wrapper.find('div[data-id="test"]').text()).toEqual('Lorem ipsum');
    });
  });
  