Integrates jest-puppeteer for UI testing

[cypherean]

Fixes #503
Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

• tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with grunt jasmine
• code is in uniquely-named feature branch and has no merge conflicts
• PR is descriptively titled
• PR body includes fixes #0000-style reference to original issue #
• ask @publiclab/reviewers for help, in a comment below

We're happy to help you get this ready -- don't be afraid to ask for help, and don't be discouraged if your tests fail at first!

If tests do fail, click on the red X to learn why by reading the logs.

Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software

We have a loose schedule of reviewing and pulling in changes every Tuesday and Friday, and publishing changes on Fridays.

Thanks!

[cypherean]

It doesn't work without adding args: ['--no-sandbox'] in the config file. (Found this as a solution for the errors) . The only relevant piece of info I've found so far is
When running headless Chrome in a container without a defined user, the chromeOptions environment property needs a --no-sandbox arg (in addition to the other headless args), or Chrome won't be able to startup.
Are there any negative impacts for using this? Is it just a workaround or a required necessity? Is there a better approach for this?
cc: @jywarren @emilyashley @keshav234156 @NitinBhasneria @Shulammite-Aso

[cypherean]

The jest test can be run using npm run test-ui. If you face any error while running these tests:

1. Make sure you're not running them as a root user. If running them as a root user include args: ['--no-sandbox'] in jest-puppeteer.config.js (not recommended).
2. Make sure you have all the required dependencies installed.
   For Debian systems

sudo apt-get install gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

3. Upgrade your kernel.

[jywarren]

This is looking awesome. Can you include your docs (as written above) in the README as a part of this PR?

This is really cool! Just noting we can potentially merge this PR without making the UI tests required, in order to allow people to try it out and to refine it a bit. Then we can open a follow-up issue to "turn it on" for Travis and make them required. But, we don't have to do it this way, it's just an option to consider!

Thanks @shreyaa-sharmaa this is going to be EPICALLY useful for any new features we add, as every PR can begin to have thorough UI tests. Please consider including it in either the next release in #532 or in an upcoming release! 🎉 🙌

[jywarren]

@Shulammite-Aso @keshav234156 @NitinBhasneria this is really cool! Give it a try?

And one more thought - if you need special configurations to run this, perhaps adding lines to our Travis configuration to ensure it will run in /that/ environment, will help to demonstrate the prerequisites needed to run it, all in the same PR?

Here's an example complex travis.yml with prerequisites: https://github.com/publiclab/image-sequencer/blob/main/.travis.yml

And here are some docs! https://docs.travis-ci.com/user/installing-dependencies/

Great work! 💯

[cypherean]

Thanks for the input @jywarren . I completely agree with the idea of not making the UI tests required as of right now. The only reason I opened it as a draft PR was because I was writing a few tests and wanted to make sure that the config file meets all the requirements before I open the PR. Since we faced a few bugs with the formatting options like bolding the text, and have been working on implementing the new features, I too believe that this would be a great asset for thorough UI testing and would love to see it in the next release. I'll go through the docs that you shared and get back here as soon as possible. Also I'll try to add in a few tests asap. I'm working on them right now.

[jywarren]

Hi @shreyaa-sharmaa can you link us to where the tests are being run in Travis, if they are yet? Or if not, can you paste in here (or quote from gist.github.com) a sample test log? Thanks!!

[keshav234156]

Please add the test command in travis.yml,so that it on run on Travis

[cypherean]

It's done!

Thanks everyone! Please review and let me know if any changes are required.

[keshav234156]

LGTM!!

[jywarren]

Wow, this is fantastic! Have you tested introducing a test error to be sure Travis fails too? Just this last test -- we should see a little red X appear -- and then let's fix it again and merge this!

[jywarren]

Actually, because I know other PRs are waiting on this, would you mind @shreyaa-sharmaa creating a PR that breaks tests, just to confirm, and linking here? Then I can merge this to unblock others. FANTASTIC WORK! This is going to be huge for complex features we need to protect, and for debugging delicate things like jywarren/woofmark#4 (comment)

THANKS!! 🎉 🎉

[welcome]

Congrats on merging your first pull request! 🙌🎉⚡️
Your code will likely be published to PublicLab.org in the next few days. In the meantime, can you tell us your Twitter handle so we can thank you properly?
Do join our weekly check-in to share your this week goal and the awesome work you did 😃.
Reach out to someone else working on theirs on Public Lab's code welcome page. Thanks!
Now that you've completed this, you can help someone else take their first step!
See: Public Lab's coding community!

Help others take their first step

Now that you've merged your first pull request, you're the perfect person to help someone else out with this challenging first step. 🙌

https://code.publiclab.org

Try looking at this list of `first-timers-only` issues, and see if someone else is waiting for feedback, or even stuck! 😕

People often get stuck at the same steps, so you might be able to help someone get unstuck, or help lead them to some documentation that'd help. Reach out and be encouraging and friendly! 😄 🎉

Read about how to help support another newcomer here, or find other ways to offer mutual support here.

[jywarren]

THANK YOU for this excellent documentation!

[jywarren]

Ah, actually look - it failed here after updating!! #543

so we should be all good! ✅ 🎉 🙌