Skip to content

Commit 04abd00

Browse files
chippisonchippison
committed
adding the new test
1 parent 7c6c221 commit 04abd00

File tree

1 file changed

+199
-0
lines changed

1 file changed

+199
-0
lines changed

‎plugins/CoreHome/tests/UI/ChangeTitle_spec.js‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
/*!
2+
* Matomo - free/libre analytics platform
3+
*
4+
* Dashboard screenshot tests.
5+
*
6+
* @link https://matomo.org
7+
* @license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
8+
*/
9+
10+
describe('ChangeTitle', function () {
11+
const generalParams = '?module=CoreHome&action=index&idSite=1&period=day&date=2025-11-11';
12+
let url = generalParams+ "&category=Dashboard_Dashboard&subcategory=1";
13+
14+
/**
15+
* Get the query parameters from a URL string.
16+
* We will use this to create the expected title
17+
* @param urlString
18+
* @returns {{category, subcategory, date, segment}}
19+
*/
20+
function extractFilters(urlString) {
21+
const url = new URL(urlString);
22+
23+
// base query params
24+
const params = url.searchParams;
25+
// Matomo sometimes stores params in the hash (`#?foo=bar`), so merge those too.
26+
if (url.hash && url.hash.startsWith('#?')) {
27+
for (const [key, value] of new URLSearchParams(url.hash.slice(2))) {
28+
params.set(key, value); // prefer hash values when present
29+
}
30+
}
31+
return {
32+
category: params.get('category') || '',
33+
subcategory: params.get('subcategory') || '',
34+
date: params.get('date') || '',
35+
segment: params.get('segment') || ''
36+
};
37+
}
38+
39+
/**
40+
* Adding a mapping of category and subcategory ids to their names.
41+
* We just fake/hard-code the names for expected titles.
42+
* @param categoryId
43+
* @param subCategoryId
44+
* @returns {{categoryName: string, subcategoryName: string}}
45+
*/
46+
function getActiveMenuNames(categoryId, subCategoryId) {
47+
let catNameMap = {
48+
'Dashboard_Dashboard': 'Dashboard',
49+
'General_Visitors': 'Visitors',
50+
'General_Actions': 'Behaviour',
51+
};
52+
let subCatNameMap = {
53+
'1': 'D4',
54+
'General_Overview': 'Overview ',
55+
'Actions_SubmenuPagesEntry' : 'Entry pages',
56+
'UserCountryMap_RealTimeMap': 'Real-time Map',
57+
};
58+
let catName = '' , subCatName = '';
59+
if (categoryId !=='') {
60+
catName = catNameMap[categoryId];
61+
}
62+
if (subCategoryId !=='') {
63+
subCatName = subCatNameMap[subCategoryId];
64+
}
65+
return {categoryName: catName, subcategoryName: subCatName};
66+
}
67+
68+
/**
69+
* Adding a mapping of segment ids to their names.
70+
* We just fake/hard-code the names for expected titles.
71+
* @param segmentId
72+
* @returns {string}
73+
*/
74+
function getSegment(segmentId) {
75+
if (!segmentId || segmentId === '') {
76+
return ' - All visits';
77+
}
78+
const segments = {
79+
'browserCode==FF': '<script>_x(50)</script>',
80+
'continentCode==eur': 'From Europe {{_Vue.h.constructor`_x(51)`()}}',
81+
'actions>=2' : 'Multiple actions',
82+
};
83+
return ` - ${segments[segmentId]}`;
84+
}
85+
async function escapeHtml(page, str) {
86+
return await page.evaluate((raw) => window.piwikHelper.htmlEntities(raw), str);
87+
}
88+
89+
/**
90+
* This will try to create the expected title based on what we get from the URL.
91+
* @param catId
92+
* @param subCatId
93+
* @param date
94+
* @param segment
95+
* @returns {Promise<string>}
96+
*/
97+
async function makeTitle(catId, subCatId, date, segment) {
98+
let titleSuffix = 'Web Analytics Reports - Matomo';
99+
let {categoryName, subcategoryName} = getActiveMenuNames(catId, subCatId);
100+
categoryName = await escapeHtml(page, categoryName ?? '');
101+
subcategoryName = await escapeHtml(page, subcategoryName ?? '');
102+
const siteName = await page.evaluate(() => window.piwik.siteName);
103+
if (categoryName === subcategoryName) {
104+
subcategoryName = null;
105+
}
106+
const catTitle = subcategoryName ? ` - ${categoryName} > ${subcategoryName}` : categoryName;
107+
segment = await getSegment(segment);
108+
segment = await escapeHtml(page, segment);
109+
return `${siteName} - ${date}${catTitle}${segment} - ${titleSuffix}`;
110+
}
111+
112+
it ('should show the default title', async function () {
113+
await page.goto(url);
114+
await page.waitForNetworkIdle();
115+
await page.waitForSelector('#dashboard', {visible: true});
116+
const { category, subcategory, date, segment } = extractFilters(page.url());
117+
let currentTitle = await page.title();
118+
let title = await makeTitle(category, subcategory, date, segment);
119+
expect(currentTitle).to.equal(title);
120+
});
121+
122+
/** We just go through some known categories and subcategories to make sure the title changes accordingly. */
123+
it ('should change the title based on new category and subcategory when clicking pages', async function () {
124+
await page.click('div.reportingMenu ul.navbar li[data-category-id="General_Actions"]');
125+
await page.waitForNetworkIdle();
126+
await page.click('div.reportingMenu ul.navbar li[data-category-id="General_Actions"] ul li:nth-of-type(2)');
127+
await page.waitForNetworkIdle();
128+
let { category, subcategory, date, segment } = extractFilters(page.url());
129+
let title = await makeTitle(category, subcategory, date, segment);
130+
let currentTitle = await page.title();
131+
expect(currentTitle).to.equal(title);
132+
133+
await page.click('div.reportingMenu ul.navbar li[data-category-id="General_Visitors"]');
134+
await page.waitForNetworkIdle();
135+
await page.click('div.reportingMenu ul.navbar li[data-category-id="General_Visitors"] ul li:nth-of-type(4)');
136+
await page.waitForNetworkIdle();
137+
let { category: category2, subcategory: subcategory2, date: date2, segment: segment2 } = extractFilters(page.url());
138+
title = await makeTitle(category2, subcategory2, date2, segment2);
139+
currentTitle = await page.title();
140+
expect(currentTitle).to.equal(title);
141+
});
142+
143+
it ('should change the title if date changes', async function () {
144+
let newdate = '2025-04-15';
145+
await page.goto(`${url}#?date=${newdate}`);
146+
await page.waitForNetworkIdle();
147+
let theUrl = new URL(page.url());
148+
const { category, subcategory, date, segment } = extractFilters(page.url());
149+
let title = await makeTitle(category, subcategory, date, segment);
150+
let currentTitle = await page.title();
151+
expect(currentTitle).to.equal(title);
152+
});
153+
154+
/** We go through the segments and make sure the title changes accordingly. */
155+
it ('should change the title if new segment is chosen', async function () {
156+
await page.click('div.segmentEditorPanel div.segmentListContainer div.segmentationContainer a.title');
157+
await page.waitForNetworkIdle();
158+
let segmentDataDef = 'continentCode==eur';
159+
let me = await page.waitForSelector(`div.segmentationContainer div.segmentList ul li:nth-of-type(3)`);
160+
await me.click();
161+
await page.waitForNetworkIdle();
162+
const { category, subcategory, date, segment } = extractFilters(page.url());
163+
let title = await makeTitle(category, subcategory, date, segment);
164+
let currentTitle = await page.title();
165+
expect(currentTitle).to.equal(title);
166+
167+
await page.click('div.segmentEditorPanel div.segmentListContainer div.segmentationContainer a.title');
168+
await page.waitForNetworkIdle();
169+
segmentDataDef = 'browserCode==FF';
170+
me = await page.waitForSelector(`div.segmentationContainer div.segmentList ul li:nth-of-type(2)`);
171+
await me.click();
172+
await page.waitForNetworkIdle();
173+
let { category: category2, subcategory: subcategory2, date: date2, segment: segment2 } = extractFilters(page.url());
174+
title = await makeTitle(category2, subcategory2, date2, segment2);
175+
currentTitle = await page.title();
176+
expect(currentTitle).to.equal(title);
177+
178+
await page.click('div.segmentEditorPanel div.segmentListContainer div.segmentationContainer a.title');
179+
await page.waitForNetworkIdle();
180+
me = await page.waitForSelector(`div.segmentationContainer div.segmentList ul li:nth-of-type(1)`);
181+
await me.click();
182+
await page.waitForNetworkIdle();
183+
let { category: category3, subcategory: subcategory3, date: date3, segment: segment3 } = extractFilters(page.url());
184+
title = await makeTitle(category3, subcategory3, date3, segment3);
185+
currentTitle = await page.title();
186+
expect(currentTitle).to.equal(title);
187+
188+
await page.click('div.segmentEditorPanel div.segmentListContainer div.segmentationContainer a.title');
189+
await page.waitForNetworkIdle();
190+
me = await page.waitForSelector(`div.segmentationContainer div.segmentList ul li:nth-of-type(4)`);
191+
await me.click();
192+
await page.waitForNetworkIdle();
193+
let { category: category4, subcategory: subcategory4, date: date4, segment: segment4 } = extractFilters(page.url());
194+
title = await makeTitle(category4, subcategory4, date4, segment4);
195+
currentTitle = await page.title();
196+
expect(currentTitle).to.equal(title);
197+
});
198+
199+
});

0 commit comments

Comments
 (0)