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
|
/*!
* 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('label[for=period_id_week]');
await page.waitFor(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('label[for=period_id_month]');
await page.waitFor(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('label[for=period_id_year]');
await page.waitFor(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('label[for=period_id_range]');
await page.waitFor(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');
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('label[for=comparePeriodTo]');
await page.waitFor(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.waitFor(250); // wait for animation
expect(await page.screenshotSelector(selector)).to.matchImage('custom_comparison');
});
});
|
