feat(config-cli): New config-cli package includes dump basemaps screenshots command line tool

packages/config-cli/README.md

@@ -0,0 +1,18 @@
+# Basemaps Config CLI
+
+This package is to control the configuration in the LINZ basemaps product.
+
+## Usage -- Screenshots
+
+Dump the screenshots from basemaps production
+
+```bash
+./bmc.js screenshot
+```
+
+Dump the screenshots from different host and tag
+
+```bash
+./bmc.js screenshot --host HOST --tag PR-TAG
+
+```

packages/config-cli/bmc.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+Error.stackTraceLimit = 100;
+import './build/cli/screenshot/index.js';

packages/config-cli/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@basemaps/config-cli",
+  "version": "6.27.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/linz/basemaps.git",
+    "directory": "packages/config"
+  },
+  "author": {
+    "name": "Land Information New Zealand",
+    "url": "https://linz.govt.nz",
+    "organization": true
+  },
+  "type": "module",
+  "engines": {
+    "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+  },
+  "license": "MIT",
+  "main": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "scripts": {
+    "test": "ospec --globs 'build/**/*.test.js'"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "build/"
+  ],
+  "dependencies": {
+    "@basemaps/geo": "^6.26.0",
+    "@basemaps/shared": "^6.27.0",
+    "@rushstack/ts-command-line": "^4.3.13",
+    "playwright": "^1.22.0"
+  }
+}

packages/config-cli/src/cli/screenshot/index.ts

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+import { BaseCommandLine } from '@basemaps/shared/build/cli/base.js';
+import 'source-map-support/register.js';
+import { CommandScreenShot } from './screenshot.js';
+
+export class BasemapsConfig extends BaseCommandLine {
+  constructor() {
+    super({
+      toolFilename: 'screenshot',
+      toolDescription: 'Dump screenshots from Basemaps',
+    });
+    this.addAction(new CommandScreenShot());
+  }
+}
+
+new BasemapsConfig().run();

packages/config-cli/src/cli/screenshot/screenshot.ts

@@ -0,0 +1,143 @@
+import { Config, fsa, LogConfig, LogType } from '@basemaps/shared';
+import { mkdir } from 'fs/promises';
+import { Browser, chromium } from 'playwright';
+import { CommandLineAction, CommandLineFlagParameter, CommandLineStringParameter } from '@rushstack/ts-command-line';
+
+interface Location {
+  lat: number;
+  lng: number;
+  z: number;
+}
+interface TileTest {
+  name: string;
+  tileMatrix: string;
+  location: Location;
+  tileSet: string;
+  style?: string;
+}
+
+export class CommandScreenShot extends CommandLineAction {
+  private host: CommandLineStringParameter;
+  private tag: CommandLineStringParameter;
+  private tiles: CommandLineStringParameter;
+  private verbose?: CommandLineFlagParameter;
+
+  public constructor() {
+    super({
+      actionName: 'screenshot',
+      summary: 'dump screenshots of from LINZ Basemaps',
+      documentation: 'Dump screenshots with selected tile sets',
+    });
+  }
+
+  protected onDefineParameters(): void {
+    this.host = this.defineStringParameter({
+      argumentName: 'HOST',
+      parameterLongName: '--host',
+      description: 'Host to use',
+      defaultValue: 'basemaps.linz.govt.nz',
+    });
+
+    this.tag = this.defineStringParameter({
+      argumentName: 'TAG',
+      parameterShortName: '-t',
+      parameterLongName: '--tag',
+      description: 'PR tag(PR-number) or "production"',
+      defaultValue: 'production',
+    });
+
+    this.tiles = this.defineStringParameter({
+      argumentName: 'TILES',
+      parameterLongName: '--tiles',
+      description: 'JSON file path for the test tiles',
+      defaultValue: './test-tiles/default.test.tiles.json',
+    });
+
+    this.verbose = this.defineFlagParameter({
+      parameterLongName: '--verbose',
+      description: 'Verbose logging',
+      required: false,
+    });
+  }
+
+  async onExecute(): Promise<void> {
+    const logger = LogConfig.get();
+    const verbose = this.verbose?.value ?? false;
+    if (verbose) logger.level = 'trace';
+
+    logger.info('Page:Launch');
+    const chrome = await chromium.launch();
+
+    try {
+      await this.takeScreenshots(chrome, logger);
+    } finally {
+      await chrome.close();
+    }
+  }
+
+  async takeScreenshots(chrome: Browser, logger: LogType): Promise<void> {
+    const host = this.host.value ?? this.host.defaultValue;
+    const tag = this.tag.value ?? this.tag.defaultValue;
+    const tiles = this.tiles.value ?? this.tiles.defaultValue;
+    if (host == null || tag == null || tiles == null)
+      throw new Error('Missing essential parameter to run the process.');
+
+    const TestTiles = await fsa.readJson<TileTest[]>(tiles);
+    for (const test of TestTiles) {
+      const page = await chrome.newPage();
+
+      const tileSetId = await this.getTileSetId(test.tileSet, tag);
+      const styleId = await this.getStyleId(test.style, tag);
+
+      const searchParam = new URLSearchParams();
+      searchParam.set('p', test.tileMatrix);
+      searchParam.set('i', tileSetId);
+      if (styleId) searchParam.set('s', styleId);
+
+      const loc = `@${test.location.lat},${test.location.lng},z${test.location.z}`;
+      const fileName = '.artifacts/visual-snapshots/' + host + '_' + test.name + '.png';
+
+      await mkdir(`.artifacts/visual-snapshots/`, { recursive: true });
+
+      const url = `https://${host}/?${searchParam.toString()}&debug=true&debug.screenshot=true#${loc}`;
+
+      logger.info({ url, expected: fileName }, 'Page:Load');
+
+      await page.goto(url);
+
+      try {
+        await page.waitForSelector('div#map-loaded', { state: 'attached' });
+        await page.waitForTimeout(1000);
+        await page.waitForLoadState('networkidle');
+        await page.screenshot({ path: fileName });
+      } catch (e) {
+        await page.screenshot({ path: fileName });
+        throw e;
+      }
+      logger.info({ url, expected: fileName }, 'Page:Load:Done');
+      await page.close();
+    }
+  }
+
+  async getTileSetId(tileSetId: string, tag: string): Promise<string> {
+    if (tag === 'production') return tileSetId;
+
+    const tileSetTagId = `${tileSetId}@${tag}`;
+    const dbId = Config.TileSet.id(tileSetTagId);
+    const tileSet = await Config.TileSet.get(dbId);
+
+    if (tileSet) return tileSetTagId;
+    return tileSetId;
+  }
+
+  async getStyleId(styleId: string | undefined, tag: string): Promise<string> {
+    if (styleId == null) return '';
+    if (tag === 'production') return styleId ?? '';
+
+    const styleIdTagId = `${styleId}@${tag}`;
+    const dbId = Config.Style.id(styleIdTagId);
+    const style = await Config.Style.get(dbId);
+    if (style) return styleIdTagId;
+    return styleId;
+  }
+}

packages/config-cli/test-tiles/default.test.tiles.json

@@ -0,0 +1,42 @@
+[
+  {
+    "name": "health-3857-z5",
+    "tileMatrix": "WebMercatorQuad",
+    "location": { "lat": -41.8899962, "lng": 174.0492437, "z": 5 },
+    "tileSet": "health"
+  },
+  {
+    "name": "health-2193-z5",
+    "tileMatrix": "NZTM2000Quad",
+    "location": { "lat": -41.8899962, "lng": 174.0492437, "z": 1 },
+    "tileSet": "aerial"
+  },
+  {
+    "name": "topographic-3857-z5",
+    "tileMatrix": "WebMercatorQuad",
+    "location": { "lat": -41.8899962, "lng": 174.0492437, "z": 5 },
+    "tileSet": "topographic",
+    "style": "topographic"
+  },
+  {
+    "name": "topolite-3857-z5",
+    "tileMatrix": "WebMercatorQuad",
+    "location": { "lat": -41.8899962, "lng": 174.0492437, "z": 5 },
+    "tileSet": "topographic",
+    "style": "topolite"
+  },
+  {
+    "name": "topographic-3857-z14",
+    "tileMatrix": "WebMercatorQuad",
+    "location": { "lat": -41.8899962, "lng": 174.0492437, "z": 14 },
+    "tileSet": "topographic",
+    "style": "topographic"
+  },
+  {
+    "name": "topolite-3857-z17",
+    "tileMatrix": "WebMercatorQuad",
+    "location": { "lat": -43.8063936, "lng": 172.9679876, "z": 17 },
+    "tileSet": "topographic",
+    "style": "topolite"
+  }
+]

packages/config-cli/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM"],
+    "module": "ES2020",
+    "moduleResolution": "node",
+    "rootDir": "./src",
+    "outDir": "./build"
+  },
+  "include": ["src/**/*"],
+  "references": [{ "path": "../__tests__" }]
+}

tsconfig.json

@@ -12,6 +12,7 @@
     { "path": "./packages/bathymetry" },
     { "path": "./packages/_infra" },
     { "path": "./packages/config" },
+    { "path": "./packages/config-cli" },
     { "path": "./packages/shared" },
     { "path": "./packages/lambda-cog" },
     { "path": "./packages/lambda-tiler" },

yarn.lock

@@ -5996,6 +5996,18 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+playwright-core@1.22.2:
+  version "1.22.2"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.22.2.tgz#ed2963d79d71c2a18d5a6fd25b60b9f0a344661a"
+  integrity sha512-w/hc/Ld0RM4pmsNeE6aL/fPNWw8BWit2tg+TfqJ3+p59c6s3B6C8mXvXrIPmfQEobkcFDc+4KirNzOQ+uBSP1Q==
+
+playwright@^1.22.0:
+  version "1.22.2"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.22.2.tgz#353a7c29f89ca9600edc7a9a30aed790823c797d"
+  integrity sha512-hUTpg7LytIl3/O4t0AQJS1V6hWsaSY5uZ7w1oCC8r3a1AQN5d6otIdCkiB3cbzgQkcMaRxisinjMFMVqZkybdQ==
+  dependencies:
+    playwright-core "1.22.2"
+
 pngjs@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-4.0.1.tgz#f803869bb2fc1bfe1bf99aa4ec21c108117cfdbe"