search

Galooshi / happo

Visual diffing in CI for user interfaces
504 stars 16 forks source link

Add support for React Native #179

Closed lelandrichardson closed 7 years ago

lelandrichardson commented 7 years ago

to: @lencioni @trotzig

This PR is a work in progress, and so far only works for ios (but is almost ready for android). It's best viewed by commit, as it includes a lot of RN template code in the first 2 commits.

Ultimately, I think it makes sense for us to implement this as a plugin system or something, so this PR will likely never get merged, but I thought it would be a good way for us to start the discussion.

I haven't made much of an attempt to share code, though I did refactor some methods into modules so they could be shared across implementations.

How it works:

running happo run-ios does the following things:

  1. Starts a websockets server that the ios app will use to communicate between the two processes
  2. Starts appium, which then launches the simulator with the happo app
  3. The happo app starts, and requests an RN bundle from localhost:8081/happo.bundle which is assuming that the consumer of happo has the RN packager turned on (to default port of 8081) with a happo.js entry file at the root.
  4. The happo.js file needs to at some point require the happo/native js module, which will register itself with the happo server, and the happo app.
  5. Consumer of happo will register happo stories with import StoryManager from 'happo/native';
  6. At startup, happo will send the list of story names over websockets to happo, then render them one by one, taking a snapshot of each, and saving to a temp file. Temp files + story names will be sent across websockets to the happo server.
  7. Happo server diffs files appropriately and does its thing
trotzig commented 7 years ago

Thanks for working on this! I'm excited to see the progress.

As someone who hasn't done any iOS or Android development, what are the steps necessary to try this out? You don't have to be specific, just list e.g "install xcode", "pay for developer's license", "read up on objective-c" etc. :)

lelandrichardson commented 7 years ago

Closing in favor of #185