Ability to `undo` Approve in backstop report

[shankarsridhar]

https://github.com/garris/BackstopJS/pull/1150 introduced a much needed DX improvement to backstop JS, that lets test screenshots to be promoted to reference screenshots through the backstop report UI itself.

It would be nice to have a way to undo a reference image that was Approved by mistake, in the same backstop report UI.

CC: @garris @1276stella

[Alexbirvik]

Hi @shankarsridhar ! Can you please provide any information how to get approve button in a UI report?

[garris]

@Alexbirvik You will need to run backstop remote server in parallel with your normal BackstopJS app -- the following will be added to our docs soon...

---

Backstop-Remote

Run BackstopJS commands remotely with an easy-to-use web API for BackstopJS.

Description:

Backstop-Remote exposes BackstopJS CLI commands as an HTTP Web service, enabling remote client interactions (e.g. hosted backstop reports, approve button interactions, etc.) with a local or remote instance of BackstopJS.

Running backstop-remote will automatically give you a convenient approve button in the existing BackstopJS browser report. It also solves the problem of hosting that report and testing instance on another (real or virtual) machine.

Backstop-Remote also enables a feature we like to call dynamic test mode. This is a config-less testing approach that allows BackstopJS to create scenarios on-the-fly (simply pass this in as a POST call).

And why would you want to create tests on the fly? Many JavaScript apps already have an integrated testing framework (e.g. Ember, Storybook, etc.) by running Backstop-Remote you open the door to a world of backstopHelper() methods you can use in your existing tests. Check out this Ember add-on test-helper we use at LinkedIn.

For more on dynamic test creation mode where scenarios are generated on the fly by POST-ing URLs, scenarioLabels, testIds, and scenario rules) see here some example code.

Workflow:

For basic workflow enhancements to your existing BackstopJS reports: Start service in one window and run tests in another window.

Starting the Backstop-Remote service

On the CLI...

backstop remote --config=<optional-some-backstop-config>

Or, in a node app you might do something like this to start the Backstop Remote process...

    backstopjs('remote', {
      config: commandOptions.config, 
      filter: commandOptions.filter
    });

Stopping the service

You can kill the process or you can...

http://<backstopHost>/stop/

[Alexbirvik]

@garris Thank you! Now its clear.

Can you suggest how to run that remote server on different ports? I have different tests located in different folders to run it separately from a node.js express app. As I can see I need its own remote server for each config I run.

For example Test1: backstop.json uses 127.0.0.1:3000 Test2: backstop.json uses 127.0.0.1:3001 Test3: backstop.json uses 127.0.0.1:3002