131 lines
5.2 KiB
PHP
131 lines
5.2 KiB
PHP
<?php
|
|
|
|
use Illuminate\Support\Facades\File;
|
|
|
|
beforeEach(function () {
|
|
$this->cssPath = resource_path('css/app.css');
|
|
$this->cssContent = File::get($this->cssPath);
|
|
});
|
|
|
|
describe('Typography System', function () {
|
|
describe('Google Fonts Import', function () {
|
|
test('imports Cairo font for Arabic', function () {
|
|
expect($this->cssContent)->toContain('family=Cairo');
|
|
});
|
|
|
|
test('imports Montserrat font for English', function () {
|
|
expect($this->cssContent)->toContain('family=Montserrat');
|
|
});
|
|
|
|
test('imports required font weights (300, 400, 600, 700)', function () {
|
|
expect($this->cssContent)->toContain('wght@300;400;600;700');
|
|
});
|
|
|
|
test('uses font-display swap for performance', function () {
|
|
expect($this->cssContent)->toContain('display=swap');
|
|
});
|
|
|
|
test('Google Fonts import appears before tailwindcss import', function () {
|
|
$googleFontsPosition = strpos($this->cssContent, 'fonts.googleapis.com');
|
|
$tailwindPosition = strpos($this->cssContent, "@import 'tailwindcss'");
|
|
|
|
expect($googleFontsPosition)->toBeLessThan($tailwindPosition);
|
|
});
|
|
});
|
|
|
|
describe('Font Family Variables', function () {
|
|
test('defines Arabic font family variable', function () {
|
|
expect($this->cssContent)->toContain("--font-arabic: 'Cairo'");
|
|
});
|
|
|
|
test('defines English font family variable', function () {
|
|
expect($this->cssContent)->toContain("--font-english: 'Montserrat'");
|
|
});
|
|
|
|
test('includes fallback fonts for Arabic', function () {
|
|
expect($this->cssContent)->toContain("'Cairo', 'Tajawal'");
|
|
});
|
|
|
|
test('includes fallback fonts for English', function () {
|
|
expect($this->cssContent)->toContain("'Montserrat', 'Lato'");
|
|
});
|
|
});
|
|
|
|
describe('Font Size Variables', function () {
|
|
test('defines xs font size (0.75rem / 12px)', function () {
|
|
expect($this->cssContent)->toContain('--font-size-xs: 0.75rem');
|
|
});
|
|
|
|
test('defines sm font size (0.875rem / 14px)', function () {
|
|
expect($this->cssContent)->toContain('--font-size-sm: 0.875rem');
|
|
});
|
|
|
|
test('defines base font size (1rem / 16px)', function () {
|
|
expect($this->cssContent)->toContain('--font-size-base: 1rem');
|
|
});
|
|
|
|
test('defines lg font size (1.125rem / 18px)', function () {
|
|
expect($this->cssContent)->toContain('--font-size-lg: 1.125rem');
|
|
});
|
|
|
|
test('defines xl font size (1.25rem / 20px)', function () {
|
|
expect($this->cssContent)->toContain('--font-size-xl: 1.25rem');
|
|
});
|
|
|
|
test('defines 2xl font size for H3 (1.5rem / 24px)', function () {
|
|
expect($this->cssContent)->toContain('--font-size-2xl: 1.5rem');
|
|
});
|
|
|
|
test('defines 3xl font size for H2 (2rem / 32px)', function () {
|
|
expect($this->cssContent)->toContain('--font-size-3xl: 2rem');
|
|
});
|
|
|
|
test('defines 4xl font size for H1 (2.5rem / 40px)', function () {
|
|
expect($this->cssContent)->toContain('--font-size-4xl: 2.5rem');
|
|
});
|
|
});
|
|
|
|
describe('Dynamic Font Selection', function () {
|
|
test('applies Arabic font family for ar language', function () {
|
|
expect($this->cssContent)->toContain('html[lang="ar"] body');
|
|
expect($this->cssContent)->toMatch('/html\[lang="ar"\] body\s*\{\s*font-family:\s*var\(--font-arabic\)/');
|
|
});
|
|
|
|
test('applies English font family for en language', function () {
|
|
expect($this->cssContent)->toContain('html[lang="en"] body');
|
|
expect($this->cssContent)->toMatch('/html\[lang="en"\] body\s*\{\s*font-family:\s*var\(--font-english\)/');
|
|
});
|
|
});
|
|
|
|
describe('Line Heights', function () {
|
|
test('sets body line height to 1.6', function () {
|
|
expect($this->cssContent)->toMatch('/body\s*\{[^}]*line-height:\s*1\.6/');
|
|
});
|
|
|
|
test('sets heading line height to 1.3', function () {
|
|
expect($this->cssContent)->toMatch('/h1,\s*h2,\s*h3,\s*h4,\s*h5,\s*h6\s*\{[^}]*line-height:\s*1\.3/');
|
|
});
|
|
});
|
|
|
|
describe('Font Hierarchy', function () {
|
|
test('H1 uses 4xl size and bold weight (700)', function () {
|
|
expect($this->cssContent)->toMatch('/h1\s*\{[^}]*font-size:\s*var\(--font-size-4xl\)/');
|
|
expect($this->cssContent)->toMatch('/h1\s*\{[^}]*font-weight:\s*700/');
|
|
});
|
|
|
|
test('H2 uses 3xl size and semibold weight (600)', function () {
|
|
expect($this->cssContent)->toMatch('/h2\s*\{[^}]*font-size:\s*var\(--font-size-3xl\)/');
|
|
expect($this->cssContent)->toMatch('/h2\s*\{[^}]*font-weight:\s*600/');
|
|
});
|
|
|
|
test('H3 uses 2xl size and semibold weight (600)', function () {
|
|
expect($this->cssContent)->toMatch('/h3\s*\{[^}]*font-size:\s*var\(--font-size-2xl\)/');
|
|
expect($this->cssContent)->toMatch('/h3\s*\{[^}]*font-weight:\s*600/');
|
|
});
|
|
|
|
test('small text uses sm font size', function () {
|
|
expect($this->cssContent)->toMatch('/small,\s*\.text-sm\s*\{[^}]*font-size:\s*var\(--font-size-sm\)/');
|
|
});
|
|
});
|
|
});
|