Add tests for disable state syncronisation

alphagov · Jan 9, 2025 · 834d32e · 834d32e
1 parent ea87121
commit 834d32e
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 3 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.puppeteer.test.js
@@ -281,6 +281,51 @@ 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)
+
+          const buttonDisabled = await page.$eval(buttonSelector, (el) =>
+            el.hasAttribute('disabled')
+          )
+
+          expect(buttonDisabled).toBeTruthy()
+        })
+
+        it('disables the button if the input is disabled programatically', async () => {
+          await render(page, 'file-upload', examples.default)
+
+          await page.$eval(inputSelector, (el) =>
+            el.setAttribute('disabled', '')
+          )
+
+          const buttonDisabledAfter = await page.$eval(buttonSelector, (el) =>
+            el.hasAttribute('disabled')
+          )
+
+          expect(buttonDisabledAfter).toBeTruthy()
+        })
+
+        it('enables the button if the input is enabled programatically', async () => {
+          await render(page, 'file-upload', examples.disabled)
+
+          const buttonDisabledBefore = await page.$eval(buttonSelector, (el) =>
+            el.hasAttribute('disabled')
+          )
+
+          await page.$eval(inputSelector, (el) =>
+            el.removeAttribute('disabled')
+          )
+
+          const buttonDisabledAfter = await page.$eval(buttonSelector, (el) =>
+            el.hasAttribute('disabled')
+          )
+
+          expect(buttonDisabledBefore).toBeTruthy()
+          expect(buttonDisabledAfter).toBeFalsy()
+        })
+      })
     })
   })
 })
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml
@@ -129,7 +129,7 @@ examples:
         text: Upload a file
       attributes:
         capture: 'user'
-  - name: is disabled
+  - name: disabled
     options:
       id: file-upload-1
       name: file-upload-1

diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js b/packages/govuk-frontend/src/govuk/components/file-upload/template.test.js
@@ -66,8 +66,8 @@ describe('File upload', () => {
       expect($component.attr('multiple')).toBeTruthy()
     })
 
-    it('renders with multiple', () => {
-      const $ = render('file-upload', examples['is disabled'])
+    it('renders with disabled', () => {
+      const $ = render('file-upload', examples.disabled)
 
       const $component = $('.govuk-file-upload')
       expect($component.attr('disabled')).toBeTruthy()