darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-04-06 18:41:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

show error message in banner rather than an alert

Browse Source 
the banner is a nicer user experience, and consistent with how we
display errors elsewhere in notify. For now pass through the error
message from JS, but we'll probably want to change that since the erorr
messages themselves are often a bit cryptic and unhelpful
This commit is contained in:
Leo Hemsted
2021-08-11 18:02:50 +01:00
parent c96a1dc0b7
commit 0b27d7e0a9
6 changed files with 64 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
tests/javascripts/authenticateSecurityKey.test.js
View File

@@ -5,6 +5,10 @@ beforeAll(() => {
// populate missing values to allow consistent jest.spyOn()
window.fetch = () => { }
window.navigator.credentials = { get: () => { } }
window.GOVUK.ErrorBanner = {
showBanner: () => {},
hideBanner: () => {}
};
})
afterAll(() => {
@@ -23,9 +27,6 @@ describe('Authenticate with security key', () => {
// you might need to comment this out to debug some failures
jest.spyOn(console, 'error').mockImplementation(() => { })
// ensure window.alert() is implemented to simplify errors
jest.spyOn(window, 'alert').mockImplementation(() => { })
document.body.innerHTML = `
<button type="submit" data-module="authenticate-security-key" data-csrf-token="abc123"></button>`
@@ -89,8 +90,8 @@ describe('Authenticate with security key', () => {
done()
})
// this will make the test fail if the alert is called
jest.spyOn(window, 'alert').mockImplementation((msg) => {
// this will make the test fail if the error banner is displayed
jest.spyOn(window.GOVUK.ErrorBanner, 'showBanner').mockImplementation((msg) => {
done(msg)
})
@@ -142,7 +143,7 @@ describe('Authenticate with security key', () => {
test.each([
['network'],
['server'],
])('alerts if fetching WebAuthn fails (%s error)', (errorType, done) => {
])('errors if fetching WebAuthn fails (%s error)', (errorType, done) => {
jest.spyOn(window, 'fetch').mockImplementation((_url) => {
if (errorType == 'network') {
return Promise.reject('error')
@@ -151,15 +152,15 @@ describe('Authenticate with security key', () => {
}
})
jest.spyOn(window, 'alert').mockImplementation((msg) => {
expect(msg).toEqual('Error during authentication.\n\nerror')
jest.spyOn(window.GOVUK.ErrorBanner, 'showBanner').mockImplementation((msg) => {
expect(msg).toEqual('Something went wrong')
done()
})
button.click()
})
test('alerts if comms with the authenticator fails', (done) => {
test('errors if comms with the authenticator fails', (done) => {
jest.spyOn(window, 'fetch')
.mockImplementationOnce((_url) => {
const webauthnOptions = window.CBOR.encode('someArbitraryOptions')
@@ -173,8 +174,8 @@ describe('Authenticate with security key', () => {
return Promise.reject(new DOMException('error'))
})
jest.spyOn(window, 'alert').mockImplementation((msg) => {
expect(msg).toEqual('Error during authentication.\n\nerror')
jest.spyOn(window.GOVUK.ErrorBanner, 'showBanner').mockImplementation((msg) => {
expect(msg).toEqual('Something went wrong')
done()
})
@@ -184,7 +185,7 @@ describe('Authenticate with security key', () => {
test.each([
['network error'],
['internal server error'],
])('alerts if POSTing WebAuthn credentials fails (%s)', (errorType, done) => {
])('errors if POSTing WebAuthn credentials fails (%s)', (errorType, done) => {
jest.spyOn(window, 'fetch')
.mockImplementationOnce((_url) => {
const webauthnOptions = window.CBOR.encode('someArbitraryOptions')
@@ -220,8 +221,9 @@ describe('Authenticate with security key', () => {
}
})
jest.spyOn(window, 'alert').mockImplementation((msg) => {
expect(msg).toEqual('Error during authentication.\n\nerror')
jest.spyOn(window.GOVUK.ErrorBanner, 'showBanner').mockImplementation((msg) => {
expect(msg).toEqual('Something went wrong')
done()
})
@@ -266,8 +268,8 @@ describe('Authenticate with security key', () => {
done()
})
// this will make the test fail if the alert is called
jest.spyOn(window, 'alert').mockImplementation((msg) => {
// this will make the test fail if the error banner is displayed
jest.spyOn(window.GOVUK.ErrorBanner, 'showBanner').mockImplementation((msg) => {
done(msg)
})