Skip to content

Commit 9c84322

Browse files
LGLabGregLGLabGreg
committed
ReactQRCode tests
1 parent 16a7e33 commit 9c84322

6 files changed

Lines changed: 131 additions & 8 deletions

File tree

‎packages/react-qr-code/src/components/data-modules.test.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { render } from '@testing-library/react'
2+
import { describe, expect, it } from 'vitest'
3+
4+
import { ReactQRCode } from '../react-qr-code'
5+
6+
describe('DataModules', () => {
7+
it('renders with default props', () => {
8+
render(<ReactQRCode value='test' />)
9+
10+
expect(true).toBe(true)
11+
})
12+
})

‎packages/react-qr-code/src/components/data-modules.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@ export const DataModules = ({
152152
fill={gradient ? `url(#${GRADIENT_ID})` : color}
153153
d={ops.join('')}
154154
shapeRendering={style === 'square' ? 'crispEdges' : 'geometricPrecision'}
155+
data-testid='data-modules'
155156
/>
156157
)
157158
}

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ import {
1616
import { sanitizeFinderPatternInnerSettings } from '../utils/settings'
1717
import { heart, star } from '../utils/svg'
1818

19+
const testProps = {
20+
'data-testid': 'finder-patterns-inner',
21+
}
22+
1923
export const FinderPatternsInner = ({
2024
modules,
2125
margin,
@@ -57,6 +61,7 @@ export const FinderPatternsInner = ({
5761
height={FINDER_PATTERN_INNER_SIZE}
5862
fill={fill}
5963
rx={FINDER_PATTERN_INNER_RADIUSES[style]}
64+
{...testProps}
6065
/>
6166
)
6267
})
@@ -81,6 +86,7 @@ export const FinderPatternsInner = ({
8186
transformOrigin: 'center',
8287
transformBox: 'fill-box',
8388
}}
89+
{...testProps}
8490
/>
8591
)
8692
})
@@ -122,6 +128,7 @@ export const FinderPatternsInner = ({
122128
transformOrigin: 'center',
123129
transformBox: 'fill-box',
124130
}}
131+
{...testProps}
125132
/>
126133
)
127134
})
@@ -130,7 +137,12 @@ export const FinderPatternsInner = ({
130137
if (style === 'heart') {
131138
return coordinates.map(({ x, y }) => {
132139
return (
133-
<path key={key(x, y)} fill={fill} d={heart(x, y, FINDER_PATTERN_INNER_SIZE)} />
140+
<path
141+
key={key(x, y)}
142+
fill={fill}
143+
d={heart(x, y, FINDER_PATTERN_INNER_SIZE)}
144+
{...testProps}
145+
/>
134146
)
135147
})
136148
}
@@ -140,7 +152,7 @@ export const FinderPatternsInner = ({
140152
const cx = x + FINDER_PATTERN_INNER_SIZE / 2
141153
const cy = y + FINDER_PATTERN_INNER_SIZE / 2
142154
const path = star(cx, cy, FINDER_PATTERN_INNER_SIZE * 1.2, DEFAULT_NUM_STAR_POINTS)
143-
return <path key={key(x, y)} fill={fill} d={path} />
155+
return <path key={key(x, y)} fill={fill} d={path} {...testProps} />
144156
})
145157
}
146158

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ import {
1414
} from '../utils/finder-patterns-outer'
1515
import { sanitizeFinderPatternOuterSettings } from '../utils/settings'
1616

17+
const testProps = {
18+
'data-testid': 'finder-patterns-outer',
19+
}
20+
1721
export const FinderPatternsOuter = ({
1822
modules,
1923
margin,
@@ -74,7 +78,7 @@ export const FinderPatternsOuter = ({
7478
)
7579
}
7680
}
77-
return <path fill={fill} d={ops.join('')} />
81+
return <path fill={fill} d={ops.join('')} {...testProps} />
7882
}
7983

8084
if (
@@ -113,6 +117,7 @@ export const FinderPatternsOuter = ({
113117
transformOrigin: 'center',
114118
transformBox: 'fill-box',
115119
}}
120+
{...testProps}
116121
/>
117122
)
118123
})

‎packages/react-qr-code/src/react-qr-code.test.tsx‎

Lines changed: 97 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@ import { render, screen } from '@testing-library/react'
22
import { createRef } from 'react'
33
import { describe, expect, it, vi } from 'vitest'
44

5-
import { BG_GRADIENT_ID, DEFAULT_BGCOLOR, DEFAULT_SIZE } from './constants'
5+
import { BG_GRADIENT_ID, DEFAULT_BGCOLOR, DEFAULT_SIZE, GRADIENT_ID } from './constants'
66
import { ReactQRCode } from './react-qr-code'
77
import type {
88
BackgroundSettings,
9+
DataModulesSettings,
10+
FinderPatternInnerSettings,
11+
FinderPatternOuterSettings,
12+
GradientSettings,
913
GradientSettingsType,
1014
ReactQRCodeRef,
1115
} from './types/lib'
@@ -44,7 +48,57 @@ describe('ReactQRCode', () => {
4448
expect(svg).toHaveAttribute('aria-label', customLabel)
4549
})
4650

47-
describe('background', () => {
51+
describe('Data modules', () => {
52+
it('renders the path with correct color', () => {
53+
const dataModulesSettings: DataModulesSettings = {
54+
color: '#560bad',
55+
}
56+
render(<ReactQRCode value='test' dataModulesSettings={dataModulesSettings} />)
57+
58+
const path = screen.getByTestId('data-modules')
59+
60+
expect(path).toBeInTheDocument()
61+
expect(path).toHaveAttribute('fill', dataModulesSettings.color)
62+
})
63+
})
64+
65+
describe('Finder patterns outer', () => {
66+
it('renders the path with correct color', () => {
67+
const finderPatternOuterSettings: FinderPatternOuterSettings = {
68+
color: '#560bad',
69+
}
70+
render(
71+
<ReactQRCode
72+
value='test'
73+
finderPatternOuterSettings={finderPatternOuterSettings}
74+
/>,
75+
)
76+
77+
screen.getAllByTestId('finder-patterns-outer').forEach((path) => {
78+
expect(path).toHaveAttribute('fill', finderPatternOuterSettings.color)
79+
})
80+
})
81+
})
82+
83+
describe('Finder patterns inner', () => {
84+
it('renders the path with correct color', () => {
85+
const finderPatternInnerSettings: FinderPatternInnerSettings = {
86+
color: '#560bad',
87+
}
88+
render(
89+
<ReactQRCode
90+
value='test'
91+
finderPatternInnerSettings={finderPatternInnerSettings}
92+
/>,
93+
)
94+
95+
screen.getAllByTestId('finder-patterns-inner').forEach((path) => {
96+
expect(path).toHaveAttribute('fill', finderPatternInnerSettings.color)
97+
})
98+
})
99+
})
100+
101+
describe('Background', () => {
48102
it('renders with default background color', () => {
49103
render(<ReactQRCode value='test' />)
50104

@@ -74,10 +128,10 @@ describe('ReactQRCode', () => {
74128
}
75129
const { container } = render(<ReactQRCode value='test' background={gradient} />)
76130

77-
const background = screen.getByTestId('background')
78-
const stops = container.querySelectorAll(`${selector} stop`)
131+
const backgroundPath = screen.getByTestId('background')
132+
const stops = container.querySelectorAll(`${selector}#${BG_GRADIENT_ID} stop`)
79133

80-
expect(background).toHaveAttribute('fill', `url(#${BG_GRADIENT_ID})`)
134+
expect(backgroundPath).toHaveAttribute('fill', `url(#${BG_GRADIENT_ID})`)
81135
expect(container.querySelector(`${selector}`)).toBeInTheDocument()
82136
expect(stops).toHaveLength(2)
83137
expect(stops[0]).toHaveAttribute('stop-color', gradient.stops[0].color)
@@ -87,6 +141,44 @@ describe('ReactQRCode', () => {
87141
})
88142
})
89143

144+
describe('QR code data gradient', () => {
145+
it.each([
146+
['linear', 'linearGradient'],
147+
['radial', 'radialGradient'],
148+
])('renders with %s gradient for QR code data', (type, selector) => {
149+
const gradient: GradientSettings = {
150+
type: type as GradientSettingsType,
151+
rotation: 0,
152+
stops: [
153+
{ offset: '0%', color: '#4568DC' },
154+
{ offset: '100%', color: '#B06AB3' },
155+
],
156+
}
157+
const { container } = render(<ReactQRCode value='test' gradient={gradient} />)
158+
159+
const gradientElement = container.querySelector(`${selector}#${GRADIENT_ID}`)
160+
const stops = container.querySelectorAll(`${selector}#${GRADIENT_ID} stop`)
161+
162+
expect(gradientElement).toBeInTheDocument()
163+
expect(screen.getByTestId('data-modules')).toHaveAttribute(
164+
'fill',
165+
`url(#${GRADIENT_ID})`,
166+
)
167+
screen.getAllByTestId('finder-patterns-outer').forEach((path) => {
168+
expect(path).toHaveAttribute('fill', `url(#${GRADIENT_ID})`)
169+
})
170+
screen.getAllByTestId('finder-patterns-inner').forEach((path) => {
171+
expect(path).toHaveAttribute('fill', `url(#${GRADIENT_ID})`)
172+
})
173+
174+
expect(stops).toHaveLength(2)
175+
expect(stops[0]).toHaveAttribute('stop-color', gradient.stops[0].color)
176+
expect(stops[0]).toHaveAttribute('offset', gradient.stops[0].offset)
177+
expect(stops[1]).toHaveAttribute('stop-color', gradient.stops[1].color)
178+
expect(stops[1]).toHaveAttribute('offset', gradient.stops[1].offset)
179+
})
180+
})
181+
90182
describe('Image settings', () => {
91183
it('renders with image settings', () => {
92184
const imageSettings = {

‎vitest.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export default defineConfig({
99
setupFiles: './vitest.setup.ts',
1010
coverage: {
1111
include: ['packages/react-qr-code/src'],
12+
exclude: ['packages/react-qr-code/src/index.ts'],
1213
},
1314
},
1415
})

0 commit comments

Comments
 (0)