blade('');
expect($html)
->toContain('data-search')
->toContain('role="search"')
->toContain('type="search"')
->toContain('placeholder="Search shares"')
->toContain('aria-label="Search shares"')
->toContain('role="combobox"')
->toContain('aria-haspopup="dialog"')
->toContain('aria-controls="find-view"')
->toContain('aria-expanded="false"')
->toContain('wire:model.live.debounce.300ms="query"')
->toContain('id="find-view"')
->toContain('data-search-clear')
->toContain('data-search-scrim')
->toContain('aria-label="Back"')
->toContain('materialSearch(false,')
->not->toContain('data-search-results');
// The state belongs to the combobox, never to the bare textbox ARIA gives it to.
expect($html)->toMatch('/]*aria-expanded/s');
expect($html)->not->toMatch('/]*aria-expanded/s');
});
it('announces how many results there are, politely', function () {
$html = (string) $this->blade('');
expect($html)
->toContain('data-search-status')
->toContain('aria-live="polite"')
->toContain('aria-atomic="true"')
->toContain('No results')
->toContain('1 result')
->toContain(':count results');
});
it('shows the results as a list, or what to say when there are none', function () {
expect((string) $this->blade('holiday.zip'))
->toContain('data-search-results role="list"')
->toContain('holiday.zip')
->and((string) $this->blade('No shares match.'))
->toContain('No shares match.')
->not->toContain('data-search-results role="list"');
});
it('offers M3\'s search-icon entry point', function () {
$html = (string) $this->blade('');
expect($html)
->toContain('data-trigger="icon"')
->toContain('data-search-trigger')
->toContain('x-ref="trigger"')
->toContain('x-on:click="expand()"')
->toContain('aria-label="Search shares"')
->toContain('aria-haspopup="dialog"')
->toContain('aria-controls="find-view"')
->toContain('materialSearch(false,')
->toContain("'icon'")
// The bar is still there: it becomes the expanded view's header.
->toContain('data-search-bar');
expect((string) $this->blade(''))
->toContain('data-trigger="bar"')
->not->toContain('data-search-trigger');
});
it('shows suggestions until the first keystroke, then the results', function () {
$html = (string) $this->blade(<<<'BLADE'
holiday.zipRecent shares
BLADE);
expect($html)
->toContain('data-search-suggestions role="list"')
->toContain('x-show="query === \'\'"')
->toContain('Recent shares')
->toContain('x-show="query !== \'\'"')
->toContain('holiday.zip')
->toContain('1 suggestion')
->toContain(':count suggestions');
// Without the slot the results stand alone and are never hidden.
expect((string) $this->blade('holiday.zip'))
->not->toContain('data-search-suggestions')
->not->toContain('x-show="query !== \'\'"');
});
it('names the input, trails the bar, and stays docked on request', function () {
$html = (string) $this->blade('');
expect($html)
->toContain('placeholder="Search"')
->toContain('aria-label="Search your shares"')
->toContain('data-search-trailing')
->toContain('')
->toContain('materialSearch(true,');
});