Fix Puppeteer tests of File Upload component

As JavaScript enhancements are now optional, the examples loaded on the page needed to be `javascript`.
Otherwise the `render` helper would throw as it'd try to initialise the component on `null`,
as `document.querySelectorAll('govuk-file-upload')` wouldn't find any element.

packages/govuk-frontend/src/govuk/components/file-upload/file-upload.puppeteer.test.js

@@ -51,7 +51,7 @@ describe('/components/file-upload', () => {
     describe('when JavaScript is available', () => {
       describe('on page load', () => {
         beforeAll(async () => {
-          await render(page, 'file-upload', examples.default)
+          await render(page, 'file-upload', examples.javascript)
         })
 
         describe('wrapper element', () => {
@@ -126,7 +126,7 @@ describe('/components/file-upload', () => {
             // set a value in the file chooser, then checks if that value was set
             // on the input as expected.
             const testFilename = 'test.gif'
-            await render(page, 'file-upload', examples.default)
+            await render(page, 'file-upload', examples.javascript)
 
             const [fileChooser] = await Promise.all([
               page.waitForFileChooser(),
@@ -153,7 +153,7 @@ describe('/components/file-upload', () => {
         const testFilename = 'fakefile.txt'
 
         beforeEach(async () => {
-          await render(page, 'file-upload', examples.default)
+          await render(page, 'file-upload', examples.javascript)
 
           const [fileChooser] = await Promise.all([
             page.waitForFileChooser(),
@@ -196,7 +196,13 @@ describe('/components/file-upload', () => {
 
       describe('when selecting multiple files', () => {
         beforeEach(async () => {
-          await render(page, 'file-upload', examples['allows multiple files'])
+          await render(page, 'file-upload', examples.javascript, {
+            beforeInitialisation() {
+              document
+                .querySelector('[type="file"]')
+                .setAttribute('multiple', '')
+            }
+          })
 
           const [fileChooser] = await Promise.all([
             page.waitForFileChooser(),
@@ -258,7 +264,7 @@ describe('/components/file-upload', () => {
           '.govuk-file-upload-wrapper:not(.govuk-file-upload-wrapper--show-dropzone)'
 
         beforeEach(async () => {
-          await render(page, 'file-upload', examples.default)
+          await render(page, 'file-upload', examples.javascript)
 
           $wrapper = await page.$('.govuk-file-upload-wrapper')
           wrapperBoundingBox = await $wrapper.boundingBox()
@@ -395,7 +401,13 @@ describe('/components/file-upload', () => {
 
       describe('disabled state syncing', () => {
         it('disables the button if the input is disabled on page load', async () => {
-          await render(page, 'file-upload', examples.disabled)
+          await render(page, 'file-upload', examples.javascript, {
+            beforeInitialisation() {
+              document
+                .querySelector('[type="file"]')
+                .setAttribute('disabled', '')
+            }
+          })
 
           const buttonDisabled = await page.$eval(buttonSelector, (el) =>
             el.hasAttribute('disabled')
@@ -405,7 +417,7 @@ describe('/components/file-upload', () => {
         })
 
         it('disables the button if the input is disabled programatically', async () => {
-          await render(page, 'file-upload', examples.default)
+          await render(page, 'file-upload', examples.javascript)
 
           await page.$eval(inputSelector, (el) =>
             el.setAttribute('disabled', '')
@@ -419,7 +431,13 @@ describe('/components/file-upload', () => {
         })
 
         it('enables the button if the input is enabled programatically', async () => {
-          await render(page, 'file-upload', examples.disabled)
+          await render(page, 'file-upload', examples.javascript, {
+            beforeInitialisation() {
+              document
+                .querySelector('[type="file"]')
+                .setAttribute('disabled', '')
+            }
+          })
 
           const buttonDisabledBefore = await page.$eval(buttonSelector, (el) =>
             el.hasAttribute('disabled')
@@ -443,7 +461,7 @@ describe('/components/file-upload', () => {
           await render(
             page,
             'file-upload',
-            examples['with error message and hint']
+            examples['javascript, with error message and hint']
           )
 
           const $button = await page.$(buttonSelector)
@@ -455,7 +473,7 @@ describe('/components/file-upload', () => {
         })
 
         it('does not add an `aria-describedby` attribute to the `<button>` if there is none on the `<input>`', async () => {
-          await render(page, 'file-upload', examples.default)
+          await render(page, 'file-upload', examples.javascript)
 
           const $button = await page.$(buttonSelector)
           const ariaDescribedBy = await $button.evaluate((el) =>
@@ -475,7 +493,7 @@ describe('/components/file-upload', () => {
 
         it('can throw a SupportError if appropriate', async () => {
           await expect(
-            render(page, 'file-upload', examples.default, {
+            render(page, 'file-upload', examples.javascript, {
               beforeInitialisation() {
                 document.body.classList.remove('govuk-frontend-supported')
               }
@@ -491,7 +509,7 @@ describe('/components/file-upload', () => {
 
         it('throws when initialised twice', async () => {
           await expect(
-            render(page, 'file-upload', examples.default, {
+            render(page, 'file-upload', examples.javascript, {
               async afterInitialisation($root) {
                 const { FileUpload } = await import('govuk-frontend')
                 new FileUpload($root)
@@ -506,7 +524,7 @@ describe('/components/file-upload', () => {
 
         it('throws when $root is not set', async () => {
           await expect(
-            render(page, 'file-upload', examples.default, {
+            render(page, 'file-upload', examples.javascript, {
               beforeInitialisation($root) {
                 $root.remove()
               }
@@ -521,7 +539,7 @@ describe('/components/file-upload', () => {
 
         it('throws when receiving the wrong type for $root', async () => {
           await expect(
-            render(page, 'file-upload', examples.default, {
+            render(page, 'file-upload', examples.javascript, {
               beforeInitialisation($root) {
                 // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
                 $root.outerHTML = `<svg data-module="govuk-file-upload"></svg>`
@@ -539,7 +557,7 @@ describe('/components/file-upload', () => {
         describe('missing or misconfigured elements', () => {
           it('throws if the input type is not "file"', async () => {
             await expect(
-              render(page, 'file-upload', examples.default, {
+              render(page, 'file-upload', examples.javascript, {
                 beforeInitialisation() {
                   document
                     .querySelector('[type="file"]')
@@ -557,7 +575,7 @@ describe('/components/file-upload', () => {
 
           it('throws if no label is present', async () => {
             await expect(
-              render(page, 'file-upload', examples.default, {
+              render(page, 'file-upload', examples.javascript, {
                 beforeInitialisation() {
                   document.querySelector('label').remove()
                 }

packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml

@@ -181,7 +181,6 @@ examples:
       label:
         text: Upload a file
       javascript: true
-      multiple: true
   - name: translated
     options:
       id: file-upload-1
@@ -271,6 +270,18 @@ examples:
         text: Error message
       hint:
         text: hint
+  - name: javascript, with error message and hint
+    hidden: true
+    options:
+      javascript: true
+      id: file-upload-3
+      name: file-upload-3
+      label:
+        text: Upload a file
+      hint:
+        text: Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
+      errorMessage:
+        text: Error message goes here
   - name: translated, no javascript enhancement
     hidden: true
     options: