Skip to content

Commit

Permalink
chore: use playwright to screenshot (#1603)
Browse files Browse the repository at this point in the history 
* chore: use playwright to screenshot

* chore: use snapshots generated on ci

* chore: always upload snapshots

* chore: update snapshots from ci

* chore: always upload snapshots

* chore: always upload snapshots

* chore: always upload snapshots

* chore: always upload snapshots

* chore: always upload snapshots

* chore: always upload snapshots

* chore: always upload snapshots

* chore: always upload snapshots
  • Loading branch information
@xiaoiver
xiaoiver authored Nov 30, 2023
1 parent 3bbd96b commit 4bcf7fc
Show file tree
Hide file tree
Showing 69 changed files with 1,453 additions and 4,174 deletions.
24 changes: 12 additions & 12 deletions .github/workflows/test.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,23 +25,23 @@ jobs:
node-version: 16
cache: 'pnpm'

- name: Install headless-gl dependencies
run: |
sudo apt-get update
sudo apt-get install -y mesa-utils xvfb libgl1-mesa-dri libglapi-mesa libosmesa6
- name: Install Playwright browsers
run: npx playwright install --with-deps

- name: Install dependencies
run: pnpm install

- name: Build
run: pnpm build

- name: Cov
run: |
xvfb-run -s "-ac -screen 0 1280x1024x16" pnpm cov
env:
CI: true
- name: Coveralls
uses: coverallsapp/github-action@master
- name: Test
run: pnpm test:serverside

- name: Upload snapshots to GitHub Actions Artifacts
if: always()
uses: actions/upload-artifact@v3
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
name: snapshots
path: |
__tests__/integration/snapshots/**/*/*-actual.png
retention-days: 1
3 changes: 2 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,4 +83,5 @@ packages/**/*/__node__tests__/*.png
# ignore bundleviz stats.html
stats.html

*.diff.png
*-actual.png
*-diff.png
74 changes: 37 additions & 37 deletions __tests__/demos/2d/circle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,48 +27,48 @@ export async function circle(context) {
canvas.appendChild(circle3);

// none fill
// const circle4 = circle2.cloneNode();
// circle4.style.fill = 'none';
// circle4.setPosition(70, 10);
// canvas.appendChild(circle4);
const circle4 = circle2.cloneNode();
circle4.style.fill = 'none';
circle4.setPosition(70, 10);
canvas.appendChild(circle4);

// // dashed
// const circle5 = circle2.cloneNode();
// circle5.style.lineDash = [2, 2];
// circle5.setPosition(90, 10);
// canvas.appendChild(circle5);
// dashed
const circle5 = circle2.cloneNode();
circle5.style.lineDash = [2, 2];
circle5.setPosition(90, 10);
canvas.appendChild(circle5);

// // dashed with offset
// const circle6 = circle2.cloneNode();
// circle6.style.lineDash = [2, 2];
// circle6.style.lineDashOffset = 2;
// circle6.setPosition(110, 10);
// canvas.appendChild(circle6);
// dashed with offset
const circle6 = circle2.cloneNode();
circle6.style.lineDash = [2, 2];
circle6.style.lineDashOffset = 2;
circle6.setPosition(110, 10);
canvas.appendChild(circle6);

// const circle7 = circle1.cloneNode();
// circle7.style.opacity = 0.5;
// circle7.setPosition(130, 10);
// canvas.appendChild(circle7);
const circle7 = circle1.cloneNode();
circle7.style.opacity = 0.5;
circle7.setPosition(130, 10);
canvas.appendChild(circle7);

// // with shadow
// const circle8 = circle1.cloneNode();
// circle8.style.r = 20;
// circle8.style.shadowBlur = 10;
// circle8.style.shadowColor = 'blue';
// circle8.setPosition(20, 60);
// canvas.appendChild(circle8);
// with shadow
const circle8 = circle1.cloneNode();
circle8.style.r = 20;
circle8.style.shadowBlur = 10;
circle8.style.shadowColor = 'blue';
circle8.setPosition(20, 60);
canvas.appendChild(circle8);

// // with gradient
// const circle9 = circle1.cloneNode();
// circle9.style.r = 20;
// circle9.style.fill = 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';
// circle9.setPosition(60, 60);
// canvas.appendChild(circle9);
// const circle10 = circle1.cloneNode();
// circle10.style.r = 20;
// circle10.style.fill = 'r(0.5, 0.5, 1) 0:#ffffff 1:#1890ff';
// circle10.setPosition(100, 60);
// canvas.appendChild(circle10);
// with gradient
const circle9 = circle1.cloneNode();
circle9.style.r = 20;
circle9.style.fill = 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';
circle9.setPosition(60, 60);
canvas.appendChild(circle9);
const circle10 = circle1.cloneNode();
circle10.style.r = 20;
circle10.style.fill = 'r(0.5, 0.5, 1) 0:#ffffff 1:#1890ff';
circle10.setPosition(100, 60);
canvas.appendChild(circle10);

// transform
const circle11 = circle1.cloneNode();
Expand Down
70 changes: 35 additions & 35 deletions __tests__/demos/2d/ellipse.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,47 +27,47 @@ export async function ellipse(context) {
ellipse3.setPosition(60, 20);
canvas.appendChild(ellipse3);

// // none fill
// const ellipse4 = ellipse2.cloneNode();
// ellipse4.style.fill = 'none';
// ellipse4.setPosition(80, 20);
// canvas.appendChild(ellipse4);
// none fill
const ellipse4 = ellipse2.cloneNode();
ellipse4.style.fill = 'none';
ellipse4.setPosition(80, 20);
canvas.appendChild(ellipse4);

// // dashed
// const ellipse5 = ellipse2.cloneNode();
// ellipse5.style.lineDash = [2, 2];
// ellipse5.setPosition(100, 20);
// canvas.appendChild(ellipse5);
// dashed
const ellipse5 = ellipse2.cloneNode();
ellipse5.style.lineDash = [2, 2];
ellipse5.setPosition(100, 20);
canvas.appendChild(ellipse5);

// // dashed with offset
// const ellipse6 = ellipse2.cloneNode();
// ellipse6.style.lineDash = [2, 2];
// ellipse6.style.lineDashOffset = 2;
// ellipse6.setPosition(120, 20);
// canvas.appendChild(ellipse6);
// dashed with offset
const ellipse6 = ellipse2.cloneNode();
ellipse6.style.lineDash = [2, 2];
ellipse6.style.lineDashOffset = 2;
ellipse6.setPosition(120, 20);
canvas.appendChild(ellipse6);

// const ellipse7 = ellipse1.cloneNode();
// ellipse7.style.opacity = 0.5;
// ellipse7.setPosition(140, 20);
// canvas.appendChild(ellipse7);
const ellipse7 = ellipse1.cloneNode();
ellipse7.style.opacity = 0.5;
ellipse7.setPosition(140, 20);
canvas.appendChild(ellipse7);

// // with shadow
// const ellipse8 = ellipse1.cloneNode();
// ellipse8.style.shadowBlur = 10;
// ellipse8.style.shadowColor = 'blue';
// ellipse8.setPosition(20, 60);
// canvas.appendChild(ellipse8);
// with shadow
const ellipse8 = ellipse1.cloneNode();
ellipse8.style.shadowBlur = 10;
ellipse8.style.shadowColor = 'blue';
ellipse8.setPosition(20, 60);
canvas.appendChild(ellipse8);

// // with gradient
// const ellipse9 = ellipse1.cloneNode();
// ellipse9.style.fill = 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';
// ellipse9.setPosition(60, 60);
// canvas.appendChild(ellipse9);
// with gradient
const ellipse9 = ellipse1.cloneNode();
ellipse9.style.fill = 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';
ellipse9.setPosition(60, 60);
canvas.appendChild(ellipse9);

// const ellipse10 = ellipse1.cloneNode();
// ellipse10.style.fill = 'r(0.5, 0.5, 1) 0:#ffffff 1:#1890ff';
// ellipse10.setPosition(100, 60);
// canvas.appendChild(ellipse10);
const ellipse10 = ellipse1.cloneNode();
ellipse10.style.fill = 'r(0.5, 0.5, 1) 0:#ffffff 1:#1890ff';
ellipse10.setPosition(100, 60);
canvas.appendChild(ellipse10);

// transform
const ellipse11 = ellipse1.cloneNode();
Expand Down
2 changes: 2 additions & 0 deletions __tests__/demos/2d/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,6 @@ export { image } from './image';
export { imageNonTransparentPixel } from './image-non-transparent-pixel';
export { line } from './line';
export { polyline } from './polyline';
export { polygon } from './polygon';
export { path } from './path';
export { text } from './text';
38 changes: 38 additions & 0 deletions __tests__/demos/2d/line.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,42 @@ export async function line(context) {
},
});
canvas.appendChild(line);

// dashed
const line2 = line.cloneNode();
line2.style.lineDash = [2];
line2.translate(30, 0);
canvas.appendChild(line2);

// lineCap
const line3 = line.cloneNode();
line3.style.lineCap = 'round';
line3.translate(60, 0);
canvas.appendChild(line3);
const line4 = line.cloneNode();
line4.style.lineCap = 'square';
line4.translate(90, 0);
canvas.appendChild(line4);

// with gradient
const line5 = line.cloneNode();
line5.style.stroke = 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';
line5.setPosition(120, 0);
canvas.appendChild(line5);

const line6 = line.cloneNode();
line6.style.stroke = 'r(0.5, 0.5, 1) 0:#ffffff 1:#1890ff';
line6.setPosition(150, 0);
canvas.appendChild(line6);

const line7 = line.cloneNode();
line7.style.stroke = 'linear-gradient(90deg, blue, green 40%, red)';
line7.setPosition(180, 0);
canvas.appendChild(line7);

// lineWidth less than 1px
const line8 = line.cloneNode();
line8.style.lineWidth = 0.5;
line8.setPosition(10, 80);
canvas.appendChild(line8);
}
71 changes: 65 additions & 6 deletions __tests__/demos/2d/path.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,72 @@ export async function path(context) {

const path = new Path({
style: {
d: 'M 356.37480026152645,56.68941288616037 Q 175.87317171217347 171.6466314112769,48.07084808243172 1.4210854715202004e-14 A 213.99999999999997 213.99999999999997 0 0 0 0 49.72605286975126 Q 175.87317171217347 171.6466314112769,383.6126929339904 120.2628662462923 A 213.99999999999997 213.99999999999997 0 0 0 356.37480026152645 56.68941288616044 Z',
fill: 'rgb(23, 131, 255)',
fillOpacity: 0.95,
stroke: 'rgb(23, 131, 255)',
opacity: 0.5,
lineWidth: 1,
path: 'M10,10 L30,30 L10, 30',
stroke: 'red',
lineWidth: 6,
},
});
canvas.appendChild(path);

// dashed
const polyline2 = path.cloneNode();
polyline2.style.lineDash = [2];
polyline2.translate(30, 0);
canvas.appendChild(polyline2);

// lineCap
const polyline3 = path.cloneNode();
polyline3.style.lineCap = 'round';
polyline3.translate(60, 0);
canvas.appendChild(polyline3);
const polyline4 = path.cloneNode();
polyline4.style.lineCap = 'square';
polyline4.translate(90, 0);
canvas.appendChild(polyline4);

// lineJoin
const polyline5 = path.cloneNode();
polyline5.style.lineJoin = 'round';
polyline5.translate(120, 0);
canvas.appendChild(polyline5);

const polyline6 = path.cloneNode();
polyline6.style.lineJoin = 'miter'; // "bevel" | "miter" | "round";
polyline6.translate(150, 0);
canvas.appendChild(polyline6);

const path2 = new Path({
style: {
path:
'M 100,300' +
'l 50,-25' +
'a25,25 -30 0,1 50,-25' +
'l 50,-25' +
'a25,50 -30 0,1 50,-25' +
'l 50,-25' +
'a25,75 -30 0,1 50,-25' +
'l 50,-25' +
'a25,100 -30 0,1 50,-25' +
'l 50,-25' +
'l 0, 200,' +
'z',
lineWidth: 10,
lineJoin: 'round',
stroke: '#54BECC',
},
});
canvas.appendChild(path2);
path2.scale(0.2);
path2.translateLocal(-100, 20);

// Bezier
const path3 = new Path({
style: {
lineWidth: 1,
stroke: '#54BECC',
transform: 'scale(0.6) translate(0, 100px)',
path: 'M 0,40 C 5.5555555555555545,40,22.222222222222218,44.44444444444445,33.33333333333333,40 C 44.444444444444436,35.55555555555556,55.55555555555554,14.66666666666667,66.66666666666666,13.333333333333336 C 77.77777777777777,12.000000000000002,88.88888888888887,32,100,32 C 111.11111111111113,32,122.22222222222221,14.66666666666667,133.33333333333331,13.333333333333336 C 144.44444444444443,12.000000000000002,155.55555555555557,24,166.66666666666669,24 C 177.7777777777778,24,188.8888888888889,11.111111111111114,200,13.333333333333336 C 211.1111111111111,15.555555555555557,222.22222222222226,35.111111111111114,233.33333333333334,37.333333333333336 C 244.44444444444443,39.55555555555555,255.55555555555551,31.22222222222223,266.66666666666663,26.66666666666667 C 277.77777777777777,22.111111111111114,294.4444444444444,12.777777777777779,300,10',
},
});
canvas.appendChild(path3);
}
46 changes: 46 additions & 0 deletions __tests__/demos/2d/polygon.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { Polygon } from '../../../packages/g';

export async function polygon(context) {
const { canvas } = context;
await canvas.ready;

const polygon = new Polygon({
style: {
points: [
[10, 10],
[10, 30],
[30, 30],
],
stroke: 'red',
lineWidth: 6,
},
});
canvas.appendChild(polygon);

// dashed
const polyline2 = polygon.cloneNode();
polyline2.style.lineDash = [2];
polyline2.translate(30, 0);
canvas.appendChild(polyline2);

// lineCap
const polyline3 = polygon.cloneNode();
polyline3.style.lineCap = 'round';
polyline3.translate(60, 0);
canvas.appendChild(polyline3);
const polyline4 = polygon.cloneNode();
polyline4.style.lineCap = 'square';
polyline4.translate(90, 0);
canvas.appendChild(polyline4);

// lineJoin
const polyline5 = polygon.cloneNode();
polyline5.style.lineJoin = 'round';
polyline5.translate(120, 0);
canvas.appendChild(polyline5);

const polyline6 = polygon.cloneNode();
polyline6.style.lineJoin = 'miter'; // "bevel" | "miter" | "round";
polyline6.translate(150, 0);
canvas.appendChild(polyline6);
}
Loading

0 comments on commit 4bcf7fc

Please sign in to comment.