Hugging Face's logo

Spaces:
Leon4gr45
/
matomo
Paused

App Files Community
matomo / plugins /CoreHome /tests /UI /SingleMetricView_spec.js
Leon4gr45's picture
Leon4gr45
Upload folder using huggingface_hub (part 12)
5d53000 verified
Raw History Blame Contribute Delete
6.86 kB
/*!
* Matomo - free/libre analytics platform
*
* Dashboard screenshot tests.
*
* @link https://matomo.org
* @license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
*/
describe('SingleMetricView', function () {
var url = "?module=Widgetize&action=iframe&idSite=1&period=year&date=2012-08-09&moduleToWidgetize=Dashboard&"
+ "actionToWidgetize=index&idDashboard=1";
var rangeUrl = "?module=Widgetize&action=iframe&idSite=1&period=range&date=2012-08-07,2012-08-10&moduleToWidgetize=Dashboard&"
+ "actionToWidgetize=index&idDashboard=1";
it('should load correctly', async function () {
await page.goto(url);
await page.waitForNetworkIdle();
// Add the Single Metric (KPI Metric) widget directly instead of going
// through the Add Widget modal so the screenshot stays focused on the
// widget itself rather than the surrounding picker flow.
await page.evaluate(function () {
return new Promise(function (resolve) {
window.widgetsHelper.getWidgetObjectFromUniqueId(
'widgetCoreVisualizationssingleMetricViewcolumn',
function (widget) {
$('#dashboardWidgetsArea').dashboard(
'addWidget', widget.uniqueId, 1, widget.parameters, true, false
);
resolve();
}
);
});
});
var elem = await page.waitForSelector('#widgetCoreVisualizationssingleMetricViewcolumn');
await page.waitForNetworkIdle();
await page.waitForTimeout(250);
expect(await elem.screenshot()).to.matchImage('loaded');
});
it('should handle formatted metrics properly', async function () {
await page.evaluate(() => {
$('#dashboardWidgetsArea #widgetCoreVisualizationssingleMetricViewcolumn .jqplot-seriespicker').trigger('mouseenter');
});
await page.webpage.evaluate(function(){
$('#dashboardWidgetsArea .jqplot-seriespicker-popover label:contains(Revenue):eq(0)').click();
});
await page.waitForNetworkIdle();
await page.waitForTimeout(250);
var elem = await page.waitForSelector('#dashboardWidgetsArea #widgetCoreVisualizationssingleMetricViewcolumn');
expect(await elem.screenshot()).to.matchImage('formatted_metric');
});
it('should handle individual goal metrics properly', async function () {
await page.evaluate(function(){
$('#dashboardWidgetsArea #widgetCoreVisualizationssingleMetricViewcolumn .jqplot-seriespicker').last().trigger('mouseenter');
});
await page.waitForTimeout(250);
await page.evaluate(function(){
$('#dashboardWidgetsArea .jqplot-seriespicker-popover label:contains(_x):eq(0)').click()
});
await page.waitForNetworkIdle();
await page.waitForTimeout(250);
var elem = await page.$('#dashboardWidgetsArea #widgetCoreVisualizationssingleMetricViewcolumn');
expect(await elem.screenshot()).to.matchImage('goal_metric');
});
it('should handle range periods correctly', async function () {
await page.goto(rangeUrl);
await page.evaluate(function(){
$('#dashboardWidgetsArea #widgetCoreVisualizationssingleMetricViewcolumn .jqplot-seriespicker').trigger('mouseenter');
});
await page.waitForTimeout(250);
await page.evaluate(function(){
$('#dashboardWidgetsArea #widgetCoreVisualizationssingleMetricViewcolumn .jqplot-seriespicker-popover label:contains(Revenue):eq(0)').click()
});
await page.waitForNetworkIdle();
await page.waitForTimeout(250);
var elem = await page.$('#dashboardWidgetsArea #widgetCoreVisualizationssingleMetricViewcolumn');
expect(await elem.screenshot()).to.matchImage('range');
});
// selects a metric in the widget's series picker and returns the evolution
// indicator's css classes + label so we can assert on them
async function selectMetricAndReadEvolution(metricLabel) {
await page.waitForSelector('#dashboardWidgetsArea #widgetCoreVisualizationssingleMetricViewcolumn');
await page.evaluate(function () {
$('#dashboardWidgetsArea #widgetCoreVisualizationssingleMetricViewcolumn .jqplot-seriespicker').trigger('mouseenter');
});
await page.waitForTimeout(250);
await page.evaluate(function (label) {
$('#dashboardWidgetsArea .jqplot-seriespicker-popover label:contains(' + label + '):eq(0)').click();
}, metricLabel);
await page.waitForNetworkIdle();
await page.waitForTimeout(250);
return page.evaluate(function () {
var el = document.querySelector('#dashboardWidgetsArea #widgetCoreVisualizationssingleMetricViewcolumn .metricEvolution > span');
return el ? { className: el.className, text: el.textContent.trim() } : null;
});
}
it('should show an increase of a lower-is-better metric as a negative evolution', async function () {
// bounce rate is a "lower is better" metric, so an increasing value must be
// shown as a negative (red) evolution and a decrease as a positive (green) one
await page.goto(url);
await page.waitForNetworkIdle();
var evolution = await selectMetricAndReadEvolution('Bounce Rate');
expect(evolution).to.not.equal(null);
var hasUp = evolution.className.indexOf('evolution-up') !== -1;
var hasDown = evolution.className.indexOf('evolution-down') !== -1;
expect(hasUp || hasDown).to.equal(true);
if (hasUp) {
expect(evolution.className).to.contain('negative-evolution');
expect(evolution.className).to.not.contain('positive-evolution');
} else {
expect(evolution.className).to.contain('positive-evolution');
expect(evolution.className).to.not.contain('negative-evolution');
}
});
it('should show a -100% evolution when the current value dropped to zero', async function () {
// March 2012 has visits, April 2012 has none, so the current value is zero
// while the previous period has data: the evolution must read as -100%
var zeroUrl = "?module=Widgetize&action=iframe&idSite=1&period=month&date=2012-04-15&moduleToWidgetize=Dashboard&"
+ "actionToWidgetize=index&idDashboard=1";
await page.goto(zeroUrl);
await page.waitForNetworkIdle();
var evolution = await selectMetricAndReadEvolution('Visits');
expect(evolution).to.not.equal(null);
expect(evolution.text).to.contain('-100');
expect(evolution.className).to.contain('evolution-down');
});
});