Skip to content

Commit

Permalink
[O2B-1017] Fix popover misbehavior when moving from parent to child e…
Browse files Browse the repository at this point in the history 
…lt (#1179)

* [O2B-1017] Fix popover misbehavior when moving from parent to child elt

* Try to fix tests
  • Loading branch information
@martinboulais
martinboulais authored Sep 28, 2023
1 parent 65c3f74 commit 7619d3c
Show file tree
Hide file tree
Showing 6 changed files with 65 additions and 66 deletions.
1 change: 1 addition & 0 deletions lib/public/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,6 +465,7 @@ a.btn, a.btn:hover, a.btn.active {
left: 0;
z-index: 1002;
max-width: var(--ui-component-medium);
pointer-events: none;
}

/* Modal */
Expand Down
8 changes: 4 additions & 4 deletions lib/public/components/common/popover/overflowBalloon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,15 @@ export const overflowBalloon = (content, options = null) => {
if (previousTriggerNode) {
const node = stretch ? previousTriggerNode.parentNode : previousTriggerNode;

node.removeEventListener('mouseover', this.showPopover);
node.removeEventListener('mouseout', this.hidePopover);
node.removeEventListener('mouseenter', this.showPopover);
node.removeEventListener('mouseleave', this.hidePopover);
}

if (newTriggerNode) {
const node = stretch ? newTriggerNode.parentNode : newTriggerNode;

node.addEventListener('mouseover', this.showPopover);
node.addEventListener('mouseout', this.hidePopover);
node.addEventListener('mouseenter', this.showPopover);
node.addEventListener('mouseleave', this.hidePopover);
}
},
// eslint-disable-next-line require-jsdoc
Expand Down
8 changes: 4 additions & 4 deletions lib/public/components/common/popover/tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,13 @@ export const tooltip = (trigger, content) => popover(trigger, content, {
// eslint-disable-next-line require-jsdoc
onTriggerNodeChange: function (previousTriggerNode, newTriggerNode) {
if (previousTriggerNode) {
previousTriggerNode.removeEventListener('mouseover', this.showPopover);
previousTriggerNode.removeEventListener('mouseout', this.hidePopover);
previousTriggerNode.removeEventListener('mouseenter', this.showPopover);
previousTriggerNode.removeEventListener('mouseleave', this.hidePopover);
}

if (newTriggerNode) {
newTriggerNode.addEventListener('mouseover', this.showPopover);
newTriggerNode.addEventListener('mouseout', this.hidePopover);
newTriggerNode.addEventListener('mouseenter', this.showPopover);
newTriggerNode.addEventListener('mouseleave', this.hidePopover);
}
},
});
35 changes: 22 additions & 13 deletions test/public/defaults.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,19 +62,6 @@ module.exports.defaultAfter = async (page, browser) => {
return [page, browser];
};

/**
* Wait till selector is visible, then search for innertext on page.
* @param {Object} page Puppeteer page object.
* @param {String} selector Css selector.
* @param {String} innerText Text to search for.
* @returns {Promise<Boolean>} Whether the text was found on the page or not.
*/
module.exports.expectInnerText = async (page, selector, innerText) => {
await page.waitForSelector(selector);
const elementInnerText = await page.$eval(selector, (element) => element.innerText);
expect(elementInnerText).to.equal(innerText);
};

/**
* Waits till selector is visible and then clicks element.
* @param {Object} page Puppeteer page object.
Expand Down Expand Up @@ -242,6 +229,28 @@ module.exports.getAllDataFields = async (page, key) => {
}, []);
};

/**
* Evaluate and return the text content of a given element handler
* @param {{evaluate}} elementHandler the puppeteer handler of the element to inspect
* @returns {Promise<XPathResult>} the html content
*/
const getInnerText = async (elementHandler) => await elementHandler.evaluate((element) => element.innerText);

module.exports.getInnerText = getInnerText;

/**
* Expect an element to have a given text
*
* @param {Object} page Puppeteer page object.
* @param {String} selector Css selector.
* @param {String} innerText Text to search for.
* @return {void}
*/
module.exports.expectInnerText = async (page, selector, innerText) => {
await page.waitForSelector(selector);
expect(await getInnerText(await page.$(selector))).to.equal(innerText);
};

/**
* Evaluate and return the html content of a given element handler
* @param {{evaluate}} elementHandler the puppeteer handler of the element to inspect
Expand Down
41 changes: 16 additions & 25 deletions test/public/logs/overview.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const {
getAllDataFields,
checkColumnBalloon,
} = require('../defaults');
const { reloadPage, waitForNetworkIdleAndRedraw, fillInput } = require('../defaults.js');
const { reloadPage, waitForNetworkIdleAndRedraw, fillInput, getInnerText } = require('../defaults.js');

const { expect } = chai;

Expand All @@ -37,7 +37,7 @@ module.exports = () => {
let parsedFirstRowId;

before(async () => {
[page, browser, url] = await defaultBefore(page, browser);
[page, browser, url] = await defaultBefore();
await page.setViewport({
width: 1400,
height: 940,
Expand Down Expand Up @@ -590,21 +590,19 @@ module.exports = () => {

it('can switch to infinite mode in amountSelector', async () => {
await reloadPage(page);
const amountSelectorButton = await page.$('#amountSelector button');
const amountSelectorButtonSelector = '#amountSelector button';

// Expect the dropdown options to be visible when it is selected
await amountSelectorButton.evaluate((button) => button.click());
await page.waitForTimeout(100);
await pressElement(page, amountSelectorButtonSelector);

const amountSelectorDropdown = await page.$('#amountSelector .dropup-menu');
expect(Boolean(amountSelectorDropdown)).to.be.true;

const menuItems = await page.$$('#amountSelector .dropup-menu .menu-item');
await menuItems[menuItems.length - 1].evaluate((button) => button.click());
const infiniteModeButtonSelector = '#amountSelector .dropup-menu .menu-item:nth-last-child(-n +2)';
await pressElement(page, infiniteModeButtonSelector);
expect((await getInnerText(await page.$(amountSelectorButtonSelector))).endsWith('Infinite')).to.be.true;
await page.waitForTimeout(100);

const amountSelectorButtonText = await page.evaluate((element) => element.innerText, amountSelectorButton);
expect(amountSelectorButtonText.endsWith('Infinite ')).to.be.true;

await page.evaluate(() => {
window.scrollBy(0, window.innerHeight);
});
Expand All @@ -614,25 +612,18 @@ module.exports = () => {
});

it('can set how many logs are available per page', async () => {
await page.waitForTimeout(500);
// Expect the amount selector to currently be set to Infinite (after the previous test)
const amountSelectorId = '#amountSelector';
await page.waitForTimeout(500);
const amountSelectorButton = await page.$(`${amountSelectorId} button`);
const amountSelectorButtonText = await page.evaluate((element) => element.innerText, amountSelectorButton);
expect(amountSelectorButtonText.endsWith('Infinite ')).to.be.true;
await reloadPage(page);
const amountSelectorButtonSelector = '#amountSelector button';
await pressElement(page, amountSelectorButtonSelector);

// Expect the dropdown options to be visible when it is selected
await amountSelectorButton.evaluate((button) => button.click());
await page.waitForTimeout(100);
const amountSelectorDropdown = await page.$(`${amountSelectorId} .dropup-menu`);
const amountSelectorDropdown = await page.$('#amountSelector .dropup-menu');
expect(Boolean(amountSelectorDropdown)).to.be.true;

// Expect the amount of visible logs to reduce when the first option (5) is selected
const menuItem = await page.$(`${amountSelectorId} .dropup-menu .menu-item`);
await menuItem.evaluate((button) => button.click());
await page.waitForTimeout(100);
const amountItems5 = '#amountSelector .dropup-menu .menu-item:first-child';
await pressElement(page, amountItems5);
await page.waitForTimeout(600);

// Expect the amount of visible logs to reduce when the first option (5) is selected
const tableRows = await page.$$('table tr');
expect(tableRows.length - 1).to.equal(5);
});
Expand Down
38 changes: 18 additions & 20 deletions test/public/runs/overview.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,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 } = require('../defaults.js');
const { fillInput, getPopoverContent, getInnerText } = require('../defaults.js');

const { expect } = chai;

Expand Down Expand Up @@ -146,18 +146,21 @@ module.exports = () => {
});

it('can switch to infinite mode in amountSelector', async () => {
const amountSelectorButton = await page.$('#amountSelector button');
await reloadPage(page);
const amountSelectorButtonSelector = await '#amountSelector button';

// Expect the dropdown options to be visible when it is selected
await amountSelectorButton.evaluate((button) => button.click());
await page.waitForTimeout(100);
await pressElement(page, amountSelectorButtonSelector);

const amountSelectorDropdown = await page.$('#amountSelector .dropup-menu');
expect(Boolean(amountSelectorDropdown)).to.be.true;

const initialTableRows = (await page.$$('table tr')).length;

const menuItems = await page.$$('#amountSelector .dropup-menu .menu-item');
await menuItems[menuItems.length - 1].evaluate((button) => button.click());
await page.waitForTimeout(300);
const infiniteModeButtonSelector = '#amountSelector .dropup-menu .menu-item:nth-last-child(-n +2)';
await pressElement(page, infiniteModeButtonSelector);
await page.waitForTimeout(100);
expect((await getInnerText(await page.$(amountSelectorButtonSelector))).endsWith('Infinite')).to.be.true;

await page.evaluate(() => {
window.scrollBy(0, window.innerHeight);
Expand All @@ -169,25 +172,20 @@ module.exports = () => {
});

it('can set how many runs are available per page', async () => {
await page.waitForTimeout(300);
// Expect the amount selector to currently be set to Infinite (after the previous test)
await reloadPage(page);

const amountSelectorId = '#amountSelector';
const amountSelectorButton = await page.$(`${amountSelectorId} button`);
const amountSelectorButtonText = await page.evaluate((element) => element.innerText, amountSelectorButton);
await page.waitForTimeout(300);
expect(amountSelectorButtonText.endsWith('Infinite ')).to.be.true;
const amountSelectorButtonSelector = `${amountSelectorId} button`;
await pressElement(page, amountSelectorButtonSelector);

// Expect the dropdown options to be visible when it is selected
await amountSelectorButton.evaluate((button) => button.click());
await page.waitForTimeout(100);
const amountSelectorDropdown = await page.$(`${amountSelectorId} .dropup-menu`);
expect(Boolean(amountSelectorDropdown)).to.be.true;

// Expect the amount of visible runs to reduce when the first option (5) is selected
const menuItem = await page.$(`${amountSelectorId} .dropup-menu .menu-item`);
await menuItem.evaluate((button) => button.click());
await page.waitForTimeout(100);
const amountItems5 = `${amountSelectorId} .dropup-menu .menu-item:first-child`;
await pressElement(page, amountItems5);
await page.waitForTimeout(600);

// Expect the amount of visible runs to reduce when the first option (5) is selected
const tableRows = await page.$$('table tr');
expect(tableRows.length - 1).to.equal(5);

Expand Down

0 comments on commit 7619d3c

Please sign in to comment.