Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
e2e: add visual regression tests (#858)
The rendering differs slightly between machines which makes it throw
enormous amount of false positives (in my tests, everything was wrong,
always). This approach will generate the base screenshots from the last
released version and then compare it to the one generated by the code in
current working branch. It's possible to require never version than the
latest released if something was changed/fixed/etc. (e.g. if 7.10.0 is
the last released, then `cy.visSimpleCanvasSnapshot("name", {}, {
requireNewerVersionThan: "7.10.0" })` can be used to basically skip
given test until a new version is released, this will pass the CI checks
and automatically check any new PRs as the version will be 7.10.1+ by
then).
I created some label rendering (literal/MD/HTML, ASCII/UTF, some font
options…) tests.
Co-authored-by: Yotam Berkowitz <yotamberk@gmail.com>- Loading branch information
Showing
24 changed files
with
858 additions
and
259 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,4 @@ | ||
| { | ||
| "testFiles": "**/*.spec.js", | ||
| "viewportHeight": 1600, | ||
| "viewportWidth": 1200 | ||
| } |
2 changes: 1 addition & 1 deletion
2
cypress/integration/clicks.spec.ts → ...ess/integration/functional/clicks.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| import { VisEvent } from "./helpers"; | ||
| import { VisEvent } from "../helpers"; | ||
|
|
||
| context("Clicks", (): void => { | ||
| /* | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
cypress/integration/drags.spec.ts → cypress/integration/functional/drags.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
2 changes: 1 addition & 1 deletion
2
cypress/integration/simple.spec.ts → ...ess/integration/functional/simple.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| context("Label rendering", (): void => { | ||
| for (const multi of [false, true, "md", "html"]) { | ||
| describe(`Multi: ${multi}`, function(): void { | ||
| for (const { variantName, color, background, size } of [ | ||
| { variantName: "defaults" }, | ||
| { | ||
| variantName: "changed", | ||
|
|
||
| align: "right", | ||
| background: "#440044", | ||
| color: "#AA00AA", | ||
| face: "serif", | ||
| size: 25, | ||
| strokeColor: "#FFFFFF", | ||
| strokeWidth: 2, | ||
| vadjust: 12, | ||
|
|
||
| bold: { | ||
| color: "#FF0000", | ||
| size: 40, | ||
| vadjust: 20 | ||
| }, | ||
| boldital: { | ||
| color: "#FFFF00", | ||
| size: 30, | ||
| vadjust: 5 | ||
| }, | ||
| ital: { | ||
| color: "#00FF00", | ||
| size: 20, | ||
| vadjust: -10 | ||
| }, | ||
| mono: { | ||
| color: "#0000FF", | ||
| size: 10, | ||
| vadjust: -20 | ||
| } | ||
| } | ||
| ]) { | ||
| describe(`Variant: ${variantName}`, function(): void { | ||
| for (const [labelName, label] of [ | ||
| // ASCII, single line | ||
| ["ASCII", "test"], | ||
| // UTF, multi line | ||
| ["UTF", "+\něščřžýáíé\n=\t|\nÉÍÁÝŽŘČŠĚ\n<𝄞>"], | ||
| // Markdown | ||
| [ | ||
| "MD", | ||
| "Multi: " + | ||
| " ".repeat(10) + | ||
| "`códé`" + | ||
| ",\n" + | ||
| "*bóld*" + | ||
| ", " + | ||
| "-ítálícs-" + | ||
| ", " + | ||
| "nórmál" + | ||
| ",\n" + | ||
| "-*bóld+ítálícs*-" + | ||
| ", " + | ||
| "*-ítálícs+bóld-*." | ||
| ], | ||
| // HTML | ||
| [ | ||
| "HTML", | ||
| "Multi: " + | ||
| " ".repeat(10) + | ||
| "<code>códé</code>" + | ||
| ",\n" + | ||
| "<b>bóld</b>" + | ||
| ", " + | ||
| "<i>ítálícs</i>" + | ||
| ", " + | ||
| "nórmál" + | ||
| ",\n" + | ||
| "<i><b>bóld+ítálícs</b></i>" + | ||
| ", " + | ||
| "<b><i>ítálícs+bóld</i></b>." | ||
| ] | ||
| ]) { | ||
| it( | ||
| JSON.stringify( | ||
| label.replace(/\t/g, "<HT>").replace(/\n/g, "<LF>") | ||
| ), | ||
| (): void => { | ||
| cy.visSimpleCanvasSnapshot( | ||
| `${multi}-${variantName}-${labelName}`, | ||
| { | ||
| nodes: [ | ||
| { | ||
| id: 1, | ||
| fixed: true, | ||
| x: -50, | ||
| y: -300, | ||
| shape: "box", | ||
| label | ||
| }, | ||
| { | ||
| id: 3, | ||
| fixed: true, | ||
| x: 50, | ||
| y: 300, | ||
| shape: "square", | ||
| label | ||
| } | ||
| ], | ||
| edges: [{ id: 2, from: 1, to: 3, label }], | ||
| options: { | ||
| nodes: { | ||
| font: { background, color, multi, size } | ||
| }, | ||
| edges: { | ||
| font: { background, color, multi, size } | ||
| } | ||
| } | ||
| } | ||
| ); | ||
| } | ||
| ); | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| }); |
Oops, something went wrong.