From ddd8da016302ce86a4d1fbb877b4294c2331a978 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Tue, 20 Aug 2019 13:45:56 +0100 Subject: [PATCH] Add test for controlling height between states The button shouldn't change its vertical position when the state changes. The text confirming the copy is just one line so setting height for both based on the API key, which can run to 2 lines makes sense. Explained in this PR: https://github.com/alphagov/notifications-admin/pull/2428 --- tests/javascripts/apiKey.test.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/tests/javascripts/apiKey.test.js b/tests/javascripts/apiKey.test.js index 4d693691b..34f7509c8 100644 --- a/tests/javascripts/apiKey.test.js +++ b/tests/javascripts/apiKey.test.js @@ -54,6 +54,8 @@ describe('API key', () => { describe("If copy command is available", () => { + let componentHeightOnLoad; + beforeAll(() => { // assume copy command is available @@ -79,6 +81,10 @@ describe('API key', () => { component = document.querySelector('[data-module=api-key]'); + // mock DOM API called for element height + componentHeightOnLoad = 50; + jest.spyOn(component, 'offsetHeight', 'get').mockImplementation(() => componentHeightOnLoad); + // start the module window.GOVUK.modules.start(); @@ -111,6 +117,13 @@ describe('API key', () => { }); + test("It should set the component's minimum height based on its height when the page loads", () => { + + // to prevent the position of the button moving when the state changes + expect(window.getComputedStyle(component)['min-height']).toEqual(`${componentHeightOnLoad}px`); + + }); + }); describe("If you click the 'Copy API key to clipboard' button", () => {