From 804393be40a488233072fb3cd9bfba40ffa852ee Mon Sep 17 00:00:00 2001 From: Tony Jiang Date: Tue, 9 Jul 2024 13:31:39 +1000 Subject: [PATCH] test: fix snapshots and adopt concurrent mode --- test/base.test.ts | 10 +-- test/fade.test.ts | 20 ++--- test/slide.test.ts | 178 +++++++++++++++++++++++---------------------- test/spin.test.ts | 28 +++---- test/zoom.test.ts | 28 +++---- 5 files changed, 133 insertions(+), 131 deletions(-) diff --git a/test/base.test.ts b/test/base.test.ts index d604025..bc0d5da 100644 --- a/test/base.test.ts +++ b/test/base.test.ts @@ -1,9 +1,9 @@ -import { describe, expect, it } from 'vitest' +import { describe, it } from 'vitest' import { generator, uno } from '~/utils' -describe('base classname', () => { - it('"animate-in" should generate enter keyframe and css variables', async () => { +describe.concurrent('base classname', () => { + it('"animate-in" should generate enter keyframe and css variables', async ({ expect }) => { const { css } = await uno.generate('animate-in') expect(css).toMatchInlineSnapshot(` @@ -14,7 +14,7 @@ describe('base classname', () => { }) - it('"animate-out" should generate exit keyframe and css variables', async () => { + it('"animate-out" should generate exit keyframe and css variables', async ({ expect }) => { const { css } = await uno.generate('animate-out') expect(css).toMatchInlineSnapshot(` @@ -25,7 +25,7 @@ describe('base classname', () => { }) - it('"animation-duration" should be default to "theme.duration"', async () => { + it('"animation-duration" should be default to "theme.duration"', async ({ expect }) => { const DURATION = '500ms' const uno = generator({ duration: { DEFAULT: DURATION } }) diff --git a/test/fade.test.ts b/test/fade.test.ts index 4a29052..052e48b 100644 --- a/test/fade.test.ts +++ b/test/fade.test.ts @@ -1,12 +1,12 @@ -import { describe, expect, it } from 'vitest' +import { describe, it } from 'vitest' import { CSS_VARIABLE_PREFIX } from '@/constants' import { CSS_VARIABLES, DECIMALS_0_TO_100, INTEGERS_0_TO_100 } from '~/data' import { uno } from '~/utils' -describe('fade animation', () => { +describe.concurrent('fade animation', () => { describe('fade-in', () => { - it(`should generate "${CSS_VARIABLE_PREFIX}-enter-opacity" css variable and default to "0"`, async () => { + it(`should generate "${CSS_VARIABLE_PREFIX}-enter-opacity" css variable and default to "0"`, async ({ expect }) => { const { css } = await uno.generate('fade-in') expect(css).toContain(`.fade-in{${CSS_VARIABLE_PREFIX}-enter-opacity:0;}`) @@ -14,7 +14,7 @@ describe('fade animation', () => { describe('percentage', () => { - it(`should covert percentages from "0" to "100"`, async () => { + it(`should convert percentages from "0" to "100"`, async ({ expect }) => { const classnames = INTEGERS_0_TO_100.map(i => `fade-in-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -37,7 +37,7 @@ describe('fade animation', () => { }) - it(`should also convert decimals`, async () => { + it(`should also convert decimals`, async ({ expect }) => { const classnames = DECIMALS_0_TO_100.map(i => `fade-in-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -56,7 +56,7 @@ describe('fade animation', () => { describe('css variable', () => { - it(`should handle css variables`, async () => { + it(`should handle css variables`, async ({ expect }) => { const classnames = CSS_VARIABLES.map(i => `fade-in-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -74,7 +74,7 @@ describe('fade animation', () => { describe('fade-out', () => { - it(`should generate "${CSS_VARIABLE_PREFIX}-exit-opacity" css variable and default to "0"`, async () => { + it(`should generate "${CSS_VARIABLE_PREFIX}-exit-opacity" css variable and default to "0"`, async ({ expect }) => { const { css } = await uno.generate('fade-out') expect(css).toContain(`.fade-out{${CSS_VARIABLE_PREFIX}-exit-opacity:0;}`) @@ -82,7 +82,7 @@ describe('fade animation', () => { describe('percentage', () => { - it(`should covert percentages from "0" to "100"`, async () => { + it(`should convert percentages from "0" to "100"`, async ({ expect }) => { const classnames = INTEGERS_0_TO_100.map(i => `fade-out-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -105,7 +105,7 @@ describe('fade animation', () => { }) - it(`should also convert decimals`, async () => { + it(`should also convert decimals`, async ({ expect }) => { const classnames = DECIMALS_0_TO_100.map(i => `fade-out-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -124,7 +124,7 @@ describe('fade animation', () => { describe('css variable', () => { - it(`should handle css variables`, async () => { + it(`should handle css variables`, async ({ expect }) => { const classnames = CSS_VARIABLES.map(i => `fade-out-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) diff --git a/test/slide.test.ts b/test/slide.test.ts index 1f7b710..d7e2c3e 100644 --- a/test/slide.test.ts +++ b/test/slide.test.ts @@ -1,13 +1,13 @@ -import { describe, expect, it } from 'vitest' +import { describe, it } from 'vitest' import { CSS_VARIABLE_PREFIX } from '@/constants' import { CSS_VARIABLES, DECIMALS, FRACTIONS, INTEGERS } from '~/data' import { uno } from '~/utils' -describe('slide animation', () => { +describe.concurrent('slide animation', () => { describe('slide-in', () => { describe('misc', () => { - it(`"should generate "${CSS_VARIABLE_PREFIX}-enter-translate-x" and "-y" css variable and default to "100%"`, async () => { + it(`"should generate "${CSS_VARIABLE_PREFIX}-enter-translate-x" and "-y" css variable and default to "100%"`, async ({ expect }) => { const classnames = [ 'slide-in-t', 'slide-in-b', @@ -28,7 +28,7 @@ describe('slide animation', () => { }) - it(`should handle both with or without "-from"`, async () => { + it(`should handle both with or without "-from"`, async ({ expect }) => { const classnames = [ 'slide-in-t', 'slide-in-b', @@ -57,7 +57,7 @@ describe('slide animation', () => { }) - it(`should alias "t|b|l|r" to "top|bottom|left|right"`, async () => { + it(`should alias "t|b|l|r" to "top|bottom|left|right"`, async ({ expect }) => { const classnames = [ 'slide-in-t', 'slide-in-b', @@ -88,7 +88,7 @@ describe('slide animation', () => { describe('direction', () => { - it(`should generate "top|bottom" as "translate-y"`, async () => { + it(`should generate "top|bottom" as "translate-y"`, async ({ expect }) => { const classnames = [ 'slide-in-t', 'slide-in-b', @@ -105,7 +105,7 @@ describe('slide animation', () => { }) - it(`should generate "left|right" as "translate-x"`, async () => { + it(`should generate "left|right" as "translate-x"`, async ({ expect }) => { const classnames = [ 'slide-in-l', 'slide-in-r', @@ -124,7 +124,7 @@ describe('slide animation', () => { describe('positivity and negativity', () => { - it(`should generate negative value for "top|left"`, async () => { + it(`should generate negative value for "top|left"`, async ({ expect }) => { const classnames = [ 'slide-in-t', 'slide-in-l', @@ -141,7 +141,7 @@ describe('slide animation', () => { }) - it(`should generate positive value for "bottom|right"`, async () => { + it(`should generate positive value for "bottom|right"`, async ({ expect }) => { const classnames = [ 'slide-in-b', 'slide-in-r', @@ -158,7 +158,7 @@ describe('slide animation', () => { }) - it(`should convert negative value to positive for "top|left"`, async () => { + it(`should convert negative value to positive for "top|left"`, async ({ expect }) => { const classnames = [ 'slide-in-t--10', 'slide-in-l--10', @@ -177,7 +177,7 @@ describe('slide animation', () => { describe('rem', () => { - it(`should covert any numbers to "rem" (x / 4rem) including negative`, async () => { + it(`should convert any numbers to "rem" (x / 4rem) including negative`, async ({ expect }) => { const classnames = INTEGERS.map(i => `slide-in-t-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -230,7 +230,7 @@ describe('slide animation', () => { }) - it(`should also convert decimals including negative`, async () => { + it(`should also convert decimals including negative`, async ({ expect }) => { const classnames = DECIMALS.map(i => `slide-in-t-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -257,34 +257,12 @@ describe('slide animation', () => { describe('fraction', () => { - it(`should covert any fractions including negative`, async () => { + it(`should convert any fractions including negative`, async ({ expect }) => { const classnames = FRACTIONS.map(i => `slide-in-t-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) expect(matched).toStrictEqual(new Set(classnames)) - expect(css).toMatchInlineSnapshot(` - "/* layer: default */ - .slide-in-t--0\\.1{--una-enter-translate-y:0.025rem;} - .slide-in-t--10\\.1{--una-enter-translate-y:2.525rem;} - .slide-in-t--180\\.37{--una-enter-translate-y:45.0925rem;} - .slide-in-t--199\\.9{--una-enter-translate-y:49.975rem;} - .slide-in-t--52\\.1{--una-enter-translate-y:13.025rem;} - .slide-in-t--66\\.66{--una-enter-translate-y:16.665rem;} - .slide-in-t-0\\.1{--una-enter-translate-y:-0.025rem;} - .slide-in-t-10\\.1{--una-enter-translate-y:-2.525rem;} - .slide-in-t-180\\.37{--una-enter-translate-y:-45.0925rem;} - .slide-in-t-199\\.9{--una-enter-translate-y:-49.975rem;} - .slide-in-t-52\\.1{--una-enter-translate-y:-13.025rem;} - .slide-in-t-66\\.66{--una-enter-translate-y:-16.665rem;} - .slide-in-t-99\\.9{--una-enter-translate-y:-24.975rem;}" - `) - }) - - - it(`should convert "full" to "100%`, async () => { - const { css } = await uno.generate('slide-in-t-full') - expect(css).toMatchInlineSnapshot(` "/* layer: default */ .slide-in-t--1\\/3{--una-enter-translate-y:33.3333333333%;} @@ -301,34 +279,22 @@ describe('slide animation', () => { .slide-in-t-5\\/6{--una-enter-translate-y:-83.3333333333%;}" `) }) - }) - - describe('css variable', () => { - it(`should handle css variables`, async () => { - const classnames = CSS_VARIABLES.map(i => `slide-in-t-${i}`) - const { matched, css } = await uno.generate(classnames.join(' ')) + it(`should convert "full" to "100%`, async ({ expect }) => { + const { css } = await uno.generate('slide-in-t-full') - expect(matched).toStrictEqual(new Set(classnames)) expect(css).toMatchInlineSnapshot(` "/* layer: default */ .slide-in-t-full{--una-enter-translate-y:-100%;}" `) }) }) - }) - describe('slide-out', () => { - describe('misc', () => { - it(`"should generate "${CSS_VARIABLE_PREFIX}-exit-translate-x" and "-y" css variable and default to "100%"`, async () => { - const classnames = [ - 'slide-out-t', - 'slide-out-b', - 'slide-out-l', - 'slide-out-r', - ] + describe('css variable', () => { + it(`should handle css variables`, async ({ expect }) => { + const classnames = CSS_VARIABLES.map(i => `slide-in-t-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -340,18 +306,18 @@ describe('slide animation', () => { .slide-in-t-\\$fooBar{--una-enter-translate-y:var(--fooBar);}" `) }) + }) + }) - it(`should handle both with or without "-to"`, async () => { + describe('slide-out', () => { + describe('misc', () => { + it(`"should generate "${CSS_VARIABLE_PREFIX}-exit-translate-x" and "-y" css variable and default to "100%"`, async ({ expect }) => { const classnames = [ 'slide-out-t', 'slide-out-b', 'slide-out-l', 'slide-out-r', - 'slide-out-to-t', - 'slide-out-to-b', - 'slide-out-to-l', - 'slide-out-to-r', ] const { matched, css } = await uno.generate(classnames.join(' ')) @@ -367,16 +333,16 @@ describe('slide animation', () => { }) - it(`should alias "t|b|l|r" to "top|bottom|left|right"`, async () => { + it(`should handle both with or without "-to"`, async ({ expect }) => { const classnames = [ 'slide-out-t', 'slide-out-b', 'slide-out-l', 'slide-out-r', - 'slide-out-top', - 'slide-out-bottom', - 'slide-out-left', - 'slide-out-right', + 'slide-out-to-t', + 'slide-out-to-b', + 'slide-out-to-l', + 'slide-out-to-r', ] const { matched, css } = await uno.generate(classnames.join(' ')) @@ -394,14 +360,18 @@ describe('slide animation', () => { .slide-out-to-t{--una-exit-translate-y:-100%;}" `) }) - }) - describe('direction', () => { - it(`should generate "top|bottom" as "translate-y"`, async () => { + it(`should alias "t|b|l|r" to "top|bottom|left|right"`, async ({ expect }) => { const classnames = [ 'slide-out-t', 'slide-out-b', + 'slide-out-l', + 'slide-out-r', + 'slide-out-top', + 'slide-out-bottom', + 'slide-out-left', + 'slide-out-right', ] const { matched, css } = await uno.generate(classnames.join(' ')) @@ -419,12 +389,14 @@ describe('slide animation', () => { .slide-out-top{--una-exit-translate-y:-100%;}" `) }) + }) - it(`should generate "left|right" as "translate-x"`, async () => { + describe('direction', () => { + it(`should generate "top|bottom" as "translate-y"`, async ({ expect }) => { const classnames = [ - 'slide-out-l', - 'slide-out-r', + 'slide-out-t', + 'slide-out-b', ] const { matched, css } = await uno.generate(classnames.join(' ')) @@ -436,14 +408,12 @@ describe('slide animation', () => { .slide-out-t{--una-exit-translate-y:-100%;}" `) }) - }) - describe('positivity and negativity', () => { - it(`should generate negative value for "top|left"`, async () => { + it(`should generate "left|right" as "translate-x"`, async ({ expect }) => { const classnames = [ - 'slide-out-t', 'slide-out-l', + 'slide-out-r', ] const { matched, css } = await uno.generate(classnames.join(' ')) @@ -455,12 +425,14 @@ describe('slide animation', () => { .slide-out-r{--una-exit-translate-x:100%;}" `) }) + }) - it(`should generate positive value for "bottom|right"`, async () => { + describe('positivity and negativity', () => { + it(`should generate negative value for "top|left"`, async ({ expect }) => { const classnames = [ - 'slide-out-b', - 'slide-out-r', + 'slide-out-t', + 'slide-out-l', ] const { matched, css } = await uno.generate(classnames.join(' ')) @@ -474,10 +446,10 @@ describe('slide animation', () => { }) - it(`should convert negative value to positive for "top|left"`, async () => { + it(`should generate positive value for "bottom|right"`, async ({ expect }) => { const classnames = [ - 'slide-out-t--10', - 'slide-out-l--10', + 'slide-out-b', + 'slide-out-r', ] const { matched, css } = await uno.generate(classnames.join(' ')) @@ -489,12 +461,13 @@ describe('slide animation', () => { .slide-out-r{--una-exit-translate-x:100%;}" `) }) - }) - describe('rem', () => { - it(`should covert any numbers to "rem" (x / 4rem) including negative`, async () => { - const classnames = INTEGERS.map(i => `slide-out-t-${i}`) + it(`should convert negative value to positive for "top|left"`, async ({ expect }) => { + const classnames = [ + 'slide-out-t--10', + 'slide-out-l--10', + ] const { matched, css } = await uno.generate(classnames.join(' ')) @@ -505,10 +478,12 @@ describe('slide animation', () => { .slide-out-t--10{--una-exit-translate-y:2.5rem;}" `) }) + }) - it(`should also convert decimals including negative`, async () => { - const classnames = DECIMALS.map(i => `slide-out-t-${i}`) + describe('rem', () => { + it(`should convert any numbers to "rem" (x / 4rem) including negative`, async ({ expect }) => { + const classnames = INTEGERS.map(i => `slide-out-t-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -558,11 +533,36 @@ describe('slide animation', () => { .slide-out-t-90{--una-exit-translate-y:-22.5rem;}" `) }) + + + it(`should also convert decimals including negative`, async ({ expect }) => { + const classnames = DECIMALS.map(i => `slide-out-t-${i}`) + + const { matched, css } = await uno.generate(classnames.join(' ')) + + expect(matched).toStrictEqual(new Set(classnames)) + expect(css).toMatchInlineSnapshot(` + "/* layer: default */ + .slide-out-t--0\\.1{--una-exit-translate-y:0.025rem;} + .slide-out-t--10\\.1{--una-exit-translate-y:2.525rem;} + .slide-out-t--180\\.37{--una-exit-translate-y:45.0925rem;} + .slide-out-t--199\\.9{--una-exit-translate-y:49.975rem;} + .slide-out-t--52\\.1{--una-exit-translate-y:13.025rem;} + .slide-out-t--66\\.66{--una-exit-translate-y:16.665rem;} + .slide-out-t-0\\.1{--una-exit-translate-y:-0.025rem;} + .slide-out-t-10\\.1{--una-exit-translate-y:-2.525rem;} + .slide-out-t-180\\.37{--una-exit-translate-y:-45.0925rem;} + .slide-out-t-199\\.9{--una-exit-translate-y:-49.975rem;} + .slide-out-t-52\\.1{--una-exit-translate-y:-13.025rem;} + .slide-out-t-66\\.66{--una-exit-translate-y:-16.665rem;} + .slide-out-t-99\\.9{--una-exit-translate-y:-24.975rem;}" + `) + }) }) describe('fraction', () => { - it(`should covert any fractions including negative`, async () => { + it(`should convert any fractions including negative`, async ({ expect }) => { const classnames = FRACTIONS.map(i => `slide-out-t-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -586,7 +586,7 @@ describe('slide animation', () => { }) - it(`should convert "full" to "100%`, async () => { + it(`should convert "full" to "100%`, async ({ expect }) => { const { css } = await uno.generate('slide-out-t-full') expect(css).toMatchInlineSnapshot(` @@ -598,7 +598,7 @@ describe('slide animation', () => { describe('css variable', () => { - it(`should handle css variables`, async () => { + it(`should handle css variables`, async ({ expect }) => { const classnames = CSS_VARIABLES.map(i => `slide-out-t-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -606,7 +606,9 @@ describe('slide animation', () => { expect(matched).toStrictEqual(new Set(classnames)) expect(css).toMatchInlineSnapshot(` "/* layer: default */ - .slide-out-t-full{--una-exit-translate-y:-100%;}" + .slide-out-t-\\$foo{--una-exit-translate-y:var(--foo);} + .slide-out-t-\\$foo-bar{--una-exit-translate-y:var(--foo-bar);} + .slide-out-t-\\$fooBar{--una-exit-translate-y:var(--fooBar);}" `) }) }) diff --git a/test/spin.test.ts b/test/spin.test.ts index a4d4756..dc4a282 100644 --- a/test/spin.test.ts +++ b/test/spin.test.ts @@ -1,12 +1,12 @@ -import { describe, expect, it } from 'vitest' +import { describe, it } from 'vitest' import { CSS_VARIABLE_PREFIX } from '@/constants' import { CSS_VARIABLES, DECIMALS, INTEGERS } from '~/data' import { uno } from '~/utils' -describe('spin animation', () => { +describe.concurrent('spin animation', () => { describe('spin-in', () => { - it(`should generate "${CSS_VARIABLE_PREFIX}-enter-rotate" css variable and default to "30deg"`, async () => { + it(`should generate "${CSS_VARIABLE_PREFIX}-enter-rotate" css variable and default to "30deg"`, async ({ expect }) => { const { css } = await uno.generate('spin-in') expect(css).toContain(`.spin-in{${CSS_VARIABLE_PREFIX}-enter-rotate:30deg;}`) @@ -14,7 +14,7 @@ describe('spin animation', () => { describe('angle', () => { - it(`should handle any numbers including negative and unit default to "deg"`, async () => { + it(`should handle any numbers including negative and unit default to "deg"`, async ({ expect }) => { const classnames = INTEGERS.map(i => `spin-in-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -67,7 +67,7 @@ describe('spin animation', () => { }) - it(`should also handle decimals including negative`, async () => { + it(`should also handle decimals including negative`, async ({ expect }) => { const classnames = DECIMALS.map(i => `spin-in-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -92,7 +92,7 @@ describe('spin animation', () => { }) - it(`should use units ("deg", "rad", "grad", "turn") as is`, async () => { + it(`should use units ("deg", "rad", "grad", "turn") as is`, async ({ expect }) => { const DATASET = INTEGERS.filter(Boolean) const classnames = [ @@ -271,7 +271,7 @@ describe('spin animation', () => { }) - it(`should not use any unit for "0"`, async () => { + it(`should not use any unit for "0"`, async ({ expect }) => { const classnames = [ 'spin-in-0', 'spin-in-0deg', @@ -296,7 +296,7 @@ describe('spin animation', () => { describe('css variable', () => { - it(`should handle css variables`, async () => { + it(`should handle css variables`, async ({ expect }) => { const classnames = CSS_VARIABLES.map(i => `spin-in-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -314,7 +314,7 @@ describe('spin animation', () => { describe('spin-out', () => { - it(`should generate "${CSS_VARIABLE_PREFIX}-exit-rotate" css variable and default to "30deg"`, async () => { + it(`should generate "${CSS_VARIABLE_PREFIX}-exit-rotate" css variable and default to "30deg"`, async ({ expect }) => { const { css } = await uno.generate('spin-out') expect(css).toContain(`.spin-out{${CSS_VARIABLE_PREFIX}-exit-rotate:30deg;}`) @@ -322,7 +322,7 @@ describe('spin animation', () => { describe('angle', () => { - it(`should handle any numbers including negative and unit default to "deg"`, async () => { + it(`should handle any numbers including negative and unit default to "deg"`, async ({ expect }) => { const classnames = INTEGERS.map(i => `spin-out-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -375,7 +375,7 @@ describe('spin animation', () => { }) - it(`should also handle decimals including negative`, async () => { + it(`should also handle decimals including negative`, async ({ expect }) => { const classnames = DECIMALS.map(i => `spin-out-${i}`) const { css } = await uno.generate(classnames.join(' ')) @@ -399,7 +399,7 @@ describe('spin animation', () => { }) - it(`should use units ("deg", "rad", "grad", "turn") as is`, async () => { + it(`should use units ("deg", "rad", "grad", "turn") as is`, async ({ expect }) => { const DATASET = INTEGERS.filter(Boolean) const classnames = [ @@ -578,7 +578,7 @@ describe('spin animation', () => { }) - it(`should not use any unit for "0"`, async () => { + it(`should not use any unit for "0"`, async ({ expect }) => { const classnames = [ 'spin-out-0', 'spin-out-0deg', @@ -603,7 +603,7 @@ describe('spin animation', () => { describe('css variable', () => { - it(`should handle css variables`, async () => { + it(`should handle css variables`, async ({ expect }) => { const classnames = CSS_VARIABLES.map(i => `spin-out-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) diff --git a/test/zoom.test.ts b/test/zoom.test.ts index 7fc7c0a..0ede968 100644 --- a/test/zoom.test.ts +++ b/test/zoom.test.ts @@ -1,12 +1,12 @@ -import { describe, expect, it } from 'vitest' +import { describe, it } from 'vitest' import { CSS_VARIABLE_PREFIX } from '@/constants' import { CSS_VARIABLES, DECIMALS, FRACTIONS, INTEGERS } from '~/data' import { uno } from '~/utils' -describe('zoom animation', () => { +describe.concurrent('zoom animation', () => { describe('zoom-in', () => { - it(`should generate "${CSS_VARIABLE_PREFIX}-enter-scale" css variable and default to "0"`, async () => { + it(`should generate "${CSS_VARIABLE_PREFIX}-enter-scale" css variable and default to "0"`, async ({ expect }) => { const { css } = await uno.generate('zoom-in') expect(css).toContain(`.zoom-in{${CSS_VARIABLE_PREFIX}-enter-scale:0;}`) @@ -14,7 +14,7 @@ describe('zoom animation', () => { describe('percentage', () => { - it(`should covert any percentages including negative`, async () => { + it(`should convert any percentages including negative`, async ({ expect }) => { const classnames = INTEGERS.map(i => `zoom-in-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -67,7 +67,7 @@ describe('zoom animation', () => { }) - it(`should also convert decimals including negative`, async () => { + it(`should also convert decimals including negative`, async ({ expect }) => { const classnames = DECIMALS.map(i => `zoom-in-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -94,7 +94,7 @@ describe('zoom animation', () => { describe('fraction', () => { - it(`should covert any fractions including negative`, async () => { + it(`should convert any fractions including negative`, async ({ expect }) => { const classnames = FRACTIONS.map(i => `zoom-in-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -118,7 +118,7 @@ describe('zoom animation', () => { }) - it(`should convert "full" to "100%`, async () => { + it(`should convert "full" to "100%`, async ({ expect }) => { const { css } = await uno.generate('zoom-in-full') expect(css).toMatchInlineSnapshot(` @@ -130,7 +130,7 @@ describe('zoom animation', () => { describe('css variable', () => { - it(`should handle css variables`, async () => { + it(`should handle css variables`, async ({ expect }) => { const classnames = CSS_VARIABLES.map(i => `zoom-in-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -148,7 +148,7 @@ describe('zoom animation', () => { describe('zoom-out', () => { - it(`should generate "${CSS_VARIABLE_PREFIX}-exit-scale" css variable and default to "0"`, async () => { + it(`should generate "${CSS_VARIABLE_PREFIX}-exit-scale" css variable and default to "0"`, async ({ expect }) => { const { css } = await uno.generate('zoom-out') expect(css).toContain(`.zoom-out{${CSS_VARIABLE_PREFIX}-exit-scale:0;}`) @@ -156,7 +156,7 @@ describe('zoom animation', () => { describe('percentage', () => { - it(`should covert any percentages including negative`, async () => { + it(`should convert any percentages including negative`, async ({ expect }) => { const classnames = INTEGERS.map(i => `zoom-out-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -209,7 +209,7 @@ describe('zoom animation', () => { }) - it(`should also convert decimals including negative`, async () => { + it(`should also convert decimals including negative`, async ({ expect }) => { const classnames = DECIMALS.map(i => `zoom-out-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -236,7 +236,7 @@ describe('zoom animation', () => { describe('fraction', () => { - it(`should covert any fractions including negative`, async () => { + it(`should convert any fractions including negative`, async ({ expect }) => { const classnames = FRACTIONS.map(i => `zoom-out-${i}`) const { matched, css } = await uno.generate(classnames.join(' ')) @@ -260,7 +260,7 @@ describe('zoom animation', () => { }) - it(`should convert "full" to "100%`, async () => { + it(`should convert "full" to "100%`, async ({ expect }) => { const { css } = await uno.generate('zoom-out-full') expect(css).toMatchInlineSnapshot(` @@ -272,7 +272,7 @@ describe('zoom animation', () => { describe('css variable', () => { - it(`should handle css variables`, async () => { + it(`should handle css variables`, async ({ expect }) => { const classnames = CSS_VARIABLES.map(i => `zoom-out-${i}`) const { matched, css } = await uno.generate(classnames.join(' '))