mirror of
https://github.com/usetrmnl/byos_laravel.git
synced 2026-03-14 20:33:40 +00:00
feat: inject device dimensions into framework
This commit is contained in:
parent
64e2b6cdbd
commit
0797f17ebb
3 changed files with 132 additions and 1 deletions
100
tests/Feature/ScreenCssVariablesTest.php
Normal file
100
tests/Feature/ScreenCssVariablesTest.php
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<?php
|
||||
|
||||
use App\Models\Device;
|
||||
use App\Models\DeviceModel;
|
||||
use Illuminate\Support\Facades\Config;
|
||||
|
||||
beforeEach(function (): void {
|
||||
Config::set('app.puppeteer_window_size_strategy', 'v2');
|
||||
});
|
||||
|
||||
test('screen component outputs :root with --screen-w and --screen-h when cssVariables are passed', function (): void {
|
||||
$html = view('trmnl-layouts.single', [
|
||||
'slot' => '<div>test</div>',
|
||||
'cssVariables' => [
|
||||
'--screen-w' => '800px',
|
||||
'--screen-h' => '480px',
|
||||
],
|
||||
])->render();
|
||||
|
||||
expect($html)->toContain(':root');
|
||||
expect($html)->toContain('--screen-w: 800px');
|
||||
expect($html)->toContain('--screen-h: 480px');
|
||||
});
|
||||
|
||||
test('DeviceModel css_variables attribute merges --screen-w and --screen-h from dimensions when not set', function (): void {
|
||||
$deviceModel = DeviceModel::factory()->create([
|
||||
'width' => 800,
|
||||
'height' => 480,
|
||||
'css_variables' => null,
|
||||
]);
|
||||
|
||||
$vars = $deviceModel->css_variables;
|
||||
|
||||
expect($vars)->toHaveKey('--screen-w', '800px');
|
||||
expect($vars)->toHaveKey('--screen-h', '480px');
|
||||
});
|
||||
|
||||
test('DeviceModel css_variables attribute does not override --screen-w and --screen-h when already set', function (): void {
|
||||
$deviceModel = DeviceModel::factory()->create([
|
||||
'width' => 800,
|
||||
'height' => 480,
|
||||
'css_variables' => [
|
||||
'--screen-w' => '1200px',
|
||||
'--screen-h' => '900px',
|
||||
],
|
||||
]);
|
||||
|
||||
$vars = $deviceModel->css_variables;
|
||||
|
||||
expect($vars['--screen-w'])->toBe('1200px');
|
||||
expect($vars['--screen-h'])->toBe('900px');
|
||||
});
|
||||
|
||||
test('DeviceModel css_variables attribute fills only missing --screen-w or --screen-h from dimensions', function (): void {
|
||||
$deviceModel = DeviceModel::factory()->create([
|
||||
'width' => 800,
|
||||
'height' => 480,
|
||||
'css_variables' => [
|
||||
'--screen-w' => '640px',
|
||||
],
|
||||
]);
|
||||
|
||||
$vars = $deviceModel->css_variables;
|
||||
|
||||
expect($vars['--screen-w'])->toBe('640px');
|
||||
expect($vars['--screen-h'])->toBe('480px');
|
||||
});
|
||||
|
||||
test('DeviceModel css_variables attribute returns raw vars when strategy is not v2', function (): void {
|
||||
Config::set('app.puppeteer_window_size_strategy', 'v1');
|
||||
|
||||
$deviceModel = DeviceModel::factory()->create([
|
||||
'width' => 800,
|
||||
'height' => 480,
|
||||
'css_variables' => ['--custom' => 'value'],
|
||||
]);
|
||||
|
||||
$vars = $deviceModel->css_variables;
|
||||
|
||||
expect($vars)->toBe(['--custom' => 'value']);
|
||||
});
|
||||
|
||||
test('device model css_variables are available via device relationship for rendering', function (): void {
|
||||
Config::set('app.puppeteer_window_size_strategy', 'v2');
|
||||
|
||||
$deviceModel = DeviceModel::factory()->create([
|
||||
'width' => 800,
|
||||
'height' => 480,
|
||||
'css_variables' => null,
|
||||
]);
|
||||
$device = Device::factory()->create([
|
||||
'device_model_id' => $deviceModel->id,
|
||||
]);
|
||||
$device->load('deviceModel');
|
||||
|
||||
$vars = $device->deviceModel?->css_variables ?? [];
|
||||
|
||||
expect($vars)->toHaveKey('--screen-w', '800px');
|
||||
expect($vars)->toHaveKey('--screen-h', '480px');
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue