blade("Body"))
->toContain($classes)
->toContain('rounded-corner-md')
->toContain("data-card=\"{$variant}\"");
})->with([
'filled' => ['filled', 'bg-surface-container-highest'],
'elevated' => ['elevated', 'bg-surface-container-low shadow-elevation-1'],
'outlined' => ['outlined', 'border border-outline-variant bg-surface'],
]);
it('is filled unless it knows the variant', function () {
expect((string) $this->blade('Body'))
->toContain('bg-surface-container-highest')
->toContain('data-card="filled"');
});
it('lays out a header, menu, media, body and actions', function () {
$html = (string) $this->blade(<<<'BLADE'
Expires in 3 days.
BLADE);
expect($html)
->toContain('')
->toContain('holiday-photos.zip
')
->toContain('248 MB')
->toContain('')
->toContain('role="separator"')
->toContain('Expires in 3 days.')
->toContain('')
->and(strpos($html, 'Expires'))->toBeLessThan(strpos($html, 'Copy link'));
});
it('passes row attributes through', function () {
expect((string) $this->blade('Open'))
->toContain('data-list-row')
->toContain('data-list-open');
});
it('makes a directly actionable card the one tab stop, named by its title', function () {
$html = (string) $this->blade('Open');
expect($html)
->toContain('data-list-row')
->toContain('data-list-actionable')
->toContain('tabindex="0"')
->toContain('role="button"')
->toContain('aria-label="holiday-photos.zip"')
->and((string) $this->blade('Body'))
->toContain('role="link"')
->and(substr_count((string) $this->blade('Body'), 'role="link"'))->toBe(1)
->and((string) $this->blade('Body'))
->not->toContain('data-list-actionable')
->not->toContain('tabindex');
});
it('draws M3\'s dragged state while the application says the card is being carried', function () {
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/components/list.css');
expect((string) $this->blade('Body'))
->toContain('data-dragged')
->and($css)
->toContain('[data-card][data-dragged] {')
->toContain('var(--md-sys-elevation-3),')
->toContain("[data-card='elevated'][data-dragged] {")
->toContain('var(--md-sys-elevation-4),')
->toContain('calc(var(--md-sys-state-dragged-state-layer-opacity) * 100%)')
->toContain(':not([data-dragged]):hover')
->toContain(':not([data-dragged]):active');
});