Skip to content

Commit 08191aa

Browse files
committed
Improve compare tool with more UI improvements to help with
generating GIFs for reviewing PRs. Add query params to the compare tool. For example, open the following in a local browser: vexflow/tools/compare/index.html?currentLabel=PR-1480&referenceLabel=4.1.0
1 parent 86b8240 commit 08191aa

File tree

4 files changed

+456
-246
lines changed

4 files changed

+456
-246
lines changed

tools/compare/README.md

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Compare Images
2+
3+
First, open index.html in your local browser.
4+
5+
When we refer to "current" images, we mean the test output from your current branch.
6+
7+
We want to compare the current images to "reference" images from an earlier revision (usually the most recent npm release).
8+
9+
There are two ways to generate images to compare.
10+
11+
# Method 1: Single Working Copy
12+
13+
First, check out a known good revision. Then build that revision and move the output to the `vexflow/reference/` directory.
14+
15+
```
16+
grunt reference
17+
```
18+
19+
Then, check out your current branch and build it.
20+
21+
```
22+
git checkout my-new-feature-branch
23+
grunt
24+
```
25+
26+
Now we need to generate images for both the reference and the current branch.
27+
28+
```
29+
grunt generate:current
30+
grunt generate:reference
31+
```
32+
33+
Open the `vexflow/build/images/` directory and you'll see two folders: `current/` and `reference/`.
34+
35+
You can drag this `images/` folder onto the compare page. It will load the images from the two folders and allow you to compare them.
36+
37+
# Method 2: Two Working Copies
38+
39+
Sometimes, you may have two local working copies of VexFlow (e.g., your own, and someone else's fork). This can happen when someone has submitted a pull request, and you want to compare their output to yours.
40+
41+
You can treat each separate working copy as a "current" build, and run `grunt` and `grunt generate:current` on each.
42+
43+
Now, you will have two `vexflow/build/images/current/` folders.
44+
45+
You can drag these two folders onto the compare tool's page (one to the left side, and the other to the right side). Essentially, you treat one `current/` folder as the "reference" and the other `current/` folder as the "current".
46+
47+
If you find it cumbersome to have two `current/` folders, you could rename one of them to `reference/` and then move it over to the other working copy's `vexflow/build/images/` directory. Then, proceed as if you only had a single working copy, by dragging the `images/` folder onto the compare tool's page.

0 commit comments

Comments
 (0)