Skip to content

Commit

Permalink
WRQ-16517: Sync develop and master branch (#85)
Browse files Browse the repository at this point in the history
* WRQ-8596: Adapt performanceMetrics app for Agate performance tests (#81)

* added performance tests for agate components

* code review fixes

* Adapted performanceMetrics app for Agate test results

* code review fixes

* fixed urls for performanceMetrics

* WRQ-11737: Added performance tests for agate overall view + fixes for other tests (#82)

* avoided unnecessary api call when the theme library is changed in poerformanceMetrics

* Added overallView for Agate
Fixed lint warnings for latest enact/cli
Fixed placeholder images link

* Added tests for agate/overallview
Solved lint warnings

* modified marquee test in order to fix the tests on jenkins

* revert for marquee test

* fix for marquee test

* fix for sandstone/marquee test

* fixed tests for agate/Slider, agate/IncrementSlider, sandstone/Slider and sandstone/Panels

* fixed tests for agate/Panels

* code review fixes

* WRQ-14123: Fixed performanceMetrics when same component is selected once more. Fixed tests where results were saved in the wrong file (#83)

* fixed performanceMetrics when same component is selected once more.
Fixed tests where the tests results were saved in the wrong file

* Fixed performance tests where the metric name was incorrect

* Added missing component options in performance metrics dropdown

* WRQ-16517: Updated dependencies to fix critical vulnerabilities (#84)

* updated dependencies to fix vulnerabilities

* fixed quickguidepanel test view
  • Loading branch information
daniel-stoian-lgp authored Apr 15, 2024
1 parent b001733 commit 464caf1
Show file tree
Hide file tree
Showing 39 changed files with 1,381 additions and 776 deletions.
1,409 changes: 813 additions & 596 deletions package-lock.json

Large diffs are not rendered by default.

20 changes: 10 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,20 +30,20 @@
"dist/*"
],
"dependencies": {
"@enact/agate": "^2.0.9",
"@enact/core": "^4.7.9",
"@enact/i18n": "^4.7.9",
"@enact/sandstone": "^2.7.13",
"@enact/spotlight": "^4.7.9",
"@enact/ui": "^4.7.9",
"@enact/webos": "^4.7.9",
"dotenv": "^16.3.1",
"@enact/agate": "^2.0.10",
"@enact/core": "^4.8.0",
"@enact/i18n": "^4.8.0",
"@enact/sandstone": "^2.8.0",
"@enact/spotlight": "^4.8.0",
"@enact/ui": "^4.8.0",
"@enact/webos": "^4.8.0",
"dotenv": "^16.4.5",
"node-fetch": "^3.3.2",
"prop-types": "^15.8.1",
"qs": "^6.11.2",
"qs": "^6.12.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.2",
"react-router-dom": "^6.22.3",
"shelljs": "^0.8.5"
},
"devDependencies": {
Expand Down
31 changes: 7 additions & 24 deletions performance/TestResults.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,39 +32,22 @@ const TestResult = module.exports = {
body: JSON.stringify(result),
headers: {'Content-Type': 'application/json'}}
)
.then(res => console.log(res.json()))
.catch(err => console.log(err));
.then(res => console.log(res.json())) // eslint-disable-line no-console
.catch(err => console.log(err)); // eslint-disable-line no-console
} else {
console.log(JSON.stringify(result));
let txtPath;
if (theme === 'sandstone') {
txtPath = path.join(__dirname, 'testResults/sandstone', `${component}.txt`); // eslint-disable-line
} else if (theme === 'agate') {
txtPath = path.join(__dirname, 'testResults/agate', `${component}.txt`); // eslint-disable-line
}
console.log(JSON.stringify(result)); // eslint-disable-line no-console
const txtPath = path.join(__dirname, 'testResults', `${component}.txt`); // eslint-disable-line

fs.appendFileSync(txtPath, JSON.stringify(result) + '\n');
}
},
newFile: (component) => {
const dir = 'testResults';

if (theme === 'sandstone') {
if (!fs.existsSync('performance/' + dir) || !fs.existsSync('performance/' + dir + '/sandstone')) {
fs.mkdirSync('performance/' + dir + '/sandstone', {recursive: true});
}
} else if (theme === 'agate') {
if (!fs.existsSync('performance/' + dir) || !fs.existsSync('performance/' + dir + '/agate')) {
fs.mkdirSync('performance/' + dir + '/agate', {recursive: true});
}
}

let txtPath;
if (theme === 'sandstone') {
txtPath = path.join(__dirname, 'testResults/sandstone', `${component}.txt`); // eslint-disable-line
} else if (theme === 'agate') {
txtPath = path.join(__dirname, 'testResults/agate', `${component}.txt`); // eslint-disable-line
if (!fs.existsSync('performance/' + dir)) {
fs.mkdirSync('performance/' + dir);
}
const txtPath = path.join(__dirname, dir, `${component}.txt`); // eslint-disable-line

fs.access(txtPath, fs.F_OK, (err) => {
if (err) {
Expand Down
2 changes: 1 addition & 1 deletion performance/tests/agate/CheckboxItem.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ describe('CheckboxItem', () => {
await page.keyboard.up('Enter');

const averageFPS = await getAverageFPS();
TestResults.addResult({component: component, type: 'FPS Click', actualValue: Math.round((averageFPS + Number.EPSILON) * 1000) / 1000});
TestResults.addResult({component: component, type: 'FPS Keypress', actualValue: Math.round((averageFPS + Number.EPSILON) * 1000) / 1000});

expect(averageFPS).toBeGreaterThan(minFPS);
});
Expand Down
16 changes: 8 additions & 8 deletions performance/tests/agate/Drawer.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,27 @@ const {clsValue, firstInputValue, getFileName, newPageMultiple} = require('../..
describe('Drawer', () => {
const component = 'Drawer';
const open = '#button-open';
const close = '#button-close';
const closeButton = '#button-close';
TestResults.newFile(component);

describe('click', () => {
it('animates', async () => {
await FPS();
await page.goto(`http://${serverAddr}/drawer`);
await page.waitForSelector('#agate-drawer');
await page.click(close);
await page.click(closeButton);
await new Promise(r => setTimeout(r, 500));
await page.click(open);
await new Promise(r => setTimeout(r, 500));
await page.click(close);
await page.click(closeButton);
await new Promise(r => setTimeout(r, 500));
await page.click(open);
await new Promise(r => setTimeout(r, 500));
await page.click(close);
await page.click(closeButton);
await new Promise(r => setTimeout(r, 500));
await page.click(open);
await new Promise(r => setTimeout(r, 500));
await page.click(close);
await page.click(closeButton);
await new Promise(r => setTimeout(r, 500));

const averageFPS = await getAverageFPS();
Expand Down Expand Up @@ -59,7 +59,7 @@ describe('Drawer', () => {
await page.keyboard.up('Enter');

const averageFPS = await getAverageFPS();
TestResults.addResult({component: component, type: 'FPS Click', actualValue: Math.round((averageFPS + Number.EPSILON) * 1000) / 1000});
TestResults.addResult({component: component, type: 'FPS Keypress', actualValue: Math.round((averageFPS + Number.EPSILON) * 1000) / 1000});

expect(averageFPS).toBeGreaterThan(minFPS);
});
Expand All @@ -70,11 +70,11 @@ describe('Drawer', () => {
await page.evaluateOnNewDocument(CLS);
await page.goto(`http://${serverAddr}/drawer`);
await page.waitForSelector('#agate-drawer');
await page.click(close);
await page.click(closeButton);
await new Promise(r => setTimeout(r, 500));
await page.click(open);
await new Promise(r => setTimeout(r, 500));
await page.click(close);
await page.click(closeButton);
await new Promise(r => setTimeout(r, 500));

let actualFirstInput = await firstInputValue();
Expand Down
2 changes: 1 addition & 1 deletion performance/tests/agate/IncrementSlider.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ describe('IncrementSlider', () => {
await page.goto(`http://${serverAddr}/incrementSlider`);
await page.waitForSelector('#incrementSlider');
const {x: posX, y: posY} = await page.evaluate(() => {
const knobElement = document.querySelector('[class$="Slider_knob"]');
const knobElement = document.querySelector('[class*="Slider_knob"]');
const {x, y} = knobElement.getBoundingClientRect();
return {x, y};
});
Expand Down
5 changes: 2 additions & 3 deletions performance/tests/agate/Marquee.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ const {CLS, FID, FPS, getAverageFPS, PageLoadingMetrics} = require('../../TraceM
const {clsValue, firstInputValue, getFileName, newPageMultiple} = require('../../utils');

const component = 'Marquee';
const MarqueeText = '[class$="Marquee_marquee"]';

describe('Marquee', () => {
TestResults.newFile(component);
Expand All @@ -14,7 +13,7 @@ describe('Marquee', () => {
await FPS();
await page.goto(`http://${serverAddr}/marquee`);
await page.waitForSelector('#marquee');
await page.hover(MarqueeText);
await page.hover('#marquee');
await new Promise(r => setTimeout(r, 500));

const averageFPS = await getAverageFPS();
Expand All @@ -28,7 +27,7 @@ describe('Marquee', () => {
await page.evaluateOnNewDocument(CLS);
await page.goto(`http://${serverAddr}/marquee`);
await page.waitForSelector('#marquee');
await page.hover(MarqueeText);
await page.hover('#marquee');
await new Promise(r => setTimeout(r, 500));

let actualFirstInput = await firstInputValue();
Expand Down
6 changes: 3 additions & 3 deletions performance/tests/agate/MediaPlayer.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ const TestResults = require('../../TestResults');
const {CLS, FID, FPS, getAverageFPS, PageLoadingMetrics} = require('../../TraceModel');
const {clsValue, firstInputValue, getFileName, newPageMultiple} = require('../../utils');

describe('CheckboxItem', () => {
const component = 'CheckboxItem';
describe('MediaPlayer', () => {
const component = 'MediaPlayer';
TestResults.newFile(component);

describe('click', () => {
Expand Down Expand Up @@ -43,7 +43,7 @@ describe('CheckboxItem', () => {
await page.keyboard.up('Enter');

const averageFPS = await getAverageFPS();
TestResults.addResult({component: component, type: 'FPS Click', actualValue: Math.round((averageFPS + Number.EPSILON) * 1000) / 1000});
TestResults.addResult({component: component, type: 'FPS Keypress', actualValue: Math.round((averageFPS + Number.EPSILON) * 1000) / 1000});

expect(averageFPS).toBeGreaterThan(minFPS);
});
Expand Down
160 changes: 160 additions & 0 deletions performance/tests/agate/OverallView.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
/* global CPUThrottling, page, minFPS, maxFID, maxCLS, stepNumber, maxDCL, maxFCP, maxLCP, passRatio, serverAddr, targetEnv */

const TestResults = require('../../TestResults');
const {CLS, FID, FPS, getAverageFPS, PageLoadingMetrics} = require('../../TraceModel');
const {clsValue, firstInputValue, getFileName, newPageMultiple} = require('../../utils');

describe('OverallView', () => {
const component = 'Overall';
TestResults.newFile(component);

it('FPS', async () => {
await FPS();
await page.goto(`http://${serverAddr}/overallView`);
await page.waitForSelector('#tooltipButton');
await page.click('[aria-label="Next Tab"]'); // to move to the next panel.
await page.waitForSelector('#virtualGridListSecond');
await new Promise(r => setTimeout(r, 200));
await page.click(('[aria-label="Previous Tab"]')); // to move to the previous tab.
await page.waitForSelector('#tooltipButton');
await new Promise(r => setTimeout(r, 200));

await page.click('#tooltipButton'); // to move to the next panel.
await page.waitForSelector('#virtualGridListSecond');
await new Promise(r => setTimeout(r, 200));
await page.click(('[aria-label="Previous Tab"]')); // to move to the previous tab.
await page.waitForSelector('#tooltipButton');
await new Promise(r => setTimeout(r, 100));

// focus various spottable components in the first tab and force the scroller to move
await page.keyboard.down('ArrowDown');
await page.keyboard.up('ArrowDown');
await new Promise(r => setTimeout(r, 100));
await page.keyboard.down('ArrowDown');
await page.keyboard.up('ArrowDown');
await new Promise(r => setTimeout(r, 100));
await page.keyboard.down('ArrowDown');
await page.keyboard.up('ArrowDown');
await new Promise(r => setTimeout(r, 100));
await page.keyboard.down('ArrowDown');
await page.keyboard.up('ArrowDown');
await new Promise(r => setTimeout(r, 100));
await page.keyboard.down('ArrowDown');
await page.keyboard.up('ArrowDown');
await new Promise(r => setTimeout(r, 100));
await page.keyboard.down('ArrowDown');
await page.keyboard.up('ArrowDown');
await new Promise(r => setTimeout(r, 100));
await page.keyboard.down('ArrowDown');
await page.keyboard.up('ArrowDown');
await new Promise(r => setTimeout(r, 100));
await page.keyboard.down('ArrowRight');
await page.keyboard.up('ArrowRight');
await new Promise(r => setTimeout(r, 100));
await page.keyboard.down('ArrowRight');
await page.keyboard.up('ArrowRight');
await new Promise(r => setTimeout(r, 100));
await page.keyboard.down('ArrowRight');
await page.keyboard.up('ArrowRight');
await new Promise(r => setTimeout(r, 100));
await page.keyboard.down('ArrowRight');
await page.keyboard.up('ArrowRight');
await new Promise(r => setTimeout(r, 100));
await page.keyboard.down('ArrowUp');
await page.keyboard.up('ArrowUp');
await new Promise(r => setTimeout(r, 100));
await page.keyboard.down('ArrowUp');
await page.keyboard.up('ArrowUp');
await new Promise(r => setTimeout(r, 100));
await page.keyboard.down('ArrowUp');
await page.keyboard.up('ArrowUp');
await new Promise(r => setTimeout(r, 100));
await page.keyboard.down('ArrowUp');
await page.keyboard.up('ArrowUp');

const averageFPS = await getAverageFPS();
TestResults.addResult({component: component, type: 'FPS', actualValue: Math.round((averageFPS + Number.EPSILON) * 1000) / 1000});

expect(averageFPS).toBeGreaterThan(minFPS);
});

it('should have a good FID and CLS', async () => {
await page.evaluateOnNewDocument(FID);
await page.evaluateOnNewDocument(CLS);
await page.goto(`http://${serverAddr}/overallView`);
await page.waitForSelector('#tooltipButton');
await page.click('[aria-label="Next Tab"]'); // to move to the next tab.
await page.waitForSelector('#virtualGridListSecond');
await new Promise(r => setTimeout(r, 200));
await page.click(('[aria-label="Previous Tab"]')); // to move to the previous tab.
await page.waitForSelector('#tooltipButton');
await new Promise(r => setTimeout(r, 200));

let actualFirstInput = await firstInputValue();
let actualCLS = await clsValue();

TestResults.addResult({component: component, type: 'FID', actualValue: Math.round((actualFirstInput + Number.EPSILON) * 1000) / 1000});
TestResults.addResult({component: component, type: 'CLS', actualValue: Math.round((actualCLS + Number.EPSILON) * 1000) / 1000});

expect(actualFirstInput).toBeLessThan(maxFID);
expect(actualCLS).toBeLessThan(maxCLS);
});

it('should have a good DCL, FCP and LCP', async () => {
const filename = getFileName(component);

let passContDCL = 0;
let passContFCP = 0;
let passContLCP = 0;
let avgDCL = 0;
let avgFCP = 0;
let avgLCP = 0;
for (let step = 0; step < stepNumber; step++) {
const overallViewPage = targetEnv === 'TV' ? page : await newPageMultiple();
await overallViewPage.emulateCPUThrottling(CPUThrottling);

await overallViewPage.tracing.start({path: filename, screenshots: false});
await overallViewPage.goto(`http://${serverAddr}/overallView`);
await overallViewPage.waitForSelector('#virtualGridList');
await new Promise(r => setTimeout(r, 200));

await overallViewPage.tracing.stop();

const {actualDCL, actualFCP, actualLCP} = PageLoadingMetrics(filename);

avgDCL = avgDCL + actualDCL;
if (actualDCL < maxDCL) {
passContDCL += 1;
}

avgFCP = avgFCP + actualFCP;
if (actualFCP < maxFCP) {
passContFCP += 1;
}

avgLCP = avgLCP + actualLCP;
if (actualLCP < maxLCP) {
passContLCP += 1;
}

if (targetEnv === 'PC') await overallViewPage.close();
}
avgDCL = avgDCL / stepNumber;
avgFCP = avgFCP / stepNumber;
avgLCP = avgLCP / stepNumber;

TestResults.addResult({component: component, type: 'DCL', actualValue: Math.round((avgDCL + Number.EPSILON) * 1000) / 1000});
TestResults.addResult({component: component, type: 'FCP', actualValue: Math.round((avgFCP + Number.EPSILON) * 1000) / 1000});
TestResults.addResult({component: component, type: 'LCP', actualValue: Math.round((avgLCP + Number.EPSILON) * 1000) / 1000});

expect(passContDCL).toBeGreaterThan(passRatio * stepNumber);
expect(avgDCL).toBeLessThan(maxDCL);

expect(passContFCP).toBeGreaterThan(passRatio * stepNumber);
expect(avgFCP).toBeLessThan(maxFCP);

expect(passContLCP).toBeGreaterThan(passRatio * stepNumber);
expect(avgLCP).toBeLessThan(maxLCP);
});
});

Loading

0 comments on commit 464caf1

Please sign in to comment.