@genesislcap/foundation-header 14.49.1 → 14.50.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
{
|
|
138
138
|
"kind": "variable",
|
|
139
139
|
"name": "NavTemplate",
|
|
140
|
-
"default": "html<Navigation>`\n ${when((x) => !x.hideSideBar, sideNavTemplate)}\n <div class=\"nav-listbox\" data-test-id=\"nav-bar\">\n <div class=\"nav-leftside\">\n ${when(\n (x) => !x.hideSideBar,\n html<Navigation>`\n <div\n class=\"bars-container\"\n @click=${(x) => x.toggleNavVisibility()}\n data-test-id=\"hamburger-menu\"\n >\n <zero-icon name=\"bars\" part=\"nav-visibility-icon\"></zero-icon>\n </div>\n `\n )}\n <div class=\"logo-container\">\n <img src=${(x) => x.logoSrc} class=\"logo\" part=\"logo\"
|
|
140
|
+
"default": "html<Navigation>`\n ${when((x) => !x.hideSideBar, sideNavTemplate)}\n <div class=\"nav-listbox\" data-test-id=\"nav-bar\">\n <div class=\"nav-leftside\">\n ${when(\n (x) => !x.hideSideBar,\n html<Navigation>`\n <div\n class=\"bars-container\"\n @click=${(x) => x.toggleNavVisibility()}\n data-test-id=\"hamburger-menu\"\n >\n <zero-icon name=\"bars\" part=\"nav-visibility-icon\"></zero-icon>\n </div>\n `\n )}\n <div class=\"logo-container\" data-test-id=\"nav-bar-logo\">\n <img src=${(x) => x.logoSrc} class=\"logo\" part=\"logo\" />\n </div>\n <slot name=\"routes\" data-test-id=\"route-buttons\">\n ${(x) => (x.routeButtons ? routeButtonsTemplate : defaultRouteButtonsTemplate)}\n </slot>\n </div>\n <div class=\"nav-rightside\">\n ${when(\n (x) => x.showLuminanceToggleButton,\n html<Navigation>`\n <div class=\"icon-container\" data-test-id=\"luminance-toggle-button\">\n <zero-icon\n @click=${(x) => x.luminanceIconEvent()}\n variant=\"regular\"\n name=\"moon\"\n part=\"luminance-icon\"\n ></zero-icon>\n </div>\n `\n )}\n ${when(\n (x) => x.showMiscToggleButton,\n html<Navigation>`\n <div class=\"icon-container\" data-test-id=\"misc-toggle-button\">\n <zero-icon @click=${(x) => x.miscIconEvent()} name=\"th\" part=\"misc-icon\"></zero-icon>\n </div>\n `\n )}\n ${when(\n (x) => x.showNotificationsButton,\n html<Navigation>`\n <div class=\"icon-container\" data-test-id=\"notifications-button\">\n <zero-icon\n variant=\"regular\"\n @click=${(x) => x.notificationIconEvent()}\n name=\"bell\"\n part=\"notifications-icon\"\n ></zero-icon>\n </div>\n `\n )}\n ${when(\n (x) => x.showConnectionIndicator,\n html<Navigation>`\n <div class=\"connection-indicator-container\" data-test-id=\"connection-indicator\">\n <zero-connection-indicator show-label=\"false\"></zero-connection-indicator>\n </div>\n `\n )}\n <zero-button appearance=\"neutral-grey\" data-test-id=\"user-button\">\n <zero-icon name=\"user-circle\"></zero-icon>\n ${(x) => x.userName}\n </zero-button>\n </div>\n </div>\n`",
|
|
141
141
|
"description": "Template for Navigation class",
|
|
142
142
|
"return": {
|
|
143
143
|
"type": {
|
|
@@ -82,8 +82,8 @@ export const NavTemplate = html `
|
|
|
82
82
|
<zero-icon name="bars" part="nav-visibility-icon"></zero-icon>
|
|
83
83
|
</div>
|
|
84
84
|
`)}
|
|
85
|
-
<div class="logo-container">
|
|
86
|
-
<img src=${(x) => x.logoSrc} class="logo" part="logo"
|
|
85
|
+
<div class="logo-container" data-test-id="nav-bar-logo">
|
|
86
|
+
<img src=${(x) => x.logoSrc} class="logo" part="logo" />
|
|
87
87
|
</div>
|
|
88
88
|
<slot name="routes" data-test-id="route-buttons">
|
|
89
89
|
${(x) => (x.routeButtons ? routeButtonsTemplate : defaultRouteButtonsTemplate)}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/foundation-header",
|
|
3
3
|
"description": "Genesis Foundation Header",
|
|
4
|
-
"version": "14.
|
|
4
|
+
"version": "14.50.1",
|
|
5
5
|
"license": "SEE LICENSE IN license.txt",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
7
7
|
"types": "dist/foundation-header.d.ts",
|
|
@@ -50,14 +50,14 @@
|
|
|
50
50
|
"test:debug": "genx test --debug"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@genesislcap/foundation-testing": "^14.
|
|
54
|
-
"@genesislcap/genx": "^14.
|
|
53
|
+
"@genesislcap/foundation-testing": "^14.50.1",
|
|
54
|
+
"@genesislcap/genx": "^14.50.1"
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
57
|
-
"@genesislcap/foundation-comms": "^14.
|
|
58
|
-
"@genesislcap/foundation-events": "^14.
|
|
59
|
-
"@genesislcap/foundation-utils": "^14.
|
|
60
|
-
"@genesislcap/foundation-zero": "^14.
|
|
57
|
+
"@genesislcap/foundation-comms": "^14.50.1",
|
|
58
|
+
"@genesislcap/foundation-events": "^14.50.1",
|
|
59
|
+
"@genesislcap/foundation-utils": "^14.50.1",
|
|
60
|
+
"@genesislcap/foundation-zero": "^14.50.1",
|
|
61
61
|
"@microsoft/fast-colors": "^5.1.4",
|
|
62
62
|
"@microsoft/fast-components": "^2.21.3",
|
|
63
63
|
"@microsoft/fast-element": "^1.7.0",
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"access": "public"
|
|
74
74
|
},
|
|
75
75
|
"customElements": "dist/custom-elements.json",
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "a7ea11e14665d2b2568393683c747b9967ef213f"
|
|
77
77
|
}
|
|
@@ -2,10 +2,22 @@ import { expect } from '@genesislcap/foundation-testing/e2e';
|
|
|
2
2
|
import { test } from '../fixture';
|
|
3
3
|
|
|
4
4
|
test('Navigation logo is visible and redirects to the home page', async ({ headerPage, page }) => {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
await headerPage.navBarLogo.click();
|
|
9
|
-
const currentUrl = page.url();
|
|
5
|
+
expect(await headerPage.navBarLogo.isVisible()).toBe(true);
|
|
6
|
+
const currentUrl = await page.url();
|
|
10
7
|
expect(currentUrl).toBe('http://localhost:5010/');
|
|
11
8
|
});
|
|
9
|
+
|
|
10
|
+
test('Hamburger menu button is visible', async ({ headerPage }) => {
|
|
11
|
+
expect(await headerPage.hamburgerMenu.isVisible()).toBe(true);
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
test('Hamburger menu button opens side navigation', async ({ headerPage, page }) => {
|
|
15
|
+
await headerPage.hamburgerMenu.click();
|
|
16
|
+
await page.waitForSelector('[data-test-id="side-nav"]', { state: 'visible' });
|
|
17
|
+
const sideNavVisible = await headerPage.sideNav.isVisible();
|
|
18
|
+
expect(sideNavVisible).toBe(true);
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
test('User button is visible', async ({ headerPage }) => {
|
|
22
|
+
expect(await headerPage.userButton.isVisible()).toBe(true);
|
|
23
|
+
});
|
package/test/e2e/pages/header.ts
CHANGED
|
@@ -9,13 +9,13 @@ export class HeaderPage {
|
|
|
9
9
|
config: PackageConfig;
|
|
10
10
|
port: number;
|
|
11
11
|
page: Page;
|
|
12
|
-
|
|
12
|
+
navBar: Locator;
|
|
13
13
|
hamburgerMenu: Locator;
|
|
14
14
|
navBarLogo: Locator;
|
|
15
15
|
routeButtons: Locator;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
sideNav: Locator;
|
|
17
|
+
sideNavLogo: Locator;
|
|
18
|
+
logoutButton: Locator;
|
|
19
19
|
connectionIndicator: Locator;
|
|
20
20
|
userButton: Locator;
|
|
21
21
|
|
|
@@ -26,15 +26,22 @@ export class HeaderPage {
|
|
|
26
26
|
/**
|
|
27
27
|
* Locate fields not guarded by conditionals upfront, and the remaining on-demand
|
|
28
28
|
*/
|
|
29
|
-
|
|
30
|
-
this.
|
|
31
|
-
this.
|
|
32
|
-
this.
|
|
33
|
-
this.
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
this.
|
|
37
|
-
this.
|
|
29
|
+
// Define the locators
|
|
30
|
+
this.navBar = this.page.locator('.nav-listbox[data-test-id="nav-bar"]');
|
|
31
|
+
this.hamburgerMenu = this.navBar.locator('.bars-container[data-test-id="hamburger-menu"]');
|
|
32
|
+
this.navBarLogo = this.navBar.locator('.logo-container[data-test-id="nav-bar-logo"]');
|
|
33
|
+
this.routeButtons = this.navBar.locator('slot[name="routes"][data-test-id="route-buttons"]');
|
|
34
|
+
|
|
35
|
+
// Side navigation locators
|
|
36
|
+
this.sideNav = this.page.locator('zero-flyout[data-test-id="side-nav"]');
|
|
37
|
+
this.sideNavLogo = this.sideNav.locator('img[data-test-id="side-nav-logo"]');
|
|
38
|
+
this.logoutButton = this.sideNav.locator('.logout-container[data-test-id="logout-button"]');
|
|
39
|
+
|
|
40
|
+
// Other locators
|
|
41
|
+
this.connectionIndicator = this.navBar.locator(
|
|
42
|
+
'.connection-indicator-container[data-test-id="connection-indicator"]'
|
|
43
|
+
);
|
|
44
|
+
this.userButton = this.navBar.locator('zero-button[data-test-id="user-button"]');
|
|
38
45
|
}
|
|
39
46
|
|
|
40
47
|
async goto() {
|