test: data modules

Author: LGLabGreg

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

@@ -1,12 +1,110 @@
 import { render } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
-import { ReactQRCode } from '../react-qr-code'
+import {
+  dataModulesHorizontalLineNeighbours,
+  dataModulesLeafNeighbours,
+  dataModulesRoundedNeighbours,
+  dataModulesVerticalLineNeighbours,
+} from '../test/data-modules-neightbours'
+import type { DataModulesStyle } from '../types/lib'
+import type { DataModulesNeighbours } from '../types/utils'
+import * as dataModulesUtils from '../utils/data-modules'
+import * as svgUtils from '../utils/svg'
+import { DataModules } from './data-modules'
 
 describe('DataModules', () => {
-  it('renders with default props', () => {
-    render(<ReactQRCode value='test' />)
+  const mockModules = [
+    [true, false, true],
+    [false, true, false],
+    [true, false, true],
+  ]
 
-    expect(true).toBe(true)
+  const getModuleNeighboursSpy = vi.spyOn(dataModulesUtils, 'getModuleNeighbours')
+
+  const defaultProps = {
+    modules: mockModules,
+    margin: 2,
+  }
+
+  it('calls the correct shape function based on style prop', () => {
+    const stylesToMethods = {
+      square: 'square',
+      circle: 'circle',
+      diamond: 'diamond',
+      heart: 'heart',
+      star: 'star',
+    }
+
+    Object.entries(stylesToMethods).forEach(([style, method]) => {
+      const utils = style === 'heart' || style === 'star' ? svgUtils : dataModulesUtils
+      const spy = vi.spyOn(utils, method as keyof typeof utils)
+
+      render(
+        <DataModules settings={{ style: style as DataModulesStyle }} {...defaultProps} />,
+      )
+
+      expect(spy).toHaveBeenCalled()
+    })
   })
+
+  it.each(dataModulesRoundedNeighbours)(
+    `with neighbours %j calls the correct shape function %s for style rounded`,
+    (neighbours, method) => {
+      getModuleNeighboursSpy.mockImplementation(() => neighbours as DataModulesNeighbours)
+      const methodSpy = vi.spyOn(
+        dataModulesUtils,
+        method as keyof typeof dataModulesUtils,
+      )
+
+      render(<DataModules settings={{ style: 'rounded' }} {...defaultProps} />)
+
+      expect(methodSpy).toHaveBeenCalled()
+    },
+  )
+
+  it.each(dataModulesLeafNeighbours)(
+    `with neighbours %j calls the correct shape function %s for style leaf`,
+    (neighbours, method) => {
+      getModuleNeighboursSpy.mockImplementation(() => neighbours as DataModulesNeighbours)
+      const methodSpy = vi.spyOn(
+        dataModulesUtils,
+        method as keyof typeof dataModulesUtils,
+      )
+
+      render(<DataModules settings={{ style: 'leaf' }} {...defaultProps} />)
+
+      expect(methodSpy).toHaveBeenCalled()
+    },
+  )
+
+  it.each(dataModulesVerticalLineNeighbours)(
+    `with neighbours %j calls the correct shape function %s for style leaf`,
+    (neighbours, method) => {
+      getModuleNeighboursSpy.mockImplementation(() => neighbours as DataModulesNeighbours)
+      const methodSpy = vi.spyOn(
+        dataModulesUtils,
+        method as keyof typeof dataModulesUtils,
+      )
+
+      render(<DataModules settings={{ style: 'vertical-line' }} {...defaultProps} />)
+
+      expect(methodSpy).toHaveBeenCalled()
+    },
+  )
+
+  it.each(dataModulesHorizontalLineNeighbours)(
+    `with neighbours %j calls the correct shape function %s for style leaf`,
+    (neighbours, method) => {
+      getModuleNeighboursSpy.mockImplementation(() => neighbours as DataModulesNeighbours)
+      const methodSpy = vi.spyOn(
+        dataModulesUtils,
+        method as keyof typeof dataModulesUtils,
+      )
+
+      render(<DataModules settings={{ style: 'horizontal-line' }} {...defaultProps} />)
+
+      expect(methodSpy).toHaveBeenCalled()
+    },
+  )
 })

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

@@ -7,6 +7,7 @@ import {
   circle,
   dataModuleCanBeRandomSize,
   diamond,
+  getScaleFactor,
   leaf,
   leftRounded,
   rightRounded,
@@ -40,14 +41,10 @@ export const DataModules = ({
   const numCells = modules.length
   const isRandom = dataModuleCanBeRandomSize(style) && randomSize
 
-  const getScaleFactor = useCallback(() => {
-    if (style === 'square-sm') {
-      return 0.75
-    } else if (isRandom) {
-      return Math.random() * (1 - 0.75) + 0.75
-    }
-    return 1
-  }, [style, isRandom])
+  const scaleFactor = useCallback(
+    () => getScaleFactor(style, isRandom),
+    [style, isRandom],
+  )
 
   modules.forEach((row, y) => {
     row.forEach((cell, x) => {
@@ -59,9 +56,9 @@ export const DataModules = ({
         return
       }
 
-      const scaleFactor = getScaleFactor()
-      const size = 1 * scaleFactor
-      const posOffset = (1 - 1 * scaleFactor) / 2
+      const scale = scaleFactor()
+      const size = 1 * scale
+      const posOffset = (1 - 1 * scale) / 2
       const xPos = x + margin + posOffset
       const yPos = y + margin + posOffset