Skip to content

Commit

Permalink
Fix missing hidden CSS class
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@gclssvglx
gclssvglx committed Oct 22, 2021
1 parent ca54435 commit fa976ff
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 32 deletions.
4 changes: 2 additions & 2 deletions app/assets/javascripts/webchat/library.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}

Expand Down
6 changes: 3 additions & 3 deletions app/views/shared/_webchat.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
54 changes: 27 additions & 27 deletions spec/javascripts/webchat.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>'
Expand Down Expand Up @@ -69,47 +69,47 @@ 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 () {
spyOn($, 'ajax').and.callFake(function (options) {
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 () {
spyOn($, 'ajax').and.callFake(function (options) {
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 () {
spyOn($, 'ajax').and.callFake(function (options) {
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 () {
Expand All @@ -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)
Expand Down

0 comments on commit fa976ff

Please sign in to comment.