refactor(frontend): vitest-v2 (#155)

* chore(frontend): update vitest to v2

* refactor(frontend): existing helpers tests

* refactor(frontend): SettingsValidator tests

* refactor(frontend): utilities improvements

* fix(frontend): getRandomNumber

apps/frontend/package.json

@@ -42,7 +42,6 @@
     "geist": "1.3.0",
     "lodash.capitalize": "4.2.1",
     "lodash.pick": "4.4.0",
-    "lodash.random": "3.2.0",
     "lodash.shuffle": "4.2.0",
     "next": "14.2.3",
     "next-themes": "0.3.0",
@@ -65,14 +64,13 @@
     "@testing-library/user-event": "14.5.2",
     "@types/lodash.capitalize": "4.2.9",
     "@types/lodash.pick": "4.4.9",
-    "@types/lodash.random": "3.2.9",
     "@types/lodash.shuffle": "4.2.9",
     "@types/node": "20.12.12",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
     "@vitejs/plugin-react": "4.3.0",
-    "@vitest/coverage-v8": "1.6.0",
-    "@vitest/ui": "1.6.0",
+    "@vitest/coverage-v8": "2.0.3",
+    "@vitest/ui": "2.0.3",
     "cypress": "13.10.0",
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.3",
@@ -83,6 +81,6 @@
     "stylelint": "16.5.0",
     "stylelint-config-recommended": "14.0.0",
     "typescript": "5.4.5",
-    "vitest": "1.6.0"
+    "vitest": "2.0.3"
   }
 }

apps/frontend/src/app/gallery/components/GallerySlide/CompareSlider/CompareSlider.tsx

@@ -8,7 +8,7 @@ import {
 import { clsx } from 'clsx'
 
 import { DragHandle } from './DragHandle'
-import { getRandomValueFromRange } from '@helpers/getRandomValueFromRange'
+import { getRandomNumber } from '@helpers/getRandomNumber'
 import styles from './CompareSlider.module.css'
 
 interface Props {
@@ -28,7 +28,7 @@ const getRandomPosition = (index: number): number => {
   const isEven = index % 2 === 0
   const range: [number, number] = isEven ? [40, 60] : [30, 50]
 
-  return Math.floor(getRandomValueFromRange(...range))
+  return Math.floor(getRandomNumber(...range))
 }
 
 const getImageFallback = ({ orientation }: Pick<Props, 'orientation'>): string => {

apps/frontend/src/lib/helpers/__tests__/colors/getRandomHexColor.test.ts

@@ -1,8 +1,8 @@
 import { getRandomHexColor, hexValidationRegex } from '@helpers/colors'
 
-describe('@lib/helpers/colors/getRandomHexColor', () => {
-  it('should return a random hex color', () => {
-    for (let i = 0; i < 15; i++) {
+describe('helpers/colors - getRandomHexColor', () => {
+  it('should return a correct random hex color', () => {
+    for (let i = 0; i < 10; i++) {
       expect(getRandomHexColor()).toMatch(hexValidationRegex)
     }
   })

apps/frontend/src/lib/helpers/__tests__/file/addImageSizesToFileName.test.ts

@@ -1,6 +1,6 @@
 import { addImageSizesToFileName } from '@helpers/file/addImageSizesToFileName'
 
-describe('@lib/helpers/file/addImageSizesToFileName', () => {
+describe('helpers/file - addImageSizesToFileName', () => {
   it('should add image sizes to the file name', () => {
     expect(
       addImageSizesToFileName({

apps/frontend/src/lib/helpers/__tests__/file/bytesToMegabytes.test.ts

@@ -0,0 +1,10 @@
+import { bytesToMegabytes } from '@helpers/file/bytesToMegabytes'
+import { BYTES_IN_MB } from '@helpers/file/constants'
+
+describe('helpers/file - bytesToMegabytes', () => {
+  it('should convert bytes to megabytes correctly', () => {
+    expect(bytesToMegabytes(BYTES_IN_MB)).toBe(1)
+    expect(bytesToMegabytes(BYTES_IN_MB * 4)).toBe(4)
+    expect(bytesToMegabytes(BYTES_IN_MB / 2)).toBe(0.5)
+  })
+})

apps/frontend/src/lib/helpers/__tests__/file/createFileFromBlob.test.ts

@@ -0,0 +1,17 @@
+import { createFileFromBlob } from '@helpers/file/createFileFromBlob'
+
+describe('helpers/file - createFileFromBlob', () => {
+  it('should create a file object from a blob', () => {
+    const fileName = 'lorem.txt'
+    const fileType = 'text/plain'
+
+    const blob = new Blob(['Lorem ipsum dolor sit amet, consectetur adipisicing elit'], {
+      type: fileType
+    })
+    const file = createFileFromBlob(blob, fileName)
+
+    expect(file).toBeInstanceOf(File)
+    expect(file.name).toBe(fileName)
+    expect(file.type).toBe(fileType)
+  })
+})

apps/frontend/src/lib/helpers/__tests__/file/cropFileName.test.ts

@@ -1,13 +1,18 @@
 import { cropFileName } from '@helpers/file/cropFileName'
 
-describe('@lib/helpers/file/cropFileName', () => {
-  it('should crop the file name correctly', () => {
-    expect(cropFileName('hello-world.png')).toBe('hello-world')
-    expect(cropFileName('foo.jpeg')).toBe('foo')
-    expect(cropFileName('bar.jpg')).toBe('bar')
-    expect(cropFileName('baz.webp')).toBe('baz')
-    expect(cropFileName('my-file-name.jpeg.webp')).toBe('my-file-name.jpeg')
-    expect(cropFileName('my-file-name-1.webp.webp')).toBe('my-file-name-1.webp')
+describe('helpers/file - cropFileName', () => {
+  it.each([
+    ['hello-world', 'png'],
+    ['foo', 'jpeg'],
+    ['bar', 'jpg'],
+    ['baz', 'webp'],
+    ['my-file-name.jpeg', 'webp'],
+    ['my-file-name-1', 'webp']
+  ])('should crop the file name correctly (%s)', ([name, type]) =>
+    expect(cropFileName(`${name}.${type}`)).toBe(name)
+  )
+
+  test('the incoming string must not be changed', () => {
     expect(cropFileName('jpeg')).toBe('jpeg')
     expect(cropFileName('.png')).toBe('.png')
     expect(cropFileName('.')).toBe('.')

apps/frontend/src/lib/helpers/__tests__/file/cropImageFileType.test.ts

@@ -1,10 +1,7 @@
 import { cropImageFileType } from '@helpers/file/cropImageFileType'
 
-describe('@lib/helpers/file/cropImageFileType', () => {
-  it('should crop the file type correctly', () => {
-    expect(cropImageFileType('image/png')).toBe('png')
-    expect(cropImageFileType('image/jpg')).toBe('jpg')
-    expect(cropImageFileType('image/jpeg')).toBe('jpeg')
-    expect(cropImageFileType('image/webp')).toBe('webp')
-  })
+describe('helpers/file - cropImageFileType', () => {
+  it.each(['png', 'jpg', 'jpeg', 'webp'])('should crop the file type correctly (%s)', type =>
+    expect(cropImageFileType(`image/${type}`)).toBe(type)
+  )
 })

apps/frontend/src/lib/helpers/__tests__/file/isValidFileName.test.ts

@@ -5,7 +5,7 @@ import {
   notAllowedChars
 } from '@helpers/file/constants'
 
-describe('@lib/helpers/file/isValidFileName', () => {
+describe('helpers/file - isValidFileName', () => {
   it(`should return false because file name length is less than ${MIN_FILE_NAME_LENGTH}`, () => {
     expect(isValidFileName('a'.repeat(MIN_FILE_NAME_LENGTH - 1))).toBe(false)
   })

apps/frontend/src/lib/helpers/__tests__/file/isValidFileSize.test.ts

@@ -2,9 +2,9 @@ import { isValidFileSize } from '@helpers/file/isValidFileSize'
 import { BYTES_IN_MB, MAX_FILE_SIZE } from '@helpers/file/constants'
 import { MAX_FILE_SIZE_MB } from '@site/config'
 
-describe('@lib/helpers/file/isValidFileSize', () => {
+describe('helpers/file - isValidFileSize', () => {
   it(`should return true if file size is less than ${MAX_FILE_SIZE_MB} MB`, () => {
-    expect(isValidFileSize(1.92 * BYTES_IN_MB)).toBe(true)
+    expect(isValidFileSize((MAX_FILE_SIZE_MB - 0.01) * BYTES_IN_MB)).toBe(true)
   })
 
   it(`should return true if file size is equal to ${MAX_FILE_SIZE_MB} MB`, () => {

apps/frontend/src/lib/helpers/__tests__/file/isValidFileType.test.ts

@@ -1,7 +1,7 @@
 import { isValidFileType } from '@helpers/file/isValidFileType'
 import { allowedImageFormats } from '@site/config'
 
-describe('@lib/helpers/file/isValidFileType', () => {
+describe('helpers/file - isValidFileType', () => {
   it.each(allowedImageFormats.split(', '))('should return true if file type is valid (%s)', type =>
     expect(isValidFileType(type)).toBe(true)
   )

apps/frontend/src/lib/helpers/__tests__/getRandomBoolean.test.ts

@@ -0,0 +1,10 @@
+import { getRandomBoolean } from '@helpers/getRandomBoolean'
+
+describe('helpers - getRandomBoolean', () => {
+  it('should return a random boolean', () => {
+    for (let i = 0; i < 10; i++) {
+      const result = getRandomBoolean()
+      expect(typeof result).toBe('boolean')
+    }
+  })
+})

apps/frontend/src/lib/helpers/__tests__/getRandomNumber.test.ts

@@ -0,0 +1,16 @@
+import { getRandomNumber } from '@helpers/getRandomNumber'
+
+describe('helpers - getRandomNumber', () => {
+  it.each([
+    [0, 0],
+    [0, 10, 2],
+    [20, 35],
+    [-10, 20],
+    [10, 10]
+  ])('should return a random number value', (...args) => {
+    const [from, to, precision] = args
+    const result = getRandomNumber(from, to, precision)
+    expect(result).not.toBeLessThan(from)
+    expect(result).not.toBeGreaterThan(to)
+  })
+})

apps/frontend/src/lib/helpers/__tests__/isFloat.test.ts

@@ -1,6 +1,6 @@
 import { isFloat } from '@helpers/isFloat'
 
-describe('@lib/helpers/isFloat', () => {
+describe('helpers - isFloat', () => {
   it('should return true if the value is a float', () => {
     expect(isFloat(0.5)).toBe(true)
     expect(isFloat(1.5)).toBe(true)

apps/frontend/src/lib/helpers/__tests__/isTooltipOpen.test.ts

@@ -1,6 +1,6 @@
 import { isTooltipOpen } from '@helpers/isTooltipOpen'
 
-describe('@lib/helpers/isTooltipOpen', () => {
+describe('helpers - isTooltipOpen', () => {
   it('should return {false} when content is not defined', () => {
     expect(
       isTooltipOpen({

apps/frontend/src/lib/helpers/getRandomBoolean.ts

@@ -0,0 +1 @@
+export const getRandomBoolean = (): boolean => Math.random() < 0.5

apps/frontend/src/lib/helpers/getRandomNumber.ts

@@ -0,0 +1,10 @@
+export const getRandomNumber = (min: number, max: number, precision?: number): number => {
+  const floating = typeof precision === 'number'
+  let randomValue = Math.random() * (max - min) + min
+
+  if (floating) {
+    randomValue = parseFloat(randomValue.toPrecision(precision))
+  }
+
+  return randomValue
+}

apps/frontend/src/lib/helpers/image/calcAspectRatio.ts

@@ -35,4 +35,6 @@ const withCache = (cb: (width: ImageWidth, height: ImageHeight) => ImageAspectRa
 }
 
 const calcWithCache = withCache(calcAspectRatio)
-export { calcWithCache as getAspectRatio }
+
+export { calcWithCache as calcAspectRatio }
+export { calcAspectRatio as calcAspectRatioPure }

apps/frontend/src/lib/helpers/isTooltipOpen.ts

@@ -11,6 +11,7 @@ interface Parameters {
  * @param content - tooltip content (title).
  * @param isParentDisabled - whether actions are disabled on the parent of the tooltip.
  */
+// TODO: Remove this cringe logic :)
 export const isTooltipOpen = ({ content, isParentDisabled }: Parameters) => {
   if (!content) {
     return false

apps/frontend/src/stores/image.ts

@@ -1,6 +1,6 @@
 import { create, type StateCreator } from 'zustand'
 
-import { getAspectRatio } from '@helpers/image/calcAspectRatio'
+import { calcAspectRatio } from '@helpers/image/calcAspectRatio'
 import type { ImageAspectRatio, ImageDimension } from '@app-types/image'
 
 /* eslint no-unused-vars: 0 */
@@ -41,7 +41,7 @@ const imageStoreCreator: StateCreator<Store> = (set, get) => ({
       return [0, 0]
     }
 
-    return getAspectRatio(dimension.width, dimension.height)
+    return calcAspectRatio(dimension.width, dimension.height)
   },
 
   // Actions

apps/frontend/src/utility/ConvertSettingsRandomizer.ts

@@ -1,4 +1,3 @@
-import randomNumber from 'lodash.random'
 import capitalize from 'lodash.capitalize'
 
 import {
@@ -28,6 +27,8 @@ import {
 } from '@scissors/sharp'
 
 import { getRandomHexColor } from '@helpers/colors'
+import { getRandomNumber } from '@helpers/getRandomNumber'
+import { getRandomBoolean } from '@helpers/getRandomBoolean'
 
 /*
  * All methods name must start with "getRandom" prefix.
@@ -65,22 +66,12 @@ export class ConvertSettingsRandomizer implements Randomizer {
     return randomSettings
   }
 
-  private getRandomNumber(min: number, max: number, precision?: number): number | null {
-    const withFloat = typeof precision === 'number'
-    let randomValue = randomNumber(min, max, withFloat)
-
-    if (withFloat) {
-      randomValue = parseFloat(randomValue.toPrecision(precision!))
-    }
-    if (isNaN(randomValue)) {
-      return null
-    }
-
-    return randomValue
+  private getRandomNumber(...args: Parameters<typeof getRandomNumber>): number | null {
+    return getRandomNumber(...args)
   }
 
   private getRandomBoolean(): boolean {
-    return Math.random() < 0.5
+    return getRandomBoolean()
   }
 
   private getRandomHexColor(): string {

apps/frontend/src/utility/__tests__/SettingsValidator/isBlurValid.test.ts

@@ -2,31 +2,34 @@ import { MAX_BLUR_SIGMA, MIN_BLUR_SIGMA } from '@scissors/sharp'
 
 import { SettingsValidator } from '@utility/SettingsValidator'
 
-describe('@utility/SettingsValidator.isBlurValid', () => {
+describe('utility - SettingsValidator.isBlurValid', () => {
   const isBlurValid = SettingsValidator.isBlurValid
 
   it('should return true for null', () => {
     expect(isBlurValid(null)).toBe(true)
   })
 
-  it('should return true for valid blur options object', () => {
-    expect(isBlurValid({ value: false, sigma: 5 })).toBe(true)
-    expect(isBlurValid({ value: true, sigma: 2 })).toBe(true)
-    expect(isBlurValid({ value: true, sigma: MIN_BLUR_SIGMA })).toBe(true)
-    expect(isBlurValid({ value: true, sigma: MAX_BLUR_SIGMA })).toBe(true)
-    expect(isBlurValid({ value: true, sigma: null })).toBe(true)
+  it.each([
+    { value: false, sigma: 5 },
+    { value: true, sigma: 2 },
+    { value: true, sigma: MIN_BLUR_SIGMA },
+    { value: true, sigma: MAX_BLUR_SIGMA },
+    { value: true, sigma: null }
+  ])('should return true for invalid blur options object (%s)', payload => {
+    expect(isBlurValid(payload)).toBe(true)
   })
 
-  it('should return false for invalid blur options object', () => {
-    expect(isBlurValid(undefined)).toBe(false)
-    expect(isBlurValid({})).toBe(false)
-    expect(isBlurValid([])).toBe(false)
-    expect(isBlurValid(new Map())).toBe(false)
-    expect(isBlurValid({ value: true })).toBe(false)
-    expect(isBlurValid({ value: { sigma: 0 } })).toBe(false)
-    expect(isBlurValid({ sigma: 0 })).toBe(false)
-    expect(isBlurValid({ sigma: true })).toBe(false)
-    expect(isBlurValid({ value: true, sigma: MIN_BLUR_SIGMA - 0.00001 })).toBe(false)
-    expect(isBlurValid({ value: true, sigma: MAX_BLUR_SIGMA + 0.00001 })).toBe(false)
+  it.each([
+    NaN,
+    {},
+    [],
+    { value: true },
+    { value: { sigma: 0 } },
+    { sigma: 0 },
+    { sigma: true },
+    { value: true, sigma: MIN_BLUR_SIGMA - 0.1 },
+    { value: true, sigma: MAX_BLUR_SIGMA + 0.1 }
+  ])('should return false for invalid blur options object (%s)', payload => {
+    expect(isBlurValid(payload)).toBe(false)
   })
 })