blade(''); expect($html) ->toContain('role="status"') ->toContain('data-md-alert') ->toContain('data-md-color="warning"') ->toContain('Storage almost full') ->toContain('3.8 of 4 GB') ->toContain('and(ComponentStylesheet::read('alert')->declarations("[data-md-alert][data-md-color='warning']"))->toBe([ 'background-color' => 'var(--md-sys-color-warning-container)', 'color' => 'var(--md-sys-color-on-warning-container)', ]); }); it('is a status whatever its colour, and interrupts only when asked to', function () { expect((string) $this->blade(''))->toContain('role="status"')->toContain('data-md-color="success"') ->and((string) $this->blade(''))->toContain('role="status"')->toContain('data-md-color="info"') ->and((string) $this->blade(''))->toContain('role="status"') ->and((string) $this->blade(''))->toContain('role="alert"'); }); it('falls back to info for an unknown colour', function () { expect((string) $this->blade(''))->toContain('data-md-color="info"'); }); it('takes actions, drops its icon on request, and can be dismissed', function () { $html = (string) $this->blade(<<<'BLADE' The connection dropped. BLADE); expect($html) ->toContain('The connection dropped.') ->toContain('data-md-alert-actions') ->toContain('Try again') ->toContain('x-data="{ shown: true }"') ->toContain('data-md-alert-dismiss') ->toContain('aria-label="Dismiss"') ->and(substr_count($html, 'toBe(1); }); it('reaches 48px from its 40px dismiss button, from the foundation\'s class, not a copy', function () { $css = ComponentStylesheet::read('alert'); expect($css->declarations('[data-md-alert-dismiss]'))->toMatchArray([ 'width' => 'var(--md-sys-measurement-space500)', 'height' => 'var(--md-sys-measurement-space500)', ]) ->and($css->has('[data-md-alert-dismiss]::after'))->toBeFalse() ->and($css->has('[data-md-alert-dismiss]::before'))->toBeFalse() ->and((string) $this->blade('')) ->toMatch('/class="md-state-layer md-focus-ring md-touch-target" data-md-alert-dismiss/'); }); it('draws neutral in surface-container-high, on-surface', function () { expect((string) $this->blade(''))->toContain('data-md-color="neutral"') ->and(ComponentStylesheet::read('alert')->declarations("[data-md-alert][data-md-color='neutral']"))->toBe([ 'background-color' => 'var(--md-sys-color-surface-container-high)', 'color' => 'var(--md-sys-color-on-surface)', ]); });