Skip to content

Conversation

@xhluca
Copy link

@xhluca xhluca commented Feb 28, 2019

About

CircleCI builds: https://circleci.com/gh/xhlulu/dash-cytoscape/tree/master
Percy build: https://percy.io/plotly/dash-cytoscape

Please note that I have already setup CircleCI on the Plotly account, I'm simply using my personal account so I can work on the PR directly while testing changes in the build. The (currently unused) build is here: https://circleci.com/gh/plotly/dash-cytoscape

Description of changes

With this PR, we will introduce 2 new test classes, namely test_usage and test_percy_snapshot. The former will run most of the usage apps, then save a screenshot of each. test_percy_snapshot will then create an app containing all of those images, and take a screenshot for continuous visual integration.

This PR will also update the config.yml in order to accomodate the new tests, as well as include tests for Python 3.7. I decided not to add support for 2.7 because of the imminent deprecation.

Pre-Merge checklist

  • The project was correctly built with npm run build:all.
  • If there was any conflict, it was solved correctly
  • All changes were documented in CHANGELOG.md.
  • All tests on CircleCI have passed.
  • All Percy visual changes have been approved.
  • Two people have 💃'd the pull request. You can be one of these people if you are a Dash Cytoscape core contributor.

Reference Issues

Closes #[issue number]

Other comments

Xing Han Lu added 8 commits February 27, 2019 23:22
Needed to auto-generate screenshots from test_usage.py, which will be then used in test_percy_snapshot for CVI
To be broken down into different tests
Almost exhaustive test of many different types of apps, from the usage apps in root to the demos
Create a single app that generate a webpage containing all the screenshots taken in the test_usage.py. We then take a screenshot of everything using percy, and this is used to compare differences.

We employ this method because it is currently impossible for percy to render canvas elements (since it directly crawls the DOM), so this is the only way to proceed
@xhluca xhluca requested review from T4rk1n and chriddyp February 28, 2019 04:34
@xhluca
Copy link
Author

xhluca commented Feb 28, 2019

@chriddyp @T4rk1n Let me know your thoughts!

@chriddyp
Copy link
Member

I just enabled percy for this repo, so the status should appear in the PR's "checks" in the future.
image

@chriddyp
Copy link
Member

In general, it'd be good to do separate snapshots for each chart rather than one large snapshot. That way, if one of the images changes, it won't impact the diff of the other images (e.g. if the first graph changes height, then it'll effect the rest of the page)
image

Copy link
Member

@chriddyp chriddyp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, this was a clever solution. Just a few small suggestions on my end.

return "data:image/png;base64," + encoded_string.decode('ascii')

# Define the app
app = dash.Dash(__name__)
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chriddyp check out this multi-route app. Here I Assign the url path to return the image it represent. For example, to return "usage.png", you can visit localhost/usage.png.

@xhluca xhluca requested a review from chriddyp February 28, 2019 23:21
Copy link
Member

@chriddyp chriddyp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃

@xhluca xhluca merged commit f7cc272 into plotly:master Mar 1, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants