crashtestdev/tests/three-width-layout.test.mjs

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

const prosePath = 'src/styles/prose.css';
const layoutPath = 'src/layouts/BaseLayout.astro';
const postTemplatePath = 'src/pages/posts/[...slug].astro';

function readProse() {
  return readFileSync(prosePath, 'utf-8');
}

function readLayout() {
  return readFileSync(layoutPath, 'utf-8');
}

function readPostTemplate() {
  return readFileSync(postTemplatePath, 'utf-8');
}

describe('Three-width layout system', () => {
  describe('Reading width (default)', () => {
    it('should constrain all direct children of .prose to reading width by default', () => {
      const css = readProse();
      // .prose > * should have max-width: var(--width-prose)
      assert.match(css, /\.prose\s*>\s*\*\s*\{[^}]*max-width:\s*var\(--width-prose\)/s,
        '.prose > * should set max-width to --width-prose');
    });

    it('should center prose children with auto margins', () => {
      const css = readProse();
      // .prose > * should have margin-left: auto and margin-right: auto
      assert.match(css, /\.prose\s*>\s*\*\s*\{[^}]*margin-left:\s*auto/s,
        '.prose > * should have margin-left: auto');
      assert.match(css, /\.prose\s*>\s*\*\s*\{[^}]*margin-right:\s*auto/s,
        '.prose > * should have margin-right: auto');
    });
  });

  describe('Wide width (code blocks, SVGs, figures)', () => {
    it('should break code blocks to wide width', () => {
      const css = readProse();
      // .prose > pre should have max-width: var(--width-code)
      assert.match(css, /\.prose\s*>\s*pre[^{]*\{[^}]*max-width:\s*var\(--width-code\)/s,
        '.prose > pre should set max-width to --width-code');
    });

    it('should break SVGs to wide width', () => {
      const css = readProse();
      assert.match(css, /\.prose\s*>\s*svg[^{]*\{[^}]*max-width:\s*var\(--width-code\)/s,
        '.prose > svg should set max-width to --width-code');
    });

    it('should break .breakout and .wide elements to wide width', () => {
      const css = readProse();
      assert.match(css, /\.prose\s*>\s*\.wide[^{]*\{[^}]*max-width:\s*var\(--width-code\)/s,
        '.prose > .wide should set max-width to --width-code');
      assert.match(css, /\.prose\s*>\s*\.breakout[^{]*\{[^}]*max-width:\s*var\(--width-code\)/s,
        '.prose > .breakout should set max-width to --width-code');
    });
  });

  describe('Full width (full-bleed)', () => {
    it('should support full-bleed elements with .full class', () => {
      const css = readProse();
      assert.match(css, /\.prose\s*>\s*\.full[^{]*\{[^}]*max-width:\s*var\(--width-container\)/s,
        '.prose > .full should set max-width to --width-container');
    });
  });

  describe('SVG styling', () => {
    it('should make SVGs responsive with width 100% and auto height', () => {
      const css = readProse();
      assert.match(css, /\.prose\s+svg[^{]*\{[^}]*width:\s*100%/s,
        'SVGs should have width: 100%');
      assert.match(css, /\.prose\s+svg[^{]*\{[^}]*height:\s*auto/s,
        'SVGs should have height: auto');
    });

    it('should give SVGs proper vertical spacing', () => {
      const css = readProse();
      assert.match(css, /\.prose\s+svg[^{]*\{[^}]*margin-top:\s*var\(--space-5\)/s,
        'SVGs should have --space-5 top margin');
      assert.match(css, /\.prose\s+svg[^{]*\{[^}]*margin-bottom:\s*var\(--space-5\)/s,
        'SVGs should have --space-5 bottom margin');
    });

    it('should give SVGs rounded corners', () => {
      const css = readProse();
      assert.match(css, /\.prose\s+svg[^{]*\{[^}]*border-radius/s,
        'SVGs should have border-radius');
    });
  });

  describe('BaseLayout main element', () => {
    it('should not constrain main to --width-container', () => {
      const content = readLayout();
      // The main style block should NOT have max-width: var(--width-container)
      const mainBlock = content.match(/main\s*\{[^}]*\}/s);
      assert.ok(mainBlock, 'main style block should exist');
      assert.ok(
        !mainBlock[0].includes('max-width'),
        'main should not have max-width — child elements handle their own widths'
      );
    });
  });

  describe('Post template prose-wrapper', () => {
    it('should not constrain prose-wrapper to --width-prose', () => {
      const content = readPostTemplate();
      const styleBlock = content.match(/<style>([\s\S]*?)<\/style>/);
      assert.ok(styleBlock, 'style block should exist');
      assert.ok(
        !styleBlock[1].includes('max-width: var(--width-prose)'),
        '.prose-wrapper should not be constrained to --width-prose (children self-constrain)'
      );
    });
  });
});