monolith/src/components/stack/Stack.test.tsx at cd6ea005d35086ffed211165d1fad4c457277e02 · 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
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).toHaveClass('flex flex-column');
  });

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

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

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

  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).toHaveClass('flex flex-column flex-nowrap align-center justify-center');
    expect(container.firstChild).toHaveStyle({
      gap: '10px',
      width: '100px',
      height: '100px',
      margin: '16px 24px 16px 24px',
      padding: '16px 24px 16px 24px',
    });
  });
});