/**
 * tag-ui regression tests.
 *
 * Source-grep contract for the `content: attr(text)` gating pattern.
 * Pre-fix (ungated `:scope::after { content: attr(text) }`), an empty
 * `attr(text)` still generated a zero-width pseudo-element flex item,
 * and the host's `inline-flex` + `gap` added a phantom `--tag-gap`
 * trailing space after slotted content like `<tag-ui>Beta</tag-ui>`.
 * The fix gates the pseudo-element on `[text]` attribute presence, so
 * slot-content consumers don't pay the gap cost.
 *
 * jsdom doesn't evaluate `@scope` rules via `getComputedStyle()`, so
 * we validate the CSS source shape directly (same recipe as
 * description-list.test.js and text.test.js).
 */

import { describe, it, expect } from 'vitest';
import { readFileSync } from 'node:fs';
import { fileURLToPath } from 'node:url';
import { dirname, resolve } from 'node:path';

const HERE = dirname(fileURLToPath(import.meta.url));
const TAG_CSS = readFileSync(resolve(HERE, 'tag.css'), 'utf8');

describe('tag-ui — content: attr(text) gating', () => {
  it('gates the ::after pseudo-element on [text] attribute presence', () => {
    // The fixed rule: `:scope[text]::after { content: attr(text); }`
    expect(TAG_CSS).toMatch(/:scope\[text\]::after\s*\{[^}]*content:\s*attr\(text\)/);
  });

  it('does NOT carry an ungated :scope::after with content: attr(text)', () => {
    // The pre-fix shape would add phantom flex-gap space after slotted
    // content. Match the bare `:scope::after` form (no attribute
    // selector chained) followed by the attr(text) declaration.
    expect(TAG_CSS).not.toMatch(/:scope::after\s*\{[^}]*content:\s*attr\(text\)/);
  });

  it('host :scope still declares the flex + gap layout (gap is real, just no longer applied to an empty pseudo)', () => {
    // Sanity check that the fix didn't accidentally remove the host
    // flex/gap declarations — those are still load-bearing for the
    // [icon] + [dismiss] slot rendering and for proper :scope[text]
    // gap rendering when text IS set.
    expect(TAG_CSS).toMatch(/:scope\s*\{[^}]*display:\s*inline-flex/);
    expect(TAG_CSS).toMatch(/:scope\s*\{[^}]*gap:\s*var\(--tag-gap\)/);
  });
});
