Skip to content

Commit

Permalink
Add open-on-load test
Browse files Browse the repository at this point in the history
  • Loading branch information
@jon-kirwan
jon-kirwan committed Sep 5, 2023
1 parent 912c151 commit 8d7828b
Showing 1 changed file with 97 additions and 77 deletions.
174 changes: 97 additions & 77 deletions spec/javascripts/modules/mobile-filters-modal.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
describe('Mobile filters modal', function () {
describe('Mobile filters', function () {
'use strict'

var container
Expand Down Expand Up @@ -44,107 +44,127 @@ describe('Mobile filters modal', function () {
container.addEventListener('submit', function (e) {
e.preventDefault()
})

var element = $('[data-module="mobile-filters-modal"]')[0]
new GOVUK.Modules.MobileFiltersModal(element).init()
})

afterEach(function () {
document.body.removeChild(container)
})

describe('open button', function () {
describe('Mobile filters modal', function () {
beforeEach(function () {
document.querySelector('.js-toggle-mobile-filters').click()
})

afterEach(function () {
document.querySelector('.js-toggle-mobile-filters').click()
})

it('should show the modal', function () {
var modal = document.querySelector('.facets')
expect($(modal).hasClass('facets--visible')).toBe(true)
var element = $('[data-module="mobile-filters-modal"]')[0]
new GOVUK.Modules.MobileFiltersModal(element).init()
})

it('should hide the modal', function () {
var modal = document.querySelector('.facets')
document.querySelector('.js-toggle-mobile-filters').click()
expect($(modal).hasClass('facets--visible')).toBe(false)
describe('open button', function () {
beforeEach(function () {
document.querySelector('.js-toggle-mobile-filters').click()
})

afterEach(function () {
document.querySelector('.js-toggle-mobile-filters').click()
})

it('should show the modal', function () {
var modal = document.querySelector('.facets')
expect($(modal).hasClass('facets--visible')).toBe(true)
})

it('should hide the modal', function () {
var modal = document.querySelector('.facets')
document.querySelector('.js-toggle-mobile-filters').click()
expect($(modal).hasClass('facets--visible')).toBe(false)
})
})
})

describe('open', function () {
beforeEach(function () {
var modal = document.querySelector('.facets')
modal.open()
describe('open', function () {
beforeEach(function () {
var modal = document.querySelector('.facets')
modal.open()
})

afterEach(function () {
var modal = document.querySelector('.facets')
modal.close()
})

it('should show the modal', function () {
var modal = document.querySelector('.facets')
expect($(modal).hasClass('facets--visible')).toBe(true)
})
})

afterEach(function () {
var modal = document.querySelector('.facets')
modal.close()
describe('close', function () {
it('should hide the modal', function () {
var modal = document.querySelector('.facets')
modal.open()
modal.close()
expect($(modal).hasClass('facets--visible')).toBe(false)
})
})

it('should show the modal', function () {
var modal = document.querySelector('.facets')
expect($(modal).hasClass('facets--visible')).toBe(true)
describe('clear filters', function () {
it('should reset checkboxes, clear text input and <select> values', function () {
var modal = document.querySelector('.facets')
modal.clearFilters()
expect($(modal).find('input:checked').length).toBe(0)
// number of text inputs with value should now be 0
expect($(modal).find('input[type="text"]')
.filter(function () { return $(this).val() }).length).toBe(0)
expect($(modal).find('select').val()).toBe('')
})
})
})

describe('close', function () {
it('should hide the modal', function () {
var modal = document.querySelector('.facets')
modal.open()
modal.close()
expect($(modal).hasClass('facets--visible')).toBe(false)
describe('accessibility', function () {
it('should add aria-expanded="false" on load to the Filter button', function () {
var button = document.querySelector('.js-toggle-mobile-filters')
expect(button.getAttribute('aria-expanded')).toEqual('false')
})

it('should set aria-expanded to true when clicking the Filter button', function () {
var button = document.querySelector('.js-toggle-mobile-filters')
button.click()
expect(button.getAttribute('aria-expanded')).toEqual('true')
})

it('should add aria-controls on load to the Filter button', function () {
var button = document.querySelector('.js-toggle-mobile-filters')
expect(button.getAttribute('aria-controls')).toEqual('facet-wrapper')
expect(document.querySelector('#facet-wrapper')).not.toEqual(null)
})
})
})

describe('clear filters', function () {
it('should reset checkboxes, clear text input and <select> values', function () {
var modal = document.querySelector('.facets')
modal.clearFilters()
expect($(modal).find('input:checked').length).toBe(0)
// number of text inputs with value should now be 0
expect($(modal).find('input[type="text"]')
.filter(function () { return $(this).val() }).length).toBe(0)
expect($(modal).find('select').val()).toBe('')
describe('ga4 tracking', function () {
it('adds the ga4 event tracker to the button', function () {
var button = document.querySelector('.js-toggle-mobile-filters')
var expected = {
event_name: 'select_content',
type: 'finder',
text: 'Filter',
section: 'Filter',
index: {
index_section: 0,
index_section_count: 5
}
}
expect(button.getAttribute('data-ga4-event')).toEqual(JSON.stringify(expected))
})
})
})

describe('accessibility', function () {
it('should add aria-expanded="false" on load to the Filter button', function () {
var button = document.querySelector('.js-toggle-mobile-filters')
expect(button.getAttribute('aria-expanded')).toEqual('false')
})

it('should set aria-expanded to true when clicking the Filter button', function () {
var button = document.querySelector('.js-toggle-mobile-filters')
button.click()
expect(button.getAttribute('aria-expanded')).toEqual('true')
})
describe('Mobile filters modal (open on load)', function () {
beforeEach(function () {
container.querySelector('button').dataset.openOnLoad = true

it('should add aria-controls on load to the Filter button', function () {
var button = document.querySelector('.js-toggle-mobile-filters')
expect(button.getAttribute('aria-controls')).toEqual('facet-wrapper')
expect(document.querySelector('#facet-wrapper')).not.toEqual(null)
var element = $('[data-module="mobile-filters-modal"]')[0]
new GOVUK.Modules.MobileFiltersModal(element).init()
})
})

describe('ga4 tracking', function () {
it('adds the ga4 event tracker to the button', function () {
var button = document.querySelector('.js-toggle-mobile-filters')
var expected = {
event_name: 'select_content',
type: 'finder',
text: 'Filter',
section: 'Filter',
index: {
index_section: 0,
index_section_count: 5
}
}
expect(button.getAttribute('data-ga4-event')).toEqual(JSON.stringify(expected))
describe('open on load', function () {
it('should show the modal', function () {
var modal = document.querySelector('.facets')
expect($(modal).hasClass('facets--visible')).toBe(true)
})
})
})
})

0 comments on commit 8d7828b

Please sign in to comment.