Skip to content

Commit

Permalink
chore: use jsdom in ssr
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaoiver
xiaoiver committed Nov 10, 2023
1 parent 9a10cdf commit d89b31e
Show file tree
Hide file tree
Showing 543 changed files with 173,187 additions and 760 deletions.
22 changes: 11 additions & 11 deletions .github/workflows/build.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,17 @@ jobs:
run: |
npm install
npm run ci
- name: Upload Snapshot
if: ${{ failure() }}
env:
REF_NAME: ${{ github.ref_name }}
GITHUB_WORKSPACE: ${{ github.workspace }}
OSS_REGION: ${{ secrets.OSS_REGION }}
OSS_ACCESS_KEY_ID: ${{ secrets.OSS_ACCESS_KEY_ID }}
OSS_ACCESS_KEY_SECRET: ${{ secrets.OSS_ACCESS_KEY_SECRET }}
OSS_BUCKET: ${{ secrets.OSS_BUCKET }}
run: |
npm run upload
- name: Upload blob report to GitHub Actions Artifacts
if: always()
uses: actions/upload-artifact@v3
with:
name: snapshots
path: |
__tests__/integration/snapshots/**/*-actual.svg
__tests__/integration/snapshots/**/*-actual.html
retention-days: 1

- name: coverall
if: ${{ success() }}
uses: coverallsapp/github-action@master
Expand Down
5 changes: 4 additions & 1 deletion __tests__/bugs/issue-legend.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ import { Category } from '../../src/ui/legend/category';
import { createCanvas } from '../utils/render';

const canvas = createCanvas(800, 'svg', true);
describe('Legend', () => {
describe.skip('Legend', () => {
it('legend `autoWrap` without specify `maxRows`', () => {
const legend = canvas.appendChild(
new Category({
style: {
y: 5,
// @ts-ignore
items: [
{ id: 'Wholesale and Retail Trade', name: 'Wholesale and Retail Trade', color: '#5B8FF9' },
{ id: 'Manufacturing', name: 'Manufacturing', color: '#CDDDFD' },
Expand Down Expand Up @@ -37,6 +38,7 @@ describe('Legend', () => {
expect(pageInfo).toBeDefined();
expect(pageInfo.style.text).not.toBe('1 / 1');

// @ts-ignore
legend.update({ maxWidth: 565, maxItemWidth: 120, itemWidth: 120, autoWrap: true, maxRows: 3 });
const items = legend.querySelectorAll('.legend-item') as any[];
expect(items[1].getLocalBounds().min[0]).toBeCloseTo(items[5].getLocalBounds().min[0]);
Expand All @@ -50,6 +52,7 @@ describe('Legend', () => {
style: {
x: 0,
y: 5,
// @ts-ignore
items: [
{ name: '事例一', color: '#4982f8' },
{ name: '事例二', color: '#41d59c' },
Expand Down
84 changes: 25 additions & 59 deletions __tests__/integration/canvas.ts
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,35 @@
import * as fs from 'fs';
import type { DisplayObject } from '@antv/g';
import { Canvas, CanvasEvent } from '@antv/g';
import { Renderer } from '@antv/g-canvas';
import { createCanvas } from 'canvas';
import pixelmatch from 'pixelmatch';
import { PNG } from 'pngjs';

/**
* diff between PNGs
*/
export function diff(src: string, target: string, diff: string, maxError = 0, showMismatchedPixels = true) {
const img1 = PNG.sync.read(fs.readFileSync(src));
const img2 = PNG.sync.read(fs.readFileSync(target));
const { width, height } = img1;

let diffPNG: PNG | null = null;
let output: Buffer | null = null;
if (showMismatchedPixels) {
diffPNG = new PNG({ width, height });
output = diffPNG.data;
}

// @see https://github.com/mapbox/pixelmatch#pixelmatchimg1-img2-output-width-height-options
const mismatch = pixelmatch(img1.data, img2.data, output, width, height, {
threshold: 0.1,
});

if (showMismatchedPixels && mismatch > maxError && diffPNG) {
fs.writeFileSync(diff, PNG.sync.write(diffPNG));
}

return mismatch;
}
import { Canvas, CanvasEvent, resetEntityCounter } from '@antv/g';
import { Renderer } from '@antv/g-svg';
import { OffscreenCanvasContext, measureText } from './utils/offscreen-canvas-context';
import { setMockMeasureTextWidth } from '../../src';

export function createGCanvas(width: number, height: number) {
// Create a node-canvas instead of HTMLCanvasElement
const nodeCanvas = createCanvas(width, height);
// A standalone offscreen canvas for text metrics
const offscreenNodeCanvas = createCanvas(1, 1);
resetEntityCounter();
setMockMeasureTextWidth(measureText);

const dom = document.createElement('div') as any;
const offscreenNodeCanvas = {
getContext: () => context,
} as unknown as HTMLCanvasElement;
const context = new OffscreenCanvasContext(offscreenNodeCanvas);

// Create a renderer, unregister plugin relative to DOM.
const renderer = new Renderer();
// Remove html plugin to ssr.
const htmlRendererPlugin = renderer.getPlugin('html-renderer');
renderer.unregisterPlugin(htmlRendererPlugin);
const domInteractionPlugin = renderer.getPlugin('dom-interaction');
renderer.unregisterPlugin(domInteractionPlugin);

return [
new Canvas({
width,
height,
canvas: nodeCanvas as any,
renderer,
offscreenCanvas: offscreenNodeCanvas as any,
}),
nodeCanvas,
] as const;
return new Canvas({
container: dom as unknown as HTMLElement,
width,
height,
renderer,
document: dom.ownerDocument,
offscreenCanvas: offscreenNodeCanvas as any,
});
}

export function sleep(n: number) {
Expand All @@ -62,28 +38,18 @@ export function sleep(n: number) {
});
}

export function writePNG(nodeCanvas: any, path: string) {
return new Promise<void>((resolve, reject) => {
const out = fs.createWriteStream(path);
const stream = nodeCanvas.createPNGStream();
stream.pipe(out);
out.on('finish', resolve).on('error', reject);
});
}

export async function renderCanvas(gshape: DisplayObject, filename: string, wait = 100) {
export async function renderCanvas(gshape: DisplayObject, wait = 100) {
const bbox = gshape.getBBox();
const width = gshape.attributes.width || bbox.x + bbox.width || 400;
const height = gshape.attributes.height || bbox.y + bbox.height || 300;

const [canvas, nodeCanvas] = createGCanvas(width, height);
const canvas = createGCanvas(width, height);
return new Promise<Canvas>((resolve) => {
canvas.addEventListener(CanvasEvent.READY, async () => {
canvas.appendChild(gshape);

// Wait for the next tick.
await sleep(wait);
await writePNG(nodeCanvas, filename);
resolve(canvas);
});
});
Expand Down
202 changes: 101 additions & 101 deletions __tests__/integration/components/axis/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,102 @@
export { AxisLinearBasis1 } from './axis-linear-basis-1';
export { AxisLinearBasis2 } from './axis-linear-basis-2';
export { AxisLinearBasis3 } from './axis-linear-basis-3';
export { AxisLinearBasis4 } from './axis-linear-basis-4';
export { AxisLinearBasis5 } from './axis-linear-basis-5';
export { AxisLinearBasis6 } from './axis-linear-basis-6';
export { AxisLinearBasis7 } from './axis-linear-basis-7';
export { AxisLinearBasis8 } from './axis-linear-basis-8';
export { AxisLinearBasisZ } from './axis-linear-basis-z';
export { AxisLinearCustomTick } from './axis-linear-custom-tick';
export { AxisLinearLabel } from './axis-linear-label';
export { AxisLinearVertical } from './axis-linear-vertical';
export { AxisLinearLabelAlign1 } from './axis-linear-label-align-1';
export { AxisLinearLabelAlign2 } from './axis-linear-label-align-2';
export { AxisLinearLabelAlign3 } from './axis-linear-label-align-3';
export { AxisLinearLabelAlign4 } from './axis-linear-label-align-4';
export { AxisLinearLabelAlign5 } from './axis-linear-label-align-5';
export { AxisLinearLabelAlign6 } from './axis-linear-label-align-6';
export { AxisLinearLabelAlign7 } from './axis-linear-label-align-7';
export { AxisLinearLabelAlign8 } from './axis-linear-label-align-8';
export { AxisLinearLabelAlign9 } from './axis-linear-label-align-9';
export { AxisLinearLabelAlign10 } from './axis-linear-label-align-10';
export { AxisLinearLabelAlign11 } from './axis-linear-label-align-11';
export { AxisLinearLabelRotate } from './axis-linear-label-rotate';
export { AxisLinearLabelOverlap } from './axis-linear-label-overlap';
export { AxisLinearLabelOverlapWrap } from './axis-linear-label-overlap-wrap';
export { AxisLinearLabelOverlapWrapVertical } from './axis-linear-label-overlap-wrap-vertical';
export { AxisLinearLabelOverlapCrossSize } from './axis-linear-label-overlap-cross-size';
export { AxisLinearLabelOverlapCrossSizeVertical } from './axis-linear-label-overlap-cross-size-vertical';
export { AxisLinearLabelOverlap2 } from './axis-linear-label-overlap-2';
export { AxisLinearLabelOverlapMultiple } from './axis-linear-label-overlap-multiple';
export { AxisLinearTitle } from './axis-linear-title';
export { AxisLinearTitleStart } from './axis-linear-title-start';
export { AxisLinearTitleEnd } from './axis-linear-title-end';
export { AxisArc } from './axis-arc';
export { AxisArcBasis1 } from './axis-arc-basis-1';
export { AxisArcBasis2 } from './axis-arc-basis-2';
export { AxisArcBasis3 } from './axis-arc-basis-3';
export { AxisArcBasis4 } from './axis-arc-basis-4';
export { AxisArcTitle1 } from './axis-arc-title-1';
export { AxisArcTitle2 } from './axis-arc-title-2';
export { AxisArcTitle3 } from './axis-arc-title-3';
export { AxisArcTitle4 } from './axis-arc-title-4';
export { AxisArcTitle5 } from './axis-arc-title-5';
export { AxisArcTitle6 } from './axis-arc-title-6';
export { AxisArcTitle7 } from './axis-arc-title-7';
export { AxisArcTitle8 } from './axis-arc-title-8';
export { AxisArcTitle9 } from './axis-arc-title-9';
export { AxisArcDirection1 } from './axis-arc-direction-1';
export { AxisArcDirection2 } from './axis-arc-direction-2';
export { AxisArcDirection3 } from './axis-arc-direction-3';
export { AxisArcDirection4 } from './axis-arc-direction-4';
export { AxisArcDirection5 } from './axis-arc-direction-5';
export { AxisArcDirection6 } from './axis-arc-direction-6';
export { AxisArcDirection7 } from './axis-arc-direction-7';
export { AxisArcDirection8 } from './axis-arc-direction-8';
export { AxisArcDirection9 } from './axis-arc-direction-9';
export { AxisArcDirection10 } from './axis-arc-direction-10';
export { AxisArcDirection11 } from './axis-arc-direction-11';
export { AxisArcDirection12 } from './axis-arc-direction-12';
export { AxisArcDirection13 } from './axis-arc-direction-13';
export { AxisArcDirection14 } from './axis-arc-direction-14';
export { AxisArcDirection15 } from './axis-arc-direction-15';
export { AxisArcDirection16 } from './axis-arc-direction-16';
export { AxisArcDirection17 } from './axis-arc-direction-17';
export { AxisArcDirection18 } from './axis-arc-direction-18';
export { AxisArcDirection19 } from './axis-arc-direction-19';
export { AxisArcDirection20 } from './axis-arc-direction-20';
export { AxisArcLabelRotate1 } from './axis-arc-label-rotate-1';
export { AxisArcLabelRotate2 } from './axis-arc-label-rotate-2';
export { AxisArcLabelRotate3 } from './axis-arc-label-rotate-3';
export { AxisArcLabelRotate4 } from './axis-arc-label-rotate-4';
export { AxisGrid1 } from './axis-grid-1';
export { AxisGrid2 } from './axis-grid-2';
export { AxisGrid3 } from './axis-grid-3';
export { AxisGrid4 } from './axis-grid-4';
export { AxisGrid5 } from './axis-grid-5';
export { AxisGrid6 } from './axis-grid-6';
export { AxisGrid7 } from './axis-grid-7';
export { AxisGrid8 } from './axis-grid-8';
export { AxisGrid9 } from './axis-grid-9';
export { AxisGrid10 } from './axis-grid-10';
export { AxisGrid11 } from './axis-grid-11';
export { AxisGrid12 } from './axis-grid-12';
export { AxisLinearTitlePosition } from './axis-linear-title-position';
export { AxisAnimationUpdate1 } from './axis-animation-update-1';
export { AxisAnimationUpdate2 } from './axis-animation-update-2';
export { AxisAnimationUpdate3 } from './axis-animation-update-3';
export { AxisAnimationUpdate4 } from './axis-animation-update-4';
export { AxisAnimationUpdate5 } from './axis-animation-update-5';
export { AxisAnimationUpdate6 } from './axis-animation-update-6';
export { AxisAnimationUpdate7 } from './axis-animation-update-7';
export { AxisAnimationUpdate8 } from './axis-animation-update-8';
export { AxisAnimationUpdate9 } from './axis-animation-update-9';
export { AxisAnimationUpdate10 } from './axis-animation-update-10';
export { AxisAnimationUpdate11 } from './axis-animation-update-11';
export { AxisAnimationUpdate12 } from './axis-animation-update-12';
export { AxisAnimationUpdate13 } from './axis-animation-update-13';
export { AxisAnimationDisable } from './axis-animation-disable';
export { AxisLinearLabelSpacing } from './axis-linear-label-spacing';
export { AxisLinearTime1 } from './axis-linear-time-1';
export { AxisLinearTime2 } from './axis-linear-time-2';
// export { AxisLinearBasis2 } from './axis-linear-basis-2';
// export { AxisLinearBasis3 } from './axis-linear-basis-3';
// export { AxisLinearBasis4 } from './axis-linear-basis-4';
// export { AxisLinearBasis5 } from './axis-linear-basis-5';
// export { AxisLinearBasis6 } from './axis-linear-basis-6';
// export { AxisLinearBasis7 } from './axis-linear-basis-7';
// export { AxisLinearBasis8 } from './axis-linear-basis-8';
// export { AxisLinearBasisZ } from './axis-linear-basis-z';
// export { AxisLinearCustomTick } from './axis-linear-custom-tick';
// export { AxisLinearLabel } from './axis-linear-label';
// export { AxisLinearVertical } from './axis-linear-vertical';
// export { AxisLinearLabelAlign1 } from './axis-linear-label-align-1';
// export { AxisLinearLabelAlign2 } from './axis-linear-label-align-2';
// export { AxisLinearLabelAlign3 } from './axis-linear-label-align-3';
// export { AxisLinearLabelAlign4 } from './axis-linear-label-align-4';
// export { AxisLinearLabelAlign5 } from './axis-linear-label-align-5';
// export { AxisLinearLabelAlign6 } from './axis-linear-label-align-6';
// export { AxisLinearLabelAlign7 } from './axis-linear-label-align-7';
// export { AxisLinearLabelAlign8 } from './axis-linear-label-align-8';
// export { AxisLinearLabelAlign9 } from './axis-linear-label-align-9';
// export { AxisLinearLabelAlign10 } from './axis-linear-label-align-10';
// export { AxisLinearLabelAlign11 } from './axis-linear-label-align-11';
// export { AxisLinearLabelRotate } from './axis-linear-label-rotate';
// export { AxisLinearLabelOverlap } from './axis-linear-label-overlap';
// export { AxisLinearLabelOverlapWrap } from './axis-linear-label-overlap-wrap';
// export { AxisLinearLabelOverlapWrapVertical } from './axis-linear-label-overlap-wrap-vertical';
// export { AxisLinearLabelOverlapCrossSize } from './axis-linear-label-overlap-cross-size';
// export { AxisLinearLabelOverlapCrossSizeVertical } from './axis-linear-label-overlap-cross-size-vertical';
// export { AxisLinearLabelOverlap2 } from './axis-linear-label-overlap-2';
// export { AxisLinearLabelOverlapMultiple } from './axis-linear-label-overlap-multiple';
// export { AxisLinearTitle } from './axis-linear-title';
// export { AxisLinearTitleStart } from './axis-linear-title-start';
// export { AxisLinearTitleEnd } from './axis-linear-title-end';
// export { AxisArc } from './axis-arc';
// export { AxisArcBasis1 } from './axis-arc-basis-1';
// export { AxisArcBasis2 } from './axis-arc-basis-2';
// export { AxisArcBasis3 } from './axis-arc-basis-3';
// export { AxisArcBasis4 } from './axis-arc-basis-4';
// export { AxisArcTitle1 } from './axis-arc-title-1';
// export { AxisArcTitle2 } from './axis-arc-title-2';
// export { AxisArcTitle3 } from './axis-arc-title-3';
// export { AxisArcTitle4 } from './axis-arc-title-4';
// export { AxisArcTitle5 } from './axis-arc-title-5';
// export { AxisArcTitle6 } from './axis-arc-title-6';
// export { AxisArcTitle7 } from './axis-arc-title-7';
// export { AxisArcTitle8 } from './axis-arc-title-8';
// export { AxisArcTitle9 } from './axis-arc-title-9';
// export { AxisArcDirection1 } from './axis-arc-direction-1';
// export { AxisArcDirection2 } from './axis-arc-direction-2';
// export { AxisArcDirection3 } from './axis-arc-direction-3';
// export { AxisArcDirection4 } from './axis-arc-direction-4';
// export { AxisArcDirection5 } from './axis-arc-direction-5';
// export { AxisArcDirection6 } from './axis-arc-direction-6';
// export { AxisArcDirection7 } from './axis-arc-direction-7';
// export { AxisArcDirection8 } from './axis-arc-direction-8';
// export { AxisArcDirection9 } from './axis-arc-direction-9';
// export { AxisArcDirection10 } from './axis-arc-direction-10';
// export { AxisArcDirection11 } from './axis-arc-direction-11';
// export { AxisArcDirection12 } from './axis-arc-direction-12';
// export { AxisArcDirection13 } from './axis-arc-direction-13';
// export { AxisArcDirection14 } from './axis-arc-direction-14';
// export { AxisArcDirection15 } from './axis-arc-direction-15';
// export { AxisArcDirection16 } from './axis-arc-direction-16';
// export { AxisArcDirection17 } from './axis-arc-direction-17';
// export { AxisArcDirection18 } from './axis-arc-direction-18';
// export { AxisArcDirection19 } from './axis-arc-direction-19';
// export { AxisArcDirection20 } from './axis-arc-direction-20';
// export { AxisArcLabelRotate1 } from './axis-arc-label-rotate-1';
// export { AxisArcLabelRotate2 } from './axis-arc-label-rotate-2';
// export { AxisArcLabelRotate3 } from './axis-arc-label-rotate-3';
// export { AxisArcLabelRotate4 } from './axis-arc-label-rotate-4';
// export { AxisGrid1 } from './axis-grid-1';
// export { AxisGrid2 } from './axis-grid-2';
// export { AxisGrid3 } from './axis-grid-3';
// export { AxisGrid4 } from './axis-grid-4';
// export { AxisGrid5 } from './axis-grid-5';
// export { AxisGrid6 } from './axis-grid-6';
// export { AxisGrid7 } from './axis-grid-7';
// export { AxisGrid8 } from './axis-grid-8';
// export { AxisGrid9 } from './axis-grid-9';
// export { AxisGrid10 } from './axis-grid-10';
// export { AxisGrid11 } from './axis-grid-11';
// export { AxisGrid12 } from './axis-grid-12';
// export { AxisLinearTitlePosition } from './axis-linear-title-position';
// export { AxisAnimationUpdate1 } from './axis-animation-update-1';
// export { AxisAnimationUpdate2 } from './axis-animation-update-2';
// export { AxisAnimationUpdate3 } from './axis-animation-update-3';
// export { AxisAnimationUpdate4 } from './axis-animation-update-4';
// export { AxisAnimationUpdate5 } from './axis-animation-update-5';
// export { AxisAnimationUpdate6 } from './axis-animation-update-6';
// export { AxisAnimationUpdate7 } from './axis-animation-update-7';
// export { AxisAnimationUpdate8 } from './axis-animation-update-8';
// export { AxisAnimationUpdate9 } from './axis-animation-update-9';
// export { AxisAnimationUpdate10 } from './axis-animation-update-10';
// export { AxisAnimationUpdate11 } from './axis-animation-update-11';
// export { AxisAnimationUpdate12 } from './axis-animation-update-12';
// export { AxisAnimationUpdate13 } from './axis-animation-update-13';
// export { AxisAnimationDisable } from './axis-animation-disable';
// export { AxisLinearLabelSpacing } from './axis-linear-label-spacing';
// export { AxisLinearTime1 } from './axis-linear-time-1';
// export { AxisLinearTime2 } from './axis-linear-time-2';
18 changes: 0 additions & 18 deletions __tests__/integration/jsdom.ts
View file

This file was deleted.

Loading

0 comments on commit d89b31e

Please sign in to comment.