From fdd5794e6cfb10a8b7ae35b89c24eff29b092e2a Mon Sep 17 00:00:00 2001 From: Matthew Crouch Date: Tue, 2 Apr 2024 14:44:03 -0400 Subject: [PATCH] EDSC-4041: Fixes minor test errors --- cypress/e2e/callbacks.cy.js | 6 +-- cypress/e2e/resizing.cy.js | 12 +++--- cypress/e2e/temporal_dragging.cy.js | 39 ++++++++----------- cypress/e2e/temporal_tooltips.cy.js | 14 +++---- cypress/e2e/timeline_dragging.cy.js | 4 +- cypress/e2e/timeline_zooming.cy.js | 8 ++-- .../__tests__/TimelineDataSection.test.js | 8 ++-- .../__tests__/TimelineList.test.js | 24 ++++++------ .../__tests__/determineScaledWidth.test.js | 2 +- .../__tests__/getPositionByTimestamp.test.js | 2 +- 10 files changed, 56 insertions(+), 63 deletions(-) diff --git a/cypress/e2e/callbacks.cy.js b/cypress/e2e/callbacks.cy.js index 562f065..eeb4e27 100644 --- a/cypress/e2e/callbacks.cy.js +++ b/cypress/e2e/callbacks.cy.js @@ -68,7 +68,7 @@ describe('Callbacks', () => { cy.window().then((win) => { expect(win.console.log.getCall(0).args[0]).to.equal('handleTemporalSet called') - expect(win.console.log.getCall(0).args[1]).to.equal('{"center":1609459200000,"temporalEnd":1610766098533,"temporalStart":1608010249884,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}') + expect(win.console.log.getCall(0).args[1]).to.equal('{"center":1609459200000,"temporalEnd":1610769677838,"temporalStart":1608006278919,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}') }) }) @@ -87,7 +87,7 @@ describe('Callbacks', () => { cy.window().then((win) => { expect(win.console.log.getCall(0).args[0]).to.equal('handleDragPan called') - expect(win.console.log.getCall(0).args[1]).to.equal('{"center":1608123891892,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}') + expect(win.console.log.getCall(0).args[1]).to.equal('{"center":1608120233514,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}') }) }) @@ -111,7 +111,7 @@ describe('Callbacks', () => { cy.window().then((win) => { expect(win.console.log.getCall(0).args[0]).to.equal('handleScrollPan called') - expect(win.console.log.getCall(0).args[1]).to.equal('{"center":1610794508108,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}') + expect(win.console.log.getCall(0).args[1]).to.equal('{"center":1610798166486,"timelineEnd":1688169600000,"timelineStart":1530403200000,"zoom":3}') }) }) diff --git a/cypress/e2e/resizing.cy.js b/cypress/e2e/resizing.cy.js index 70b6be0..e17ad5d 100644 --- a/cypress/e2e/resizing.cy.js +++ b/cypress/e2e/resizing.cy.js @@ -11,7 +11,7 @@ describe('Window resizing', () => { getByTestId('center').should('have.text', 'Center: Fri, 01 Jan 2021 00:00:00 GMT') getByTestId('tooltip').should('have.text', '15 Dec 2020 05:30:49 to 16 Jan 2021 03:01:38') - getByTestId('tooltip').should('have.css', 'left', '552.5px') + getByTestId('tooltip').should('have.css', 'left', '552.507px') getByTestId('tooltip').should('have.css', 'bottom', '2px') // Change the window from 1400x1100 to 1000x1100 @@ -22,7 +22,7 @@ describe('Window resizing', () => { getByTestId('center').should('have.text', 'Center: Fri, 01 Jan 2021 00:00:00 GMT') getByTestId('tooltip').should('have.text', '15 Dec 2020 05:30:49 to 16 Jan 2021 03:01:38') - getByTestId('tooltip').should('have.css', 'left', '462.905px') + getByTestId('tooltip').should('have.css', 'left', '462.911px') getByTestId('tooltip').should('have.css', 'bottom', '2px') // Drag the timeline a little @@ -31,9 +31,9 @@ describe('Window resizing', () => { .trigger('pointermove', 450, 25, { pointerId: 1 }) .trigger('pointerup', { pointerId: 1 }) - getByTestId('center').should('have.text', 'Center: Tue, 19 Jan 2021 10:42:34 GMT') + getByTestId('center').should('have.text', 'Center: Tue, 19 Jan 2021 11:55:21 GMT') getByTestId('tooltip').should('have.text', '15 Dec 2020 05:30:49 to 16 Jan 2021 03:01:38') - getByTestId('tooltip').should('have.css', 'left', '415.905px') + getByTestId('tooltip').should('have.css', 'left', '415.911px') getByTestId('tooltip').should('have.css', 'bottom', '2px') // Reset the window size @@ -42,9 +42,9 @@ describe('Window resizing', () => { // Mouse over the temporal range getByTestId('timelineList').rightclick() - getByTestId('center').should('have.text', 'Center: Tue, 19 Jan 2021 10:42:34 GMT') + getByTestId('center').should('have.text', 'Center: Tue, 19 Jan 2021 11:55:21 GMT') getByTestId('tooltip').should('have.text', '15 Dec 2020 05:30:49 to 16 Jan 2021 03:01:38') - getByTestId('tooltip').should('have.css', 'left', '496.403px') + getByTestId('tooltip').should('have.css', 'left', '496.41px') getByTestId('tooltip').should('have.css', 'bottom', '2px') }) }) diff --git a/cypress/e2e/temporal_dragging.cy.js b/cypress/e2e/temporal_dragging.cy.js index 0307908..72b13f3 100644 --- a/cypress/e2e/temporal_dragging.cy.js +++ b/cypress/e2e/temporal_dragging.cy.js @@ -1,12 +1,5 @@ import { getByTestId } from '../support/getByTestId' -const timeAtPx = { - 550: '2020-11-13T08:00:01.235Z', - 650: '2020-12-15T05:30:49.884Z', - 750: '2021-01-16T03:01:38.533Z', - 850: '2021-02-18T00:12:59.614Z' -} - describe('Temporal dragging', () => { describe('creating temporal range', () => { beforeEach(() => { @@ -77,8 +70,8 @@ describe('Temporal dragging', () => { clientY: 10 }) - getByTestId('temporalStart').should('have.text', `Temporal Start: ${timeAtPx[650]}`) - getByTestId('temporalEnd').should('have.text', `Temporal End: ${timeAtPx[750]}`) + getByTestId('temporalStart').should('have.text', 'Temporal Start: 2020-12-15T04:24:38.919Z') + getByTestId('temporalEnd').should('have.text', 'Temporal End: 2021-01-16T04:01:17.838Z') }) it('when mousing out of a temporal marker does not hover the marker ', () => { @@ -121,8 +114,8 @@ describe('Temporal dragging', () => { }) .trigger('pointerup', { pointerId: 1 }) - getByTestId('temporalStart').should('have.text', `Temporal Start: ${timeAtPx[550]}`) - getByTestId('temporalEnd').should('have.text', `Temporal End: ${timeAtPx[650]}`) + getByTestId('temporalStart').should('have.text', 'Temporal Start: 2020-11-13T04:48:00.000Z') + getByTestId('temporalEnd').should('have.text', 'Temporal End: 2020-12-15T04:24:38.919Z') }) }) }) @@ -155,8 +148,8 @@ describe('Temporal dragging', () => { }) .trigger('pointerup', { pointerId: 1 }) - getByTestId('temporalStart').should('have.text', `Temporal Start: ${timeAtPx[650]}`) - getByTestId('temporalEnd').should('have.text', `Temporal End: ${timeAtPx[750]}`) + getByTestId('temporalStart').should('have.text', 'Temporal Start: 2020-12-15T05:30:49.884Z') + getByTestId('temporalEnd').should('have.text', 'Temporal End: 2021-01-16T03:01:38.533Z') }) }) @@ -182,8 +175,8 @@ describe('Temporal dragging', () => { }) .trigger('pointerup', { pointerId: 1 }) - getByTestId('temporalStart').should('have.text', `Temporal Start: ${timeAtPx[550]}`) - getByTestId('temporalEnd').should('have.text', `Temporal End: ${timeAtPx[750]}`) + getByTestId('temporalStart').should('have.text', 'Temporal Start: 2020-11-13T04:48:00.000Z') + getByTestId('temporalEnd').should('have.text', 'Temporal End: 2021-01-16T03:01:38.533Z') }) it('dragging the start marker past the end marker changes the temporal range', () => { @@ -201,8 +194,8 @@ describe('Temporal dragging', () => { }) .trigger('pointerup', { pointerId: 1 }) - getByTestId('temporalStart').should('have.text', `Temporal Start: ${timeAtPx[750]}`) - getByTestId('temporalEnd').should('have.text', `Temporal End: ${timeAtPx[850]}`) + getByTestId('temporalStart').should('have.text', 'Temporal Start: 2021-01-16T03:01:38.533Z') + getByTestId('temporalEnd').should('have.text', 'Temporal End: 2021-02-18T03:22:22.703Z') }) it('dragging the end marker changes the temporal range', () => { @@ -220,8 +213,8 @@ describe('Temporal dragging', () => { }) .trigger('pointerup', { pointerId: 1 }) - getByTestId('temporalStart').should('have.text', `Temporal Start: ${timeAtPx[650]}`) - getByTestId('temporalEnd').should('have.text', `Temporal End: ${timeAtPx[850]}`) + getByTestId('temporalStart').should('have.text', 'Temporal Start: 2020-12-15T05:30:49.884Z') + getByTestId('temporalEnd').should('have.text', 'Temporal End: 2021-02-18T03:22:22.703Z') }) it('dragging the end marker past the start marker changes the temporal range', () => { @@ -239,8 +232,8 @@ describe('Temporal dragging', () => { }) .trigger('pointerup', { pointerId: 1 }) - getByTestId('temporalStart').should('have.text', `Temporal Start: ${timeAtPx[550]}`) - getByTestId('temporalEnd').should('have.text', `Temporal End: ${timeAtPx[650]}`) + getByTestId('temporalStart').should('have.text', 'Temporal Start: 2020-11-13T04:48:00.000Z') + getByTestId('temporalEnd').should('have.text', 'Temporal End: 2020-12-15T05:30:49.884Z') }) }) @@ -264,7 +257,7 @@ describe('Temporal dragging', () => { }) .trigger('pointerup', { pointerId: 1 }) - getByTestId('temporalStart').should('have.text', `Temporal Start: ${timeAtPx[550]}`) + getByTestId('temporalStart').should('have.text', 'Temporal Start: 2020-11-13T04:48:00.000Z') }) it('dragging the end marker changes the temporal range', () => { @@ -286,7 +279,7 @@ describe('Temporal dragging', () => { }) .trigger('pointerup', { pointerId: 1 }) - getByTestId('temporalEnd').should('have.text', `Temporal End: ${timeAtPx[850]}`) + getByTestId('temporalEnd').should('have.text', 'Temporal End: 2021-02-18T03:22:22.703Z') }) }) }) diff --git a/cypress/e2e/temporal_tooltips.cy.js b/cypress/e2e/temporal_tooltips.cy.js index 96d7326..c595305 100644 --- a/cypress/e2e/temporal_tooltips.cy.js +++ b/cypress/e2e/temporal_tooltips.cy.js @@ -16,7 +16,7 @@ describe('Temporal tooltips', () => { getByTestId('timelineList').rightclick() getByTestId('tooltip').should('have.text', '15 Dec 2020 05:30:49 to 16 Jan 2021 03:01:38') - getByTestId('tooltip').should('have.css', 'left', '552.5px') + getByTestId('tooltip').should('have.css', 'left', '552.507px') getByTestId('tooltip').should('have.css', 'bottom', '2px') }) @@ -25,7 +25,7 @@ describe('Temporal tooltips', () => { getByTestId('startMarker').rightclick() getByTestId('tooltip').should('have.text', '15 Dec 2020 05:30:49') - getByTestId('tooltip').should('have.css', 'left', '504px') + getByTestId('tooltip').should('have.css', 'left', '504.139px') getByTestId('tooltip').should('have.css', 'bottom', '2px') }) @@ -34,7 +34,7 @@ describe('Temporal tooltips', () => { getByTestId('endMarker').rightclick() getByTestId('tooltip').should('have.text', '16 Jan 2021 03:01:38') - getByTestId('tooltip').should('have.css', 'left', '601px') + getByTestId('tooltip').should('have.css', 'left', '600.874px') getByTestId('tooltip').should('have.css', 'bottom', '2px') }) }) @@ -50,7 +50,7 @@ describe('Temporal tooltips', () => { getByTestId('timelineList').rightclick() getByTestId('tooltip').should('have.text', '15 Dec 2020 13:24:20 ongoing') - getByTestId('tooltip').should('have.css', 'left', '807.5px') + getByTestId('tooltip').should('have.css', 'left', '807.568px') getByTestId('tooltip').should('have.css', 'bottom', '2px') }) @@ -59,7 +59,7 @@ describe('Temporal tooltips', () => { getByTestId('startMarker').rightclick() getByTestId('tooltip').should('have.text', '15 Dec 2020 13:24:20') - getByTestId('tooltip').should('have.css', 'left', '505px') + getByTestId('tooltip').should('have.css', 'left', '505.137px') getByTestId('tooltip').should('have.css', 'bottom', '2px') }) }) @@ -75,7 +75,7 @@ describe('Temporal tooltips', () => { getByTestId('timelineList').rightclick() getByTestId('tooltip').should('have.text', 'Up to 16 Jan 2021 10:55:09') - getByTestId('tooltip').should('have.css', 'left', '301px') + getByTestId('tooltip').should('have.css', 'left', '300.936px') getByTestId('tooltip').should('have.css', 'bottom', '2px') }) @@ -84,7 +84,7 @@ describe('Temporal tooltips', () => { getByTestId('endMarker').rightclick() getByTestId('tooltip').should('have.text', '16 Jan 2021 10:55:09') - getByTestId('tooltip').should('have.css', 'left', '602px') + getByTestId('tooltip').should('have.css', 'left', '601.872px') getByTestId('tooltip').should('have.css', 'bottom', '2px') }) }) diff --git a/cypress/e2e/timeline_dragging.cy.js b/cypress/e2e/timeline_dragging.cy.js index a1fab1d..2b3114d 100644 --- a/cypress/e2e/timeline_dragging.cy.js +++ b/cypress/e2e/timeline_dragging.cy.js @@ -1,8 +1,8 @@ import { getByTestId } from '../support/getByTestId' const startCenter = 'Center: Fri, 01 Jan 2021 00:00:00 GMT' -const backwardCenter = 'Center: Wed, 16 Dec 2020 13:04:51 GMT' -const forwardCenter = 'Center: Sat, 16 Jan 2021 10:55:08 GMT' +const backwardCenter = 'Center: Wed, 16 Dec 2020 12:03:53 GMT' +const forwardCenter = 'Center: Sat, 16 Jan 2021 11:56:06 GMT' const timelineRangeStart = 'Timeline Start: 2018-07-01T00:00:00.000Z' const timelineRangeEnd = 'Timeline End: 2023-07-01T00:00:00.000Z' diff --git a/cypress/e2e/timeline_zooming.cy.js b/cypress/e2e/timeline_zooming.cy.js index 5c5a1df..2e9eb16 100644 --- a/cypress/e2e/timeline_zooming.cy.js +++ b/cypress/e2e/timeline_zooming.cy.js @@ -1,11 +1,11 @@ import { getByTestId } from '../support/getByTestId' const startCenter = 'Center: Fri, 01 Jan 2021 00:00:00 GMT' -const zoom1Center = 'Center: Tue, 23 Mar 2021 15:41:51 GMT' -const zoom2Center = 'Center: Wed, 17 Mar 2021 03:34:04 GMT' +const zoom1Center = 'Center: Tue, 23 Mar 2021 21:04:51 GMT' +const zoom2Center = 'Center: Wed, 17 Mar 2021 08:57:04 GMT' const zoom3Center = 'Center: Fri, 01 Jan 2021 00:00:00 GMT' -const zoom4Center = 'Center: Tue, 25 Dec 2018 10:07:13 GMT' -const zoom5Center = 'Center: Mon, 04 Jan 2010 01:02:53 GMT' +const zoom4Center = 'Center: Tue, 25 Dec 2018 15:30:24 GMT' +const zoom5Center = 'Center: Mon, 04 Jan 2010 06:27:34 GMT' const scrollWheel = (direction) => { getByTestId('timelineList') diff --git a/src/components/TimelineDataSection/__tests__/TimelineDataSection.test.js b/src/components/TimelineDataSection/__tests__/TimelineDataSection.test.js index 90a64f9..85a07a8 100644 --- a/src/components/TimelineDataSection/__tests__/TimelineDataSection.test.js +++ b/src/components/TimelineDataSection/__tests__/TimelineDataSection.test.js @@ -89,10 +89,10 @@ describe('TimelineDataSection component', () => { const secondDataChild = intervals[1] expect(intervals.length).toEqual(2) - expect(firstDataChild.style.left).toEqual('68.4931506849315px') - expect(firstDataChild.style.width).toEqual('12.32876712328767px') - expect(secondDataChild.style.left).toEqual('82.1917808219178px') - expect(secondDataChild.style.width).toEqual('10.95890410958904px') + expect(firstDataChild.style.left).toEqual('68.30601092896175px') + expect(firstDataChild.style.width).toEqual('12.295081967213115px') + expect(secondDataChild.style.left).toEqual('81.96721311475409px') + expect(secondDataChild.style.width).toEqual('10.92896174863388px') }) test('sets a default color', () => { diff --git a/src/components/TimelineList/__tests__/TimelineList.test.js b/src/components/TimelineList/__tests__/TimelineList.test.js index 16a149e..06bce5f 100644 --- a/src/components/TimelineList/__tests__/TimelineList.test.js +++ b/src/components/TimelineList/__tests__/TimelineList.test.js @@ -163,9 +163,9 @@ describe('TimelineList component', () => { const endMarker = screen.getByLabelText('Temporal range end') expect(startMarker).toBeInTheDocument() - expect(startMarker.style.left).toEqual('200.43835616438355px') + expect(startMarker.style.left).toEqual('199.89071038251365px') expect(endMarker).toBeInTheDocument() - expect(endMarker.style.left).toEqual('305.75342465753425px') + expect(endMarker.style.left).toEqual('304.91803278688525px') }) test('renders highlighted area correctly if temporal range has start and end', () => { @@ -179,8 +179,8 @@ describe('TimelineList component', () => { const temporalRange = container.getElementsByClassName('edsc-timeline-list__temporal-range')[0] expect(temporalRange).toBeInTheDocument() - expect(temporalRange.style.left).toEqual('200.43835616438355px') - expect(temporalRange.style.width).toEqual('105.31506849315068px') + expect(temporalRange.style.left).toEqual('199.89071038251365px') + expect(temporalRange.style.width).toEqual('105.02732240437159px') }) test('renders only a start marker if temporal range does not have an end', () => { @@ -207,8 +207,8 @@ describe('TimelineList component', () => { const temporalRange = container.getElementsByClassName('edsc-timeline-list__temporal-range')[0] expect(temporalRange).toBeInTheDocument() - expect(temporalRange.style.left).toEqual('200.43835616438355px') - expect(temporalRange.style.width).toEqual('312.54794520547944px') + expect(temporalRange.style.left).toEqual('199.89071038251365px') + expect(temporalRange.style.width).toEqual('311.69398907103823px') }) test('renders only a end marker if temporal range does not have a start', () => { @@ -236,7 +236,7 @@ describe('TimelineList component', () => { expect(temporalRange).toBeInTheDocument() expect(temporalRange.style.left).toEqual('0px') - expect(temporalRange.style.width).toEqual('200.43835616438355px') + expect(temporalRange.style.width).toEqual('199.89071038251365px') }) describe('when the temporal markers are not dragging', () => { @@ -422,16 +422,16 @@ describe('TimelineList component', () => { const focusedRangeMaskRight = container.getElementsByClassName('edsc-timeline-list__focused-range-mask')[1] expect(focusedRange).toBeInTheDocument() - expect(focusedRange.style.left).toEqual('200.43835616438355px') - expect(focusedRange.style.width).toEqual('103.91780821917807px') + expect(focusedRange.style.left).toEqual('199.89071038251365px') + expect(focusedRange.style.width).toEqual('103.63934426229508px') expect(focusedRangeMaskLeft).toBeInTheDocument() expect(focusedRangeMaskLeft.style.left).toEqual('0px') - expect(focusedRangeMaskLeft.style.width).toEqual('200.43835616438355px') + expect(focusedRangeMaskLeft.style.width).toEqual('199.89071038251365px') expect(focusedRangeMaskRight).toBeInTheDocument() - expect(focusedRangeMaskRight.style.left).toEqual('304.35616438356163px') - expect(focusedRangeMaskRight.style.width).toEqual('210.63013698630135px') + expect(focusedRangeMaskRight.style.left).toEqual('303.53005464480873px') + expect(focusedRangeMaskRight.style.width).toEqual('210.05464480874318px') }) describe('Data', () => { diff --git a/src/utils/__tests__/determineScaledWidth.test.js b/src/utils/__tests__/determineScaledWidth.test.js index 67c50d0..4daa028 100644 --- a/src/utils/__tests__/determineScaledWidth.test.js +++ b/src/utils/__tests__/determineScaledWidth.test.js @@ -8,6 +8,6 @@ describe('determineScaledWidth', () => { const width = determineScaledWidth(intervalDurationInMs, zoomLevel, wrapperWidth) - expect(width).toEqual(105.31506849315068) + expect(width).toEqual(105.02732240437159) }) }) diff --git a/src/utils/__tests__/getPositionByTimestamp.test.js b/src/utils/__tests__/getPositionByTimestamp.test.js index 291e233..c20f5e1 100644 --- a/src/utils/__tests__/getPositionByTimestamp.test.js +++ b/src/utils/__tests__/getPositionByTimestamp.test.js @@ -16,6 +16,6 @@ describe('getPositionByTimestamp', () => { timeIntervals, zoomLevel, wrapperWidth - })).toEqual(66.03458630136986) + })).toEqual(65.85416393442624) }) })