Publish Button test in Jest

[TarunRaveesh]

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!

fixes #745

[welcome]

Thanks for opening this pull request! This space is protected by our Code of Conduct - and we're here to help.
Please make sure you've bumped up the version number in the repository's package.json file and that you've incorporated your changes in the /dist/ sub-directory.
Dangerbot will test out your code and reply in a bit with some pointers and requests.
Also please refer here for installation help 💿
There may be some errors, but don't worry! We'll work through them with you! 👍🎉😄
It would be great if you can tell us your Twitter handle so we can thank you properly?

[gitpod-io]

[jywarren]

Hmm, i'm seeing in the tests:

    ReferenceError: $ is not defined

       9 |     test('publish button gets enabled', () => {
      10 |         // Check initially that Publish button is disabled.
    > 11 |         expect($('.ple-publish').prop('disabled')).toBe(true);

This means we need to get jquery into the test file. Let me think and we should be able to do that.

[jywarren]

OK - more closely following the example in https://stackoverflow.com/a/48763451 now! Fingers 🤞

[jywarren]

OK, so the issue here is that we're trying to use jQuery, but within Puppeteer's browser, we can't directly access jQuery. We'd have to do it in a block like this:

   await page.goto('http://localhost/jest/table.html');
   await page.addScriptTag({url: 'https://code.jquery.com/jquery-3.3.1.slim.min.js'});
   const result = await page.evaluate(() => {
       try {
           var table = $("table").attr("id");
           return table;
       } catch (e) {
           return e.message;
       }
   });
   await console.log("result", result);

That's a lot of trouble, and we can't do assertions inside, i think? not sure. But maybe we can install this: https://github.com/melbourne2991/jquery-puppeteer and it would "just work"? worth a shot. I'll try this tomorrow.

I'm so sorry this is much more complex than we'd thought! We'll get through it together though!

References:

• https://stackoverflow.com/questions/49192329/how-do-i-use-jquery-with-pages-on-puppeteer
• https://dev.to/napolux/how-to-scrap-that-web-page-with-nodejs-and-puppeteer-811
• https://jestjs.io/docs/tutorial-jquery

[jywarren]

Or easier maybe native puppeteer selectors?

https://github.com/puppeteer/puppeteer/blob/v10.4.0/docs/api.md#pageselector

[jywarren]

https://stackoverflow.com/questions/56467696/get-the-value-of-html-attributes-using-puppeteer#56467778

[TildaDares]

Hi @TarunRaveesh, we're currently working on converting jasmine tests to jest and the conversion is a bit tricky. @NARUDESIGNS has resolved this issue in #785. You did a great job and we appreciate the time you spent working on this PR. If you'd like to work on another issue, leave a comment here and I'll find another one for you. Thank you!