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
|
/*!
* Matomo - free/libre analytics platform
*
* Period selector screenshot tests.
*
* @link https://matomo.org
* @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
*/
describe("PeriodSelector", function () {
var generalParams = 'idSite=1&period=day&date=2012-01-01';
var url = '?module=CoreHome&action=index&' + generalParams + '#?' + generalParams + '&category=General_Actions&subcategory=General_Pages';
var selector = '#periodString,#periodString .dropdown';
it("should load correctly", async function() {
await page.goto(url);
// disable broadcast.propagateNewPage & remove loading gif
await page.evaluate(function () {
piwikHelper.isAngularRenderingThePage = function () {
return false;
};
broadcast.propagateNewPage = function () {};
// hide ajaxLoadingCalendar via CSS (can't just remove it since it's managed by angular)
$('head').append('<style type="text/css">#ajaxLoadingCalendar { display: none !important; }</style>');
});
expect(await page.screenshotSelector(selector)).to.matchImage('loaded');
});
it("should expand when clicked", async function() {
await page.click('.periodSelector .title');
expect(await page.screenshotSelector(selector)).to.matchImage('expanded');
});
it("should select a date when a date is clicked in day-period mode", async function() {
const element = await page.jQuery('.period-date .ui-datepicker-calendar a:contains(12)');
await element.click();
expect(await page.screenshotSelector(selector)).to.matchImage('day_selected');
});
it("should change the month displayed when a month is selected in the month dropdown", async function() {
await page.evaluate(function () {
$('.ui-datepicker-month').val(1).trigger('change');
});
await page.mouse.move(-10, -10);
expect(await page.screenshotSelector(selector)).to.matchImage('month_changed');
});
it("should change the year displayed when a year is selected in the year dropdown", async function() {
await page.evaluate(function () {
$('.ui-datepicker-year').val(2013).trigger('change');
});
await page.mouse.move(-10, -10);
expect(await page.screenshotSelector(selector)).to.matchImage('year_changed');
});
it("should change the date when a date is clicked in week-period mode", async function() {
await page.click('#period_id_week');
await page.waitForTimeout(250); // wait for animation
const element = await page.jQuery('.period-date .ui-datepicker-calendar a:contains(13)');
await element.click();
expect(await page.screenshotSelector(selector)).to.matchImage('week_selected');
});
it("should change the date when a date is clicked in month-period mode", async function() {
await page.click('#period_id_month');
await page.waitForTimeout(250); // wait for animation
const element = await page.jQuery('.period-date .ui-datepicker-calendar a:contains(14)');
await element.click();
expect(await page.screenshotSelector(selector)).to.matchImage('month_selected');
});
it("should change the date when a date is clicked in year-period mode", async function() {
await page.click('#period_id_year');
await page.waitForTimeout(250); // wait for animation
const element = await page.jQuery('.period-date .ui-datepicker-calendar a:contains(15)');
await element.click();
expect(await page.screenshotSelector(selector)).to.matchImage('year_selected');
});
it("should display the range picker when the range radio button is clicked", async function() {
await page.click('#period_id_range');
await page.waitForTimeout(250); // wait for animation
expect(await page.screenshotSelector(selector)).to.matchImage('range_picker_displayed');
});
it("should change from & to dates when range picker calendar dates are clicked", async function() {
let element = await page.jQuery('#calendarFrom .ui-datepicker-calendar a:contains(10)');
await element.click();
element = await page.jQuery('#calendarTo .ui-datepicker-calendar a:contains(18)');
await element.click();
await page.hover('#calendarApply');
await page.waitForTimeout(250);
expect(await page.screenshotSelector(selector)).to.matchImage('date_range_selected');
});
it("should enable the comparison dropdown when 'compare' is checked", async function () {
await page.click('#comparePeriodTo + span');
await page.waitForTimeout(250); // wait for animation
expect(await page.screenshotSelector(selector)).to.matchImage('comparison_checked');
});
it('should show range inputs when custom date range compare is selected', async function () {
await page.evaluate(function () {
$('#comparePeriodToDropdown select').val('string:custom').trigger('change');
});
await page.waitForTimeout(250); // wait for animation
expect(await page.screenshotSelector(selector)).to.matchImage('custom_comparison');
});
it('should show an error when invalid date/period combination is given', async function () {
await page.goto('about:blank');
await page.goto(url.replace(/date=[^&#]+&/, 'date=2020-08-08,2020-08-09&'));
await page.waitForTimeout(250);
expect(await page.screenshotSelector(selector + ',#notificationContainer')).to.matchImage('invalid');
});
});
|
