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

// jsdom has no layout, so this pins the stylesheet contract instead: a bare
// <svg> passed to IconButton's slot must be sized by the icon box, otherwise it
// collapses to zero width as a flex item (FilePicker source toggles, beta.14).
describe('IconButton icon sizing', () => {
  it('should size a bare slot svg to the icon box when the caller passes no dimensions', () => {
    const css = readFileSync(
      resolve(__dirname, '../../styles/components/icon-button.css'),
      'utf8',
    )
    expect(css).toMatch(
      /\.mint-icon-button__icon--sm > svg,\s*\.mint-icon-button__icon--md > svg,\s*\.mint-icon-button__icon--lg > svg \{\s*width: 100%;\s*height: 100%;\s*\}/,
    )
  })
})