darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-17 12:09:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

ensure highlighting div size always matches the relevant textarea

Browse Source
This commit is contained in:
Leo Hemsted
2020-03-05 15:44:31 +00:00
parent 4b95fecd4f
commit 1558d05be7
2 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/enhancedTextbox.js
View File

@@ -27,6 +27,8 @@
`))
.on("input", this.update);
$(window).on("resize", this.resize);
visibleTextbox = this.$textbox.clone().appendTo("body").css({
position: 'absolute',
visibility: 'hidden',
@@ -47,7 +49,7 @@
this.resize = () => {
this.$background.width(this.$textbox.outerWidth());
this.$background.width(this.$textbox.width());
this.$textbox.height(
Math.max(

27
tests/javascripts/enhancedTextbox.test.js
View File

@@ -107,8 +107,7 @@ describe('Enhanced textbox', () => {
backgroundEl = textarea.nextElementSibling;
// element has box-sizing: border-box so width includes padding and border
expect(backgroundEl.style.width).toEqual('582px');
expect(backgroundEl.style.width).toEqual('576px');
expect(backgroundEl.style.borderWidth).toEqual('1px');
});
@@ -117,8 +116,7 @@ describe('Enhanced textbox', () => {
backgroundEl = input.nextElementSibling;
// element has box-sizing: border-box so width includes padding and border
expect(backgroundEl.style.width).toEqual('582px');
expect(backgroundEl.style.width).toEqual('576px');
expect(backgroundEl.style.borderWidth).toEqual('1px');
});
@@ -147,7 +145,7 @@ describe('Enhanced textbox', () => {
test("If the textbox is an <textarea>", () => {
backgroundEl = textarea.nextElementSibling;
expect(backgroundEl.style.width).toEqual('582px');
expect(backgroundEl.style.width).toEqual('576px');
});
@@ -256,7 +254,7 @@ describe('Enhanced textbox', () => {
describe("When the content of the textbox is updated", () => {
// doesn't apply to inputs as they have a fixed height
test("If new input changes the textarea's dimensions, the size of the element below should still match", () => {
test("If new input changes the textarea's height, the height of the element below should still match", () => {
// set 10 lines of content
textarea.textContent = `
@@ -289,6 +287,23 @@ describe('Enhanced textbox', () => {
});
test("If a resize changes the textarea's width, the width of the element below should still match", () => {
// start module
window.GOVUK.modules.start();
backgroundEl = textarea.nextElementSibling;
expect(window.getComputedStyle(textarea).width).toEqual("576px");
expect(window.getComputedStyle(backgroundEl).width).toEqual("576px");
textarea.style.width = "500px"
helpers.triggerEvent(window, 'resize');
expect(window.getComputedStyle(textarea).width).toEqual("500px");
expect(window.getComputedStyle(backgroundEl).width).toEqual("500px");
});
describe("If a new variable is added to the textbox, it should also be added to the element below in a highlight tag", () => {
test("If the textbox is a <textarea>", () => {