Merge pull request #552 from GSA-TTS/hmm/partner-portal#58/auto-accordion-js

Expand accordion elements based on URL

Author: h-m-m

Gemfile

@@ -8,9 +8,17 @@ gem 'kramdown-parser-gfm', '~> 1.0'
 gem 'jekyll-redirect-from'
 gem 'jekyll-sitemap'
 
+group :development, :test do
+  gem 'pry-byebug'
+end
+
 group :test do
+  gem 'capybara'
   gem 'html-proofer', '~> 4.0'
+  gem 'nokogiri', '>= 1.10.5'
+  gem 'rackup' # required for `Capybara.server = :webrick`
+  gem 'rack-jekyll'
   gem 'rspec'
   gem 'rspec_junit_formatter', require: false
-  gem 'nokogiri', '>= 1.10.5'
+  gem 'selenium-webdriver'
 end

Gemfile.lock

@@ -3,7 +3,19 @@ GEM
   specs:
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
+    base64 (0.3.0)
     bigdecimal (3.1.8)
+    byebug (12.0.0)
+    capybara (3.40.0)
+      addressable
+      matrix
+      mini_mime (>= 0.1.3)
+      nokogiri (~> 1.11)
+      rack (>= 1.6.0)
+      rack-test (>= 0.6.3)
+      regexp_parser (>= 1.5, < 3.0)
+      xpath (~> 3.2)
+    coderay (1.1.3)
     colorator (1.1.0)
     concurrent-ruby (1.3.4)
     diff-lcs (1.5.1)
@@ -62,21 +74,42 @@ GEM
     listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
+    logger (1.7.0)
+    matrix (0.4.2)
     mercenary (0.4.0)
+    method_source (1.1.0)
+    mini_mime (1.1.5)
     mini_portile2 (2.8.9)
     nokogiri (1.18.8)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     parallel (1.26.3)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
+    pry (0.15.2)
+      coderay (~> 1.1)
+      method_source (~> 1.0)
+    pry-byebug (3.11.0)
+      byebug (~> 12.0)
+      pry (>= 0.13, < 0.16)
     public_suffix (6.0.1)
     racc (1.8.1)
+    rack (1.6.13)
+    rack-jekyll (0.5.0)
+      jekyll (>= 1.3)
+      listen (>= 1.3)
+      rack (~> 1.5)
+    rack-test (2.2.0)
+      rack (>= 1.3)
+    rackup (1.0.1)
+      rack (< 3)
+      webrick
     rainbow (3.1.1)
     rake (13.2.1)
     rb-fsevent (0.11.2)
     rb-inotify (0.11.1)
       ffi (~> 1.0)
+    regexp_parser (2.10.0)
     rexml (3.3.9)
     rouge (4.4.0)
     rspec (3.13.0)
@@ -94,35 +127,50 @@ GEM
     rspec-support (3.13.1)
     rspec_junit_formatter (0.6.0)
       rspec-core (>= 2, < 4, != 2.12.0)
+    rubyzip (2.4.1)
     safe_yaml (1.0.5)
     sass-embedded (1.80.6)
       google-protobuf (~> 4.28)
       rake (>= 13)
+    selenium-webdriver (4.33.0)
+      base64 (~> 0.2)
+      logger (~> 1.4)
+      rexml (~> 3.2, >= 3.2.5)
+      rubyzip (>= 1.2.2, < 3.0)
+      websocket (~> 1.0)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     typhoeus (1.4.1)
       ethon (>= 0.9.0)
     unicode-display_width (2.6.0)
     webrick (1.9.0)
+    websocket (1.2.11)
+    xpath (3.2.0)
+      nokogiri (~> 1.8)
     yell (2.2.2)
     zeitwerk (2.7.1)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
+  capybara
   html-proofer (~> 4.0)
   jekyll (~> 4.3.0)
   jekyll-redirect-from
   jekyll-sass-converter (~> 3.0.0)
   jekyll-sitemap
   kramdown-parser-gfm (~> 1.0)
   nokogiri (>= 1.10.5)
+  pry-byebug
+  rack-jekyll
+  rackup
   rspec
   rspec_junit_formatter
+  selenium-webdriver
 
 RUBY VERSION
    ruby 3.2.5p208
 
 BUNDLED WITH
-   2.5.9
+   2.6.9

_layouts/base.html

@@ -153,6 +153,7 @@ <h1 class="usa-display">{{ page.title }}</h1>
     <script src="{{ site.baseurl }}/assets/js/toggle_view.js"></script>
     <script src="{{ site.baseurl }}/assets/js/main.js"></script>
     <script src="{{ site.baseurl }}/assets/js/anchor.js"></script>
+    <script src="{{ site.baseurl }}/assets/js/anchor_accordion.js"></script>
 
     <script>
       anchors.add([

assets/js/anchor_accordion.js

@@ -0,0 +1,16 @@
+(() => {
+  const onChange = (_event) => {
+    const urlHash = new URL(document.URL).hash;
+    const idFromHash = urlHash.match(/^(#[A-Za-z0-9_-]+)$/);
+    if (idFromHash) {
+      const accordionHeading = document.querySelector(
+        `${idFromHash[1]}.usa-accordion__heading > button`,
+      );
+      if (accordionHeading) {
+        accordionHeading.click();
+      }
+    }
+  };
+  document.addEventListener('DOMContentLoaded', onChange);
+  window.addEventListener('hashchange', onChange);
+})();

spec/capybara_helper.rb

@@ -0,0 +1,9 @@
+require 'spec_helper'
+require 'capybara/rspec'
+require 'rack/jekyll'
+require 'selenium-webdriver'
+require 'yaml'
+
+Capybara.javascript_driver = :selenium_chrome_headless
+Capybara.app = Rack::Jekyll.new(force_build: true)
+Capybara.server = :webrick

spec/integration/accordion_js_spec.rb

@@ -0,0 +1,26 @@
+require 'capybara_helper'
+require 'pry-byebug'
+
+RSpec.describe 'accordions on /oidc/authorization/', :js, type: :feature do
+  it 'is not expanded by default' do
+    visit '/oidc/authorization'
+    expect(page).to have_element('dt')
+    expect(page).to have_no_element('dd')
+    accordion_button = find('#service_level button')
+    expect(accordion_button.native.attribute('aria-expanded')).to eq('false')
+  end
+
+  it 'is expanded with an anchor in the URL' do
+    visit '/oidc/authorization#service_level'
+    expect(page).to have_element('dt')
+    expect(page).to have_element('dd')
+    definition = find('#service_level ~ dd').text
+    expect(definition).to include('acr.login.gov:verified')
+    accordion_button = find('#service_level > button')
+    expect(accordion_button.native.attribute('aria-expanded')).to eq('true')
+
+    visit '/oidc/authorization#aal_values'
+    next_definition = find('#aal_values ~ dd').text
+    expect(next_definition).to include('http://idmanagement.gov/ns/assurance/aal/2')
+  end
+end