MyGoNavi/frontend/src/utils/securityUpdateVisuals.test.ts

import { describe, expect, it } from 'vitest';

import { buildOverlayWorkbenchTheme } from './overlayWorkbenchTheme';
import {
  SECURITY_UPDATE_ACTION_BUTTON_CLASS,
  SECURITY_UPDATE_BANNER_CLASS,
  SECURITY_UPDATE_RESULT_CARD_ACTIVE_CLASS,
  SECURITY_UPDATE_RESULT_CARD_CLASS,
  getSecurityUpdateActionButtonStyle,
  getSecurityUpdateBannerSurfaceStyle,
  getSecurityUpdateSectionSurfaceStyle,
  getSecurityUpdateShellSurfaceStyle,
} from './securityUpdateVisuals';

describe('securityUpdateVisuals', () => {
  it('builds action buttons without default ant focus glow shadow', () => {
    expect(SECURITY_UPDATE_ACTION_BUTTON_CLASS).toBe('security-update-action-btn');
    expect(SECURITY_UPDATE_BANNER_CLASS).toBe('security-update-banner');
    expect(SECURITY_UPDATE_RESULT_CARD_CLASS).toBe('security-update-result-card');
    expect(SECURITY_UPDATE_RESULT_CARD_ACTIVE_CLASS).toBe('security-update-result-card-active');
    expect(getSecurityUpdateActionButtonStyle()).toMatchObject({
      height: 36,
      borderRadius: 12,
      boxShadow: 'none',
      fontWeight: 600,
    });
  });

  it('keeps the shell surface aligned with overlay shell tokens in light and dark mode', () => {
    const lightTheme = buildOverlayWorkbenchTheme(false);
    const darkTheme = buildOverlayWorkbenchTheme(true);

    expect(getSecurityUpdateShellSurfaceStyle(lightTheme)).toMatchObject({
      border: lightTheme.shellBorder,
      background: lightTheme.shellBg,
      boxShadow: lightTheme.shellShadow,
      backdropFilter: lightTheme.shellBackdropFilter,
    });
    expect(getSecurityUpdateShellSurfaceStyle(darkTheme)).toMatchObject({
      border: darkTheme.shellBorder,
      background: darkTheme.shellBg,
      boxShadow: darkTheme.shellShadow,
      backdropFilter: darkTheme.shellBackdropFilter,
    });
  });

  it('keeps the banner surface aligned with overlay shell tokens instead of translucent section tokens', () => {
    const lightTheme = buildOverlayWorkbenchTheme(false);
    const darkTheme = buildOverlayWorkbenchTheme(true);

    expect(getSecurityUpdateBannerSurfaceStyle(lightTheme)).toMatchObject({
      border: lightTheme.shellBorder,
      background: lightTheme.shellBg,
      boxShadow: 'none',
      backdropFilter: lightTheme.shellBackdropFilter,
    });
    expect(getSecurityUpdateBannerSurfaceStyle(darkTheme)).toMatchObject({
      border: darkTheme.shellBorder,
      background: darkTheme.shellBg,
      boxShadow: 'none',
      backdropFilter: darkTheme.shellBackdropFilter,
    });
  });

  it('can scale shell surface alpha with the current appearance opacity so reminder layers stay visually consistent', () => {
    const lightTheme = buildOverlayWorkbenchTheme(false);
    const fadedShell = getSecurityUpdateShellSurfaceStyle(lightTheme, 0.5);
    const fadedBanner = getSecurityUpdateBannerSurfaceStyle(lightTheme, 0.5);

    expect(fadedShell.background).not.toBe(lightTheme.shellBg);
    expect(fadedShell.border).not.toBe(lightTheme.shellBorder);
    expect(fadedShell.background).toContain('0.49');
    expect(fadedBanner.background).toContain('0.49');
  });

  it('can emphasize a section surface for transient focus and recent-result highlighting', () => {
    const lightTheme = buildOverlayWorkbenchTheme(false);
    const darkTheme = buildOverlayWorkbenchTheme(true);

    expect(getSecurityUpdateSectionSurfaceStyle(lightTheme)).toMatchObject({
      border: lightTheme.sectionBorder,
      background: lightTheme.sectionBg,
      boxShadow: 'none',
    });
    expect(getSecurityUpdateSectionSurfaceStyle(darkTheme)).toMatchObject({
      border: darkTheme.sectionBorder,
      background: darkTheme.sectionBg,
      boxShadow: 'none',
    });

    const emphasizedLight = getSecurityUpdateSectionSurfaceStyle(lightTheme, { emphasized: true });
    const emphasizedDark = getSecurityUpdateSectionSurfaceStyle(darkTheme, { emphasized: true });

    expect(emphasizedLight.background).not.toBe(lightTheme.sectionBg);
    expect(emphasizedLight.boxShadow).not.toBe('none');
    expect(emphasizedDark.background).not.toBe(darkTheme.sectionBg);
    expect(emphasizedDark.boxShadow).not.toBe('none');
  });
});