Skip to content

Commit 1e6d5f9

Browse files
LGLabGregLGLabGreg
committed
test: wip
1 parent ca69146 commit 1e6d5f9

5 files changed

Lines changed: 176 additions & 165 deletions

File tree

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

Lines changed: 0 additions & 154 deletions
This file was deleted.

‎packages/react-qr-code/src/components/background.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,25 @@ interface BackgroundProps {
77
numCells: number
88
}
99

10+
const testProps = {
11+
'data-testid': 'background',
12+
}
13+
1014
export const Background = ({ background, numCells }: BackgroundProps) => {
1115
if (!background) {
12-
return <path fill={DEFAULT_BGCOLOR} d={`M0,0 h${numCells}v${numCells}H0z`} />
16+
return (
17+
<path
18+
fill={DEFAULT_BGCOLOR}
19+
d={`M0,0 h${numCells}v${numCells}H0z`}
20+
{...testProps}
21+
/>
22+
)
1323
}
1424

1525
if (typeof background === 'string') {
16-
return <path fill={background} d={`M0,0 h${numCells}v${numCells}H0z`} />
26+
return (
27+
<path fill={background} d={`M0,0 h${numCells}v${numCells}H0z`} {...testProps} />
28+
)
1729
}
1830

1931
const vectors = calculateGradientVectors(background?.rotation || 0)
@@ -41,7 +53,11 @@ export const Background = ({ background, numCells }: BackgroundProps) => {
4153
</radialGradient>
4254
)}
4355
</defs>
44-
<path fill={`url(#${BG_GRADIENT_ID})`} d={`M0,0 h${numCells}v${numCells}H0z`} />
56+
<path
57+
fill={`url(#${BG_GRADIENT_ID})`}
58+
d={`M0,0 h${numCells}v${numCells}H0z`}
59+
{...testProps}
60+
/>
4561
</>
4662
)
4763
}

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

Lines changed: 151 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,155 @@
1-
import { render } from '@testing-library/react'
2-
import { expect, test } from 'vitest'
1+
import { render, screen } from '@testing-library/react'
2+
import { createRef } from 'react'
3+
import { describe, expect, it, vi } from 'vitest'
34

5+
import { BG_GRADIENT_ID, DEFAULT_BGCOLOR, DEFAULT_SIZE } from './constants'
46
import { ReactQRCode } from './react-qr-code'
7+
import type {
8+
BackgroundSettings,
9+
GradientSettingsType,
10+
ReactQRCodeRef,
11+
} from './types/lib'
12+
import { downloadRaster, downloadSVG } from './utils/download'
513

6-
test('renders QR code component', () => {
7-
const result = render(<ReactQRCode value='test' />)
8-
expect(result.container).toBeInTheDocument()
9-
expect(result).toMatchSnapshot()
14+
vi.mock('./utils/download', () => ({
15+
downloadSVG: vi.fn(),
16+
downloadRaster: vi.fn(),
17+
}))
18+
19+
describe('ReactQRCode', () => {
20+
it('renders with default props', () => {
21+
render(<ReactQRCode value='test' />)
22+
23+
const svg = screen.getByRole('img')
24+
expect(svg).toBeInTheDocument()
25+
expect(svg).toHaveAttribute('height', DEFAULT_SIZE.toString())
26+
expect(svg).toHaveAttribute('width', DEFAULT_SIZE.toString())
27+
expect(svg).toHaveAttribute('aria-label', 'QR Code')
28+
})
29+
30+
it('applies custom size', () => {
31+
const customSize = 300
32+
render(<ReactQRCode value='test' size={customSize} />)
33+
34+
const svg = screen.getByRole('img')
35+
expect(svg).toHaveAttribute('height', customSize.toString())
36+
expect(svg).toHaveAttribute('width', customSize.toString())
37+
})
38+
39+
it('applies custom aria-label', () => {
40+
const customLabel = 'Custom QR Code'
41+
render(<ReactQRCode value='test' svgProps={{ 'aria-label': customLabel }} />)
42+
43+
const svg = screen.getByRole('img')
44+
expect(svg).toHaveAttribute('aria-label', customLabel)
45+
})
46+
47+
describe('background', () => {
48+
it('renders with default background color', () => {
49+
render(<ReactQRCode value='test' />)
50+
51+
const background = screen.getByTestId('background')
52+
expect(background).toHaveAttribute('fill', DEFAULT_BGCOLOR)
53+
})
54+
55+
it('renders with custom background color', () => {
56+
const color = '#ff0000'
57+
render(<ReactQRCode value='test' background={color} />)
58+
59+
const background = screen.getByTestId('background')
60+
expect(background).toHaveAttribute('fill', color)
61+
})
62+
63+
it.each([
64+
['linear', 'linearGradient'],
65+
['radial', 'radialGradient'],
66+
])('renders with %s gradient background', (type, selector) => {
67+
const gradient: BackgroundSettings = {
68+
type: type as GradientSettingsType,
69+
rotation: 0,
70+
stops: [
71+
{ offset: '0%', color: '#4568DC' },
72+
{ offset: '100%', color: '#B06AB3' },
73+
],
74+
}
75+
const { container } = render(<ReactQRCode value='test' background={gradient} />)
76+
77+
const background = screen.getByTestId('background')
78+
const stops = container.querySelectorAll(`${selector} stop`)
79+
80+
expect(background).toHaveAttribute('fill', `url(#${BG_GRADIENT_ID})`)
81+
expect(container.querySelector(`${selector}`)).toBeInTheDocument()
82+
expect(stops).toHaveLength(2)
83+
expect(stops[0]).toHaveAttribute('stop-color', gradient.stops[0].color)
84+
expect(stops[0]).toHaveAttribute('offset', gradient.stops[0].offset)
85+
expect(stops[1]).toHaveAttribute('stop-color', gradient.stops[1].color)
86+
expect(stops[1]).toHaveAttribute('offset', gradient.stops[1].offset)
87+
})
88+
})
89+
90+
describe('Image settings', () => {
91+
it('renders with image settings', () => {
92+
const imageSettings = {
93+
src: 'test-image.png',
94+
height: 30,
95+
width: 30,
96+
excavate: true,
97+
}
98+
const { container } = render(
99+
<ReactQRCode value='test' imageSettings={imageSettings} />,
100+
)
101+
102+
const image = container.querySelector('image')
103+
expect(image).toBeInTheDocument()
104+
expect(image).toHaveAttribute('href', imageSettings.src)
105+
})
106+
})
107+
108+
describe('ref functionality', () => {
109+
it('provides access to SVG element', () => {
110+
const ref = createRef<ReactQRCodeRef>()
111+
render(<ReactQRCode value='test' ref={ref} />)
112+
113+
expect(ref.current).toBeTruthy()
114+
expect(ref.current?.svg instanceof SVGSVGElement).toBe(true)
115+
})
116+
117+
it('provides download method', async () => {
118+
const ref = createRef<ReactQRCodeRef>()
119+
render(<ReactQRCode value='test' ref={ref} />)
120+
121+
expect(ref.current).toBeTruthy()
122+
expect(typeof ref.current?.download).toBe('function')
123+
})
124+
125+
it('handles svg download method call when ref is available', () => {
126+
const ref = createRef<ReactQRCodeRef>()
127+
render(<ReactQRCode value='test' ref={ref} />)
128+
129+
if (ref.current) {
130+
ref.current.download({ format: 'svg', name: 'test-name', size: 300 })
131+
expect(vi.mocked(downloadSVG)).toHaveBeenCalledWith({
132+
svgRef: { current: ref.current.svg },
133+
fileSize: 300,
134+
fileName: 'test-name',
135+
})
136+
}
137+
})
138+
139+
it('handles raster download method call when ref is available', () => {
140+
const ref = createRef<ReactQRCodeRef>()
141+
render(<ReactQRCode value='test' ref={ref} />)
142+
143+
if (ref.current) {
144+
ref.current.download({ format: 'png', name: 'test-name', size: 300 })
145+
expect(vi.mocked(downloadRaster)).toHaveBeenCalledWith(
146+
expect.objectContaining({
147+
svgRef: { current: ref.current.svg },
148+
fileSize: 300,
149+
fileName: 'test-name',
150+
}),
151+
)
152+
}
153+
})
154+
})
10155
})

‎packages/react-qr-code/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,6 @@
1818
"outDir": "./dist",
1919
"types": ["@testing-library/jest-dom"]
2020
},
21-
"include": ["src/**/*", "**/*.test.tsx"],
21+
"include": ["src/**/*"],
2222
"exclude": ["dist", "node_modules"]
2323
}

‎vitest.setup.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import '@testing-library/jest-dom'
22
import { cleanup } from '@testing-library/react'
3-
import { afterEach } from 'vitest'
3+
import { afterEach, beforeEach, vi } from 'vitest'
4+
5+
beforeEach(() => {
6+
vi.clearAllMocks()
7+
})
48

59
afterEach(() => {
610
cleanup()

0 commit comments

Comments
 (0)