From ac7a5fe63fcc622a6a76aa67d4b4e652c761b936 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Fri, 18 Dec 2020 13:34:19 +0000
Subject: [PATCH] Add failing test
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This test fails with:

```
Character count › when JavaScript is available › when counting characters › when the ID starts with a number › still works correctly

    DOMException: Failed to execute 'querySelector' on 'Element': '[id=1_more-detail-info]' is not a valid selector.
```

which matches the console error reported in the issue [1]

[1]: https://github.com/alphagov/govuk-frontend/issues/2058
---
 .../components/character-count/character-count.test.js | 10 ++++++++++
 .../components/character-count/character-count.yaml    |  8 ++++++++
 2 files changed, 18 insertions(+)

diff --git a/src/govuk/components/character-count/character-count.test.js b/src/govuk/components/character-count/character-count.test.js
index b48ec24ab3..12e92f298f 100644
--- a/src/govuk/components/character-count/character-count.test.js
+++ b/src/govuk/components/character-count/character-count.test.js
@@ -141,6 +141,16 @@ describe('Character count', () => {
           expect(ariaHidden).toBeFalsy()
         })
       })
+
+      describe('when the ID starts with a number', () => {
+        it('still works correctly', async () => {
+          await goToExample('with-id-starting-with-number')
+
+          const message = await page.$eval('.govuk-character-count__message', el => el.innerHTML.trim())
+
+          expect(message).toEqual('You have 10 characters remaining')
+        })
+      })
     })
 
     describe('when counting words', () => {
diff --git a/src/govuk/components/character-count/character-count.yaml b/src/govuk/components/character-count/character-count.yaml
index c77d90f898..c1c2acc4af 100644
--- a/src/govuk/components/character-count/character-count.yaml
+++ b/src/govuk/components/character-count/character-count.yaml
@@ -223,3 +223,11 @@ examples:
       classes: app-character-count--custom-modifier
       errorMessage:
         text: Error message
+  - name: with id starting with number
+    hidden: true
+    data:
+      name: more-detail
+      id: 1_more-detail
+      maxlength: 10
+      label:
+        text: Can you provide more detail?