crashtestdev/tests/callout.test.mjs

import { describe, it } from 'node:test';
import { strict as assert } from 'node:assert';
import { readFileSync } from 'node:fs';
import { resolve } from 'node:path';

const componentPath = resolve('src/components/Callout.astro');

function readComponent() {
  return readFileSync(componentPath, 'utf-8');
}

describe('Callout component', () => {
  it('should exist at src/components/Callout.astro', () => {
    // Will throw if file doesn't exist
    const content = readComponent();
    assert.ok(content.length > 0, 'Component file should not be empty');
  });

  describe('Props interface', () => {
    it('should define type prop with 5 allowed values', () => {
      const content = readComponent();
      assert.match(content, /type\?/, 'type should be an optional prop');
      assert.match(content, /note/, 'should include note type');
      assert.match(content, /pattern/, 'should include pattern type');
      assert.match(content, /antipattern/, 'should include antipattern type');
      assert.match(content, /warning/, 'should include warning type');
      assert.match(content, /tip/, 'should include tip type');
    });

    it('should default type to note', () => {
      const content = readComponent();
      assert.match(content, /=\s*['"]note['"]/, 'type should default to note');
    });
  });

  describe('Config record mapping', () => {
    it('should map note to border-default, text-secondary, Note', () => {
      const content = readComponent();
      assert.match(content, /border-default/, 'note should use border-default');
      assert.match(content, /text-secondary/, 'note should use text-secondary');
    });

    it('should map pattern to accent-primary, accent-primary, Pattern', () => {
      const content = readComponent();
      assert.match(content, /accent-primary/, 'pattern should use accent-primary');
    });

    it('should map antipattern to error-border, error-text, Anti-pattern', () => {
      const content = readComponent();
      assert.match(content, /error-border/, 'antipattern should use error-border');
      assert.match(content, /error-text/, 'antipattern should use error-text');
      assert.match(content, /Anti-pattern/, 'antipattern should have Anti-pattern label');
    });

    it('should map warning to warning-border, warning-text, Warning', () => {
      const content = readComponent();
      assert.match(content, /warning-border/, 'warning should use warning-border');
      assert.match(content, /warning-text/, 'warning should use warning-text');
    });

    it('should map tip to accent-secondary, accent-secondary, Tip', () => {
      const content = readComponent();
      assert.match(content, /accent-secondary/, 'tip should use accent-secondary');
    });
  });

  describe('Semantic HTML', () => {
    it('should use aside element with role=note', () => {
      const content = readComponent();
      assert.match(content, /<aside/, 'should use aside element');
      assert.match(content, /role=["']note["']/, 'should have role=note');
    });

    it('should have aria-label with callout type', () => {
      const content = readComponent();
      assert.match(content, /aria-label=/, 'should have aria-label');
      assert.match(content, /callout/, 'aria-label should include callout');
    });

    it('should have label span with aria-hidden=true', () => {
      const content = readComponent();
      assert.match(content, /class=["']callout-label["']/, 'should have callout-label class');
      assert.match(content, /aria-hidden=["']true["']/, 'label should have aria-hidden=true');
    });

    it('should have callout-body div with slot', () => {
      const content = readComponent();
      assert.match(content, /class=["']callout-body["']/, 'should have callout-body class');
      assert.match(content, /<slot\s*\/>/, 'should include a slot for content');
    });
  });

  describe('Styles', () => {
    it('should style .callout with prose max-width', () => {
      const content = readComponent();
      assert.match(content, /\.callout\s*\{/, 'should have .callout selector');
      assert.match(content, /--width-prose/, 'should use prose width token');
    });

    it('should style .callout with surface-inset background', () => {
      const content = readComponent();
      assert.match(content, /--surface-inset/, 'should use surface-inset token');
    });

    it('should style .callout with border-subtle and 3px left border', () => {
      const content = readComponent();
      assert.match(content, /--border-subtle/, 'should use border-subtle token');
      assert.match(content, /3px/, 'should have 3px left border');
    });

    it('should style .callout with rounded-lg, space-3 padding, space-4 margin', () => {
      const content = readComponent();
      assert.match(content, /--rounded-lg/, 'should use rounded-lg token');
      assert.match(content, /--space-3/, 'should use space-3 for padding');
      assert.match(content, /--space-4/, 'should use space-4 for margins');
    });

    it('should style .callout-label correctly', () => {
      const content = readComponent();
      assert.match(content, /\.callout-label/, 'should have .callout-label selector');
      assert.match(content, /--font-structure/, 'label should use structure font');
      assert.match(content, /--type-xs/, 'label should use type-xs size');
      assert.match(content, /uppercase/, 'label should be uppercase');
      assert.match(content, /0\.05em/, 'label should have 0.05em tracking');
    });

    it('should style .callout-body correctly', () => {
      const content = readComponent();
      assert.match(content, /\.callout-body/, 'should have .callout-body selector');
      assert.match(content, /--font-prose/, 'body should use prose font');
      assert.match(content, /--type-base/, 'body should use type-base size');
      assert.match(content, /--leading-prose/, 'body should use leading-prose');
      assert.match(content, /--text-primary/, 'body should use text-primary color');
    });

    it('should have nested paragraph styles with space-3 bottom margin', () => {
      const content = readComponent();
      assert.match(content, /:global\(p\)/, 'should have global p style for nested paragraphs');
      assert.match(content, /last-child/, 'should handle last-child paragraph');
    });
  });
});