Skip to content

Commit

Permalink
feat: add image snap test
Browse files Browse the repository at this point in the history
  • Loading branch information
zhiqingchen committed Feb 2, 2024
1 parent 9aba8f2 commit e04d673
Show file tree
Hide file tree
Showing 16 changed files with 334 additions and 38 deletions.
8 changes: 4 additions & 4 deletions .github/actions/setup/action.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,23 @@ runs:
using: composite
steps:
- name: Setup Node.js
uses: actions/setup-node@v3
uses: actions/setup-node@v4
with:
node-version: 16.x
node-version: lts/*

- name: Cache dependencies
id: yarn-cache
uses: actions/cache@v3
with:
path: |
**/node_modules
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}-v1
restore-keys: |
${{ runner.os }}-yarn-
- name: Install dependencies
if: steps.yarn-cache.outputs.cache-hit != 'true'
run: |
yarn install --cwd example --frozen-lockfile
yarn install --frozen-lockfile
yarn install --frozen-lockfile --ignore-engines
shell: bash
6 changes: 3 additions & 3 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ on:

jobs:
lint:
runs-on: ubuntu-latest
runs-on: macos-latest
steps:
- name: Checkout
uses: actions/checkout@v3
Expand All @@ -19,7 +19,7 @@ jobs:
run: yarn typescript

test:
runs-on: ubuntu-latest
runs-on: macos-latest
steps:
- name: Checkout
uses: actions/checkout@v3
Expand All @@ -31,7 +31,7 @@ jobs:
run: yarn test --maxWorkers=2 --coverage

build:
runs-on: ubuntu-latest
runs-on: macos-latest
steps:
- name: Checkout
uses: actions/checkout@v3
Expand Down
5 changes: 4 additions & 1 deletion .github/workflows/publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,17 @@ env:
jobs:
publish:
name: publish
runs-on: ubuntu-latest
runs-on: macos-latest
strategy:
fail-fast: false
matrix:
node-version: [16.x]

steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v4
with:
node-version: latest
- name : GITHUB CONTEXT
env:
GITHUB_CONTEXT: ${{ toJson(github) }}
Expand Down
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -77,3 +77,6 @@ lib/

# Docusaurus (when switching from docs branches to code branches)
.docusaurus/

# jest
coverage/
2 changes: 1 addition & 1 deletion example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"dependencies": {
"@expo/webpack-config": "~19.0.1",
"@shopify/react-native-skia": "0.1.221",
"echarts": "^5.5.0",
"echarts": "5.5.0-rc.1",
"expo": "^50.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",
Expand Down
2 changes: 1 addition & 1 deletion example/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4042,7 +4042,7 @@ dotenv@~16.0.3:
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
integrity sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==

echarts@^5.5.0:
[email protected]-rc.1:
version "5.5.0-rc.1"
resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.5.0-rc.1.tgz#31ee2c4e09da24fe8149bb011c1fbd271a2bf10f"
integrity sha512-Fnfls+zDAg9HLuWK27JakdjLjpkEZsKTk+eeSA6eOqphBNA9iXCI1CvQJZ5xD8WJY40bqdh4zCaE4AxSDjJslw==
Expand Down
10 changes: 5 additions & 5 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
module.exports = {
preset: "react-native",
preset: 'react-native',
modulePathIgnorePatterns: [
"<rootDir>/example/node_modules",
"<rootDir>/lib/"
'<rootDir>/example/node_modules',
'<rootDir>/lib/',
],
transformIgnorePatterns: [
'node_modules/(?!(react-native|react-native.*|@react-native.*|@?react-navigation.*|@shopify/react-native-skia|zrender|echarts)/)',
],
setupFiles: [
'@shopify/react-native-skia/jestSetup.js',
'react-native-gesture-handler/jestSetup.js',
'./jestSetup.js'
'./jestSetup.js',
],
testTimeout: 30000,
};
};
7 changes: 4 additions & 3 deletions jestSetup.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
const { Skia } = require("@shopify/react-native-skia");
const { Skia } = require('@shopify/react-native-skia');
Skia.SVG.MakeFromString = (svg) => svg;
// eslint-disable-next-line no-undef
globalThis.navigator = {
product: "ReactNative",
userAgent: "Node.js",
product: 'ReactNative',
userAgent: 'Node.js',
};
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,12 @@
"@types/react": "~18.2.14",
"commitlint": "^17.0.2",
"del-cli": "^5.0.0",
"echarts": "^5.5.0",
"echarts": "5.5.0-rc.1",
"eslint": "^8.4.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"jest": "^29.7.0",
"jest-image-snapshot": "^6.4.0",
"pod-install": "^0.1.0",
"prettier": "^2.0.5",
"react": "18.2.0",
Expand All @@ -78,6 +79,7 @@
"react-native-svg": "14.1.0",
"react-test-renderer": "^18.2.0",
"release-it": "^15.0.0",
"sharp": "^0.33.2",
"typescript": "^5.0.4",
"zrender": "^5.5.0"
},
Expand Down
2 changes: 1 addition & 1 deletion src/SVGRenderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ class CustomSVGPainter extends SVGPainter {
super.refresh();
}
}
toDataURL(base64?: boolean):string {
toDataURL(base64?: boolean): string {
// @ts-ignore
if (isRn && this._svgDom.makeImageSnapshot) {
// @ts-ignore
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 40 additions & 6 deletions src/__tests__/chart.test.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
/**
* @jest-environment @shopify/react-native-skia/jestEnv.mjs
*/
declare global {
namespace jest {
interface Matchers<R> {
toMatchImageSnapshot(): R;
}
}
}
import React, { useEffect, useRef } from 'react';
import { Dimensions } from 'react-native';
import { render } from '@testing-library/react-native';
Expand All @@ -9,6 +16,19 @@ import SVGComponent from '../svgChart';
import { SVGRenderer } from '../SVGRenderer';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
const sharp = require('sharp');

const { toMatchImageSnapshot } = require('jest-image-snapshot');

function getSVGImage(svg: string) {
const svgString = decodeURIComponent(
svg.replace('data:image/svg+xml;charset=UTF-8,', '')
);
return sharp(Buffer.from(svgString)).png().toBuffer();
}

expect.extend({ toMatchImageSnapshot });

import {
TitleComponent,
TooltipComponent,
Expand All @@ -21,10 +41,11 @@ echarts.use([
SVGRenderer,
BarChart,
]);

const Components = [SkiaComponent, SVGComponent];
const E_HEIGHT = 250;
const E_WIDTH = Dimensions.get('screen').width;//750
const option = {
const E_WIDTH = Dimensions.get('screen').width; //750
const OPTION = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue'],
Expand All @@ -39,7 +60,8 @@ const option = {
},
],
};
function Chart({ option, Component }: any) {

function Chart({ option, Component, getDataURL }: any) {
const ref = useRef<any>(null);
useEffect(() => {
let chart: any;
Expand All @@ -51,17 +73,29 @@ function Chart({ option, Component }: any) {
height: E_HEIGHT,
});
chart.setOption(option);
getDataURL?.(chart.getDataURL());
}
return () => chart?.dispose();
}, [option]);
}, [option, getDataURL]);

return <Component ref={ref} />;
}

Components.forEach((Component) => {
describe(`${Component.displayName} Chart` || 'unknown', () => {
it('renders correctly', () => {
it('renders correctly', (done) => {
const { toJSON } = render(
<Chart option={option} Component={Component} />
<Chart
option={OPTION}
Component={Component}
getDataURL={(data: string) => {
expect(data).toBeDefined();
getSVGImage(data).then((d: Buffer) => {
expect(d).toMatchImageSnapshot();
done();
});
}}
/>
);
expect(toJSON()).toMatchSnapshot();
});
Expand Down
8 changes: 7 additions & 1 deletion src/components/PanResponderHandler.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,13 @@ export function PanResponderHandler({
dispatchEvents,
}: PanResponderHandlerProps) {
const [panResponder] = usePanResponder(dispatchEvents);
return <View testID="pan-responder-handler" {...panResponder.panHandlers} style={styles.GestureView} />;
return (
<View
testID="pan-responder-handler"
{...panResponder.panHandlers}
style={styles.GestureView}
/>
);
}

export function usePanResponder(
Expand Down
26 changes: 19 additions & 7 deletions src/skiaChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,13 @@ import React, {
useRef,
} from 'react';

import { Canvas, ImageSVG, Skia, SkSVG, useCanvasRef } from '@shopify/react-native-skia';
import {
Canvas,
ImageSVG,
Skia,
SkSVG,
useCanvasRef,
} from '@shopify/react-native-skia';

import { View } from 'react-native';

Expand Down Expand Up @@ -55,7 +61,7 @@ function SkiaComponent(
const [width, setWidth] = useState<number>(initialWidth ?? 0);
const [height, setHeight] = useState<number>(initialHeight ?? 0);
const zrenderId = useRef<number>();
const canvasRef = useCanvasRef();
const canvasRef = useCanvasRef?.();

const dispatchEvents = useCallback<DispatchEvents>(
(types, nativeEvent, eventArgs) => {
Expand Down Expand Up @@ -88,9 +94,11 @@ function SkiaComponent(
zrenderId.current = id;
},
makeImageSnapshot: () => {
const image = canvasRef.current?.makeImageSnapshot();
return image ? `data:image/png;base64,${image.encodeToBase64()}` : null;
}
const image = canvasRef?.current?.makeImageSnapshot();
return image
? `data:image/png;base64,${image.encodeToBase64()}`
: null;
},
},
viewprot: {},
dispatchEvents,
Expand All @@ -101,12 +109,16 @@ function SkiaComponent(
};
},
}),
[dispatchEvents, initialWidth, initialHeight]
[dispatchEvents, initialWidth, initialHeight, canvasRef]
);

return svgString ? (
<View testID="component" style={{ ...style, width, height }}>
<Canvas style={{ ...style, width, height }} pointerEvents="auto" ref={canvasRef}>
<Canvas
style={{ ...style, width, height }}
pointerEvents="auto"
ref={canvasRef}
>
<ImageSVG svg={svgString} x={0} y={0} width={width} height={height} />
</Canvas>
{handleGesture ? (
Expand Down
Loading

0 comments on commit e04d673

Please sign in to comment.