From 30e512ce2aca50afb04e84ec249974dd65aa2284 Mon Sep 17 00:00:00 2001 From: martinboulais <31805063+martinboulais@users.noreply.github.com> Date: Tue, 9 Apr 2024 19:18:43 +0200 Subject: [PATCH] First attempt at fixing tests --- test/public/defaults.js | 30 ++++++ test/public/runs/overview.test.js | 151 +++++++++--------------------- 2 files changed, 72 insertions(+), 109 deletions(-) diff --git a/test/public/defaults.js b/test/public/defaults.js index d04628a209..bd7a5dfaaa 100644 --- a/test/public/defaults.js +++ b/test/public/defaults.js @@ -455,6 +455,20 @@ module.exports.fillInput = async (page, inputSelector, value, events = ['input'] }, inputSelector, value, events); }; +/** + * Focus a given selector then type the given value on keyboard + * + * @param {puppeteer.Page} page the current puppeteer page + * @param {string} inputSelector the target input + * @param {string} value the value to type + * @return {Promise} resolves once typing is done + */ +module.exports.focusAndType = async (page, inputSelector, value) => { + await page.waitForSelector(inputSelector); + await page.focus(inputSelector); + await page.keyboard.type(value); +}; + /** * Evaluate and return the value content of a given element handler * @param {{evaluate}} inputElementHandler the puppeteer handler of the element to inspect @@ -592,3 +606,19 @@ module.exports.validateTableData = async (page, validators) => { ).to.be.true; } }; + +/** + * Return the selector for all the inputs composing a period inputs selectors + * + * @param {string} popoverSelector the selector of the period inputs parent + * @return {{fromDateSelector: string, fromTimeSelector: string, toDateSelector: string, toTimeSelector: string}} the selectors + */ +module.exports.getPeriodInputsSelectors = (popoverSelector) => { + const commonInputsAncestor = `${popoverSelector} > div > div > div`; + return { + fromDateSelector: `${commonInputsAncestor} > div:nth-child(1) input:nth-child(1)`, + fromTimeSelector: `${commonInputsAncestor} > div:nth-child(1) input:nth-child(2)`, + toDateSelector: `${commonInputsAncestor} > div:nth-child(2) input:nth-child(1)`, + toTimeSelector: `${commonInputsAncestor} > div:nth-child(2) input:nth-child(2)`, + }; +}; diff --git a/test/public/runs/overview.test.js b/test/public/runs/overview.test.js index 8b43057f76..f326e27ad6 100644 --- a/test/public/runs/overview.test.js +++ b/test/public/runs/overview.test.js @@ -26,7 +26,7 @@ const { } = require('../defaults'); const { RunDefinition } = require('../../../lib/server/services/run/getRunDefinition.js'); const { RUN_QUALITIES, RunQualities } = require('../../../lib/domain/enums/RunQualities.js'); -const { fillInput, getPopoverContent, getInnerText, waitForTimeout } = require('../defaults.js'); +const { fillInput, getPopoverContent, getInnerText, waitForTimeout, getPopoverSelector, getPeriodInputsSelectors, focusAndType } = require('../defaults.js'); const { waitForDownload } = require('../../utilities/waitForDownload'); const { expect } = chai; @@ -38,18 +38,6 @@ module.exports = () => { let table; let firstRowId; const runNumberInputSelector = '.runNumber-filter input'; - const timeFilterSelectors = { - startFrom: '#o2startFilterFromTime', - startTo: '#o2startFilterToTime', - endFrom: '#o2endFilterFromTime', - endTo: '#o2endFilterToTime', - }; - const dateFilterSelectors = { - startFrom: '#o2startFilterFrom', - startTo: '#o2startFilterTo', - endFrom: '#o2endFilterFrom', - endTo: '#o2endFilterTo', - }; before(async () => { [page, browser] = await defaultBefore(page, browser); @@ -427,107 +415,52 @@ module.exports = () => { ); }); - it('should update to current date when empty and time is set', async () => { + it('Should correctly set the the min/max of time range picker inputs', async () => { await goToPage(page, 'run-overview'); - waitForTimeout(100); - // Open the filters - await pressElement(page, '#openFilterToggle'); - await waitForTimeout(200); - let today = new Date(); - today.setMinutes(today.getMinutes() - today.getTimezoneOffset()); - [today] = today.toISOString().split('T'); - const time = '00:01'; - - for (const selector of Object.values(timeFilterSelectors)) { - await page.type(selector, time); - await waitForTimeout(300); - } - for (const selector of Object.values(dateFilterSelectors)) { - const value = await page.$eval(selector, (element) => element.value); - expect(String(value)).to.equal(today); - } - const date = new Date(); - const now = `${date.getHours()}:${(date.getMinutes() < 10 ? '0' : '') + date.getMinutes()}`; - const firstTill = await page.$eval(timeFilterSelectors.startFrom, (element) => element.getAttribute('max')); - const secondTill = await page.$eval(timeFilterSelectors.endFrom, (element) => element.getAttribute('max')); - expect(String(firstTill)).to.equal(now); - expect(String(secondTill)).to.equal(now); - }); - it('Validates date will not be set again', async () => { - await goToPage(page, 'run-overview'); - waitForTimeout(100); - const dateString = '03-21-2021'; - const validValue = '2021-03-21'; - // Open the filters - await pressElement(page, '#openFilterToggle'); - await waitForTimeout(200); - // Set date - for (const key in dateFilterSelectors) { - await page.focus(dateFilterSelectors[key]); - await page.keyboard.type(dateString); - await waitForTimeout(500); - await page.focus(timeFilterSelectors[key]); - await page.keyboard.type('00-01-AM'); - await waitForTimeout(500); - const value = await page.$eval(dateFilterSelectors[key], (element) => element.value); - expect(value).to.equal(validValue); - } - }); - it('The max/min should be the right value when date is set to same day', async () => { - await goToPage(page, 'run-overview'); - waitForTimeout(100); - const dateString = '03-02-2021'; + // Open the filters await pressElement(page, '#openFilterToggle'); - await waitForTimeout(200); - // Set date to an open day - for (const selector of Object.values(dateFilterSelectors)) { - await page.type(selector, dateString); - await waitForTimeout(300); - } - await page.type(timeFilterSelectors.startFrom, '11:11'); - await page.type(timeFilterSelectors.startTo, '14:00'); - await page.type(timeFilterSelectors.endFrom, '11:11'); - await page.type(timeFilterSelectors.endTo, '14:00'); - await waitForTimeout(500); - // Validate if the max value is the same as the till values - const startMax = await page.$eval(timeFilterSelectors.startFrom, (element) => element.getAttribute('max')); - const endMax = await page.$eval(timeFilterSelectors.endFrom, (element) => element.getAttribute('max')); - expect(String(startMax)).to.equal(await page.$eval(timeFilterSelectors.startTo, (element) => element.value)); - expect(String(endMax)).to.equal(await page.$eval(timeFilterSelectors.endTo, (element) => element.value)); - - // Validate if the min value is the same as the from values - const startMin = await page.$eval(timeFilterSelectors.startTo, (element) => element.getAttribute('min')); - const endMin = await page.$eval(timeFilterSelectors.endTo, (element) => element.getAttribute('min')); - expect(String(startMin)).to.equal(await page.$eval(timeFilterSelectors.startFrom, (element) => element.value)); - expect(String(endMin)).to.equal(await page.$eval(timeFilterSelectors.endFrom, (element) => element.value)); - }); + await pressElement(page, '.timeO2Start-filter .popover-trigger'); - it('The max should be the maximum value when having different dates', async () => { - await goToPage(page, 'run-overview'); - waitForTimeout(100); - const dateString = '03-20-2021'; - const maxTime = '23:59'; - const minTime = '00:00'; - // Open the filters - await pressElement(page, '#openFilterToggle'); - await waitForTimeout(200); - // Set date to an open day - for (const selector of Object.values(dateFilterSelectors)) { - await page.type(selector, dateString); - await waitForTimeout(500); - } - const startMax = await page.$eval(timeFilterSelectors.startFrom, (element) => element.getAttribute('max')); - const endMax = await page.$eval(timeFilterSelectors.endFrom, (element) => element.getAttribute('max')); - expect(String(startMax)).to.equal(maxTime); - expect(String(endMax)).to.equal(maxTime); - - // Validate if the min value is the same as the from values - const startMin = await page.$eval(timeFilterSelectors.startTo, (element) => element.getAttribute('min')); - const endMin = await page.$eval(timeFilterSelectors.endTo, (element) => element.getAttribute('min')); - expect(String(startMin)).to.equal(minTime); - expect(String(endMin)).to.equal(minTime); + const o2StartPopoverSelector = await getPopoverSelector(await page.$('.timeO2Start-filter .popover-trigger')); + const periodInputsSelectors = getPeriodInputsSelectors(o2StartPopoverSelector); + + await focusAndType(page, periodInputsSelectors.fromTimeSelector, '11:11AM'); + await focusAndType(page, periodInputsSelectors.toTimeSelector, '02:00PM'); + + await focusAndType(page, periodInputsSelectors.fromDateSelector, '03-02-2021'); + await focusAndType(page, periodInputsSelectors.toDateSelector, '03-02-2021'); + + await page.$eval(periodInputsSelectors.toDateSelector, (element) => element.blur()); + + // Wait for page to be refreshed + await page.waitForFunction( + (selector) => document.querySelector(selector).getAttribute('min') !== null, + { timeout: 500 }, + periodInputsSelectors.toTimeSelector, + ); + + expect(await page.$eval(periodInputsSelectors.toTimeSelector, (element) => element.getAttribute('min'))).to.equal('11:12'); + expect(await page.$eval(periodInputsSelectors.toDateSelector, (element) => element.getAttribute('min'))).to.equal('2021-02-03'); + + expect(await page.$eval(periodInputsSelectors.fromTimeSelector, (element) => element.getAttribute('max'))).to.equal('13:59'); + expect(await page.$eval(periodInputsSelectors.fromDateSelector, (element) => element.getAttribute('max'))).to.equal('2021-02-03'); + + // Setting different dates + await focusAndType(page, periodInputsSelectors.toDateSelector, '05-02-2021'); + + await page.waitForFunction( + (selector) => document.querySelector(selector).getAttribute('min') === null, + { timeout: 500 }, + periodInputsSelectors.toTimeSelector, + ); + expect(await page.$eval(periodInputsSelectors.toDateSelector, (element) => element.getAttribute('min'))).to.equal('2021-02-03'); + + expect(await page.$eval(periodInputsSelectors.fromTimeSelector, (element) => element.getAttribute('max'))).to.equal(null); + expect(await page.$eval(periodInputsSelectors.fromDateSelector, (element) => element.getAttribute('max'))).to.equal('2021-02-05'); + + await pressElement(page, '.timeO2Start-filter .popover-trigger'); }); it('should successfully filter on duration', async () => {