darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-19 05:59:44 -04:00
Code Issues Packages Projects Releases Wiki Activity

Use screenMock helper in fullscreenTable test

Browse Source
This commit is contained in:
Tom Byers
2019-11-08 14:43:44 +00:00
parent e65946680a
commit 2b5ba5f438
1 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
tests/javascripts/fullscreenTable.test.js
View File

@@ -12,7 +12,7 @@ afterAll(() => {
}); });
describe('FullscreenTable', () => { describe('FullscreenTable', () => {
let windowMock; let screenMock;
let container; let container;
let tableFrame; let tableFrame;
let table; let table;
@@ -79,7 +79,12 @@ describe('FullscreenTable', () => {
} }
windowMock = new helpers.WindowMock(jest); screenMock = new helpers.ScreenMock(jest);
screenMock.setWindow({
width: 1990,
height: 940,
scrollTop: 0
});
// set up DOM // set up DOM
document.body.innerHTML = document.body.innerHTML =
@@ -149,18 +154,14 @@ describe('FullscreenTable', () => {
beforeEach(() => { beforeEach(() => {
let clientRect = { top: 500 };
// set the height and offset of the window and table container from the top of the document // set the height and offset of the window and table container from the top of the document
// so just the top 268px of it appears on-screen // so just the top 268px of it appears on-screen
windowMock.setHeightTo(768); screenMock.window.setHeightTo(768);
container.setAttribute('style', 'height: 1000px'); screenMock.mockPositionAndDimension('container', container, {
'offsetHeight': 1000,
containerBoundingClientRectSpy = jest.spyOn(container, 'getBoundingClientRect') 'offsetWidth': 641,
containerBoundingClientRectSpy.mockImplementation(() => clientRect); 'offsetTop': 500
});
containerClientRectsSpy = jest.spyOn(container, 'getClientRects')
containerClientRectsSpy.mockImplementation(() => { return [clientRect] });
// start module // start module
window.GOVUK.modules.start(); window.GOVUK.modules.start();
@@ -172,9 +173,7 @@ describe('FullscreenTable', () => {
afterEach(() => { afterEach(() => {
windowMock.reset(); screenMock.reset();
containerBoundingClientRectSpy.mockClear();
containerClientRectsSpy.mockClear();
}); });
@@ -189,7 +188,7 @@ describe('FullscreenTable', () => {
test("when the page has scrolled", () => { test("when the page has scrolled", () => {
// scroll the window so the table fills the height of the window (768px) // scroll the window so the table fills the height of the window (768px)
windowMock.scrollTo(500); screenMock.window.scrollTo(500);
// the frames should crop to the window height // the frames should crop to the window height
expect(window.getComputedStyle(tableFrame)['height']).toEqual('768px'); expect(window.getComputedStyle(tableFrame)['height']).toEqual('768px');
@@ -200,7 +199,7 @@ describe('FullscreenTable', () => {
test("when the page has resized", () => { test("when the page has resized", () => {
// resize the window by 232px (from 768px to 1000px) // resize the window by 232px (from 768px to 1000px)
windowMock.resizeTo({ height: 1000, width: 1024 }); screenMock.window.resizeTo({ height: 1000, width: 1024 });
// the frames should crop to the top 500px of the table now visible // the frames should crop to the top 500px of the table now visible
expect(window.getComputedStyle(tableFrame)['height']).toEqual('500px'); expect(window.getComputedStyle(tableFrame)['height']).toEqual('500px');
@@ -218,7 +217,7 @@ describe('FullscreenTable', () => {
rowNumberColumnCell = container.querySelector('.table-field-index'); rowNumberColumnCell = container.querySelector('.table-field-index');
// set main content column width (used as module as gauge for table width) // set main content column width (used as module as gauge for table width)
windowMock.setWidthTo(1024); screenMock.window.setWidthTo(1024);
document.querySelector('main').setAttribute('style', 'width: 742px'); document.querySelector('main').setAttribute('style', 'width: 742px');
// set total width of column for row numbers in table to 40px // set total width of column for row numbers in table to 40px
@@ -234,7 +233,7 @@ describe('FullscreenTable', () => {
afterEach(() => { afterEach(() => {
windowMock.reset(); screenMock.reset();
}); });
@@ -253,7 +252,7 @@ describe('FullscreenTable', () => {
// resize window and content column // resize window and content column
document.querySelector('main').setAttribute('style', 'width: 720px'); document.querySelector('main').setAttribute('style', 'width: 720px');
windowMock.resizeTo({ height: 768, width: 960 }); screenMock.window.resizeTo({ height: 768, width: 960 });
// table should set its width to be that of `<main>`, minus margin-left for the row numbers column // table should set its width to be that of `<main>`, minus margin-left for the row numbers column
expect(window.getComputedStyle(tableFrame)['width']).toEqual('680px'); // width of content column - numbers column expect(window.getComputedStyle(tableFrame)['width']).toEqual('680px'); // width of content column - numbers column