Merge pull request #3149 from alphagov/resize-all-textbox-dem

Let textareas resize automatically without having to highlight placeholders

tests/app/main/views/test_templates.py

@@ -346,6 +346,8 @@ def test_should_show_page_for_one_template(
     assert "Template <em>content</em> with & entity" in str(
         page.select_one('textarea')
     )
+    assert page.select_one('textarea')['data-module'] == 'enhanced-textbox'
+    assert page.select_one('textarea')['data-highlight-placeholders'] == 'true'
     assert "priority" not in str(page.select_one('main'))
     mock_get_service_template.assert_called_with(SERVICE_ONE_ID, template_id, None)
 

tests/javascripts/enhancedTextbox.test.js

@@ -1,14 +1,14 @@
 const helpers = require('./support/helpers.js');
 
 beforeAll(() => {
-  require('../../app/assets/javascripts/highlightTags.js');
+  require('../../app/assets/javascripts/enhancedTextbox.js');
 });
 
 afterAll(() => {
   require('./support/teardown.js');
 });
 
-describe('Highlight tags', () => {
+describe('Enhanced textbox', () => {
 
   let input;
   let textarea;
@@ -38,11 +38,11 @@ describe('Highlight tags', () => {
     document.body.innerHTML = `
       <div class="form-group">
         <label for="subject">Subject</label>
-        <input class="form-control textbox-highlight-textbox" data-module="highlight-tags" type="text" name="subject" id="subject" />
+        <input class="form-control textbox-highlight-textbox" data-module="enhanced-textbox" type="text" name="subject" id="subject" />
       </div>
       <div class="form-group">
         <label for="template_content">Message</label>
-        <textarea class="form-control form-control-1-1 textbox-highlight-textbox" data-module="highlight-tags" id="template_content" name="template_content" rows="8">
+        <textarea class="form-control form-control-1-1 textbox-highlight-textbox" data-module="enhanced-textbox" id="template_content" name="template_content" rows="8">
         </textarea>
       </div>`;
 
@@ -125,6 +125,34 @@ describe('Highlight tags', () => {
 
     });
 
+    describe("The element's width should match even when the textbox is initially hidden", () => {
+
+      beforeEach(() => {
+
+        let setDisplayPropertyOfFormGroups = function(property) {
+          Array.prototype.forEach.call(
+            document.getElementsByClassName('form-group'),
+            element => element.style.display = property
+          );
+        };
+
+        setDisplayPropertyOfFormGroups('none');
+
+        window.GOVUK.modules.start();
+
+        setDisplayPropertyOfFormGroups('block');
+
+      });
+
+      test("If the textbox is an <textarea>", () => {
+
+        backgroundEl = textarea.nextElementSibling;
+        expect(backgroundEl.style.width).toEqual('582px');
+
+      });
+
+    });
+
     test("The element should be hidden from assistive technologies", () => {
 
       expect(backgroundEl.getAttribute('aria-hidden')).toEqual('true');
@@ -167,6 +195,22 @@ describe('Highlight tags', () => {
 
       });
 
+      test("Unless a data attribute is set to turn this feature off", () => {
+
+        textarea.textContent  = "Dear ((title)) ((name))";
+        textarea.setAttribute('data-highlight-placeholders', 'false')
+
+        // start module
+        window.GOVUK.modules.start();
+
+        backgroundEl = textarea.nextElementSibling;
+
+        const highlightTags = backgroundEl.querySelectorAll('.placeholder');
+
+        expect(highlightTags.length).toEqual(0);
+
+      });
+
     });
 
     describe("If there is optional text in the content, its matching text in the element below should be wrapped in a highlight tag", () => {