-
Notifications
You must be signed in to change notification settings - Fork 334
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Throw SupportError
when instantiating components where GOV.UK Frontend is not supported
#4030
Changes from all commits
b552876
143dc77
b544d53
a64c0f5
98eaeca
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -133,3 +133,17 @@ export function extractConfigByNamespace(configObject, namespace) { | |
} | ||
return newObject | ||
} | ||
|
||
/** | ||
* Checks if GOV.UK Frontend is supported on this page | ||
* | ||
* Some browsers will load and run our JavaScript but GOV.UK Frontend | ||
* won't be supported. | ||
* | ||
* @internal | ||
* @param {HTMLElement} [$scope] - The `<body>` element of the document to check for support | ||
* @returns {boolean} Whether GOV.UK Frontend is supported on this page | ||
*/ | ||
export function isSupported($scope = document.body) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Do we have browser support for parameter defaults without Babel polyfills? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yup, Babel leaves that line as is in |
||
return $scope.classList.contains('govuk-frontend-supported') | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -712,6 +712,28 @@ describe('/components/accordion', () => { | |
) | ||
}) | ||
}) | ||
|
||
describe('errors at instantiation', () => { | ||
let examples | ||
|
||
beforeAll(async () => { | ||
examples = await getExamples('accordion') | ||
}) | ||
|
||
it('throws when GOV.UK Frontend is not supported', async () => { | ||
await expect( | ||
renderAndInitialise(page, 'accordion', { | ||
params: examples.default, | ||
beforeInitialisation() { | ||
document.body.classList.remove('govuk-frontend-supported') | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🎉 |
||
} | ||
}) | ||
).rejects.toEqual({ | ||
name: 'SupportError', | ||
message: 'GOV.UK Frontend is not supported in this browser' | ||
}) | ||
}) | ||
}) | ||
}) | ||
}) | ||
}) | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,13 @@ | ||
import { mergeConfigs } from '../../common/index.mjs' | ||
import { normaliseDataset } from '../../common/normalise-dataset.mjs' | ||
import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs' | ||
|
||
/** | ||
* Error summary component | ||
* | ||
* Takes focus on initialisation for accessible announcement, unless disabled in configuration. | ||
*/ | ||
export class ErrorSummary { | ||
export class ErrorSummary extends GOVUKFrontendComponent { | ||
/** @private */ | ||
$module | ||
|
||
|
@@ -22,17 +23,9 @@ export class ErrorSummary { | |
* @param {ErrorSummaryConfig} [config] - Error summary config | ||
*/ | ||
constructor($module, config) { | ||
// Some consuming code may not be passing a module, | ||
// for example if they initialise the component | ||
// on their own by directly passing the result | ||
// of `document.querySelector`. | ||
// To avoid breaking further JavaScript initialisation | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I was quite fond of this message, all on its own in ErrorSummary Thoughts on adding a little disclaimer to every component?
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think most of that info should be summarised in the error message when implementing Regarding adding things to each components, I think this would rather be the role of a base Component class. I think with the error throwing for GOV.UK Frontend support and the type check of |
||
// we need to safeguard against this so things keep | ||
// working the same now we read the elements data attributes | ||
if ( | ||
!($module instanceof HTMLElement) || | ||
!document.body.classList.contains('govuk-frontend-supported') | ||
) { | ||
super() | ||
|
||
if (!($module instanceof HTMLElement)) { | ||
return this | ||
} | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is just a starter for 10 listing the spirit in which the errors have been implemented in this PR. Happy to discuss and update.