diff --git a/packages/widget/.prettierrc.cjs b/packages/widget/.prettierrc.cjs index 9256f376..241edbab 100644 --- a/packages/widget/.prettierrc.cjs +++ b/packages/widget/.prettierrc.cjs @@ -1,5 +1,5 @@ module.exports = { - semi: false, + semi: true, trailingComma: 'all', singleQuote: true, quoteProps: 'as-needed', diff --git a/packages/widget/index.html b/packages/widget/index.html index c1452923..6d886205 100644 --- a/packages/widget/index.html +++ b/packages/widget/index.html @@ -1,15 +1,14 @@ - - - - - - Vite + Lit + TS - - - - - - - + + + + + + Vite + Lit + TS + + + + + + diff --git a/packages/widget/package.json b/packages/widget/package.json index 020356ad..9c284379 100644 --- a/packages/widget/package.json +++ b/packages/widget/package.json @@ -8,7 +8,6 @@ "preview": "vite preview", "install:browsers": "playwright install --with-deps", "test": "playwright test", - "test:server": "vite --port 9005", "test:ui": "playwright test --ui" }, "exports": { @@ -20,7 +19,9 @@ "lit": "^2.7.6" }, "devDependencies": { + "@playwright/experimental-ct-core": "^1.39.0", "@playwright/test": "^1.39.0", + "@sand4rt/experimental-ct-web": "^1.39.0", "@types/d3": "^7.4.2", "@types/d3-force": "^3.0.7", "@types/node": "^18.16.2", diff --git a/packages/widget/playwright.config.ts b/packages/widget/playwright.config.ts index ac397ead..07b6a8ac 100644 --- a/packages/widget/playwright.config.ts +++ b/packages/widget/playwright.config.ts @@ -1,11 +1,63 @@ -import { defineConfig, devices } from '@playwright/test' +import { defineConfig, devices } from '@sand4rt/experimental-ct-web' +import { widgetConfig } from './vite.config' const IS_CI = !!process.env.CI + +// Locally we only run tests in Chromium +const localBrowsers = [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, +] + +// In CI, we run tests in all supported browsers +const all_browsers = [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + + /* Test against mobile viewports. */ + // { + // name: 'Mobile Chrome', + // use: { ...devices['Pixel 5'] }, + // }, + // { + // name: 'Mobile Safari', + // use: { ...devices['iPhone 12'] }, + // }, + + /* Test against branded browsers. */ + // { + // name: 'Microsoft Edge', + // use: { ...devices['Desktop Edge'], channel: 'msedge' }, + // }, + // { + // name: 'Google Chrome', + // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, + // }, +] + /** * See https://playwright.dev/docs/test-configuration. */ export default defineConfig({ testDir: './tests', + /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */ + snapshotDir: './__snapshots__', + /* Maximum time one test can run for. */ + timeout: 20 * 1000, /* Run tests in files in parallel */ fullyParallel: true, /* Fail the build on CI if you accidentally left test.only in the source code. */ @@ -15,58 +67,18 @@ export default defineConfig({ /* Opt out of parallel tests on CI. */ workers: IS_CI ? 1 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ - reporter: [['list'], ['html']], + reporter: IS_CI ? [['list'], ['html']] : 'list', /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { - /* Base URL to use in actions like `await page.goto('/')`. */ - baseURL: 'http://localhost:9005', - /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', - }, - - /* Configure projects for major browsers */ - projects: [ - { - name: 'chromium', - use: { ...devices['Desktop Chrome'] }, - }, - { - name: 'firefox', - use: { ...devices['Desktop Firefox'] }, - }, + /* Port to use for Playwright component endpoint. */ + ctPort: 3100, - { - name: 'webkit', - use: { ...devices['Desktop Safari'] }, - }, - - /* Test against mobile viewports. */ - // { - // name: 'Mobile Chrome', - // use: { ...devices['Pixel 5'] }, - // }, - // { - // name: 'Mobile Safari', - // use: { ...devices['iPhone 12'] }, - // }, - - /* Test against branded browsers. */ - // { - // name: 'Microsoft Edge', - // use: { ...devices['Desktop Edge'], channel: 'msedge' }, - // }, - // { - // name: 'Google Chrome', - // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, - // }, - ], - - // /* Run your local dev server before starting the tests */ - webServer: { - command: 'pnpm run test:server', - url: 'http://localhost:9005', - reuseExistingServer: !IS_CI, + ctViteConfig: widgetConfig, }, + + /* Configure projects for major browsers */ + projects: IS_CI ? all_browsers : localBrowsers, }) diff --git a/packages/widget/playwright/index.html b/packages/widget/playwright/index.html new file mode 100644 index 00000000..000deead --- /dev/null +++ b/packages/widget/playwright/index.html @@ -0,0 +1,12 @@ + + + + + + Testing Page + + +
+ + + diff --git a/packages/widget/playwright/index.ts b/packages/widget/playwright/index.ts new file mode 100644 index 00000000..ac6de14b --- /dev/null +++ b/packages/widget/playwright/index.ts @@ -0,0 +1,2 @@ +// Import styles, initialize component theme here. +// import '../src/common.css'; diff --git a/packages/widget/src/assets/logo.ts b/packages/widget/src/assets/logo.ts new file mode 100644 index 00000000..7b93d71b --- /dev/null +++ b/packages/widget/src/assets/logo.ts @@ -0,0 +1,11 @@ +import { svg } from 'lit' + +export const logo = svg` + +` diff --git a/packages/widget/src/docmaps-widget.ts b/packages/widget/src/docmaps-widget.ts index 12db152a..ecd7e256 100644 --- a/packages/widget/src/docmaps-widget.ts +++ b/packages/widget/src/docmaps-widget.ts @@ -1,6 +1,7 @@ import { html, LitElement } from 'lit' import { customElement, property } from 'lit/decorators.js' import { customCss } from './styles' +import { logo } from './assets/logo' import * as d3 from 'd3' import { SimulationLinkDatum } from 'd3' import { SimulationNodeDatum } from 'd3-force' @@ -8,15 +9,18 @@ import { SimulationNodeDatum } from 'd3-force' type Node = SimulationNodeDatum & { id: string } type Link = SimulationLinkDatum -const CANVAS_WIDTH: number = 500 -const CANVAS_HEIGHT: number = 300 -const CANVAS_ID: string = 'd3-canvas' +const WIDGET_SIZE: number = 500 +const GRAPH_CANVAS_HEIGHT: number = 375 +const GRAPH_CANVAS_ID: string = 'd3-canvas' const NODE_RADIUS: number = 20 @customElement('docmaps-widget') export class DocmapsWidget extends LitElement { + @property({ type: String }) + doi: string = '' + @property({ type: Number }) - count = 3 + count: number = 3 nodes: Node[] = [ { id: 'N1', x: 100, y: 150 }, @@ -59,8 +63,8 @@ export class DocmapsWidget extends LitElement { return } - d3.select(this.shadowRoot.querySelector(`#${CANVAS_ID} svg`)).remove() - const canvas = this.shadowRoot.querySelector(`#${CANVAS_ID}`) + d3.select(this.shadowRoot.querySelector(`#${GRAPH_CANVAS_ID} svg`)).remove() + const canvas = this.shadowRoot.querySelector(`#${GRAPH_CANVAS_ID}`) if (!canvas) { throw new Error('SVG element not found') } @@ -68,8 +72,8 @@ export class DocmapsWidget extends LitElement { const svg = d3 .select(canvas) .append('svg') - .attr('width', CANVAS_WIDTH) - .attr('height', CANVAS_HEIGHT) + .attr('width', WIDGET_SIZE) + .attr('height', GRAPH_CANVAS_HEIGHT) // Make copy of Nodes and Links because d3 mutates whatever Nodes/Links we pass it const displayNodes: Node[] = JSON.parse(JSON.stringify(this.nodes)) @@ -89,8 +93,8 @@ export class DocmapsWidget extends LitElement { .force( 'center', d3.forceCenter( - Math.floor(CANVAS_WIDTH / 2), - Math.floor(CANVAS_HEIGHT / 2), + Math.floor(WIDGET_SIZE / 2), + Math.floor(GRAPH_CANVAS_HEIGHT / 2), ), ) @@ -146,12 +150,18 @@ export class DocmapsWidget extends LitElement { render() { return html` -

Docmaps

- -
+
+ ${logo} + DOCMAP
+

${this.doi}

+ +
+