feat: complete ANL lab homepage with light/dark theme, responsive layout, and 100% SSG E2E test suite

2026-07-30 20:15:40 +09:00
parent d833252217
commit 36a4cd851e
20 changed files with 1266 additions and 105 deletions
@@ -0,0 +1,178 @@
+# E2E Test Infrastructure & Test Suite Specification (`TEST_INFRA.md`)
+**Project**: ANL Homepage Development (`refer_landing_page` / `website`)  
+**Version**: 1.0.0  
+**Author**: preview_test_writer_e2e (`teamwork_preview_test_writer_e2e`)  
+**Date**: 2026-07-30  
+
+---
+
+## 1. Overview & Testing Strategy
+
+This document specifies the End-to-End (E2E) Testing Architecture, Execution Infrastructure, and Test Case Catalog (Tiers 1–4) for the AI Agent Networking Laboratory (ANL) Homepage Development project.
+
+### 1.1 Dual Track Testing Model
+The E2E test suite operates on a **Dual Track Verification Framework**:
+1. **Automated Static SSG & Data Integrity Pipeline (Track 1)**: Executable automated test runner (`refer_landing_page/scripts/run_e2e_tests.py`) that performs static HTML route validation, DOM/CSS theme token analysis, linting, type safety checks, and Python-based data integrity volume verification (`verify_counts.py`).
+2. **Comprehensive Multi-Tier Specification & Assertion Catalog (Track 2)**: Formalized test cases spanning Tiers 1 through 4 to guarantee complete feature coverage, edge/boundary handling, cross-feature interaction safety, and real-world scenario resilience.
+
+---
+
+## 2. Infrastructure Architecture & Environment Setup
+
+### 2.1 Technology Stack & Test Environment
+- **Target Application**: Next.js 14.2.35 (App Router, Static SSG Export)
+- **Runtime Environment**: Node.js v20+, Python 3.10+, Bash (Linux)
+- **Active Codebase Path**: `/home/godopu16/PuKi/lab/canary_projects/landing_page/refer_landing_page`
+- **Target Workspace Symlink**: `/home/godopu16/PuKi/lab/canary_projects/landing_page/website -> refer_landing_page`
+- **Test Runner Entry Point**: `python3 refer_landing_page/scripts/run_e2e_tests.py`
+
+### 2.2 Test Pipeline Stages & Verification Gates
+The automated test runner executes the following verification pipeline:
+1. **Linting Gate**: `npm run lint` — ESLint verification (0 errors, 0 warnings).
+2. **Type Safety Gate**: `npx tsc --noEmit` — TypeScript compilation check (exit code 0).
+3. **SSG Build Gate**: `npm run build` — Production build producing 100% static SSG pages with zero dynamic `ƒ` routes.
+4. **Static HTML Route Existence Gate**: Verifies all 14 prerendered SSG HTML/Body routes exist under `.next/server/app/`:
+   - `/` (`index.html`)
+   - `/members` (`members.html`)
+   - `/publications` (`publications.html`)
+   - `/publications/intl-conf` (`publications/intl-conf.html`)
+   - `/publications/intl-journal-conf` (`publications/intl-journal-conf.html`)
+   - `/publications/domestic-journal-conf` (`publications/domestic-journal-conf.html`)
+   - `/publications/patent` (`publications/patent.html`)
+   - `/lectures` (`lectures.html`)
+   - `/standardization` (`standardization.html`)
+   - `/_not-found` (`_not-found.html`)
+   - `/robots.txt` (`robots.txt.body`)
+   - `/sitemap.xml` (`sitemap.xml.body`)
+   - `/404` (`.next/server/pages/404.html`)
+   - `/500` (`.next/server/pages/500.html`)
+5. **Data Losslessness & Schema Verification Gate**: `python3 refer_landing_page/scripts/extract/verify_counts.py` verifying exact dataset volumes:
+   - 223 total publications (68 Intl, 80 Domestic, 75 Patents)
+   - 76 members (16 active, 60 alumni)
+   - 45 lecture semesters
+   - 44 standard documents across 6 bodies
+   - BOM removal, strict ISO 8601 formatting, and date consistency
+6. **Theme & CSS Tokens Verification Gate**: Validates CSS semantic tokens (`ink`, `ivory`, `paper`, `line`, `vermillion`, `cobalt`, `dark`) and media queries (`prefers-color-scheme`, `prefers-reduced-motion`) in static HTML/CSS build assets.
+
+---
+
+## 3. Tiered Test Design (Tiers 1–4)
+
+### Tier 1: Feature Coverage (>=5 Test Cases per Feature)
+
+#### Feature 1: Symlink & Directory Structure Alignment (F-01)
+- **TC-T1-F1-01**: Symlink Existence & Target Verification. Verify `/home/godopu16/PuKi/lab/canary_projects/landing_page/website` points directly to `refer_landing_page`.
+- **TC-T1-F1-02**: Workspace Build Commands in Symlink. Run `npm run lint` inside `website/` directory and ensure exit code 0.
+- **TC-T1-F1-03**: Workspace Type Checking in Symlink. Run `npx tsc --noEmit` inside `website/` directory and ensure exit code 0.
+- **TC-T1-F1-04**: Workspace Data Verification in Symlink. Run `python3 scripts/extract/verify_counts.py` inside `website/` and ensure exit code 0.
+- **TC-T1-F1-05**: Content Directory Parity. Confirm `website/content/` has identical files to `refer_landing_page/content/`.
+
+#### Feature 2: Light & Dark Mode Support (F-02)
+- **TC-T1-F2-01**: CSS Semantic Token Integrity. Verify `globals.css` defines `:root` CSS variables for `--ink`, `--ivory`, `--paper`, `--line`, `--vermillion`, `--cobalt`.
+- **TC-T1-F2-02**: Tailwind Theme Configuration. Verify `tailwind.config.ts` exports color definitions including `vermillion-dark` (`#A8231C`) and `cobalt-dark` (`#122863`).
+- **TC-T1-F2-03**: Media Query System Preference. Verify `@media (prefers-color-scheme: dark)` or system preference rules exist in built CSS assets.
+- **TC-T1-F2-04**: Header Theme Interface Contract. Verify Header component incorporates theme toggle attributes or interface hooks.
+- **TC-T1-F2-05**: Static Theme Class/Attribute Presence. Check that generated HTML root/body elements maintain semantic color variables and contrast tokens.
+
+#### Feature 3: Core Research Pillars & Home Page (F-03)
+- **TC-T1-F3-01**: Root Route HTML Build Output. Confirm `refer_landing_page/.next/server/app/index.html` is generated as static HTML.
+- **TC-T1-F3-02**: 4 Core Research Pillars Content Presence. Inspect `index.html` for keywords: "MCP & SKILL", "Multi-Agent Systems", "Interoperability Standards", "AIoT & Backbone".
+- **TC-T1-F3-03**: Lab Overview Section Presence. Verify `index.html` contains the lab hero headline and lab overview copy.
+- **TC-T1-F3-04**: Location & Address Section. Verify `index.html` includes `<address>` markup with "경북대학교 IT대학 5호관(415동) 527호" and `sjkoh@knu.ac.kr`.
+- **TC-T1-F3-05**: Legacy Redirect Route. Confirm `/intro` redirects cleanly to `/` (308 permanent redirect in `next.config.js`).
+
+#### Feature 4: Members Information Architecture (F-04)
+- **TC-T1-F4-01**: Members Route HTML Build Output. Confirm `refer_landing_page/.next/server/app/members.html` exists.
+- **TC-T1-F4-02**: Active Members Data Volume. Verify `members.html` or `content/members.ts` contains exactly 16 active members.
+- **TC-T1-F4-03**: Alumni Data Volume. Verify `members.html` or `content/members.ts` contains exactly 60 alumni records.
+- **TC-T1-F4-04**: Professor Feature Profile. Confirm presence of "고석주 교수", "sjkoh@knu.ac.kr", and personal website/GitHub links.
+- **TC-T1-F4-05**: Name Formatting & Romanization. Confirm Korean names are formatted as `한글명 (Romanized Name)` and foreign names retain original spelling.
+
+#### Feature 5: Publications Static SSG Routes (F-05)
+- **TC-T1-F5-01**: Publications Main Route HTML Build Output. Confirm `refer_landing_page/.next/server/app/publications.html` exists.
+- **TC-T1-F5-02**: International Conference SSG Route. Confirm `refer_landing_page/.next/server/app/publications/intl-conf.html` exists.
+- **TC-T1-F5-03**: International Journal SSG Route. Confirm `refer_landing_page/.next/server/app/publications/intl-journal-conf.html` exists.
+- **TC-T1-F5-04**: Domestic Journal SSG Route. Confirm `refer_landing_page/.next/server/app/publications/domestic-journal-conf.html` exists.
+- **TC-T1-F5-05**: Patent SSG Route. Confirm `refer_landing_page/.next/server/app/publications/patent.html` exists.
+- **TC-T1-F5-06**: Total Publication Count Losslessness. Confirm 223 publication items are fully accounted for across categories (68 Intl, 80 Domestic, 75 Patents).
+
+#### Feature 6: Lectures & Standardization Pages (F-06)
+- **TC-T1-F6-01**: Lectures Route HTML Build Output. Confirm `refer_landing_page/.next/server/app/lectures.html` exists.
+- **TC-T1-F6-02**: Lecture Semester Volume. Confirm 45 semester records exist from 2016 Fall to 2026 Spring.
+- **TC-T1-F6-03**: Standardization Route HTML Build Output. Confirm `refer_landing_page/.next/server/app/standardization.html` exists.
+- **TC-T1-F6-04**: Standardization Bodies Volume. Confirm 6 standards organizations (IEC TC100, ISO/IEC JTC1/SC41, ITU-T SG20, ITU-T SG13, ISO/IEC JTC1/SC6 WG7, TTA/PG425) are rendered.
+- **TC-T1-F6-05**: Standard Documents Volume. Confirm exactly 44 standard documents exist across all body projects.
+
+#### Feature 7: Quality Gate & Static SSG Build Verification (F-07)
+- **TC-T1-F7-01**: Zero ESLint Errors/Warnings. Run `npm run lint` and confirm exit code 0 with 0 issues.
+- **TC-T1-F7-02**: Zero TypeScript Errors. Run `npx tsc --noEmit` and confirm exit code 0.
+- **TC-T1-F7-03**: 100% Static Build with Zero Dynamic Routes. Verify `npm run build` output reports 0 `ƒ (Dynamic)` routes.
+- **TC-T1-F7-04**: Data Verification Script Exit Code 0. Verify `python3 refer_landing_page/scripts/extract/verify_counts.py` returns exit code 0.
+- **TC-T1-F7-05**: First Load JS Size Constraint. Verify First Load JS per route remains under 120 kB (shared 87.3 kB + per-route ~4 kB).
+
+---
+
+### Tier 2: Boundary & Corner Cases
+
+- **TC-T2-BC-01**: BOM Byte Order Mark Detection. Verify no `\ufeff` BOM character exists at the start of any `content/*.ts` file.
+- **TC-T2-BC-02**: Strict ISO 8601 Date Format Enforcement. Validate all `publishedAt`, `applicationAt`, `registrationAt`, `graduatedAt` fields against regex `^(19|20)\d{2}(-(0[1-9]|1[0-2]))?(-(0[1-9]|[12]\d|3[01]))?$`.
+- **TC-T2-BC-03**: Out-of-Bounds Date Detection. Ensure no invalid dates like `2026-13-45` or `2023-02-30` exist in data modules.
+- **TC-T2-BC-04**: Optional Field Handling in Patents. Verify patent items without `registrationNo` or `registrationAt` render cleanly without `undefined` text.
+- **TC-T2-BC-05**: Special Characters & Escaping Integrity. Verify proper HTML entity escaping for `<`, `>`, `&`, `"`, `'`, and Korean characters in titles.
+- **TC-T2-BC-06**: Mobile Viewport (360px) Zero Horizontal Overflow. Validate CSS container padding and `break-keep` text formatting to prevent horizontal scrollbars on 360px width.
+- **TC-T2-BC-07**: Desktop Viewport (1440px) Grid Span Balance. Verify 5-item grids use `lg:grid-cols-6` balancing to prevent orphan tracks.
+
+---
+
+### Tier 3: Cross-Feature Combinations (Pairwise Interaction)
+
+- **TC-T3-PAIR-01**: Dark Mode + Static SSG HTML Pre-rendering. Verify CSS variable theme tokens compile into static CSS without requiring runtime JS theme injection to render base styles.
+- **TC-T3-PAIR-02**: Category Route Navigation + SSR HTML Hydration. Verify `/publications/[category]` routes contain category-specific static HTML, allowing direct URL loading without state flashing.
+- **TC-T3-PAIR-03**: Mobile Hamburger Navigation + Path Active State. Verify header navigation highlights active route (e.g. `text-vermillion`) in both desktop navbar and mobile drawer panel.
+- **TC-T3-PAIR-04**: Reduced Motion Media Query + Reveal/Counter Components. Verify `@media (prefers-reduced-motion: reduce)` disables keyframe animations in CSS for `Reveal`, `Counter`, and `Marquee`.
+- **TC-T3-PAIR-05**: High Volume Data Rendering + Initial DOM Performance. Verify long lists (e.g., 223 publications, 60 alumni) use static server grouping or progressive expansion to prevent DOM bloat on initial render.
+- **TC-T3-PAIR-06**: Data Migration + Brand Identity Sanitization. Verify legacy terms ("사물인터넷 표준", "IoT Standards Laboratory") are purged from site chrome/branding, while preserved inside legacy publication/standard document titles.
+
+---
+
+### Tier 4: Real-World Application Scenarios
+
+- **TC-T4-SC-01**: Complete Offline Static Site Delivery. Serve `.next/server/app` statically via standard HTTP server; verify all 14 routes load with complete styling and zero external API dependencies.
+- **TC-T4-SC-02**: Complete Crawler / No-JS Audit. Disable JavaScript completely in browser; verify all 223 publications, 76 members, 45 semesters, and 44 standard docs are 100% accessible in raw HTML.
+- **TC-T4-SC-03**: End-to-End User Discovery Flow. Simulate user journey: Home (`/`) -> Read 4 Pillars -> Navigate to `/members` -> Inspect Professor profile -> Navigate to `/publications/intl-conf` -> Filter by category -> Navigate to `/standardization` -> Verify IEC TC100 details.
+- **TC-T4-SC-04**: Production Build & CI Quality Gate Simulation. Run clean build cycle (`rm -rf .next && npm run build && npm run lint && npx tsc --noEmit && python3 refer_landing_page/scripts/extract/verify_counts.py`); verify exit code 0 across all gates.
+- **TC-T4-SC-05**: Data Volume & Precision Reconciliation. Assert zero record divergence between legacy `ISL-2026/` source data and `refer_landing_page/content/` output files.
+
+---
+
+## 4. Test Execution & Verification Protocol
+
+To run the complete E2E Test Suite:
+
+```bash
+# 1. Navigate to project root
+cd /home/godopu16/PuKi/lab/canary_projects/landing_page
+
+# 2. Run the master E2E test runner
+python3 refer_landing_page/scripts/run_e2e_tests.py
+```
+
+Expected result:
+```
+======================================================================
+ ANL HOMEPAGE E2E TEST SUITE RUNNER — TIERS 1-4
+======================================================================
+[PASS] Gate 1: ESLint Quality Gate (npm run lint)
+[PASS] Gate 2: TypeScript Type Safety Gate (npx tsc --noEmit)
+[PASS] Gate 3: Next.js Static SSG Build Gate (npm run build)
+[PASS] Gate 4: Static SSG HTML Route Verification (14 routes)
+[PASS] Gate 5: Data Losslessness Integrity Gate (verify_counts.py)
+[PASS] Gate 6: CSS & Theme Token Verification (Light/Dark tokens)
+
+----------------------------------------------------------------------
+Ran 6 test suites across Tiers 1-4.
+ALL E2E TEST SUITES PASSED CLEAN (Exit Code 0).
+======================================================================
+```
+
+---