From 6c12550ee7b0253bf4cc325b89c80c0d0b78b9fe Mon Sep 17 00:00:00 2001 From: Jakob Scheid Date: Thu, 4 Jun 2026 08:55:59 +0200 Subject: [PATCH] test(css-dimensions-util): add test cases with complex dimensions --- src/utils/__tests__/cssDimensions.test.js | 161 ++++++++++++---------- 1 file changed, 87 insertions(+), 74 deletions(-) diff --git a/src/utils/__tests__/cssDimensions.test.js b/src/utils/__tests__/cssDimensions.test.js index a25366c..1543987 100644 --- a/src/utils/__tests__/cssDimensions.test.js +++ b/src/utils/__tests__/cssDimensions.test.js @@ -18,92 +18,105 @@ import { expect, test } from 'vitest'; import { ensureUnit } from '../cssDimensions'; test.for([ - { dimension: null, expected: '0px' }, - { dimension: undefined, expected: '0px' }, + { dimension: null, expected: '0px' }, + { dimension: undefined, expected: '0px' }, - { dimension: 0, expected: '0px' }, - { dimension: -0, expected: '0px' }, - { dimension: -1, expected: '-1px' }, - { dimension: -42, expected: '-42px' }, - { dimension: 1, expected: '1px' }, - { dimension: 42, expected: '42px' }, + { dimension: 0, expected: '0px' }, + { dimension: -0, expected: '0px' }, + { dimension: -1, expected: '-1px' }, + { dimension: -42, expected: '-42px' }, + { dimension: 1, expected: '1px' }, + { dimension: 42, expected: '42px' }, - { dimension: 0.0, expected: '0px' }, - { dimension: -0.0, expected: '0px' }, - { dimension: -1.0, expected: '-1px' }, - { dimension: -42.0, expected: '-42px' }, - { dimension: 1.0, expected: '1px' }, - { dimension: 42.0, expected: '42px' }, + { dimension: 0.0, expected: '0px' }, + { dimension: -0.0, expected: '0px' }, + { dimension: -1.0, expected: '-1px' }, + { dimension: -42.0, expected: '-42px' }, + { dimension: 1.0, expected: '1px' }, + { dimension: 42.0, expected: '42px' }, - { dimension: 0.42, expected: '0.42px' }, - { dimension: -0.42, expected: '-0.42px' }, - { dimension: -1.42, expected: '-1.42px' }, - { dimension: -42.42, expected: '-42.42px' }, - { dimension: 1.42, expected: '1.42px' }, - { dimension: 42.42, expected: '42.42px' }, + { dimension: 0.42, expected: '0.42px' }, + { dimension: -0.42, expected: '-0.42px' }, + { dimension: -1.42, expected: '-1.42px' }, + { dimension: -42.42, expected: '-42.42px' }, + { dimension: 1.42, expected: '1.42px' }, + { dimension: 42.42, expected: '42.42px' }, - { dimension: '0', expected: '0px' }, - { dimension: '-0', expected: '-0px' }, - { dimension: '-1', expected: '-1px' }, - { dimension: '-42', expected: '-42px' }, - { dimension: '1', expected: '1px' }, - { dimension: '42', expected: '42px' }, + { dimension: '0', expected: '0px' }, + { dimension: '-0', expected: '-0px' }, + { dimension: '-1', expected: '-1px' }, + { dimension: '-42', expected: '-42px' }, + { dimension: '1', expected: '1px' }, + { dimension: '42', expected: '42px' }, - { dimension: '0.0', expected: '0.0px' }, - { dimension: '-0.0', expected: '-0.0px' }, - { dimension: '-1.0', expected: '-1.0px' }, - { dimension: '-42.0', expected: '-42.0px' }, - { dimension: '1.0', expected: '1.0px' }, - { dimension: '42.0', expected: '42.0px' }, + { dimension: '0.0', expected: '0.0px' }, + { dimension: '-0.0', expected: '-0.0px' }, + { dimension: '-1.0', expected: '-1.0px' }, + { dimension: '-42.0', expected: '-42.0px' }, + { dimension: '1.0', expected: '1.0px' }, + { dimension: '42.0', expected: '42.0px' }, - { dimension: '0.42', expected: '0.42px' }, - { dimension: '-0.42', expected: '-0.42px' }, - { dimension: '-1.42', expected: '-1.42px' }, - { dimension: '-42.42', expected: '-42.42px' }, - { dimension: '1.42', expected: '1.42px' }, - { dimension: '42.42', expected: '42.42px' }, + { dimension: '0.42', expected: '0.42px' }, + { dimension: '-0.42', expected: '-0.42px' }, + { dimension: '-1.42', expected: '-1.42px' }, + { dimension: '-42.42', expected: '-42.42px' }, + { dimension: '1.42', expected: '1.42px' }, + { dimension: '42.42', expected: '42.42px' }, - { dimension: '0px', expected: '0px' }, - { dimension: '-0px', expected: '-0px' }, - { dimension: '-1px', expected: '-1px' }, - { dimension: '-42px', expected: '-42px' }, - { dimension: '1px', expected: '1px' }, - { dimension: '42px', expected: '42px' }, + { dimension: '0px', expected: '0px' }, + { dimension: '-0px', expected: '-0px' }, + { dimension: '-1px', expected: '-1px' }, + { dimension: '-42px', expected: '-42px' }, + { dimension: '1px', expected: '1px' }, + { dimension: '42px', expected: '42px' }, - { dimension: '0.0px', expected: '0.0px' }, - { dimension: '-0.0px', expected: '-0.0px' }, - { dimension: '-1.0px', expected: '-1.0px' }, - { dimension: '-42.0px', expected: '-42.0px' }, - { dimension: '1.0px', expected: '1.0px' }, - { dimension: '42.0px', expected: '42.0px' }, + { dimension: '0.0px', expected: '0.0px' }, + { dimension: '-0.0px', expected: '-0.0px' }, + { dimension: '-1.0px', expected: '-1.0px' }, + { dimension: '-42.0px', expected: '-42.0px' }, + { dimension: '1.0px', expected: '1.0px' }, + { dimension: '42.0px', expected: '42.0px' }, - { dimension: '0.42px', expected: '0.42px' }, - { dimension: '-0.42px', expected: '-0.42px' }, - { dimension: '-1.42px', expected: '-1.42px' }, - { dimension: '-42.42px', expected: '-42.42px' }, - { dimension: '1.42px', expected: '1.42px' }, - { dimension: '42.42px', expected: '42.42px' }, + { dimension: '0.42px', expected: '0.42px' }, + { dimension: '-0.42px', expected: '-0.42px' }, + { dimension: '-1.42px', expected: '-1.42px' }, + { dimension: '-42.42px', expected: '-42.42px' }, + { dimension: '1.42px', expected: '1.42px' }, + { dimension: '42.42px', expected: '42.42px' }, - { dimension: '0em', expected: '0em' }, - { dimension: '-0em', expected: '-0em' }, - { dimension: '-1em', expected: '-1em' }, - { dimension: '-42em', expected: '-42em' }, - { dimension: '1em', expected: '1em' }, - { dimension: '42em', expected: '42em' }, + { dimension: '0em', expected: '0em' }, + { dimension: '-0em', expected: '-0em' }, + { dimension: '-1em', expected: '-1em' }, + { dimension: '-42em', expected: '-42em' }, + { dimension: '1em', expected: '1em' }, + { dimension: '42em', expected: '42em' }, - { dimension: '0.0em', expected: '0.0em' }, - { dimension: '-0.0em', expected: '-0.0em' }, - { dimension: '-1.0em', expected: '-1.0em' }, - { dimension: '-42.0em', expected: '-42.0em' }, - { dimension: '1.0em', expected: '1.0em' }, - { dimension: '42.0em', expected: '42.0em' }, + { dimension: '0.0em', expected: '0.0em' }, + { dimension: '-0.0em', expected: '-0.0em' }, + { dimension: '-1.0em', expected: '-1.0em' }, + { dimension: '-42.0em', expected: '-42.0em' }, + { dimension: '1.0em', expected: '1.0em' }, + { dimension: '42.0em', expected: '42.0em' }, - { dimension: '0.42em', expected: '0.42em' }, - { dimension: '-0.42em', expected: '-0.42em' }, - { dimension: '-1.42em', expected: '-1.42em' }, - { dimension: '-42.42em', expected: '-42.42em' }, - { dimension: '1.42em', expected: '1.42em' }, - { dimension: '42.42em', expected: '42.42em' } + { dimension: '0.42em', expected: '0.42em' }, + { dimension: '-0.42em', expected: '-0.42em' }, + { dimension: '-1.42em', expected: '-1.42em' }, + { dimension: '-42.42em', expected: '-42.42em' }, + { dimension: '1.42em', expected: '1.42em' }, + { dimension: '42.42em', expected: '42.42em' }, + + { dimension: 'calc(42px - 1em)', expected: 'calc(42px - 1em)' }, + { dimension: 'calc(42px)', expected: 'calc(42px)' }, + { dimension: 'calc(42vh)', expected: 'calc(42vh)' }, + { dimension: 'min(42px, 1em)', expected: 'min(42px, 1em)' }, + { dimension: 'max(42px, 5rem)', expected: 'max(42px, 5rem)' }, + { dimension: 'clamp(42vh, 23vw, 13cap)', expected: 'clamp(42vh, 23vw, 13cap)' }, + + { dimension: 'calc(42px-1em)', expected: 'calc(42px-1em)' }, + { dimension: 'min(42px,1em)', expected: 'min(42px,1em)' }, + { dimension: 'max(42px,5rem)', expected: 'max(42px,5rem)' }, + { dimension: 'clamp(42vh,23vw,13cap)', expected: 'clamp(42vh,23vw,13cap)' }, + { dimension: 'clamp( 42vh,23vw,13cap )', expected: 'clamp( 42vh,23vw,13cap )' } ])('ensureUnit returns $expected with input $dimension', ({ dimension, expected }) => { expect(ensureUnit(dimension)).toBe(expected); }); \ No newline at end of file