Skip to content

Commit 4f5d4d2

Browse files
LGLabGregLGLabGreg
committed
test: finder pattern tests
1 parent 73c1551 commit 4f5d4d2

3 files changed

Lines changed: 241 additions & 2 deletions

File tree

‎packages/react-qr-code/src/components/finder-patter-inner.test.tsx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import { cleanup, render, screen } from '@testing-library/react'
2+
import { describe, expect, it, vi } from 'vitest'
3+
4+
import { FINDER_PATTERN_INNER_SIZE, FINDER_PATTERN_OUTER_ROTATIONS } from '../constants'
5+
import type { FinderPatternInnerStyle } from '../types/lib'
6+
import * as finderPatternInnerUtils from '../utils/finder-patterns-inner'
7+
import * as svgUtils from '../utils/svg'
8+
import { FinderPatternsInner } from './finder-patterns-inner'
9+
10+
describe('DataModules', () => {
11+
const mockModules = [
12+
[true, false, true],
13+
[false, true, false],
14+
[true, false, true],
15+
]
16+
17+
const defaultProps = {
18+
modules: mockModules,
19+
margin: 2,
20+
}
21+
22+
it.each([['rounded-sm'], ['rounded'], ['rounded-lg'], ['circle'], ['square']])(
23+
'renders correctly with style %s',
24+
(style) => {
25+
render(
26+
<FinderPatternsInner
27+
{...defaultProps}
28+
settings={{ style: style as FinderPatternInnerStyle, color: '#ff0000' }}
29+
/>,
30+
)
31+
const rects = screen.getAllByTestId('finder-patterns-inner')
32+
expect(rects).toHaveLength(3)
33+
rects.forEach((rect) => {
34+
expect(rect).toBeInTheDocument()
35+
expect(rect.getAttribute('width')).toBe(FINDER_PATTERN_INNER_SIZE.toString())
36+
expect(rect.getAttribute('height')).toBe(FINDER_PATTERN_INNER_SIZE.toString())
37+
expect(rect.getAttribute('fill')).toBe('#ff0000')
38+
expect(rect.style.transform).toBeFalsy()
39+
})
40+
},
41+
)
42+
43+
it('renders correctly with style diamond', () => {
44+
const sizeDiff = Math.sqrt(1.5)
45+
const size = FINDER_PATTERN_INNER_SIZE / sizeDiff
46+
render(
47+
<FinderPatternsInner
48+
{...defaultProps}
49+
settings={{ style: 'diamond', color: '#ff0000' }}
50+
/>,
51+
)
52+
const rects = screen.getAllByTestId('finder-patterns-inner')
53+
expect(rects).toHaveLength(3)
54+
rects.forEach((rect) => {
55+
expect(rect).toBeInTheDocument()
56+
expect(rect.getAttribute('width')).toBe(size.toString())
57+
expect(rect.getAttribute('height')).toBe(size.toString())
58+
expect(rect.getAttribute('fill')).toBe('#ff0000')
59+
expect(rect.style.transform).toBe('rotate(45deg)')
60+
})
61+
})
62+
63+
it('calls the correct shape function based on style prop', () => {
64+
const stylesToMethods = {
65+
'inpoint-sm': 'finderPatternsInnerInOutPoint',
66+
inpoint: 'finderPatternsInnerInOutPoint',
67+
'inpoint-lg': 'finderPatternsInnerInOutPoint',
68+
'outpoint-sm': 'finderPatternsInnerInOutPoint',
69+
outpoint: 'finderPatternsInnerInOutPoint',
70+
'outpoint-lg': 'finderPatternsInnerInOutPoint',
71+
'leaf-sm': 'finderPatternsInnerLeaf',
72+
leaf: 'finderPatternsInnerLeaf',
73+
'leaf-lg': 'finderPatternsInnerLeaf',
74+
}
75+
76+
Object.entries(stylesToMethods).forEach(([style, method]) => {
77+
const spy = vi.spyOn(
78+
finderPatternInnerUtils,
79+
method as keyof typeof finderPatternInnerUtils,
80+
)
81+
82+
render(
83+
<FinderPatternsInner
84+
settings={{ style: style as FinderPatternInnerStyle, color: '#00ff00' }}
85+
{...defaultProps}
86+
/>,
87+
)
88+
89+
const paths = screen.getAllByTestId('finder-patterns-inner')
90+
paths.forEach((path, index) => {
91+
const rotation =
92+
FINDER_PATTERN_OUTER_ROTATIONS[style as keyof typeof stylesToMethods][index]
93+
expect(path.getAttribute('fill')).toBe('#00ff00')
94+
expect(path.style.transform).toBe(`rotate(${rotation}deg)`)
95+
})
96+
97+
expect(spy).toHaveBeenCalled()
98+
cleanup()
99+
})
100+
})
101+
102+
it('renders correctly with style heart', () => {
103+
const spy = vi.spyOn(svgUtils, 'heart')
104+
render(
105+
<FinderPatternsInner
106+
{...defaultProps}
107+
settings={{ style: 'heart', color: '#ff0000' }}
108+
/>,
109+
)
110+
const paths = screen.getAllByTestId('finder-patterns-inner')
111+
expect(paths).toHaveLength(3)
112+
paths.forEach((path) => {
113+
expect(spy).toHaveBeenCalled()
114+
expect(path.getAttribute('fill')).toBe('#ff0000')
115+
})
116+
})
117+
118+
it('renders correctly with style star', () => {
119+
const spy = vi.spyOn(svgUtils, 'star')
120+
render(
121+
<FinderPatternsInner
122+
{...defaultProps}
123+
settings={{ style: 'star', color: '#ff0000' }}
124+
/>,
125+
)
126+
const paths = screen.getAllByTestId('finder-patterns-inner')
127+
expect(paths).toHaveLength(3)
128+
paths.forEach((path) => {
129+
expect(spy).toHaveBeenCalled()
130+
expect(path.getAttribute('fill')).toBe('#ff0000')
131+
})
132+
})
133+
})

‎packages/react-qr-code/src/components/finder-patter-outer.test.tsx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { cleanup, render, screen } from '@testing-library/react'
2+
import { describe, expect, it, vi } from 'vitest'
3+
4+
import { FINDER_PATTERN_OUTER_ROTATIONS } from '../constants'
5+
import type { FinderPatternOuterStyle } from '../types/lib'
6+
import * as finderPatternOuterUtils from '../utils/finder-patterns-outer'
7+
import { FinderPatternsOuter } from './finder-patterns-outer'
8+
9+
describe('DataModules', () => {
10+
const mockModules = [
11+
[true, false, true],
12+
[false, true, false],
13+
[true, false, true],
14+
]
15+
16+
const defaultProps = {
17+
modules: mockModules,
18+
margin: 2,
19+
}
20+
21+
it.each([['rounded-sm', 'rounded', 'rounded-lg']])(
22+
'renders correctly with style %s',
23+
(style) => {
24+
const spy = vi.spyOn(finderPatternOuterUtils, 'finderPatternsOuterRoundedSquare')
25+
render(
26+
<FinderPatternsOuter
27+
{...defaultProps}
28+
settings={{ style: style as FinderPatternOuterStyle, color: '#ff0000' }}
29+
/>,
30+
)
31+
const paths = screen.getAllByTestId('finder-patterns-outer')
32+
expect(paths).toHaveLength(1)
33+
paths.forEach((path) => {
34+
expect(spy).toHaveBeenCalledTimes(3)
35+
expect(path.getAttribute('fill')).toBe('#ff0000')
36+
})
37+
},
38+
)
39+
40+
it('renders correctly with style circle', () => {
41+
render(
42+
<FinderPatternsOuter
43+
{...defaultProps}
44+
settings={{ style: 'circle', color: '#ff0000' }}
45+
/>,
46+
)
47+
const paths = screen.getAllByTestId('finder-patterns-outer')
48+
expect(paths).toHaveLength(1)
49+
expect(paths[0].getAttribute('fill')).toBe('#ff0000')
50+
expect(paths[0].getAttribute('d')).toBe(
51+
'M 5.5 2a 3.5 3.5 0 1 0 0.01 0zzm 0 1a 2.5 2.5 0 1 1 -0.01 0ZM 1.5 2a 3.5 3.5 0 1 0 0.01 0zzm 0 1a 2.5 2.5 0 1 1 -0.01 0ZM 5.5 -2a 3.5 3.5 0 1 0 0.01 0zzm 0 1a 2.5 2.5 0 1 1 -0.01 0Z',
52+
)
53+
})
54+
55+
it('renders correctly with style square', () => {
56+
render(
57+
<FinderPatternsOuter
58+
{...defaultProps}
59+
settings={{ style: 'square', color: '#ff0000' }}
60+
/>,
61+
)
62+
const paths = screen.getAllByTestId('finder-patterns-outer')
63+
expect(paths).toHaveLength(1)
64+
expect(paths[0].getAttribute('fill')).toBe('#ff0000')
65+
expect(paths[0].getAttribute('d')).toBe(
66+
'M 2 2v 7h 7v -7zM 3 3h 5v 5h -5zM -2 2v 7h 7v -7zM -1 3h 5v 5h -5zM 2 -2v 7h 7v -7zM 3 -1h 5v 5h -5z',
67+
)
68+
})
69+
70+
it('calls the correct shape function based on style prop', () => {
71+
const stylesToMethods = {
72+
'inpoint-sm': 'finderPatternsOuterInOutPoint',
73+
inpoint: 'finderPatternsOuterInOutPoint',
74+
'inpoint-lg': 'finderPatternsOuterInOutPoint',
75+
'outpoint-sm': 'finderPatternsOuterInOutPoint',
76+
outpoint: 'finderPatternsOuterInOutPoint',
77+
'outpoint-lg': 'finderPatternsOuterInOutPoint',
78+
'leaf-sm': 'finderPatternsOuterLeaf',
79+
leaf: 'finderPatternsOuterLeaf',
80+
'leaf-lg': 'finderPatternsOuterLeaf',
81+
}
82+
83+
Object.entries(stylesToMethods).forEach(([style, method]) => {
84+
const spy = vi.spyOn(
85+
finderPatternOuterUtils,
86+
method as keyof typeof finderPatternOuterUtils,
87+
)
88+
89+
render(
90+
<FinderPatternsOuter
91+
settings={{ style: style as FinderPatternOuterStyle, color: '#00ff00' }}
92+
{...defaultProps}
93+
/>,
94+
)
95+
96+
const paths = screen.getAllByTestId('finder-patterns-outer')
97+
paths.forEach((path, index) => {
98+
const rotation =
99+
FINDER_PATTERN_OUTER_ROTATIONS[style as keyof typeof stylesToMethods][index]
100+
expect(path.getAttribute('fill')).toBe('#00ff00')
101+
expect(path.style.transform).toBe(`rotate(${rotation}deg)`)
102+
})
103+
104+
expect(spy).toHaveBeenCalled()
105+
cleanup()
106+
})
107+
})
108+
})

‎packages/react-qr-code/src/components/finder-patterns-inner.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,4 @@ export const FinderPatternsInner = ({
155155
return <path key={key(x, y)} fill={fill} d={path} {...testProps} />
156156
})
157157
}
158-
159-
return null
160158
}

0 commit comments

Comments
 (0)