@genesislcap/foundation-header 14.2.0 → 14.3.0

package/dist/dts/main/main.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AA+CzC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BAwDvB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAIpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,UAAU,CAEjD,CAAC"}
+{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAiEzC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BA8DvB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAIpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,UAAU,CAEjD,CAAC"}

package/dist/esm/main/main.template.js

@@ -4,21 +4,38 @@ const sideNavTemplate = html `
     position="left"
     ?closed=${(x) => !x.sideNavOpen}
     @closed=${(x) => x.toggleNavVisibility()}
+    data-test-id="side-nav"
   >
-    <img slot="title" src=${(x) => x.logoSrc} class="logo" part="side-nav-logo" />
+    <img
+      slot="title"
+      src=${(x) => x.logoSrc}
+      class="logo"
+      part="side-nav-logo"
+      data-test-id="side-nav-logo"
+    />
     <slot name="menu-contents"></slot>
-    <div slot="footer" class="logout-container" @click=${(x) => x.logout()}>
+    <div
+      slot="footer"
+      class="logout-container"
+      data-test-id="logout-button"
+      @click=${(x) => x.logout()}
+    >
       <zero-icon name="sign-out-alt"></zero-icon>
       Sign out
     </div>
   </zero-flyout>
 `;
 const defaultRouteButtonsTemplate = html `
-  <zero-button appearance="neutral-grey" value="1" @click=${(x) => x.navigateTo('protected')}>
+  <zero-button
+    appearance="neutral-grey"
+    value="1"
+    @click=${(x) => x.navigateTo('protected')}
+    data-test-id="home-button"
+  >
     <zero-icon name="home"></zero-icon>
     Home
   </zero-button>
-  <fast-option value="2" @click=${(x) => x.navigateTo('not-found')}>
+  <fast-option value="2" @click=${(x) => x.navigateTo('not-found')} data-test-id="profiles-button">
     <zero-icon name="users"></zero-icon>
     Profiles
   </fast-option>
@@ -31,6 +48,7 @@ const routeButtonsTemplate = html `
           slot="routes"
           value="${(x) => x.index}"
           @click=${(x, c) => c.parent.navigateTo(x.path)}
+          data-test-id="${(x) => x.testId}"
         >
           <zero-icon variant="${(x) => x.variant}" name="${(x) => x.icon}"></zero-icon>
           ${(x) => x.title}
@@ -53,21 +71,27 @@ const routeButtonsTemplate = html `
  */
 export const NavTemplate = html `
   ${when((x) => !x.hideSideBar, sideNavTemplate)}
-  <div class="nav-listbox">
+  <div class="nav-listbox" data-test-id="nav-bar">
     <div class="nav-leftside">
       ${when((x) => !x.hideSideBar, html `
-          <div class="bars-container" @click=${(x) => x.toggleNavVisibility()}>
+          <div
+            class="bars-container"
+            @click=${(x) => x.toggleNavVisibility()}
+            data-test-id="hamburger-menu"
+          >
             <zero-icon name="bars"></zero-icon>
           </div>
         `)}
-      <div class="logo-container"><img src=${(x) => x.logoSrc} class="logo" part="logo" /></div>
-      <slot name="routes">
+      <div class="logo-container">
+        <img src=${(x) => x.logoSrc} class="logo" part="logo" data-test-id="nav-bar-logo" />
+      </div>
+      <slot name="routes" data-test-id="route-buttons">
         ${(x) => (x.routeButtons ? routeButtonsTemplate : defaultRouteButtonsTemplate)}
       </slot>
     </div>
     <div class="nav-rightside">
       ${when((x) => x.showLuminanceToggleButton, html `
-          <div class="icon-container">
+          <div class="icon-container" data-test-id="luminance-toggle-button">
             <zero-icon
               @click=${(x) => x.luminanceIconEvent()}
               variant="regular"
@@ -76,12 +100,12 @@ export const NavTemplate = html `
           </div>
         `)}
       ${when((x) => x.showMiscToggleButton, html `
-          <div class="icon-container">
+          <div class="icon-container" data-test-id="misc-toggle-button">
             <zero-icon @click=${(x) => x.miscIconEvent()} name="th"></zero-icon>
           </div>
         `)}
       ${when((x) => x.showNotificationsButton, html `
-          <div class="icon-container">
+          <div class="icon-container" data-test-id="notifications-button">
             <zero-icon
               variant="regular"
               @click=${(x) => x.notificationIconEvent()}
@@ -89,7 +113,7 @@ export const NavTemplate = html `
             ></zero-icon>
           </div>
         `)}
-      <zero-button appearance="neutral-grey">
+      <zero-button appearance="neutral-grey" data-test-id="user-button">
         <zero-icon name="user-circle"></zero-icon>
         ${(x) => x.userName}
       </zero-button>

package/jsdom.setup.ts

@@ -0,0 +1 @@
+export * from '@genesislcap/foundation-testing/jsdom';

package/package.json

@@ -1,13 +1,23 @@
 {
   "name": "@genesislcap/foundation-header",
   "description": "Genesis Foundation Header",
-  "version": "14.2.0",
+  "version": "14.3.0",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
-  "types": "dist/dts/index.d.ts",
+  "types": "dist/foundation-header.d.ts",
   "config": {
     "PORT": 5010
   },
+  "exports": {
+    ".": {
+      "types": "./dist/foundation-header.d.ts",
+      "default": "./dist/esm/index.js"
+    },
+    "./e2e": {
+      "default": "./test/e2e/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "api": "npm run api:extract && npm run api:document",
     "api:extract": "api-extractor run",
@@ -20,17 +30,30 @@
     "clean": "npm run clean:dist",
     "clean:dist": "node ../../../../build/clean dist tsconfig.build.tsbuildinfo",
     "copy-files": "copyfiles -u 1 src/**/*.{css,scss,ttf,png,svg} ./dist/esm",
-    "dev": "npm run dev:webpack",
-    "dev:webpack": "cross-env NODE_ENV=development webpack serve --open",
+    "dev": "npm run dev:webpack -- --open",
+    "dev:no-open": "npm run dev:webpack -- --no-open",
+    "dev:webpack": "cross-env NODE_ENV=development webpack serve",
     "dev:webpack:https": "npm run dev:webpack -- --https",
     "serve": "serve dist -p $npm_package_config_PORT",
-    "test": "echo \"Error: no test specified\""
+    "test_": "npm run test:unit && npm run test:e2e",
+    "test:coverage": "c8 --include=src npm run test:unit",
+    "test:coverage:report": "npm run test:coverage && c8 report --reporter=text-lcov > coverage.lcov",
+    "test:coverage:report:nyc": "npm run test:unit:browser -- --cov && npx nyc report --reporter=html",
+    "test:e2e": "npx playwright test --config=./playwright.config.ts",
+    "test:e2e:debug": "npm run test:e2e -- --debug",
+    "test:e2e:ui": "npx playwright test --ui --config=./playwright.config.ts",
+    "test:unit": "npm run test:unit:node",
+    "test:unit:browser": "playwright-test \"./**/*.test.ts\" --runner uvu",
+    "test:unit:browser:watch": "npm run test:unit:browser -- -w -d",
+    "test:unit:node": "npm run test:unit:node:src && npm run test:unit:node:test",
+    "test:unit:node:src": "uvu -r tsm -r esm -r ./jsdom.setup.ts ./src \".*.test.ts\"",
+    "test:unit:node:test": "uvu -r tsm -r esm -r ./jsdom.setup.ts ./test/unit \".*.test.ts\"",
+    "test:unit:watch": "watchlist src test -- npm run test:unit"
   },
   "devDependencies": {
+    "@genesislcap/foundation-testing": "^14.3.0",
     "@microsoft/api-documenter": "^7.19.13",
     "@microsoft/api-extractor": "^7.31.1",
-    "@module-federation/dashboard-plugin": "2.3.0",
-    "@pixability-ui/federated-types": "^0.2.0",
     "@playwright/test": "^1.18.1",
     "c8": "^7.11.0",
     "camel-case": "^4.1.2",
@@ -41,9 +64,12 @@
     "cssnano": "^5.0.17",
     "esm": "^3.2.25",
     "file-loader": "^6.2.0",
+    "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.3.1",
     "jsdom": "^19.0.0",
+    "lighthouse": "^9.6.8",
     "mini-css-extract-plugin": "^2.5.3",
+    "playwright-lighthouse": "^2.2.2",
     "playwright-test": "^7.2.1",
     "portfinder-sync": "^0.0.2",
     "postcss": "^8.2.8",
@@ -66,10 +92,10 @@
     "webpack-merge": "^5.7.3"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "^14.2.0",
-    "@genesislcap/foundation-events": "^14.2.0",
-    "@genesislcap/foundation-utils": "^14.2.0",
-    "@genesislcap/foundation-zero": "^14.2.0",
+    "@genesislcap/foundation-comms": "^14.3.0",
+    "@genesislcap/foundation-events": "^14.3.0",
+    "@genesislcap/foundation-utils": "^14.3.0",
+    "@genesislcap/foundation-zero": "^14.3.0",
     "@microsoft/fast-colors": "^5.1.4",
     "@microsoft/fast-components": "^2.21.3",
     "@microsoft/fast-element": "^1.7.0",
@@ -80,5 +106,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "183fc977ed1c952f92922c687c1a033095341bff"
+  "gitHead": "341eee9dfca9893a65c09af256a4f01358c6cb6d"
 }

package/playwright.config.ts

@@ -0,0 +1,50 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+/**
+ * If this was an app level config, we might import each fixture from the mfs we're using to create a union
+ */
+import type { TestFixture as HeaderFixture } from './test/e2e';
+
+type Fixtures = HeaderFixture & {}; // < and several others if this was app level
+
+const config: PlaywrightTestConfig<Fixtures> = {
+  testMatch: '**/*.e2e.ts',
+  globalSetup: '@genesislcap/foundation-testing/playwright', // returns teardown
+  /**
+   * We might create a discreet project per mf, or an entire config per mf, will know soon enough...
+   */
+  projects: [
+    {
+      name: 'Chrome Stable',
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome',
+        ignoreHTTPSErrors: true,
+        /**
+         * We should be able to use these 'use' blocks at the App level to provide config data to our micro frontends.
+         * This might include what backend to run against, what username password combo to use etc.
+         *
+         * config: AppLevelPkgConfig;
+         */
+        // config: {
+        //   API_HOST: 'wss://dev-foundation1/gwf/',
+        //   DEFAULT_USER: 'Derek',
+        //   DEFAULT_PASSWORD: 'Paul',
+        //   PORT: 5030,
+        // },
+      },
+    },
+  ],
+  webServer: {
+    command: 'npm run dev:no-open',
+    url: 'http://localhost:5010/',
+    timeout: 120000,
+    reuseExistingServer: !process.env.CI,
+  },
+  use: {
+    baseURL: 'http://localhost:5010/',
+  },
+  // reporter: [['html', { open: 'never' }]],
+};
+
+export default config;

package/test/README.md

@@ -0,0 +1,3 @@
+# Test
+
+See [@genesislcap/foundation-testing](../foundation-testing/README.md) for more information.

package/test/e2e/fixture.ts

@@ -0,0 +1,20 @@
+import {
+  test as base,
+  TestFixture as BaseTestFixture,
+  WorkerFixture as BaseWorkerFixture,
+} from '@genesislcap/foundation-testing/e2e';
+import { HeaderPage } from './pages';
+
+export type TestFixture = BaseTestFixture & {
+  headerPage: HeaderPage;
+};
+
+export type WorkerFixture = BaseWorkerFixture & {};
+
+export const test = base.extend<TestFixture, WorkerFixture>({
+  headerPage: async ({ config, port, page }, use) => {
+    const headerPage = new HeaderPage(config, port, page);
+    await headerPage.goto();
+    await use(headerPage);
+  },
+});

package/test/e2e/flows/001-foundation-header.e2e.ts

@@ -0,0 +1,11 @@
+import { expect } from '@playwright/test';
+import { test } from '../fixture';
+
+test('Navigation logo is visible and redirects to the home page', async ({ headerPage, page }) => {
+  const logoVisible = await headerPage.navBarLogo.isVisible();
+  expect(logoVisible).toBe(true);
+
+  await headerPage.navBarLogo.click();
+  const currentUrl = page.url();
+  expect(currentUrl).toBe('http://localhost:5010/');
+});

package/test/e2e/index.ts

@@ -0,0 +1,2 @@
+export * from './fixture';
+export * from './pages';

package/test/e2e/pages/header.ts

@@ -0,0 +1,46 @@
+import { PackageConfig, defaultAuditThresholds } from '@genesislcap/foundation-testing/e2e';
+import type { Locator, Page } from '@playwright/test';
+import { playAudit } from 'playwright-lighthouse';
+
+export class HeaderPage {
+  config: PackageConfig;
+  port: number;
+  page: Page;
+  sideNav: Locator;
+  hamburgerMenu: Locator;
+  navBarLogo: Locator;
+  routeButtons: Locator;
+  luminanceToggleButton: Locator;
+  miscToggleButton: Locator;
+  notificationsButton: Locator;
+  userButton: Locator;
+
+  constructor(config: PackageConfig, port: number, page: Page) {
+    this.config = config;
+    this.port = port;
+    this.page = page;
+    /**
+     * Locate fields not guarded by conditionals upfront, and the remaining on-demand
+     */
+    this.sideNav = this.page.locator('data-test-id=side-nav');
+    this.hamburgerMenu = this.page.locator('data-test-id=hamburger-menu');
+    this.navBarLogo = this.page.locator('data-test-id=nav-bar-logo');
+    this.routeButtons = this.page.locator('data-test-id=route-buttons');
+    this.luminanceToggleButton = this.page.locator('data-test-id=luminance-toggle-button');
+    this.miscToggleButton = this.page.locator('data-test-id=misc-toggle-button');
+    this.notificationsButton = this.page.locator('data-test-id=notifications-button');
+    this.userButton = this.page.locator('data-test-id=user-button');
+  }
+
+  async goto() {
+    await this.page.goto('/');
+  }
+
+  async audit() {
+    await playAudit({
+      page: this.page,
+      port: this.port,
+      thresholds: defaultAuditThresholds, // TODO: this should be coming from foundation-testing/src/playwright/test.ts base config
+    });
+  }
+}

package/test/e2e/pages/index.ts

@@ -0,0 +1 @@
+export * from './header';

package/tsm.js

@@ -0,0 +1,3 @@
+const config = require('@genesislcap/foundation-testing/tsm');
+
+module.exports = config;