sky_phone-sky-systems/frontend/src/ui/controls/SkyFab.test.ts

import { readFileSync } from 'node:fs'
import { fileURLToPath } from 'node:url'

import { createSSRApp, h } from 'vue'
import { renderToString } from 'vue/server-renderer'
import { describe, expect, it } from 'vitest'

import SkyFab from './SkyFab.vue'

describe('SkyFab', () => {
  it('composes the iOS glass layers with native button semantics', async () => {
    const html = await renderToString(
      createSSRApp({
        render: () =>
          h(
            SkyFab,
            { ariaLabel: 'Create', text: 'Create' },
            { icon: () => '+' },
          ),
      }),
    )

    expect(html).toContain('<button')
    expect(html).toContain('type="button"')
    expect(html).toContain('aria-label="Create"')
    expect(html).toContain('sky-glass')
    expect(html).toContain('sky-fab__accent-layer')
    expect(html).toContain('sky-fab__dark-accent-layer')
    expect(html).toContain('sky-fab__surface-layer')
    expect(html).toContain('Create')
  })

  it('keeps every FAB shadow layer on the contextual accent', () => {
    const uiDirectory = fileURLToPath(new URL('..', import.meta.url))
    const controls = readFileSync(`${uiDirectory}/controls.css`, 'utf8')
    const tokens = readFileSync(`${uiDirectory}/tokens.css`, 'utf8')
    const fabStyles = controls.slice(
      controls.indexOf('.sky-glass.sky-fab {'),
      controls.indexOf('.sky-glass {'),
    )
    const fabTokens = tokens.slice(
      tokens.indexOf('--sky-shadow-glass-fab:'),
      tokens.indexOf('--sky-shadow-glass-thumb:'),
    )

    expect(fabStyles).toContain('background: var(--sky-app-accent, #007aff)')
    expect(fabStyles).toMatch(
      /\.sky-fab__surface-layer\s*\{[\s\S]*?var\(--sky-fab-accent-inset-start\) var\(--sky-app-accent, #007aff\)/,
    )
    expect(fabStyles).toMatch(
      /\.sky-fab__dark-accent-layer\s*\{[\s\S]*?inset 0 -5px 5px var\(--sky-app-accent, #007aff\)/,
    )
    expect(fabStyles).not.toContain('--sky-app-accent-shade')
    expect(fabStyles).not.toContain('scale(0.96)')
    expect(fabTokens).toContain('--sky-fab-accent-inset-start')
    expect(fabTokens).not.toContain('rgba(10, 132, 255, 0.25)')
  })
})