Merge pull request #4238 from alphagov/whitespace-api-key-js

Remove whitespace around API key in JS templates
This commit is contained in:
Chris Hill-Scott
2022-05-10 11:08:47 +01:00
committed by GitHub
2 changed files with 13 additions and 11 deletions

View File

@@ -7,9 +7,7 @@
const states = {
'valueVisible': (options) => `
<span class="copy-to-clipboard__value">
${options.valueLabel ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${options.value}
</span>
<span class="copy-to-clipboard__value">${options.valueLabel ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${options.value}</span>
<span class="copy-to-clipboard__notice govuk-visually-hidden" aria-live="assertive">
${options.onload ? '' : options.thing + ' returned to page, press button to copy to clipboard'}
</span>

View File

@@ -25,9 +25,7 @@ describe('copy to clipboard', () => {
${options.thing}
</h2>
<div data-module="copy-to-clipboard" data-value="${apiKey}" data-thing="${options.thing}" data-name="${options.name}">
<span class="copy-to-clipboard__value" aria-live="assertive">
${(options.name === options.thing) ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${apiKey}
</span>
<span class="copy-to-clipboard__value" aria-live="assertive">${(options.name === options.thing) ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${apiKey}</span>
<span class="copy-to-clipboard__notice" aria-live="assertive"></span>
</div>`;
@@ -152,6 +150,12 @@ describe('copy to clipboard', () => {
});
test("It should render the 'thing' without extra whitespace", () => {
expect(component.querySelector('.copy-to-clipboard__value').textContent).toBe('00000000-0000-0000-0000-000000000000');
});
});
describe("If it's one of many in the page", () => {
@@ -344,13 +348,13 @@ describe('copy to clipboard', () => {
});
test("the copied selection (range) should start after the prefix of the id", () => {
test("the copied selection (range) should start after visually hidden prefix", () => {
// that selection (a range) should have a startOffset past the first two nodes:
// index 0: text node containing the whitespace before the prefix
// index 1: the prefix node
// that selection (a range) should have a startOffset of 1:
// index 0: the visually hidden prefix node, for example "Template ID: " or "API key: "
// index 1: the value node
expect(rangeMock.setStart).toHaveBeenCalled();
expect(rangeMock.setStart.mock.calls[0][1]).toEqual(2);
expect(rangeMock.setStart.mock.calls[0][1]).toEqual(1);
// reset any methods in the global space
window.queryCommandSupported = undefined;