From fa976ff92c26367a1047124b07fa81053feef170 Mon Sep 17 00:00:00 2001
From: Graham Lewis <44037625+gclssvglx@users.noreply.github.com>
Date: Fri, 22 Oct 2021 16:04:31 +0100
Subject: [PATCH] Fix missing hidden CSS class A CSS class of 'hidden' is
 referenced but no longer present causing all UNAVAILABLE statuses to be
 visible on the page.

Replace 'hidden' class with GOV.UK 'govuk-!-display-none' class from the GOV.UK
components gem.
---
 app/assets/javascripts/webchat/library.js |  4 +-
 app/views/shared/_webchat.html.erb        |  6 +--
 spec/javascripts/webchat.spec.js          | 54 +++++++++++------------
 3 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/app/assets/javascripts/webchat/library.js b/app/assets/javascripts/webchat/library.js
index 66544b0ea..cc7c3cace 100644
--- a/app/assets/javascripts/webchat/library.js
+++ b/app/assets/javascripts/webchat/library.js
@@ -91,8 +91,8 @@
     function advisorStateChange (state) {
       state = state.toLowerCase()
       var currentState = $el.find('.' + webchatStateClass + state)
-      $el.find('[class^="' + webchatStateClass + '"]').addClass('hidden')
-      currentState.removeClass('hidden')
+      $el.find('[class^="' + webchatStateClass + '"]').addClass('govuk-!-display-none')
+      currentState.removeClass('govuk-!-display-none')
       trackEvent(state)
     }
 
diff --git a/app/views/shared/_webchat.html.erb b/app/views/shared/_webchat.html.erb
index 949b1e0c5..01673eb28 100644
--- a/app/views/shared/_webchat.html.erb
+++ b/app/views/shared/_webchat.html.erb
@@ -12,13 +12,13 @@
       <span class="js-webchat-advisers-error">
         <%= t("shared.webchat.technical_problem") %>
       </span>
-      <span class="js-webchat-advisers-unavailable hidden">
+      <span class="js-webchat-advisers-unavailable govuk-!-display-none">
         <%= t("shared.webchat.closed") %>
       </span>
-      <span class="js-webchat-advisers-busy hidden">
+      <span class="js-webchat-advisers-busy govuk-!-display-none">
         <%= t("shared.webchat.busy") %>
       </span>
-      <span class="js-webchat-advisers-available hidden">
+      <span class="js-webchat-advisers-available govuk-!-display-none">
         <%= t("shared.webchat.available") %>
         <a href="#" data-redirect="<%=  @content_item.webchat.open_url_redirect.present? ? 'true' : 'false' %>" rel="external" class="js-webchat-open-button"><%= t("shared.webchat.speak_to_adviser") %></a>.
       </span>
diff --git a/spec/javascripts/webchat.spec.js b/spec/javascripts/webchat.spec.js
index d4bbbdac9..e3860c275 100644
--- a/spec/javascripts/webchat.spec.js
+++ b/spec/javascripts/webchat.spec.js
@@ -12,9 +12,9 @@ describe('Webchat', function () {
 
   var INSERTION_HOOK = '<div class="js-webchat" data-availability-url="' + CHILD_BENEFIT_API_URL + '" data-open-url="' + CHILD_BENEFIT_API_URL + '" data-redirect="true">' +
     '<div class="js-webchat-advisers-error">Error</div>' +
-    '<div class="js-webchat-advisers-unavailable hidden">Unavailable</div>' +
-    '<div class="js-webchat-advisers-busy hidden">Busy</div>' +
-    '<div class="js-webchat-advisers-available hidden">' +
+    '<div class="js-webchat-advisers-unavailable govuk-!-display-none">Unavailable</div>' +
+    '<div class="js-webchat-advisers-busy govuk-!-display-none">Busy</div>' +
+    '<div class="js-webchat-advisers-available govuk-!-display-none">' +
       'Available, <div class="js-webchat-open-button">chat now</div>' +
     '</div>' +
   '</div>'
@@ -69,11 +69,11 @@ describe('Webchat', function () {
         options.success(jsonNormalisedAvailable)
       })
       mount()
-      expect($advisersAvailable.hasClass('hidden')).toBe(false)
+      expect($advisersAvailable.hasClass('govuk-!-display-none')).toBe(false)
 
-      expect($advisersBusy.hasClass('hidden')).toBe(true)
-      expect($advisersError.hasClass('hidden')).toBe(true)
-      expect($advisersUnavailable.hasClass('hidden')).toBe(true)
+      expect($advisersBusy.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersError.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersUnavailable.hasClass('govuk-!-display-none')).toBe(true)
     })
 
     it('should inform user whether advisors are unavailable', function () {
@@ -81,11 +81,11 @@ describe('Webchat', function () {
         options.success(jsonNormalisedUnavailable)
       })
       mount()
-      expect($advisersUnavailable.hasClass('hidden')).toBe(false)
+      expect($advisersUnavailable.hasClass('govuk-!-display-none')).toBe(false)
 
-      expect($advisersAvailable.hasClass('hidden')).toBe(true)
-      expect($advisersBusy.hasClass('hidden')).toBe(true)
-      expect($advisersError.hasClass('hidden')).toBe(true)
+      expect($advisersAvailable.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersBusy.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersError.hasClass('govuk-!-display-none')).toBe(true)
     })
 
     it('should inform user whether advisors are busy', function () {
@@ -93,11 +93,11 @@ describe('Webchat', function () {
         options.success(jsonNormalisedBusy)
       })
       mount()
-      expect($advisersBusy.hasClass('hidden')).toBe(false)
+      expect($advisersBusy.hasClass('govuk-!-display-none')).toBe(false)
 
-      expect($advisersAvailable.hasClass('hidden')).toBe(true)
-      expect($advisersError.hasClass('hidden')).toBe(true)
-      expect($advisersUnavailable.hasClass('hidden')).toBe(true)
+      expect($advisersAvailable.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersError.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersUnavailable.hasClass('govuk-!-display-none')).toBe(true)
     })
 
     it('should inform user whether there was an error', function () {
@@ -105,11 +105,11 @@ describe('Webchat', function () {
         options.success(jsonNormalisedError)
       })
       mount()
-      expect($advisersError.hasClass('hidden')).toBe(false)
+      expect($advisersError.hasClass('govuk-!-display-none')).toBe(false)
 
-      expect($advisersAvailable.hasClass('hidden')).toBe(true)
-      expect($advisersBusy.hasClass('hidden')).toBe(true)
-      expect($advisersUnavailable.hasClass('hidden')).toBe(true)
+      expect($advisersAvailable.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersBusy.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersUnavailable.hasClass('govuk-!-display-none')).toBe(true)
     })
 
     it('should only track once per state change', function () {
@@ -136,18 +136,18 @@ describe('Webchat', function () {
       })
 
       mount()
-      expect($advisersAvailable.hasClass('hidden')).toBe(false)
+      expect($advisersAvailable.hasClass('govuk-!-display-none')).toBe(false)
 
-      expect($advisersBusy.hasClass('hidden')).toBe(true)
-      expect($advisersError.hasClass('hidden')).toBe(true)
-      expect($advisersUnavailable.hasClass('hidden')).toBe(true)
+      expect($advisersBusy.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersError.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersUnavailable.hasClass('govuk-!-display-none')).toBe(true)
 
       clock.tick(POLL_INTERVAL)
 
-      expect($advisersError.hasClass('hidden')).toBe(false)
-      expect($advisersAvailable.hasClass('hidden')).toBe(true)
-      expect($advisersBusy.hasClass('hidden')).toBe(true)
-      expect($advisersUnavailable.hasClass('hidden')).toBe(true)
+      expect($advisersError.hasClass('govuk-!-display-none')).toBe(false)
+      expect($advisersAvailable.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersBusy.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersUnavailable.hasClass('govuk-!-display-none')).toBe(true)
       expect(analyticsCalled).toBe(2)
       expect(analyticsReceived).toEqual(analyticsExpects)
       clock.tick(POLL_INTERVAL)