kmcom-nuxt-layers 6.3.0 → 6.5.0

package/layers/design-system/theming/server/utils/accent-css.test.ts

@@ -1,71 +0,0 @@
-import twColors from 'tailwindcss/colors'
-import { describe, expect, it } from 'vite-plus/test'
-
-import { buildAccentCSS } from './accent-css'
-
-const ACCENTS = [
-  'red',
-  'orange',
-  'amber',
-  'yellow',
-  'lime',
-  'green',
-  'emerald',
-  'teal',
-  'cyan',
-  'sky',
-  'blue',
-  'indigo',
-  'violet',
-  'purple',
-  'fuchsia',
-  'pink',
-  'rose',
-] as const
-
-const SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
-
-describe('buildAccentCSS', () => {
-  const css = buildAccentCSS()
-
-  it('emits one html[data-theme-colour] rule per accent', () => {
-    for (const accent of ACCENTS) {
-      expect(css).toContain(`html[data-theme-colour="${accent}"]{`)
-    }
-    expect(css.match(/html\[data-theme-colour="/g)).toHaveLength(ACCENTS.length)
-  })
-
-  it('never emits the literal string "undefined"', () => {
-    expect(css).not.toContain('undefined')
-  })
-
-  it('includes every shade for the primary palette of each accent', () => {
-    for (const accent of ACCENTS) {
-      const ruleMatch = css.match(
-        new RegExp(`html\\[data-theme-colour="${accent}"\\]\\{([^}]*)\\}`)
-      )
-      expect(ruleMatch).not.toBeNull()
-      const rule = ruleMatch?.[1] ?? ''
-
-      for (const shade of SHADES) {
-        expect(rule).toContain(`--ui-color-primary-${shade}:`)
-      }
-    }
-  })
-
-  it('uses the actual tailwind colour values for the primary palette', () => {
-    const redPalette = twColors.red as unknown as Record<number, string>
-    expect(css).toContain(`--ui-color-primary-500:${redPalette[500]};`)
-    expect(css).toContain(`--ui-color-primary-50:${redPalette[50]};`)
-  })
-
-  it('includes secondary and info palettes derived from the accent map', () => {
-    // blue -> secondary: indigo, info: sky
-    const indigoPalette = twColors.indigo as unknown as Record<number, string>
-    const skyPalette = twColors.sky as unknown as Record<number, string>
-
-    const blueRule = css.match(/html\[data-theme-colour="blue"\]\{([^}]*)\}/)?.[1] ?? ''
-    expect(blueRule).toContain(`--ui-color-secondary-500:${indigoPalette[500]};`)
-    expect(blueRule).toContain(`--ui-color-info-500:${skyPalette[500]};`)
-  })
-})

package/layers/design-system/theming/server/utils/fouc-config.test.ts

@@ -1,78 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import { buildThemeInitScript } from './fouc-config'
-
-describe('buildThemeInitScript', () => {
-  const script = buildThemeInitScript('blue')
-
-  it('wraps the whole script in a try/catch IIFE', () => {
-    expect(script.startsWith('(function(){try{')).toBe(true)
-    expect(script.endsWith('}catch(e){}})()')).toBe(true)
-  })
-
-  it('captures document.documentElement as h', () => {
-    expect(script).toContain('var h=document.documentElement;')
-  })
-
-  it('reads theme-colour from localStorage and falls back to the default accent', () => {
-    expect(script).toContain(
-      "var c=localStorage.getItem('theme-colour');h.setAttribute('data-theme-colour',c?JSON.parse(c):'blue');"
-    )
-  })
-
-  it('uses the provided default accent verbatim, not a hardcoded one', () => {
-    const other = buildThemeInitScript('rose')
-    expect(other).toContain("h.setAttribute('data-theme-colour',c?JSON.parse(c):'rose');")
-    expect(other).not.toContain("'blue'")
-  })
-
-  it('emits a JSON-parsed tri-state block for theme-contrast', () => {
-    expect(script).toContain("var ct=localStorage.getItem('theme-contrast');")
-    expect(script).toContain("var ctv=ct?JSON.parse(ct):'system';")
-    expect(script).toContain("if(ctv==='on'){h.setAttribute('data-theme-contrast','high')}")
-    expect(script).toContain(
-      "else if(ctv==='off'){h.setAttribute('data-theme-contrast','standard')}"
-    )
-    expect(script).toContain(
-      "else{h.setAttribute('data-theme-contrast',(window.matchMedia&&window.matchMedia('(prefers-contrast:more)').matches)?'high':'standard')}"
-    )
-  })
-
-  it('emits a JSON-parsed tri-state block for theme-motion', () => {
-    expect(script).toContain("var m=localStorage.getItem('theme-motion');")
-    expect(script).toContain("if(mv==='on'){h.setAttribute('data-theme-motion','reduced')}")
-    expect(script).toContain("else if(mv==='off'){h.setAttribute('data-theme-motion','full')}")
-    expect(script).toContain(
-      "window.matchMedia('(prefers-reduced-motion:reduce)').matches)?'reduced':'full'"
-    )
-  })
-
-  it('emits a JSON-parsed tri-state block for theme-transparency', () => {
-    expect(script).toContain("var t=localStorage.getItem('theme-transparency');")
-    expect(script).toContain("if(tv==='on'){h.setAttribute('data-theme-transparency','reduced')}")
-    expect(script).toContain(
-      "else if(tv==='off'){h.setAttribute('data-theme-transparency','full')}"
-    )
-    expect(script).toContain(
-      "window.matchMedia('(prefers-reduced-transparency:reduce)').matches)?'reduced':'full'"
-    )
-  })
-
-  it('emits a plain (non-JSON) tri-state block for theme-mode using dark/light conditions', () => {
-    expect(script).toContain("var dm=localStorage.getItem('theme-mode');")
-    expect(script).toContain("var dmv=dm||'system';")
-    expect(script).toContain("if(dmv==='dark'){h.setAttribute('data-theme-mode','dark')}")
-    expect(script).toContain("else if(dmv==='light'){h.setAttribute('data-theme-mode','light')}")
-    expect(script).toContain(
-      "window.matchMedia('(prefers-color-scheme:dark)').matches)?'dark':'light'"
-    )
-  })
-
-  it('does not JSON.parse the theme-mode value (jsonParsed: false)', () => {
-    expect(script).not.toContain('JSON.parse(dm)')
-  })
-
-  it('produces valid, evaluable JavaScript', () => {
-    expect(() => new Function(script)).not.toThrow()
-  })
-})

package/layers/design-system/typography/app/components/Typography/Headline.test.ts

@@ -1,36 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vite-plus/test'
-
-import Headline from './Headline.vue'
-
-const render = (props: Record<string, unknown>) =>
-  mount(Headline, { props, slots: { default: 'Title' } })
-const classesOf = (props: Record<string, unknown>) => render(props).classes()
-const styleOf = (props: Record<string, unknown>) => render(props).attributes('style') ?? ''
-
-describe('Headline step', () => {
-  it('steps each level down from the display step by default', () => {
-    expect(styleOf({ level: 1 })).toContain('--step: var(--step-display)')
-    expect(styleOf({ level: 2 })).toContain('--step: calc(var(--step-display) - 1)')
-    expect(styleOf({ level: 6 })).toContain('--step: calc(var(--step-display) - 5)')
-    expect(classesOf({ level: 2 }).filter((c) => c.startsWith('text-step-'))).toEqual([])
-  })
-
-  it('drops the default step when an explicit size is given', () => {
-    const wrapper = render({ level: 2, size: 'sm' })
-    expect(wrapper.classes()).toContain('text-sm')
-    expect(wrapper.attributes('style') ?? '').not.toContain('--step')
-  })
-
-  it('leaves line height to the step unless leading is given', () => {
-    expect(classesOf({ level: 2 }).filter((c) => c.startsWith('leading-'))).toEqual([])
-    expect(classesOf({ level: 2, leading: 'leading-tight' })).toContain('leading-tight')
-  })
-
-  it('lets an explicit step win over size and the default', () => {
-    const wrapper = render({ level: 2, size: 'sm', step: 5 })
-    expect(wrapper.classes()).toContain('text-step-5')
-    expect(wrapper.classes()).not.toContain('text-sm')
-    expect(wrapper.attributes('style') ?? '').not.toContain('--step')
-  })
-})

package/layers/design-system/typography/app/components/Typography/index.test.ts

@@ -1,31 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vite-plus/test'
-
-import ElementTw from '#layers/core/app/components/ElementTw.vue'
-
-import Typography from './index.vue'
-
-const classesOf = (props: Record<string, unknown> = {}) =>
-  mount(Typography, {
-    props,
-    slots: { default: 'Body copy' },
-    global: { components: { ElementTw } },
-  }).classes()
-
-describe('Typography size', () => {
-  it('inherits the surrounding size by default instead of pinning text-base', () => {
-    expect(classesOf()).not.toContain('text-base')
-  })
-
-  it('inherits the body line height by default', () => {
-    expect(classesOf().filter((c) => c.startsWith('leading-'))).toEqual([])
-  })
-
-  it('still applies an explicit size', () => {
-    expect(classesOf({ size: 'lg' })).toContain('text-lg')
-  })
-
-  it('applies an explicit step', () => {
-    expect(classesOf({ step: 1 })).toContain('text-step-1')
-  })
-})

package/layers/design-system/typography/app/composables/color.test.ts

@@ -1,30 +0,0 @@
-import { ref } from 'vue'
-import { describe, expect, it } from 'vite-plus/test'
-
-import { useColor } from './color'
-
-describe('useColor', () => {
-  it('builds a class from a plain value', () => {
-    expect(useColor('primary', 'text').value).toBe('text-primary')
-  })
-
-  it('falls back to default when color is undefined', () => {
-    expect(useColor(undefined, 'bg').value).toBe('bg-default')
-  })
-
-  it('tracks a ref', () => {
-    const color = ref<'primary' | 'error'>('primary')
-    const cls = useColor(color)
-    color.value = 'error'
-    expect(cls.value).toBe('text-error')
-  })
-
-  it('tracks a getter', () => {
-    let color: 'primary' | 'error' = 'primary'
-    const state = ref(0)
-    const cls = useColor(() => (state.value, color))
-    color = 'error'
-    state.value++
-    expect(cls.value).toBe('text-error')
-  })
-})

package/layers/design-system/typography/app/composables/typography.test.ts

@@ -1,53 +0,0 @@
-import { readFileSync } from 'node:fs'
-
-import { describe, expect, it } from 'vite-plus/test'
-
-import { TYPE_STEP_CLASSES, useTypography } from './typography'
-
-// Tailwind only emits a class that appears literally in source AND has an @utility — a map
-// entry without a utility renders unstyled, a utility without an entry is unreachable from the
-// components. Both fail silently, so pin the two lists to each other.
-const css = readFileSync(new URL('../assets/css/typography.css', import.meta.url), 'utf8')
-const utilities = [...css.matchAll(/@utility\s+(text-step-[\w-]+)/g)].map(([, name]) => name)
-const mapped = Object.values(TYPE_STEP_CLASSES)
-
-describe('TYPE_STEP_CLASSES ↔ typography.css', () => {
-  it('has an @utility for every mapped class', () => {
-    for (const cls of mapped) expect(utilities).toContain(cls)
-  })
-
-  it('maps every text-step @utility', () => {
-    for (const name of utilities) expect(mapped).toContain(name)
-  })
-
-  it('names each class after its step', () => {
-    for (const [step, cls] of Object.entries(TYPE_STEP_CLASSES)) {
-      expect(cls).toBe(`text-step-${step}`)
-    }
-  })
-})
-
-describe('useTypography step', () => {
-  const classesOf = (props: Parameters<typeof useTypography>[0]) =>
-    useTypography(props).classes.value.split(' ')
-
-  it('emits step 0 rather than treating it as unset', () => {
-    expect(classesOf({ step: 0 })).toContain('text-step-0')
-  })
-
-  it('wins over size instead of emitting two font sizes', () => {
-    const classes = classesOf({ step: 3, size: 'sm' })
-    expect(classes).toContain('text-step-3')
-    expect(classes).not.toContain('text-sm')
-  })
-
-  it('falls back to size when no step is given', () => {
-    expect(classesOf({ size: 'sm' })).toContain('text-sm')
-  })
-
-  // A leading-* class sorts after text-step-* and would override the step's line height.
-  it('emits no leading class unless one is given', () => {
-    expect(classesOf({ step: 3 }).filter((c) => c.startsWith('leading-'))).toEqual([])
-    expect(classesOf({ step: 3, leading: 'leading-tight' })).toContain('leading-tight')
-  })
-})

package/layers/design-system/visual/app/composables/tint.test.ts

@@ -1,22 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import { useTint } from './tint'
-
-describe('useTint', () => {
-  it('resolves a slot to its ui color token with the level opacity', () => {
-    expect(useTint({ color: 'primary', level: 'light' }).style.value).toEqual({
-      backgroundColor: 'var(--ui-color-primary-500)',
-      opacity: 0.1,
-    })
-  })
-
-  it('honours shade and the white/black literals', () => {
-    expect(
-      useTint({ color: 'error', shade: 200, level: 'subtle' }).style.value.backgroundColor
-    ).toBe('var(--ui-color-error-200)')
-    expect(useTint({ color: 'white', level: 'heavy' }).style.value).toEqual({
-      backgroundColor: '#ffffff',
-      opacity: 0.5,
-    })
-  })
-})

package/layers/design-system/visual/app/utils/colorTokens.test.ts

@@ -1,51 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import { resolveUiColorToken } from './colorTokens'
-
-describe('resolveUiColorToken', () => {
-  it('defaults to primary-500 when no options are given', () => {
-    expect(resolveUiColorToken({})).toBe('var(--ui-color-primary-500)')
-  })
-
-  it('uses the provided color and shade', () => {
-    expect(resolveUiColorToken({ color: 'secondary', shade: 200 })).toBe(
-      'var(--ui-color-secondary-200)'
-    )
-  })
-
-  it('applies opacity via color-mix', () => {
-    expect(resolveUiColorToken({ color: 'primary', shade: 500, opacity: 50 })).toBe(
-      'color-mix(in srgb, var(--ui-color-primary-500) 50%, transparent)'
-    )
-  })
-
-  it('resolves custom color to customColor value', () => {
-    expect(resolveUiColorToken({ color: 'custom', customColor: '#123456' })).toBe('#123456')
-  })
-
-  it('resolves custom color to transparent when customColor is missing', () => {
-    expect(resolveUiColorToken({ color: 'custom' })).toBe('transparent')
-  })
-
-  it('resolves transparent color regardless of other options', () => {
-    expect(resolveUiColorToken({ color: 'transparent', shade: 900, opacity: 10 })).toBe(
-      'transparent'
-    )
-  })
-
-  it('resolves white without opacity to a hex value', () => {
-    expect(resolveUiColorToken({ color: 'white' })).toBe('#ffffff')
-  })
-
-  it('resolves white with opacity to an rgb() value', () => {
-    expect(resolveUiColorToken({ color: 'white', opacity: 40 })).toBe('rgb(255 255 255 / 0.4)')
-  })
-
-  it('resolves black without opacity to a hex value', () => {
-    expect(resolveUiColorToken({ color: 'black' })).toBe('#000000')
-  })
-
-  it('resolves black with opacity to an rgb() value', () => {
-    expect(resolveUiColorToken({ color: 'black', opacity: 25 })).toBe('rgb(0 0 0 / 0.25)')
-  })
-})

package/layers/design-system/visual/app/utils/gradientStyle.test.ts

@@ -1,75 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import type { GradientConfig } from '../types/gradient'
-import { buildGradientStyle, resolveGradientColor } from './gradientStyle'
-
-describe('resolveGradientColor', () => {
-  it('delegates to resolveUiColorToken for a gradient stop', () => {
-    expect(resolveGradientColor({ color: 'primary', shade: 500 })).toBe(
-      'var(--ui-color-primary-500)'
-    )
-  })
-
-  it('applies opacity for a gradient stop', () => {
-    expect(resolveGradientColor({ color: 'secondary', shade: 300, opacity: 50 })).toBe(
-      'color-mix(in srgb, var(--ui-color-secondary-300) 50%, transparent)'
-    )
-  })
-})
-
-describe('buildGradientStyle', () => {
-  const from = { color: 'primary', shade: 500 } as const
-  const to = { color: 'secondary', shade: 500 } as const
-
-  it('builds a linear gradient defaulting direction to "to bottom right"', () => {
-    const cfg: GradientConfig = { from, to }
-    expect(buildGradientStyle(cfg)).toEqual({
-      backgroundImage:
-        'linear-gradient(to bottom right, var(--ui-color-primary-500), var(--ui-color-secondary-500))',
-    })
-  })
-
-  it('maps every named linear direction', () => {
-    const directions: Array<[NonNullable<GradientConfig['direction']>, string]> = [
-      ['to-t', 'to top'],
-      ['to-tr', 'to top right'],
-      ['to-r', 'to right'],
-      ['to-br', 'to bottom right'],
-      ['to-b', 'to bottom'],
-      ['to-bl', 'to bottom left'],
-      ['to-l', 'to left'],
-      ['to-tl', 'to top left'],
-    ]
-
-    for (const [direction, expected] of directions) {
-      const cfg: GradientConfig = { from, to, direction }
-      expect(buildGradientStyle(cfg)).toEqual({
-        backgroundImage: `linear-gradient(${expected}, var(--ui-color-primary-500), var(--ui-color-secondary-500))`,
-      })
-    }
-  })
-
-  it('includes the via stop between from and to when provided', () => {
-    const via = { color: 'info', shade: 400 } as const
-    const cfg: GradientConfig = { from, to, via }
-    expect(buildGradientStyle(cfg)).toEqual({
-      backgroundImage:
-        'linear-gradient(to bottom right, var(--ui-color-primary-500), var(--ui-color-info-400), var(--ui-color-secondary-500))',
-    })
-  })
-
-  it('builds a radial gradient', () => {
-    const cfg: GradientConfig = { from, to, shape: 'radial' }
-    expect(buildGradientStyle(cfg)).toEqual({
-      backgroundImage:
-        'radial-gradient(circle, var(--ui-color-primary-500), var(--ui-color-secondary-500))',
-    })
-  })
-
-  it('builds a conic gradient', () => {
-    const cfg: GradientConfig = { from, to, shape: 'conic' }
-    expect(buildGradientStyle(cfg)).toEqual({
-      backgroundImage: 'conic-gradient(var(--ui-color-primary-500), var(--ui-color-secondary-500))',
-    })
-  })
-})

package/layers/design-system/visual/app/utils/responsiveSizes.test.ts

@@ -1,71 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import type { ResponsiveSizes } from '../types/media'
-import { buildResponsiveSizesQueries } from './responsiveSizes'
-
-describe('buildResponsiveSizesQueries', () => {
-  it('returns only the default query when no breakpoints are set', () => {
-    const sizes: ResponsiveSizes = { default: '100vw' }
-    expect(buildResponsiveSizesQueries(sizes)).toEqual(['100vw'])
-  })
-
-  it('always places the default query last', () => {
-    const sizes: ResponsiveSizes = { default: '100vw', md: '50vw' }
-    const queries = buildResponsiveSizesQueries(sizes)
-    expect(queries.at(-1)).toBe('100vw')
-  })
-
-  it('sorts tailwind breakpoints from largest to smallest min-width', () => {
-    const sizes: ResponsiveSizes = {
-      default: '100vw',
-      sm: '90vw',
-      lg: '50vw',
-      '2xl': '25vw',
-    }
-
-    expect(buildResponsiveSizesQueries(sizes)).toEqual([
-      '(min-width: 1536px) 25vw',
-      '(min-width: 1024px) 50vw',
-      '(min-width: 640px) 90vw',
-      '100vw',
-    ])
-  })
-
-  it('mixes device, phone, and tablet breakpoints sorted by pixel value', () => {
-    const sizes: ResponsiveSizes = {
-      default: '100vw',
-      wide: '20vw',
-      desktop: '40vw',
-      'phone-md': '95vw',
-    }
-
-    expect(buildResponsiveSizesQueries(sizes)).toEqual([
-      '(min-width: 1920px) 20vw',
-      '(min-width: 1024px) 40vw',
-      '(min-width: 375px) 95vw',
-      '100vw',
-    ])
-  })
-
-  it('prepends landscape before portrait, both before breakpoints', () => {
-    const sizes: ResponsiveSizes = {
-      default: '100vw',
-      landscape: '80vw',
-      portrait: '90vw',
-      md: '50vw',
-    }
-
-    expect(buildResponsiveSizesQueries(sizes)).toEqual([
-      '(orientation: landscape) 80vw',
-      '(orientation: portrait) 90vw',
-      '(min-width: 768px) 50vw',
-      '100vw',
-    ])
-  })
-
-  it('omits orientation queries when not provided', () => {
-    const sizes: ResponsiveSizes = { default: '100vw' }
-    const queries = buildResponsiveSizesQueries(sizes)
-    expect(queries.some((q) => q.includes('orientation'))).toBe(false)
-  })
-})

package/layers/motion/animations/app/components/Motion/Staggered.test.ts

@@ -1,40 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { ref } from 'vue'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vite-plus/test'
-
-import Staggered from './Staggered.vue'
-
-// Auto-imported from the scroll layer in Nuxt; stubbed here (no Nuxt context in the 'vue' project)
-const reduced = ref(false)
-vi.stubGlobal('useReducedMotion', () => reduced)
-
-describe('MotionStaggered', () => {
-  beforeEach(() => {
-    reduced.value = false
-    vi.useFakeTimers()
-  })
-  afterEach(() => vi.useRealTimers())
-
-  it('renders each child once and reveals every one after the stagger', () => {
-    const wrapper = mount(Staggered, {
-      props: { staggerDelay: 50 },
-      slots: { default: '<p>a</p><p>b</p><p>c</p>' },
-    })
-    const items = wrapper.findAll('p')
-    expect(items).toHaveLength(3)
-    expect(items.every((p) => !p.classes('animated'))).toBe(true)
-
-    vi.advanceTimersByTime(100)
-    expect(items.map((p) => p.classes('animated'))).toEqual([true, true, true])
-    expect(items[0]?.classes()).toContain('animate-fade-in')
-  })
-
-  it('reveals every child at once, without the animation class, under reduced motion', () => {
-    reduced.value = true
-    const wrapper = mount(Staggered, { slots: { default: '<p>a</p><p>b</p>' } })
-    const items = wrapper.findAll('p')
-    expect(items.map((p) => p.classes('animated'))).toEqual([true, true])
-    expect(items[0]?.classes()).not.toContain('animate-fade-in')
-    expect(wrapper.attributes('data-reduced')).toBe('')
-  })
-})

package/layers/motion/scroll/app/composables/useReducedMotion.test.ts

@@ -1,23 +0,0 @@
-import { computed, ref } from 'vue'
-import { describe, expect, it, vi } from 'vite-plus/test'
-
-const system = ref<'reduce' | 'no-preference'>('no-preference')
-vi.mock('@vueuse/core', () => ({ usePreferredReducedMotion: () => system }))
-const state = ref<'on' | 'off' | 'system'>('system')
-vi.stubGlobal('useState', () => state)
-vi.stubGlobal('computed', computed)
-
-const { useReducedMotion } = await import('./useReducedMotion')
-
-describe('useReducedMotion', () => {
-  it.each([
-    ['system', 'no-preference', false],
-    ['system', 'reduce', true],
-    ['on', 'no-preference', true],
-    ['off', 'reduce', false],
-  ] as const)('override %s + OS %s → %s', (override, os, expected) => {
-    state.value = override
-    system.value = os
-    expect(useReducedMotion().value).toBe(expected)
-  })
-})

package/layers/motion/scroll/app/utils/parallax.test.ts

@@ -1,24 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-import { parallaxMotionVars } from './parallax'
-
-const base = { speed: 0.5, direction: 'vertical', rotate: 0, scale: 0 } as const
-
-describe('parallaxMotionVars', () => {
-  it('moves up on y for vertical, right on x for horizontal', () => {
-    expect(parallaxMotionVars(base)).toEqual({ y: -100 })
-    expect(parallaxMotionVars({ ...base, direction: 'horizontal' })).toEqual({ x: 100 })
-  })
-
-  it('adds rotation and scale only when set', () => {
-    expect(parallaxMotionVars({ ...base, rotate: 15, scale: 0.2 })).toEqual({
-      y: -100,
-      rotation: 15,
-      scale: 1.2,
-    })
-  })
-
-  it('returns nothing to animate at zero speed', () => {
-    expect(parallaxMotionVars({ ...base, speed: 0 })).toEqual({})
-  })
-})