@bendyline/squisq-react 2.0.1 → 2.2.0

package/src/__tests__/TableLayer.test.tsx

@@ -1,142 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { TableLayer } from '../layers/TableLayer';
-import type { TableLayer as TableLayerType } from '@bendyline/squisq/schemas';
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function makeTableLayer(overrides: Partial<TableLayerType> = {}): TableLayerType {
-  return {
-    type: 'table',
-    id: 'test-table',
-    content: {
-      headers: ['Name', 'Age', 'City'],
-      rows: [
-        ['Alice', '30', 'Seattle'],
-        ['Bob', '25', 'Portland'],
-      ],
-      style: {
-        headerBackground: '#1e3a5f',
-        headerColor: '#ffffff',
-        cellBackground: 'rgba(255,255,255,0.05)',
-        cellColor: '#e0e0e0',
-        borderColor: 'rgba(255,255,255,0.12)',
-        fontSize: 28,
-        fontFamily: 'system-ui',
-        headerFontFamily: 'Georgia',
-        borderRadius: 8,
-      },
-    },
-    position: { x: '10%', y: '10%', width: '80%', height: '80%' },
-    ...overrides,
-  } as TableLayerType;
-}
-
-const viewport = { width: 1920, height: 1080 };
-
-function renderTableLayer(layer?: TableLayerType) {
-  return render(
-    <svg>
-      <TableLayer layer={layer ?? makeTableLayer()} viewport={viewport} blockTime={0} />
-    </svg>,
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('TableLayer', () => {
-  it('renders a foreignObject element', () => {
-    const { container } = renderTableLayer();
-    const fo = container.querySelector('foreignObject');
-    expect(fo).toBeTruthy();
-  });
-
-  it('renders a table element', () => {
-    const { container } = renderTableLayer();
-    const table = container.querySelector('table');
-    expect(table).toBeTruthy();
-  });
-
-  it('renders the correct number of header cells', () => {
-    const { container } = renderTableLayer();
-    const headers = container.querySelectorAll('th');
-    expect(headers.length).toBe(3);
-  });
-
-  it('renders header text content', () => {
-    const { container } = renderTableLayer();
-    const headers = container.querySelectorAll('th');
-    expect(headers[0].textContent).toBe('Name');
-    expect(headers[1].textContent).toBe('Age');
-    expect(headers[2].textContent).toBe('City');
-  });
-
-  it('renders the correct number of data rows', () => {
-    const { container } = renderTableLayer();
-    const rows = container.querySelectorAll('tbody tr');
-    expect(rows.length).toBe(2);
-  });
-
-  it('renders cell text content', () => {
-    const { container } = renderTableLayer();
-    const cells = container.querySelectorAll('td');
-    expect(cells[0].textContent).toBe('Alice');
-    expect(cells[1].textContent).toBe('30');
-    expect(cells[2].textContent).toBe('Seattle');
-    expect(cells[3].textContent).toBe('Bob');
-  });
-
-  it('applies header background color', () => {
-    const { container } = renderTableLayer();
-    const th = container.querySelector('th');
-    expect(th?.style.background).toBe('rgb(30, 58, 95)');
-  });
-
-  it('applies font size from style', () => {
-    const { container } = renderTableLayer();
-    const table = container.querySelector('table');
-    expect(table?.style.fontSize).toBe('28px');
-  });
-
-  it('applies column alignment when provided', () => {
-    const layer = makeTableLayer();
-    layer.content.align = ['left', 'center', 'right'];
-    const { container } = renderTableLayer(layer);
-
-    const headers = container.querySelectorAll('th');
-    expect(headers[0].style.textAlign).toBe('left');
-    expect(headers[1].style.textAlign).toBe('center');
-    expect(headers[2].style.textAlign).toBe('right');
-  });
-
-  it('handles empty headers gracefully', () => {
-    const layer = makeTableLayer();
-    layer.content.headers = [];
-    const { container } = renderTableLayer(layer);
-    const thead = container.querySelector('thead');
-    // No thead or empty thead
-    expect(thead).toBeFalsy();
-  });
-
-  it('handles empty rows gracefully', () => {
-    const layer = makeTableLayer();
-    layer.content.rows = [];
-    const { container } = renderTableLayer(layer);
-    const tbody = container.querySelector('tbody');
-    // No tbody or empty tbody
-    expect(tbody).toBeFalsy();
-  });
-
-  it('sets foreignObject dimensions based on viewport percentage', () => {
-    const { container } = renderTableLayer();
-    const fo = container.querySelector('foreignObject');
-    // 80% of 1920 = 1536
-    expect(fo?.getAttribute('width')).toBe('1536');
-    // 80% of 1080 = 864
-    expect(fo?.getAttribute('height')).toBe('864');
-  });
-});

package/src/__tests__/VideoLayer.test.tsx

@@ -1,94 +0,0 @@
-/** @vitest-environment jsdom */
-
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, waitFor } from '@testing-library/react';
-import type { VideoLayer as VideoLayerType } from '@bendyline/squisq/schemas';
-import { VideoLayer } from '../layers/VideoLayer';
-
-const layer: VideoLayerType = {
-  id: 'video',
-  type: 'video',
-  position: { x: 0, y: 0, width: 640, height: 360 },
-  content: {
-    src: 'clip.mp4',
-    alt: 'Demo clip',
-    clipStart: 2,
-    clipEnd: 8,
-    startAt: 1,
-  },
-};
-
-beforeEach(() => {
-  vi.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue(undefined);
-  vi.spyOn(HTMLMediaElement.prototype, 'pause').mockImplementation(() => undefined);
-});
-
-afterEach(() => {
-  cleanup();
-  vi.restoreAllMocks();
-});
-
-describe('VideoLayer playback synchronization', () => {
-  it('joins the document clock when mounted partway through a block', async () => {
-    const { container, rerender } = render(
-      <svg>
-        <VideoLayer
-          layer={layer}
-          basePath="/media"
-          viewport={{ width: 640, height: 360 }}
-          blockTime={4}
-          isPlaying
-        />
-      </svg>,
-    );
-    const video = container.querySelector('video')!;
-
-    // clipStart 2 + (blockTime 4 - startAt 1) = source time 5.
-    await waitFor(() => expect(video.currentTime).toBe(5));
-
-    rerender(
-      <svg>
-        <VideoLayer
-          layer={layer}
-          basePath="/media"
-          viewport={{ width: 640, height: 360 }}
-          blockTime={6}
-          isPlaying
-        />
-      </svg>,
-    );
-    expect(video.currentTime).toBe(7);
-
-    rerender(
-      <svg>
-        <VideoLayer
-          layer={layer}
-          basePath="/media"
-          viewport={{ width: 640, height: 360 }}
-          blockTime={20}
-          isPlaying
-        />
-      </svg>,
-    );
-    expect(video.currentTime).toBe(8);
-    expect(video.pause).toHaveBeenCalled();
-  });
-
-  it('holds at the in-point until startAt', async () => {
-    const { container } = render(
-      <svg>
-        <VideoLayer
-          layer={layer}
-          basePath="/media"
-          viewport={{ width: 640, height: 360 }}
-          blockTime={0.5}
-          isPlaying
-        />
-      </svg>,
-    );
-    const video = container.querySelector('video')!;
-
-    await waitFor(() => expect(video.currentTime).toBe(2));
-    expect(video.pause).toHaveBeenCalled();
-  });
-});

package/src/__tests__/exports.test.ts

@@ -1,55 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import * as squisqReact from '../index';
-
-describe('@bendyline/squisq-react exports', () => {
-  it('exports DocPlayer component', () => {
-    expect(squisqReact.DocPlayer).toBeDefined();
-    expect(typeof squisqReact.DocPlayer).toBe('function');
-  });
-
-  it('exports BlockRenderer component', () => {
-    expect(squisqReact.BlockRenderer).toBeDefined();
-    expect(typeof squisqReact.BlockRenderer).toBe('function');
-  });
-
-  it('exports all layer components', () => {
-    expect(typeof squisqReact.ImageLayer).toBe('function');
-    expect(typeof squisqReact.TextLayer).toBe('function');
-    expect(typeof squisqReact.ShapeLayer).toBe('function');
-    expect(typeof squisqReact.VideoLayer).toBe('function');
-    expect(typeof squisqReact.MapLayer).toBe('function');
-  });
-
-  it('exports control components', () => {
-    expect(typeof squisqReact.CaptionOverlay).toBe('function');
-    expect(typeof squisqReact.DocControlsOverlay).toBe('function');
-    expect(typeof squisqReact.DocControlsBottom).toBe('function');
-    expect(typeof squisqReact.DocControlsSidebar).toBe('function');
-    expect(typeof squisqReact.DocControlsSlideshow).toBe('function');
-    expect(typeof squisqReact.DocPlayerWithSidebar).toBe('function');
-    expect(typeof squisqReact.DocProgressBar).toBe('function');
-  });
-
-  it('exports MarkdownRenderer and LinearDocView', () => {
-    expect(typeof squisqReact.MarkdownRenderer).toBe('function');
-    expect(typeof squisqReact.LinearDocView).toBe('function');
-  });
-
-  it('exports hooks', () => {
-    expect(typeof squisqReact.useAudioSync).toBe('function');
-    expect(typeof squisqReact.useDocPlayback).toBe('function');
-    expect(typeof squisqReact.useViewportOrientation).toBe('function');
-  });
-
-  it('exports utility functions', () => {
-    expect(typeof squisqReact.getAnimationStyle).toBe('function');
-    expect(typeof squisqReact.getTransitionClass).toBe('function');
-  });
-
-  it('exports formatTime utility', () => {
-    expect(typeof squisqReact.formatTime).toBe('function');
-    expect(squisqReact.formatTime(65)).toBe('1:05');
-    expect(squisqReact.formatTime(0)).toBe('0:00');
-    expect(squisqReact.formatTime(3661)).toBe('61:01');
-  });
-});

package/src/__tests__/fillStyle.test.tsx

@@ -1,160 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { borderDashArray, resolveFill } from '../utils/fillStyle';
-import { ShapeLayer } from '../layers/ShapeLayer';
-import { TextLayer } from '../layers/TextLayer';
-import type {
-  ShapeLayer as ShapeLayerType,
-  TextLayer as TextLayerType,
-} from '@bendyline/squisq/schemas';
-
-const viewport = { width: 1000, height: 1000 };
-
-describe('borderDashArray', () => {
-  it('returns undefined for solid / unset', () => {
-    expect(borderDashArray(undefined, 2)).toBeUndefined();
-    expect(borderDashArray('solid', 2)).toBeUndefined();
-  });
-  it('scales the pattern by stroke width', () => {
-    expect(borderDashArray('dashed', 2)).toBe('6 4');
-    expect(borderDashArray('dotted', 2)).toBe('2 4');
-  });
-});
-
-describe('resolveFill', () => {
-  it('returns the solid color with no def when there is no gradient', () => {
-    const { fill, def } = resolveFill('x', '#abcdef', undefined);
-    expect(fill).toBe('#abcdef');
-    expect(def).toBeNull();
-  });
-  it('returns a url() fill and a gradient def when a gradient is set', () => {
-    const { fill, def } = resolveFill('x', '#abcdef', { from: '#000', to: '#fff', angle: 90 });
-    expect(fill).toBe('url(#squisq-grad-x)');
-    expect(def).not.toBeNull();
-  });
-});
-
-describe('ShapeLayer fill/border', () => {
-  function makeShape(content: Partial<ShapeLayerType['content']>): ShapeLayerType {
-    return {
-      id: 's1',
-      type: 'shape',
-      position: { x: 0, y: 0, width: 100, height: 100 },
-      content: { shape: 'rect', ...content },
-    } as ShapeLayerType;
-  }
-
-  function makeFullBleedShape(content: Partial<ShapeLayerType['content']>): ShapeLayerType {
-    return {
-      ...makeShape(content),
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    };
-  }
-
-  it('applies fill opacity and a dashed border', () => {
-    const { container } = render(
-      <svg>
-        <ShapeLayer
-          layer={makeShape({
-            fill: '#3b82f6',
-            fillOpacity: 0.5,
-            stroke: '#000',
-            strokeWidth: 4,
-            borderStyle: 'dashed',
-          })}
-          viewport={viewport}
-          blockTime={0}
-        />
-      </svg>,
-    );
-    const rect = container.querySelector('rect')!;
-    expect(rect.getAttribute('fill-opacity')).toBe('0.5');
-    expect(rect.getAttribute('stroke-dasharray')).toBe('12 8');
-  });
-
-  it('renders a gradient via an SVG linearGradient', () => {
-    const { container } = render(
-      <svg>
-        <ShapeLayer
-          layer={makeShape({ gradient: { from: '#111', to: '#eee', angle: 0 } })}
-          viewport={viewport}
-          blockTime={0}
-        />
-      </svg>,
-    );
-    const gradient = container.querySelector('linearGradient');
-    expect(gradient).not.toBeNull();
-    expect(container.querySelector('rect')!.getAttribute('fill')).toBe(`url(#${gradient!.id})`);
-  });
-
-  it('overscans a full-bleed solid shade to prevent an image edge seam', () => {
-    const { container } = render(
-      <svg>
-        <ShapeLayer
-          layer={makeFullBleedShape({ fill: 'rgba(0, 0, 0, 0.5)' })}
-          viewport={viewport}
-          blockTime={0}
-        />
-      </svg>,
-    );
-
-    const rect = container.querySelector('rect')!;
-    expect(rect.getAttribute('x')).toBe('-1');
-    expect(rect.getAttribute('y')).toBe('-1');
-    expect(rect.getAttribute('width')).toBe('1002');
-    expect(rect.getAttribute('height')).toBe('1002');
-  });
-
-  it('overscans a full-bleed CSS gradient shade and its HTML fill', () => {
-    const { container } = render(
-      <svg>
-        <ShapeLayer
-          layer={makeFullBleedShape({
-            fill: 'linear-gradient(0deg, rgba(0,0,0,0.8), transparent)',
-          })}
-          viewport={viewport}
-          blockTime={0}
-        />
-      </svg>,
-    );
-
-    const foreignObject = container.querySelector('foreignObject')!;
-    expect(foreignObject.getAttribute('x')).toBe('-1');
-    expect(foreignObject.getAttribute('y')).toBe('-1');
-    expect(foreignObject.getAttribute('width')).toBe('1002');
-    expect(foreignObject.getAttribute('height')).toBe('1002');
-    expect(foreignObject.querySelector('div')!.style.width).toBe('1002px');
-    expect(foreignObject.querySelector('div')!.style.height).toBe('1002px');
-  });
-});
-
-describe('TextLayer box border', () => {
-  it('draws a border rect on the position box', () => {
-    const layer: TextLayerType = {
-      id: 't1',
-      type: 'text',
-      position: { x: 0, y: 0, width: 400, height: 200 },
-      content: {
-        text: 'Hi',
-        style: {
-          fontSize: 40,
-          color: '#000',
-          borderColor: '#f00',
-          borderWidth: 3,
-          borderStyle: 'dotted',
-        },
-      },
-    };
-    const { container } = render(
-      <svg>
-        <TextLayer layer={layer} viewport={viewport} blockTime={0} />
-      </svg>,
-    );
-    const rect = container.querySelector('rect')!;
-    expect(rect).not.toBeNull();
-    expect(rect.getAttribute('stroke')).toBe('#f00');
-    expect(rect.getAttribute('stroke-width')).toBe('3');
-    expect(rect.getAttribute('width')).toBe('400');
-    expect(rect.getAttribute('height')).toBe('200');
-  });
-});

package/src/__tests__/standaloneEntry.test.tsx

@@ -1,103 +0,0 @@
-import { afterEach, describe, expect, it } from 'vitest';
-import type { Doc } from '@bendyline/squisq/schemas';
-import { getHandle, mount, unmount } from '../standalone-entry';
-import * as standalone from '../standalone-entry';
-
-function doc(id: string): Doc {
-  return {
-    articleId: id,
-    duration: 2,
-    blocks: [{ id: `${id}-block`, startTime: 0, duration: 2, audioSegment: 0, layers: [] }],
-    audio: { segments: [] },
-  };
-}
-
-function animatedDoc(id: string): Doc {
-  const result = doc(id);
-  result.blocks[0].layers = [
-    {
-      type: 'text',
-      id: `${id}-title`,
-      content: { text: 'Standalone motion', style: { fontSize: 48, color: '#fff' } },
-      position: { x: 100, y: 100 },
-      animation: { type: 'fadeIn', duration: 1 },
-    },
-  ];
-  return result;
-}
-
-const mountedElements: Element[] = [];
-
-afterEach(() => {
-  for (const element of mountedElements.splice(0)) unmount(element);
-});
-
-describe('standalone player instance handles', () => {
-  it('does not expose the removed mountStatic compatibility alias', () => {
-    expect('mountStatic' in standalone).toBe(false);
-  });
-
-  it('returns the render API for exactly the mounted player instance', async () => {
-    const firstRoot = document.createElement('div');
-    const secondRoot = document.createElement('div');
-    document.body.append(firstRoot, secondRoot);
-    mountedElements.push(firstRoot, secondRoot);
-
-    const first = mount(firstRoot, doc('first'), { renderMode: true });
-    const second = mount(secondRoot, doc('second'), { renderMode: true });
-    const [firstAPI, secondAPI] = await Promise.all([first.renderAPI, second.renderAPI]);
-
-    expect(firstAPI?.getBlocks()[0].id).toBe('first-block');
-    expect(secondAPI?.getBlocks()[0].id).toBe('second-block');
-    expect(getHandle(firstRoot)).toBe(first);
-    expect(getHandle(secondRoot)).toBe(second);
-    expect('seekTo' in window).toBe(false);
-    expect('getDuration' in window).toBe(false);
-    expect('squisqActivePlayerId' in window).toBe(false);
-    expect('squisqPlayers' in window).toBe(false);
-  });
-
-  it('resolves a null render API outside render mode and owns unmounting', async () => {
-    const root = document.createElement('div');
-    document.body.append(root);
-    mountedElements.push(root);
-
-    const handle = mount(root, doc('static'), { mode: 'static' });
-    expect(await handle.renderAPI).toBeNull();
-    expect(getHandle(root)).toBe(handle);
-
-    handle.unmount();
-    expect(getHandle(root)).toBeUndefined();
-  });
-
-  it('prevents a stale handle from unmounting a newer player in the same element', async () => {
-    const root = document.createElement('div');
-    document.body.append(root);
-    mountedElements.push(root);
-
-    const first = mount(root, doc('first'), { renderMode: true });
-    expect((await first.renderAPI)?.getBlocks()[0].id).toBe('first-block');
-
-    const second = mount(root, doc('second'), { renderMode: true });
-    expect((await second.renderAPI)?.getBlocks()[0].id).toBe('second-block');
-    expect(first.getRenderAPI()).toBeNull();
-
-    first.unmount();
-    expect(getHandle(root)).toBe(second);
-    expect(second.getRenderAPI()?.getBlocks()[0].id).toBe('second-block');
-  });
-
-  it('forwards the animationsEnabled render policy to the mounted player', async () => {
-    const root = document.createElement('div');
-    document.body.append(root);
-    mountedElements.push(root);
-
-    const handle = mount(root, animatedDoc('motionless'), {
-      renderMode: true,
-      animationsEnabled: false,
-    });
-    await handle.renderAPI;
-
-    expect(root.querySelector('[class*="anim-"]')).toBeNull();
-  });
-});

package/src/__tests__/transitionStyles.test.ts

@@ -1,125 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { resolve } from 'node:path';
-import { describe, expect, it } from 'vitest';
-import type { TransitionDirection, TransitionType } from '@bendyline/squisq/schemas';
-import { TRANSITION_TYPES } from '@bendyline/squisq/schemas';
-import { getTransitionClass } from '../utils/animationUtils';
-
-const transitionCss = readFileSync(
-  resolve(process.cwd(), 'packages/react/src/styles/doc-animations.css'),
-  'utf8',
-);
-
-const directionalTypes: TransitionType[] = [
-  'cover',
-  'pan',
-  'pull',
-  'push',
-  'reveal',
-  'strips',
-  'uncover',
-  'wipe',
-];
-
-const axisTypes: TransitionType[] = ['blinds', 'comb', 'randomBar', 'randomBars', 'split'];
-const cardinalDirections = [
-  'left',
-  'right',
-  'up',
-  'down',
-] as const satisfies readonly TransitionDirection[];
-const axisDirections = ['horizontal', 'vertical'] as const satisfies readonly TransitionDirection[];
-
-function collectGeneratedTransitionClasses(): string[] {
-  const classNames = new Set<string>();
-
-  for (const type of TRANSITION_TYPES) {
-    if (type === 'cut') continue;
-    classNames.add(getTransitionClass(type, true));
-    classNames.add(getTransitionClass(type, false));
-  }
-
-  for (const type of directionalTypes) {
-    for (const direction of cardinalDirections) {
-      classNames.add(getTransitionClass(type, true, direction));
-      classNames.add(getTransitionClass(type, false, direction));
-    }
-  }
-
-  for (const type of axisTypes) {
-    for (const direction of axisDirections) {
-      classNames.add(getTransitionClass(type, true, direction));
-      classNames.add(getTransitionClass(type, false, direction));
-    }
-  }
-
-  return [...classNames].sort();
-}
-
-describe('transition CSS coverage', () => {
-  it('contains enter and exit selectors for every generated transition class', () => {
-    for (const className of collectGeneratedTransitionClasses()) {
-      expect(transitionCss, className).toContain(`.${className}`);
-    }
-  });
-});
-
-/** All `@keyframes <name>` defined in the stylesheet. */
-function definedKeyframes(): Set<string> {
-  const names = new Set<string>();
-  for (const m of transitionCss.matchAll(/@keyframes\s+([A-Za-z0-9_-]+)/g)) {
-    names.add(m[1]);
-  }
-  return names;
-}
-
-/**
- * Map each `.transition-<x>-(enter|exit)` selector to the keyframe its rule
- * animates. Parses top-level `selectors { body }` blocks and reads the first
- * identifier of the `animation:` shorthand. Returns null for a transition rule
- * with no `animation` property (itself a defect).
- */
-function transitionRuleKeyframes(): Map<string, string | null> {
-  const map = new Map<string, string | null>();
-  const ruleRe = /([^{}]+)\{([^{}]*)\}/g;
-  let rule: RegExpExecArray | null;
-  while ((rule = ruleRe.exec(transitionCss)) !== null) {
-    const selectors = rule[1].split(',').map((s) => s.trim());
-    const transitionSelectors = selectors.filter((s) =>
-      /\.transition-[A-Za-z0-9-]+-(?:enter|exit)\b/.test(s),
-    );
-    if (transitionSelectors.length === 0) continue;
-    const animMatch = rule[2].match(/animation:\s*([A-Za-z0-9_-]+)/);
-    const keyframe = animMatch ? animMatch[1] : null;
-    for (const selector of transitionSelectors) {
-      const classMatch = selector.match(/\.(transition-[A-Za-z0-9-]+-(?:enter|exit))/);
-      if (classMatch && !map.has(classMatch[1])) map.set(classMatch[1], keyframe);
-    }
-  }
-  return map;
-}
-
-describe('transition keyframe integrity', () => {
-  it('every transition rule animates a defined @keyframes (catches typos)', () => {
-    const keyframes = definedKeyframes();
-    const broken: string[] = [];
-    for (const [selector, keyframe] of transitionRuleKeyframes()) {
-      if (keyframe === null) broken.push(`${selector}: no animation property`);
-      else if (!keyframes.has(keyframe)) broken.push(`${selector}: missing @keyframes ${keyframe}`);
-    }
-    expect(broken, broken.join('\n')).toEqual([]);
-  });
-
-  it('every generated transition class resolves to a defined keyframe', () => {
-    // Ties the function output to the CSS end-to-end: a class the player can
-    // emit must have a rule, and that rule must animate a real keyframe.
-    const keyframes = definedKeyframes();
-    const rules = transitionRuleKeyframes();
-    for (const className of collectGeneratedTransitionClasses()) {
-      const keyframe = rules.get(className);
-      expect(keyframe, `${className} has no transition rule`).toBeDefined();
-      expect(keyframe, `${className} animates undefined keyframe ${keyframe}`).not.toBeNull();
-      if (keyframe) expect(keyframes.has(keyframe), `${className} -> ${keyframe}`).toBe(true);
-    }
-  });
-});