Skip to content

Commit 583b0c7

Browse files
ciiayciiay
authored
chore(e2e): add e2e tests for header mount points (#2454)
* chore(e2e): add e2e tests for header mount points Signed-off-by: Yi Cai <[email protected]> * code cleanup Signed-off-by: Yi Cai <[email protected]> * code cleanup Signed-off-by: Yi Cai <[email protected]> * code cleanup Signed-off-by: Yi Cai <[email protected]> * updated config Signed-off-by: Yi Cai <[email protected]> --------- Signed-off-by: Yi Cai <[email protected]>
1 parent 24bb5bd commit 583b0c7

File tree

5 files changed

+133
-0
lines changed

5 files changed

+133
-0
lines changed

‎.ibm/pipelines/resources/config_map/dynamic-global-header-config.yaml

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
dynamicPlugins:
2+
rootDirectory: dynamic-plugins-root
3+
frontend:
4+
red-hat-developer-hub.backstage-plugin-global-header:
5+
mountPoints:
6+
- mountPoint: application/header
7+
importName: GlobalHeader
8+
config:
9+
position: above-main-content
10+
- mountPoint: global.header/component
11+
importName: HeaderIconButton
12+
config:
13+
priority: 110
14+
props:
15+
title: test-logo
16+
icon: <svg id="logo" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 10 192 145"><defs><style>.cls-1{fill:#e00;}</style></defs><path d="M157.77,62.61a14,14,0,0,1,.31,3.42c0,14.88-18.1,17.46-30.61,17.46C78.83,83.49,42.53,53.26,42.53,44a6.43,6.43,0,0,1,.22-1.94l-3.66,9.06a18.45,18.45,0,0,0-1.51,7.33c0,18.11,41,45.48,87.74,45.48,20.69,0,36.43-7.76,36.43-21.77,0-1.08,0-1.94-1.73-10.13Z"/><path class="cls-1" d="M127.47,83.49c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89,8.69,103.76.5,97.51.5,91.69.5,90,8,83.06,8c-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33C22.27,52,.5,55,.5,74.22c0,31.48,74.59,70.28,133.65,70.28,45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78"/></svg>
17+
to: /
18+
- mountPoint: global.header/component
19+
importName: SearchComponent
20+
config:
21+
priority: 100
22+
- mountPoint: global.header/component
23+
importName: Spacer
24+
config:
25+
priority: 99
26+
props:
27+
growFactor: 0
28+
- mountPoint: global.header/component
29+
importName: HeaderIconButton
30+
config:
31+
priority: 90
32+
props:
33+
title: Create...
34+
icon: add
35+
to: create
36+
- mountPoint: global.header/component
37+
importName: SupportButton
38+
config:
39+
priority: 80
40+
- mountPoint: global.header/component
41+
importName: NotificationButton
42+
config:
43+
priority: 70
44+
- mountPoint: global.header/component
45+
importName: Divider
46+
config:
47+
priority: 50
48+
- mountPoint: global.header/component
49+
importName: ProfileDropdown
50+
config:
51+
priority: 10
52+
- mountPoint: global.header/profile
53+
importName: MenuItemLink
54+
config:
55+
priority: 100
56+
props:
57+
title: Settings
58+
link: /settings
59+
icon: manageAccounts
60+
- mountPoint: global.header/profile
61+
importName: LogoutButton
62+
config:
63+
priority: 10

‎.ibm/pipelines/utils.sh

+6
Original file line numberDiff line numberDiff line change
@@ -532,6 +532,12 @@ apply_yaml_files() {
532532
--namespace="${project}" \
533533
--dry-run=client -o yaml | oc apply -f -
534534

535+
# configuration for testing global header and header mount points.
536+
oc create configmap dynamic-global-header-config \
537+
--from-file="dynamic-global-header-config.yaml"="$dir/resources/config_map/dynamic-global-header-config.yaml" \
538+
--namespace="${project}" \
539+
--dry-run=client -o yaml | oc apply -f -
540+
535541
# Create Pipeline run for tekton test case.
536542
oc apply -f "$dir/resources/pipeline-run/hello-world-pipeline.yaml"
537543
oc apply -f "$dir/resources/pipeline-run/hello-world-pipeline-run.yaml"

‎.ibm/pipelines/value_files/values_showcase.yaml

+18
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,22 @@ global:
119119
disabled: false
120120
- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
121121
disabled: false
122+
# Enable an extra header test plugin
123+
- package: '@red-hat-developer-hub/[email protected]'
124+
integrity: 'sha512-Dlay4DUAC3SifSJx4dmKDeD07DITGX9ZZ2SMCgcMMc00GJVKToD3DFuPYZ7lV2C2Ve7gWDufCf5NUmqaUWf6GA=='
125+
pluginConfig:
126+
dynamicPlugins:
127+
frontend:
128+
red-hat-developer-hub.backstage-plugin-global-header-test:
129+
mountPoints:
130+
- mountPoint: application/header
131+
importName: TestHeader
132+
config:
133+
position: above-main-content
134+
- mountPoint: global.header/component
135+
importName: TestButton
136+
config:
137+
priority: 95
122138
# Enable notifications plugins.
123139
- package: ./dynamic-plugins/dist/backstage-plugin-notifications
124140
disabled: false
@@ -213,6 +229,8 @@ upstream:
213229
filename: dynamic-homepage-and-sidebar-config.yaml
214230
- configMapRef: dynamic-global-floating-action-button-config
215231
filename: dynamic-global-floating-action-button-config.yaml
232+
- configMapRef: dynamic-global-header-config
233+
filename: dynamic-global-header-config.yaml
216234
startupProbe:
217235
# This gives enough time upon container startup before the liveness and readiness probes are triggered.
218236
# Giving (120s = initialDelaySeconds + failureThreshold * periodSeconds) to account for the worst case scenario.

‎dynamic-plugins/_utils/src/wrappers.test.ts

+4
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,10 @@ describe("Dynamic Plugin Wrappers", () => {
260260
package:
261261
"@red-hat-developer-hub/[email protected]",
262262
},
263+
{
264+
package:
265+
"@red-hat-developer-hub/[email protected]",
266+
},
263267
];
264268

265269
it("should have a corresponding package", () => {

‎e2e-tests/playwright/e2e/header-mount-points.spec.ts

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { expect, test } from "@playwright/test";
2+
import { UIhelper } from "../utils/ui-helper";
3+
import { Common } from "../utils/common";
4+
5+
test.describe("Header mount points", () => {
6+
let common: Common;
7+
let uiHelper: UIhelper;
8+
9+
test.beforeEach(async ({ page }) => {
10+
common = new Common(page);
11+
uiHelper = new UIhelper(page);
12+
await common.loginAsGuest();
13+
await expect(page.locator("nav[id='global-header']")).toBeVisible();
14+
});
15+
16+
test("Verify that additional logo component in global header is visible", async ({
17+
page,
18+
}) => {
19+
const header = page.locator("nav[id='global-header']");
20+
await expect(header).toBeVisible();
21+
uiHelper.verifyLink({ label: "test-logo" });
22+
});
23+
24+
test("Verify that additional header button component from a custom header plugin in global header is visible", async ({
25+
page,
26+
}) => {
27+
const header = page.locator("nav[id='global-header']");
28+
await expect(header).toBeVisible();
29+
expect(
30+
await header.locator("button", { hasText: "Test Button" }).count(),
31+
).toBe(1);
32+
});
33+
34+
test("Verify that additional header from a custom header plugin besides the default one is visible", async ({
35+
page,
36+
}) => {
37+
const header = page.locator("header", {
38+
hasText: "This is a test header!",
39+
});
40+
await expect(header).toBeVisible();
41+
});
42+
});

0 commit comments

Comments
 (0)