TREK/client/tests/unit/native/nativeShell.test.ts

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

import { directionOf, pickLocale, translator } from '../../../native-shell/i18n'

// FE-NATIVE-SHELL-001 to FE-NATIVE-SHELL-006
//
// The app's own first screens (client/native-shell): which language and reading
// direction they start in, and the layout rules in shell.css that no component
// test reaches (jsdom applies no stylesheet, so these read the real file).

/** Every rule of a stylesheet as its selector list, its declarations and the media query around it, comments dropped. */
function rules(css: string): { selectors: string[]; body: string; media: string }[] {
  const out: { selectors: string[]; body: string; media: string }[] = []
  const stack: string[] = []
  let buf = ''
  for (const ch of css.replace(/\/\*[\s\S]*?\*\//g, '')) {
    if (ch === '{') {
      stack.push(buf.trim())
      buf = ''
    } else if (ch === '}') {
      const head = stack.pop() ?? ''
      if (!head.startsWith('@')) {
        const media = stack.filter(h => h.startsWith('@media')).join(' ')
        out.push({ selectors: head.split(',').map(sel => sel.trim()), body: buf, media })
      }
      buf = ''
    } else {
      buf += ch
    }
  }
  return out
}

const css = readFileSync(resolve(process.cwd(), 'native-shell/shell.css'), 'utf8')
const all = rules(css)
const find = (selector: string, media?: RegExp) =>
  all.filter(r => r.selectors.includes(selector) && (!media || media.test(r.media)))

describe('native shell', () => {
  it('FE-NATIVE-SHELL-001: Arabic and Hebrew start right to left, every other language left to right', () => {
    expect(pickLocale(['ar-SA'])).toBe('ar')
    expect(pickLocale(['he-IL'])).toBe('he')
    expect(directionOf('ar')).toBe('rtl')
    expect(directionOf('he')).toBe('rtl')
    expect(directionOf('ru')).toBe('ltr')
    expect(directionOf('de')).toBe('ltr')
  })

  it('FE-NATIVE-SHELL-002: the first screens speak without dashes as punctuation', () => {
    for (const code of ['en', 'de']) {
      const t = translator(code)
      for (const key of ['native.welcome.sub', 'native.cloud.sub', 'native.cloud.f3']) {
        expect(t(key)).not.toMatch(/[\u2013\u2014]| - /)
      }
    }
  })

  it('FE-NATIVE-SHELL-003: Russian keeps TREK\'s faces through Cyrillic stand-ins under the same family names', () => {
    const faces = css.match(/@font-face\s*\{[^}]*\}/g) ?? []
    const cyrillic = faces.filter(f => /unicode-range:\s*U\+0301, U\+0400-045F/.test(f))
    expect(cyrillic.filter(f => /font-family:\s*'Poppins'/.test(f))).toHaveLength(3)
    expect(cyrillic.filter(f => /font-family:\s*'MuseoModerno'/.test(f))).toHaveLength(1)
    for (const face of cyrillic) {
      const file = /url\('\.\/fonts\/([^']+)'\)/.exec(face)?.[1]
      expect(file).toBeTruthy()
      expect(() => readFileSync(resolve(process.cwd(), 'native-shell/fonts', file as string))).not.toThrow()
    }
  })

  it('FE-NATIVE-SHELL-004: a short screen on its side puts the two halves of a screen side by side', () => {
    const compact = /orientation: landscape\) and \(max-height: 500px\)/
    expect(find('.screen:has(> .col)', compact)[0]?.body).toMatch(/grid-template-columns:\s*minmax\(0, 1fr\) minmax\(0, 1fr\)/)
    expect(find('.col-about', compact)[0]?.body).toMatch(/position:\s*sticky/)
    // Everywhere else the halves are no boxes of their own: one column, as before.
    expect(find('.col')[0]?.body).toMatch(/display:\s*contents/)
  })

  it('FE-NATIVE-SHELL-005: a screen taller than the window scrolls instead of overflowing both edges', () => {
    expect(find('.screen')[0]?.body).toMatch(/margin-block:\s*auto/)
    const shell = find('.shell')[0]?.body ?? ''
    expect(shell).toMatch(/overflow-x:\s*clip/)
    expect(shell).not.toMatch(/justify-content:\s*center/)
  })

  it('FE-NATIVE-SHELL-006: in Arabic the chevrons sit at the far edge and point along the reading direction, the price stands apart', () => {
    expect(find('.btn .chev')[0]?.body).toMatch(/margin-inline-start:\s*auto/)
    expect(find(":root[dir='rtl'] .chev")[0]?.body).toMatch(/transform:\s*scaleX\(-1\)/)
    expect(find('.plan-price small')[0]?.body).toMatch(/margin-inline-start:\s*7px/)
    expect(find('.btn-row')[0]?.body).toMatch(/text-align:\s*start/)
    expect(css).not.toMatch(/margin-left|margin-right|padding-left|padding-right|text-align:\s*left/)
  })
})