Dashboard: Add tests for create and using custom dashboard (#20253)

* add tests for custom dashboard

* update test dashboard using helper

* remove extensionRegistry for playwright config

* update helper version for dashboard

* Update tests/Umbraco.Tests.AcceptanceTest/tests/ExtensionRegistry/CustomDashboard.spec.ts

Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com>

* fix format code

---------

Co-authored-by: Lan Nguyen Thuy <lnt@umbraco.dk>
Co-authored-by: Nhu Dinh <150406148+nhudinh0309@users.noreply.github.com>
This commit is contained in:
NguyenThuyLan
2025-10-15 13:33:41 +07:00
committed by GitHub
parent e22b459d9c
commit 1ab13a970b
4 changed files with 86 additions and 0 deletions

View File

@@ -0,0 +1,25 @@
{
"$schema": "../../umbraco-package-schema.json",
"name": "My.WelcomePackage",
"version": "0.1.0",
"extensions": [
{
"type": "dashboard",
"alias": "my.welcome.dashboard",
"name": "My Welcome Dashboard",
"element": "/App_Plugins/welcome-dashboard/welcome-dashboard.js",
"elementName": "my-welcome-dashboard",
"weight": 30,
"meta": {
"label": "Welcome Dashboard",
"pathname": "welcome-dashboard"
},
"conditions": [
{
"alias": "Umb.Condition.SectionAlias",
"match": "Umb.Section.Content"
}
]
}
]
}

View File

@@ -0,0 +1,38 @@
import { css as n, customElement as c, html as d } from "@umbraco-cms/backoffice/external/lit";
import { UmbLitElement as p } from "@umbraco-cms/backoffice/lit-element";
var i = Object.getOwnPropertyDescriptor, h = (r, s, l, a) => {
for (var e = a > 1 ? void 0 : a ? i(s, l) : s, o = r.length - 1, m; o >= 0; o--)
(m = r[o]) && (e = m(e) || e);
return e;
};
let t = class extends p {
render() {
return d`
<h1>Welcome Dashboard</h1>
<div>
<p>
This is the Backoffice. From here, you can modify the content,
media, and settings of your website.
</p>
<p>© Sample Company 20XX</p>
</div>
`;
}
};
t.styles = [
n`
:host {
display: block;
padding: 24px;
}
`
];
t = h([
c("my-welcome-dashboard")
], t);
const b = t;
export {
t as MyWelcomeDashboardElement,
b as default
};
//# sourceMappingURL=welcome-dashboard.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"welcome-dashboard.js","sources":["../../welcome-dashboard/src/welcome-dashboard.element.ts"],"sourcesContent":["import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';\r\nimport { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';\r\n\r\n@customElement('my-welcome-dashboard')\r\nexport class MyWelcomeDashboardElement extends UmbLitElement {\r\n\r\n override render() {\r\n return html`\r\n <h1>Welcome Dashboard</h1>\r\n <div>\r\n <p>\r\n This is the Backoffice. From here, you can modify the content,\r\n media, and settings of your website.\r\n </p>\r\n <p>© Sample Company 20XX</p>\r\n </div>\r\n `;\r\n }\r\n\r\n static override readonly styles = [\r\n css`\r\n :host {\r\n display: block;\r\n padding: 24px;\r\n }\r\n `,\r\n ];\r\n}\r\n\r\nexport default MyWelcomeDashboardElement;\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n 'my-welcome-dashboard': MyWelcomeDashboardElement;\r\n }\r\n}"],"names":["MyWelcomeDashboardElement","UmbLitElement","html","css","__decorateClass","customElement","MyWelcomeDashboardElement$1"],"mappings":";;;;;;;AAIO,IAAMA,IAAN,cAAwCC,EAAc;AAAA,EAEhD,SAAS;AACd,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUX;AAUJ;AAvBaF,EAegB,SAAS;AAAA,EAC9BG;AAAA;AAAA;AAAA;AAAA;AAAA;AAMJ;AAtBSH,IAANI,EAAA;AAAA,EADNC,EAAc,sBAAsB;AAAA,GACxBL,CAAA;AAyBb,MAAAM,IAAeN;"}

View File

@@ -0,0 +1,22 @@
import {ConstantHelper, test} from '@umbraco/playwright-testhelpers';
// Dashboard
const dashboardName = 'Welcome Dashboard';
test('can see the custom dashboard in content section', async ({umbracoUi}) => {
// Act
await umbracoUi.goToBackOffice();
await umbracoUi.content.goToSection(ConstantHelper.sections.content);
// Assert
await umbracoUi.content.isDashboardTabWithNameVisible(dashboardName, true);
});
test('can not see the custom dashboard in media section', async ({umbracoUi}) => {
// Act
await umbracoUi.goToBackOffice();
await umbracoUi.content.goToSection(ConstantHelper.sections.media);
// Assert
await umbracoUi.content.isDashboardTabWithNameVisible(dashboardName, false);
});