File size: 6,857 Bytes
5d53000 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | /*!
* 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');
});
});
|