mirror of
https://github.com/sky-systems/sky_phone.git
synced 2026-09-03 03:38:52 +00:00
DerEchteAlec
d0317a35c0
* ENH - refine phone setup experience * FIX - refine settings header and search icon * FIX - refine compact weather layout * ENH - fade empty music widget content * ENH - align gallery filter navigation * FIX - align memo player content * ENH - refine notes header and compose controls * ENH - refine phone liquid glass controls * ENH - apply liquid glass across app controls * FIX - correct messages GIF picker layout --------- Co-authored-by: smx.pusha <139338836+smxpusha@users.noreply.github.com>
106 lines
3.6 KiB
TypeScript
106 lines
3.6 KiB
TypeScript
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)')
|
|
})
|
|
|
|
it('offers a neutral glass variant without accent layers', async () => {
|
|
const html = await renderToString(
|
|
createSSRApp({
|
|
render: () => h(SkyFab, { ariaLabel: 'Create', variant: 'neutral' }),
|
|
}),
|
|
)
|
|
|
|
expect(html).toContain('sky-fab--neutral')
|
|
|
|
const controls = readFileSync(
|
|
fileURLToPath(new URL('../controls.css', import.meta.url)),
|
|
'utf8',
|
|
)
|
|
expect(controls).toMatch(
|
|
/\.sky-glass\.sky-fab--neutral\s*\{[^}]*background:\s*var\(--sky-glass-solid/s,
|
|
)
|
|
})
|
|
|
|
it('offers a translucent glass variant for adjacent floating controls', async () => {
|
|
const html = await renderToString(
|
|
createSSRApp({
|
|
render: () => h(SkyFab, { ariaLabel: 'Create', variant: 'glass' }),
|
|
}),
|
|
)
|
|
|
|
expect(html).toContain('sky-fab--glass')
|
|
|
|
const controls = readFileSync(
|
|
fileURLToPath(new URL('../controls.css', import.meta.url)),
|
|
'utf8',
|
|
)
|
|
expect(controls).toMatch(
|
|
/\.sky-glass\.sky-fab--glass\s*\{[^}]*border:\s*1px solid var\(--sky-hairline[^}]*background:\s*var\(--sky-glass[^}]*box-shadow:\s*var\(--sky-shadow-glass\)/s,
|
|
)
|
|
})
|
|
|
|
it('keeps icon-only fabs perfectly square inside stretching toolbars', () => {
|
|
const controls = readFileSync(
|
|
fileURLToPath(new URL('../controls.css', import.meta.url)),
|
|
'utf8',
|
|
)
|
|
|
|
expect(controls).toMatch(
|
|
/\.sky-fab--icon-only\s*\{[^}]*width:\s*var\(--sky-touch-target, 44px\);[^}]*height:\s*var\(--sky-touch-target, 44px\);[^}]*flex:\s*none;[^}]*align-self:\s*center;/s,
|
|
)
|
|
})
|
|
})
|