Add basic javascript specs for combobox

Author: rossta

app/javascript/controllers/searches/combobox.js

@@ -83,6 +83,7 @@ export default class extends Controller {
   }
 
   tryOpen() {
+    console.log('Trying to open');
     if (this.options.length > 0) {
       this.open();
     } else {
@@ -95,6 +96,7 @@ export default class extends Controller {
   }
 
   expand() {
+    console.log('Expand');
     this.listbox.classList.remove('hidden');
     this.combobox.setAttribute('aria-expanded', true);
   }
@@ -120,6 +122,7 @@ export default class extends Controller {
   }
 
   collapse() {
+    console.log('Collapse');
     this.combobox.setAttribute('aria-expanded', false);
     this.listbox.classList.add('hidden');
   }
@@ -151,6 +154,7 @@ export default class extends Controller {
   }
 
   navigate(event) {
+    console.log('Navigating', event); // event.key, e.g. "ArrowDown"
     this.navigationKeyHandlers[event.key]?.call(this, event);
   }
 

app/javascript/controllers/searches/combobox.spec.js

@@ -0,0 +1,76 @@
+import {
+  describe,
+  it,
+  expect,
+  render,
+  startStimulus,
+  screen,
+  userEvent,
+  beforeEach,
+} from '../../test/utils';
+
+import SearchCombobox from './combobox';
+
+import html from '../../test/fixtures/views/searches/combobox.html?raw';
+
+describe('Combobox', () => {
+  beforeEach(() => {
+    startStimulus('search-combobox', SearchCombobox);
+  });
+
+  it('should open the combobox', async () => {
+    const user = userEvent.setup();
+
+    await render(html);
+
+    const combobox = await screen.findByRole('combobox');
+    const listbox = await screen.findByRole('listbox');
+
+    expect(combobox).toHaveAttribute('aria-expanded');
+
+    user.click(combobox);
+
+    expect(combobox).toHaveAttribute('aria-expanded', 'true');
+    expect(listbox).not.toHaveClass('hidden');
+    expect(listbox).toBeVisible();
+  });
+
+  it('should close the combobox', async () => {
+    const user = userEvent.setup();
+
+    await render(html);
+
+    const combobox = await screen.findByRole('combobox');
+    const listbox = await screen.findByRole('listbox');
+
+    await user.click(combobox);
+    await user.keyboard('[Escape]');
+
+    expect(combobox).toHaveAttribute('aria-expanded', 'false');
+    expect(listbox).toHaveClass('hidden');
+  });
+
+  it('should select option', async () => {
+    const user = userEvent.setup();
+
+    await render(html);
+
+    const combobox = await screen.findByRole('combobox');
+
+    const option = await screen.findByRole('option', {
+      name: 'Introducing Joy of Rails',
+    });
+
+    await user.click(combobox);
+
+    // Select second option
+    await user.keyboard('[ArrowDown]');
+    await user.keyboard('[ArrowDown]');
+
+    expect(combobox).toHaveAttribute('aria-expanded', 'true');
+    expect(combobox).toHaveAttribute('aria-activedescendant', option.id);
+
+    expect(option).toHaveClass('selected');
+    expect(option).toHaveAttribute('aria-selected', 'true');
+  });
+});

app/javascript/test/fixtures/views/searches/combobox.html

@@ -0,0 +1,11 @@
+<div class="combobox grid gap-2" data-controller="search-combobox" data-action="
+            keydown->search-combobox#navigate
+            search-listbox:connected->search-combobox#tryOpen
+            dialog:close@window->search-combobox#closeInTarget
+            dialog:open@window->search-combobox#openInTarget
+          "><form data-controller="autosubmit-form" data-autosubmit-delay-value="300" data-autosubmit-minimum-length-value="3" data-turbo-frame="search" action="/search" accept-charset="UTF-8" method="post"><div class="flex items-center flex-row pl-2 col-gap-xs"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1200 1200" class="w-[32px] fill-current text-theme">
+  <path d="m1135.2 986.4-254.4-226.8c124.8-181.2 105.6-430.8-55.199-591.6-181.2-182.4-476.4-182.4-657.6 0-182.4 181.2-182.4 476.4 0 658.8 160.8 160.8 410.4 178.8 591.6 55.199l226.8 253.2c38.398 43.199 105.6 45.602 146.4 3.6016l6-6c40.801-40.801 39.598-108-3.6016-146.4zm-422.4-273.6c-120 120-313.2 120-432 0-120-120-120-313.2 0-432 120-120 313.2-120 432 0 120 120 120 313.2 0 432z"></path>
+</svg><label for="query" class="sr-only">Search</label> <input value="Rails" autofocus="autofocus" role="combobox" aria-expanded="false" aria-autocomplete="none" aria-controls="search-listbox" aria-owns="search-listbox" aria-haspopup="listbox" aria-activedescendant="" data-action="
+                  focus-&gt;combobox#tryOpen
+                  input-&gt;autosubmit-form#submit
+                " placeholder="Search Joy of Rails" class="w-full step-1" type="search" name="query" id="query" /></div></form><ul id="search-listbox" role="listbox" class="grid" data-controller="search-listbox"><li aria-label="Mastering Custom Configuration in Rails" role="option" id="search-option_page_01jc3etwr9rb4gabrneh0dwjjh" class="rounded"><a href="/articles/mastering-custom-configuration-in-rails" data-turbo-frame="_top" class="p-2 block"><div class="font-semibold">Mastering Custom Configuration in <mark>Rails</mark></div><div class="text-sm">As your Ruby on <mark>Rails</mark> application grows, you‘ll need to add your own bits of configuration. Where do you put API keys for third-party apps? What if you need different…</div></a></li><li aria-label="Introducing Joy of Rails" role="option" id="search-option_page_01jc3etwj4p7csjx5a92qxpzad" class="rounded"><a href="/articles/introducing-joy-of-rails" data-turbo-frame="_top" class="p-2 block"><div class="font-semibold">Introducing Joy of <mark>Rails</mark></div><div class="text-sm">…With Joy of <mark>Rails</mark>, I want to do something a little different—more than I can with a static website. Built with <mark>Rails</mark> Joy of <mark>Rails</mark> is a <mark>Rails</mark> monolith currently running…</div></a></li><li aria-label="Add your Rails app to the Home Screen - the Ultimate Guide" role="option" id="search-option_page_01jc3etwn1nrym36ch59gf03gy" class="rounded"><a href="/articles/add-your-rails-app-to-the-home-screen" data-turbo-frame="_top" class="p-2 block"><div class="font-semibold">Add your <mark>Rails</mark> app to the Home Screen - the Ultimate Guide</div><div class="text-sm">…In this article, I‘ll show you how to set up your <mark>Rails</mark> app to be installable as a PWA. Install Joy of <mark>Rails</mark> Since Joy of <mark>Rails</mark> is itself a <mark>Rails</mark>…</div></a></li></ul></div>

app/views/searches/listbox.rb

@@ -20,7 +20,12 @@ def view_template
       )) do
         if pages.any?
           pages.each.with_index do |page, i|
-            li(role: "option", id: dom_id(page, "search-option"), class: "rounded") do
+            li(
+              aria: {label: page.title},
+              role: "option",
+              id: dom_id(page, "search-option"),
+              class: "rounded"
+            ) do
               a(
                 href: page.request_path,
                 data: {

lib/tasks/fixtures/html.rake

@@ -8,7 +8,25 @@ namespace :fixtures do
       end
     end
 
-    File.write(Rails.root.join("app", "javascript", "test", "fixtures", "views", "darkmode", "switch.html"), DarkMode::Switch.call)
+    Rake::Task["db:seed"].invoke
+
+    request = ActionDispatch::Request.new({})
+    request.routes = ApplicationController._routes
+
+    instance = ApplicationController.new
+    instance.set_request! request
+    instance.set_response! ApplicationController.make_response!(request)
+    view_context = instance.view_context
+
+    File.write(
+      Rails.root.join("app", "javascript", "test", "fixtures", "views", "darkmode", "switch.html"),
+      DarkMode::Switch.call
+    )
+
+    File.write(
+      Rails.root.join("app", "javascript", "test", "fixtures", "views", "searches", "combobox.html"),
+      Searches::Combobox.new(pages: Page.search("Rails*").with_snippets.ranked.limit(3), query: "Rails").call(view_context:)
+    )
   end
 end