webcomponents-react/packages/main/src/components/FlexBox/FlexBox.cy.tsx at 17cbbe0792e81198ed4a7cfce8ad652209df1df7 · UI5/webcomponents-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import { cypressPassThroughTestsFactory, mountWithCustomTagName } from '@/cypress/support/utils';
import { camelToKebabCase, lowercaseFirstLetter } from '@ui5/webcomponents-react-base';
import { FlexBoxJustifyContent, FlexBoxAlignItems, FlexBoxDirection, FlexBoxWrap } from '../../enums/index.js';
import { FlexBox } from './index.js';
import type { FlexBoxPropTypes } from './index.js';

describe('FlexBox', () => {
  Object.values(FlexBoxJustifyContent).forEach((val: FlexBoxPropTypes['justifyContent']) => {
    it(`JustifyContent: ${val}`, () => {
      cy.mount(
        <FlexBox justifyContent={val} data-testid="flexbox">
          <span>Test 1</span>
        </FlexBox>,
      );
      let cssVal;
      switch (val) {
        case 'Start':
          cssVal = 'flex-start';
          break;
        case 'End':
          cssVal = 'flex-end';
          break;
        default:
          cssVal = camelToKebabCase(lowercaseFirstLetter(val));
      }
      cy.findByTestId('flexbox').should('have.css', 'justify-content', cssVal);
    });
  });

  Object.values(FlexBoxAlignItems).forEach((val: FlexBoxPropTypes['alignItems']) => {
    it(`AlignItems: ${val}`, () => {
      cy.mount(
        <FlexBox alignItems={val} data-testid="flexbox">
          <span>Test 1</span>
        </FlexBox>,
      );
      let cssVal;
      switch (val) {
        case 'Start':
          cssVal = 'flex-start';
          break;
        case 'End':
          cssVal = 'flex-end';
          break;
        default:
          cssVal = camelToKebabCase(lowercaseFirstLetter(val));
      }
      cy.findByTestId('flexbox').should('have.css', 'align-items', cssVal);
    });
  });

  Object.values(FlexBoxDirection).forEach((val: FlexBoxPropTypes['direction']) => {
    it(`AlignItems: ${val}`, () => {
      cy.mount(
        <FlexBox direction={val} data-testid="flexbox">
          <span>Test 1</span>
        </FlexBox>,
      );
      const cssVal = camelToKebabCase(lowercaseFirstLetter(val));
      cy.findByTestId('flexbox').should('have.css', 'flex-direction', cssVal);
    });
  });

  Object.values(FlexBoxWrap).forEach((val: FlexBoxPropTypes['wrap']) => {
    it(`wrap: ${val}`, () => {
      cy.mount(
        <FlexBox wrap={val} data-testid="flexbox">
          <span>Test 1</span>
        </FlexBox>,
      );
      const cssVal = camelToKebabCase(lowercaseFirstLetter(val));
      cy.findByTestId('flexbox').should('have.css', 'flex-wrap', cssVal === 'no-wrap' ? 'nowrap' : cssVal);
    });
  });

  it('displayInline & fitContainer', () => {
    cy.mount(
      <FlexBox data-testid="flexbox">
        <span>Test 1</span>
      </FlexBox>,
    );
    cy.findByTestId('flexbox').should('have.css', 'display', 'flex');

    cy.mount(
      <div style={{ width: '200px', height: '200px' }}>
        <FlexBox data-testid="flexbox" fitContainer displayInline>
          <span>Test 1</span>
        </FlexBox>
      </div>,
    );
    cy.findByTestId('flexbox')
      .should('have.css', 'display', 'inline-flex')
      .should('have.css', 'width', '200px')
      .should('have.css', 'height', '200px');
  });

  it('gap', () => {
    cy.mount(
      <FlexBox gap="1337px" data-testid="fb">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
      </FlexBox>,
    );
    cy.findByTestId('fb').should('have.css', 'gap', '1337px');
  });

  mountWithCustomTagName<FlexBoxPropTypes>(FlexBox, { children: <span>Test 1</span> });
  cypressPassThroughTestsFactory(FlexBox);
});