monolith/src/components/stack/Stack.test.tsx at 7bfa41ebcc3b93d4cb62466b9830795031acc36a · croquiscom/monolith · 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
import { render } from '@testing-library/react';
import { Stack } from './Stack';
import '@testing-library/jest-dom';

describe('Stack', () => {
  it('자식 컴포넌트들을 렌더링합니다', () => {
    const { getByText } = render(
      <Stack>
        <div>1번</div>
        <div>2번</div>
        <div>3번</div>
      </Stack>,
    );
    expect(getByText('1번')).toBeInTheDocument();
    expect(getByText('2번')).toBeInTheDocument();
    expect(getByText('3번')).toBeInTheDocument();
  });

  it('direction prop이 정상적으로 적용됩니다', () => {
    const { container } = render(
      <Stack direction='column'>
        <div>1번</div>
      </Stack>,
    );
    expect(container.firstChild).toHaveStyle({ display: 'flex', flexDirection: 'column' });
  });

  it('wrap prop이 정상적으로 적용됩니다', () => {
    const { container } = render(
      <Stack wrap='wrap'>
        <div>1번</div>
      </Stack>,
    );
    expect(container.firstChild).toHaveStyle({ display: 'flex', flexWrap: 'wrap' });
  });

  it('align prop이 정상적으로 적용됩니다', () => {
    const { container } = render(
      <Stack align='center'>
        <div>1번</div>
      </Stack>,
    );
    expect(container.firstChild).toHaveStyle({ display: 'flex', alignItems: 'center' });
  });

  it('justify prop이 정상적으로 적용됩니다', () => {
    const { container } = render(
      <Stack justify='center'>
        <div>1번</div>
      </Stack>,
    );
    expect(container.firstChild).toHaveStyle({ display: 'flex', justifyContent: 'center' });
  });

  it('flex prop이 정상적으로 적용됩니다', () => {
    const { container } = render(
      <Stack flex='1 0 100px'>
        <div>1번</div>
      </Stack>,
    );
    expect(container.firstChild).toHaveStyle({ display: 'flex', flex: '1 0 100px' });
  });

  it('gap prop이 정상적으로 적용됩니다', () => {
    const { container } = render(
      <Stack gap={10}>
        <div>1번</div>
      </Stack>,
    );
    expect(container.firstChild).toHaveStyle({ gap: '10px' });
  });

  it('width prop이 정상적으로 적용됩니다', () => {
    const { container } = render(
      <Stack width={100}>
        <div>1번</div>
      </Stack>,
    );
    expect(container.firstChild).toHaveStyle({ width: '100px' });
  });

  it('height prop이 정상적으로 적용됩니다', () => {
    const { container } = render(
      <Stack height={100}>
        <div>1번</div>
      </Stack>,
    );
    expect(container.firstChild).toHaveStyle({ height: '100px' });
  });

  it('margin prop이 정상적으로 적용됩니다', () => {
    const { container } = render(
      <Stack m={24}>
        <div>1번</div>
      </Stack>,
    );
    expect(container.firstChild).toHaveStyle({ margin: '24px' });
  });

  it('padding prop이 정상적으로 적용됩니다', () => {
    const { container } = render(
      <Stack p={16}>
        <div>1번</div>
      </Stack>,
    );
    expect(container.firstChild).toHaveStyle({ padding: '16px' });
  });

  it('모든 props가 정상적으로 적용됩니다', () => {
    const { container } = render(
      <Stack
        direction='column'
        wrap='nowrap'
        align='center'
        justify='center'
        gap={10}
        width={100}
        height={100}
        m={24}
        p={16}
        mt={16}
        ml={24}
        mr={24}
        mb={16}
        pt={16}
        pl={24}
        pr={24}
        pb={16}
      >
        <div>1번</div>
      </Stack>,
    );
    expect(container.firstChild).toHaveStyle({
      display: 'flex',
      flexDirection: 'column',
      flexWrap: 'nowrap',
      alignItems: 'center',
      justifyContent: 'center',
    });
    expect(container.firstChild).toHaveStyle({
      gap: '10px',
      width: '100px',
      height: '100px',
      margin: '16px 24px 16px 24px',
      padding: '16px 24px 16px 24px',
    });
  });
});