✨ Browserify @percy/sdk-utils

[wwilsman]

What is this?

This refactors and bundles @percy/sdk-utils to be able to work in browser environments!

• Thanks to all the build/test script updates, bundling for the browser was as easy as adding a browser field to the package.json file, and adjusting the rollup config for package specific settings via the custom rollup field.

• A karma property was also added to support hooks specific for browser tests (more on this later). Rather than using exec, the hook command is called via spawn so stdio can be properly inherited without pipes.

• Now that the package needs to be built (where it previously did not), we can take advantage of es features and refactor the utils. They are also now broken apart into their own modules.

• The getInfo() util was replaced with an exported percy object which gets updated with all of the cached information from the various other utils. This also enables us to test the utils without re-requiring the package to reset private caches since we can now reset these caches via manipulating the percy object. The percy.version property was also updated to be a small version object that contains major/minor/patch/prerelease/build information based on the version string.

• The internal request() util used by other utils is now also exported. This util could potentially be used to interact with other core server API endpoints such as /percy/idle or /percy/stop. Implementation specific fetching can be configured via the request.fetch property. By default, it uses window.fetch in browsers and http.request in node, but can be overridden with framework specific methods. For example, the Cypress SDK can use the cy.backend('http:request') method to avoid CORS/CSP issues.

• The isPercyEnabled() util will now also set up a remote logging connection upon a successful health check response. Failed connections are ignored (such as from CSP) as it will only affect how logs are consumed and not any other functionality. Browser WebSockets are handled internally by the browser, so while thrown errors are ignored, logged errors might still exist in the local browser console and might not be easily avoidable. If this rogue log becomes more of an issue than we expect, we might potentially be able to check for certain other conditions before attempting the connection.

Test helpers were drastically changed and warrant their own set of bullet points.

• The helpers revolve around starting mock API and site servers. These servers are then used for SDK functions to communicate with or take snapshots of. Since you cannot start servers from within a browser, these helpers have to exist in node while providing some way for browser tests to interact with them.

• The core helper functionality and it's methods were moved to test/server.js as a context() helper. The context returned by the helper has a call method which forwards nested accessors or callees to the proper place. The test/helpers.js file now contains a simplified set of methods that themselves use the call method to interact with the test helper context.

• In node environments, the test helper context is attached to the test helper object. In browser environments, the call method is replaced with a WebSocket based solution that connects to and forwards calls to a local test helper server.

• The test/server.js file also exports new start, stop, and exec functions. These functions can be used directly, or via invoking the file as a script (node test/server <start|stop|exec> [...args]).

• The start() function will start a WebSocket server and create a new test helper context so remote sockets can interact with test helpers (used by our karma.run_start hook for our own tests).

• The stop() function will create a new WebSocket, attempt to connect to a running test/server, and send a CLOSE message which triggers the server to stop (used by our karma.run_complete hook for our own tests).

• The exec() function will start and stop the server around a supplied command (for usage similar to percy exec — test/server exec -- run-tests).

[Robdel12]

🏁

[Robdel12]

what is this stance you're taking here. NO SEMI'S?!