test: complete tests

Author: LGLabGreg

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

@@ -122,6 +122,4 @@ export const FinderPatternsOuter = ({
         )
       })
   }
-
-  return null
 }

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

@@ -2,7 +2,13 @@ import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
 import { describe, expect, it, vi } from 'vitest'
 
-import { BG_GRADIENT_ID, DEFAULT_BGCOLOR, DEFAULT_SIZE, GRADIENT_ID } from './constants'
+import {
+  BG_GRADIENT_ID,
+  DEFAULT_BGCOLOR,
+  DEFAULT_MARGIN_SIZE,
+  DEFAULT_SIZE,
+  GRADIENT_ID,
+} from './constants'
 import { ReactQRCode } from './react-qr-code'
 import type {
   BackgroundSettings,
@@ -31,6 +37,22 @@ describe('ReactQRCode', () => {
     expect(svg).toHaveAttribute('aria-label', 'QR Code')
   })
 
+  it.each([
+    [2, 2],
+    [10, 10],
+    [undefined, DEFAULT_MARGIN_SIZE],
+  ])('applies margin %s', (marginSize, expected) => {
+    render(<ReactQRCode value='test' marginSize={marginSize} />)
+
+    const finderPattern = screen.getAllByTestId('finder-patterns-outer')
+    expect(
+      finderPattern[0]
+        .getAttribute('d')!
+        .toString()
+        .startsWith(`M ${expected} ${expected}`),
+    ).toBe(true)
+  })
+
   it('applies custom size', () => {
     const customSize = 300
     render(<ReactQRCode value='test' size={customSize} />)

packages/react-qr-code/src/utils/qr-code.test.ts

@@ -0,0 +1,136 @@
+import { describe, expect, it } from 'vitest'
+
+import { DEFAULT_IMG_SCALE } from '../constants'
+import type { CrossOrigin, ImageSettings, Modules } from '../types/lib'
+import { getImageSettings } from './qr-code'
+
+describe('getImageSettings', () => {
+  const cells: Modules = [
+    [true, false, true],
+    [false, true, false],
+    [true, false, true],
+  ]
+  const size = 100
+  const margin = 2
+
+  it('returns null when imageSettings is undefined', () => {
+    const result = getImageSettings(cells, size, margin, undefined)
+    expect(result).toBeNull()
+  })
+
+  it('returns null when imageSettings is undefined', () => {
+    const result = getImageSettings(cells, size, margin, undefined)
+    expect(result).toBeNull()
+  })
+
+  it('calculates default position when x and y are not provided', () => {
+    const imageSettings = {
+      width: 50,
+      height: 50,
+      src: 'test.png',
+    }
+    const result = getImageSettings(cells, size, margin, imageSettings)
+
+    expect(result).not.toBeNull()
+    expect(result?.x).toBeCloseTo(
+      cells.length / 2 - (50 * (cells.length + margin * 2)) / size / 2,
+    )
+    expect(result?.y).toBeCloseTo(
+      cells.length / 2 - (50 * (cells.length + margin * 2)) / size / 2,
+    )
+  })
+
+  it('uses provided x and y coordinates', () => {
+    const imageSettings = {
+      width: 50,
+      height: 50,
+      x: 10,
+      y: 20,
+      src: 'test.png',
+    }
+    const scale = (cells.length + margin * 2) / size
+    const result = getImageSettings(cells, size, margin, imageSettings)
+
+    expect(result?.x).toBe(10 * scale)
+    expect(result?.y).toBe(20 * scale)
+  })
+
+  it('uses default size when width and height are not provided', () => {
+    const imageSettings = {
+      src: 'test.png',
+    } as ImageSettings
+    const defaultSize = Math.floor(size * DEFAULT_IMG_SCALE)
+    const scale = (cells.length + margin * 2) / size
+    const result = getImageSettings(cells, size, margin, imageSettings)
+
+    expect(result?.w).toBe(defaultSize * scale)
+    expect(result?.h).toBe(defaultSize * scale)
+  })
+
+  it('handles opacity settings', () => {
+    const imageSettings = {
+      width: 50,
+      height: 50,
+      opacity: 0.5,
+      src: 'test.png',
+    }
+    const result = getImageSettings(cells, size, margin, imageSettings)
+
+    expect(result?.opacity).toBe(0.5)
+  })
+
+  it('uses default opacity when not provided', () => {
+    const imageSettings = {
+      width: 50,
+      height: 50,
+      src: 'test.png',
+    }
+    const result = getImageSettings(cells, size, margin, imageSettings)
+
+    expect(result?.opacity).toBe(1)
+  })
+
+  it('calculates excavation when excavate is true', () => {
+    const imageSettings = {
+      width: 50,
+      height: 50,
+      x: 10.6,
+      y: 20.3,
+      excavate: true,
+      src: 'test.png',
+    }
+    const scale = (cells.length + margin * 2) / size
+    const result = getImageSettings(cells, size, margin, imageSettings)
+
+    expect(result?.excavation).toEqual({
+      x: Math.floor(10.6 * scale),
+      y: Math.floor(20.3 * scale),
+      w: Math.ceil(50 * scale + (10.6 * scale - Math.floor(10.6 * scale))),
+      h: Math.ceil(50 * scale + (20.3 * scale - Math.floor(20.3 * scale))),
+    })
+  })
+
+  it('excavation is null when excavate is false', () => {
+    const imageSettings = {
+      width: 50,
+      height: 50,
+      excavate: false,
+      src: 'test.png',
+    }
+    const result = getImageSettings(cells, size, margin, imageSettings)
+
+    expect(result?.excavation).toBeNull()
+  })
+
+  it('preserves crossOrigin setting', () => {
+    const imageSettings = {
+      width: 50,
+      height: 50,
+      crossOrigin: 'anonymous' as CrossOrigin,
+      src: 'test.png',
+    }
+    const result = getImageSettings(cells, size, margin, imageSettings)
+
+    expect(result?.crossOrigin).toBe('anonymous')
+  })
+})

packages/react-qr-code/src/utils/qr-code.ts

@@ -37,6 +37,7 @@ export const getImageSettings = (
   let excavation = null
   if (imageSettings.excavate) {
     const floorX = Math.floor(x)
+
     const floorY = Math.floor(y)
     const ceilW = Math.ceil(w + x - floorX)
     const ceilH = Math.ceil(h + y - floorY)