minstrel/web/scripts/check-tint-contrast.test.js

import { describe, expect, test } from 'vitest';
import { fileURLToPath } from 'node:url';
import { dirname, resolve } from 'node:path';
import { findCss, findRawText, findTailwind, scan } from './check-tint-contrast.js';

const web = resolve(dirname(fileURLToPath(import.meta.url)), '..');

describe('hue-on-own-tint check', () => {
  test('no source paints a hue as text on a tint of itself', () => {
    expect(scan(resolve(web, 'src'), web)).toEqual([]);
  });

  describe('Tailwind', () => {
    test('finds text-X on bg-X-tint and bg-X/NN in one class string', () => {
      expect(findTailwind(`class="rounded bg-accent-tint px-2 text-accent"`)).toHaveLength(1);
      expect(findTailwind(`'bg-error/15 text-error'`)).toHaveLength(1);
      expect(findTailwind("`bg-moss/10 text-moss`")[0].fix).toBe('text-success-fg');
    });

    test('a class string spanning lines is one string', () => {
      expect(findTailwind(`class="bg-accent-tint\n  text-accent"`)).toHaveLength(1);
    });

    test('an apostrophe earlier in the file does not hide a pair', () => {
      expect(
        findTailwind(`<p>Couldn't add</p>\n<span class={on ? 'bg-accent-tint text-accent' : ''}>`)
      ).toHaveLength(1);
    });

    test('passes the -fg partner, another hue, and a tint with no hue text', () => {
      expect(findTailwind(`"bg-accent-tint text-accent-fg"`)).toEqual([]);
      expect(findTailwind(`"bg-accent-tint text-error"`)).toEqual([]);
      expect(findTailwind(`"bg-accent-tint text-text-primary"`)).toEqual([]);
      expect(findTailwind(`"text-accent"`)).toEqual([]);
    });
  });

  describe('raw error text, on any surface', () => {
    test('finds text-error, class:text-error and color: var(--fs-error)', () => {
      expect(findRawText(`<p class="text-sm text-error">x</p>`)).toHaveLength(1);
      expect(findRawText(`<div class:text-error={bad}>`)).toHaveLength(1);
      expect(findRawText(`.msg { color: var(--fs-error); }`)[0].fix).toBe('var(--fs-error-fg)');
    });

    test('raw accent text is caught too, including hover: variants', () => {
      expect(findRawText(`<a class="text-sm text-accent hover:underline">`)[0].fix).toBe('text-accent-fg');
      expect(findRawText(`<a class="hover:text-accent">`)).toHaveLength(1);
      expect(findRawText(`.pending { color: var(--fs-accent); }`)[0].fix).toBe('var(--fs-accent-fg)');
      expect(findRawText(`<a class="text-accent-fg border-accent">`)).toEqual([]);
    });

    test('passes error-fg, and error as a border or outline', () => {
      expect(findRawText(`<p class="text-error-fg">x</p>`)).toEqual([]);
      expect(findRawText(`<div class="border-error" class:border-error={bad}>`)).toEqual([]);
      expect(findRawText(`.a { border-color: var(--fs-error); outline-color: var(--fs-error); }`)).toEqual([]);
    });
  });

  describe('CSS', () => {
    const tinted = (color) =>
      `.pill { background: color-mix(in srgb, var(--fs-warning) 15%, transparent); ${color} }`;

    test('finds color: var(--fs-X) on a color-mix tint of X', () => {
      expect(findCss(tinted('color: var(--fs-warning);'))).toHaveLength(1);
      expect(findCss(tinted('color: var(--fs-warning);'))[0].fix).toBe('var(--fs-warning-fg)');
    });

    test('passes the -fg partner and border or outline colours', () => {
      expect(findCss(tinted('color: var(--fs-warning-fg);'))).toEqual([]);
      expect(findCss(tinted('border-color: var(--fs-warning);'))).toEqual([]);
      expect(findCss(tinted('outline-color: var(--fs-warning);'))).toEqual([]);
    });

    test('a tint and a colour in different rules are not a pair', () => {
      expect(
        findCss(
          `.a { background: color-mix(in srgb, var(--fs-accent) 15%, transparent); }\n.b { color: var(--fs-accent); }`
        )
      ).toEqual([]);
    });
  });
});