Skip to content

Get Nodejs to recognise jquery command for publishButton jest test file #764

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
NARUDESIGNS wants to merge 2 commits into from
Closed

Get Nodejs to recognise jquery command for publishButton jest test file #764

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca17c06
got nodejs to recognise jquery command for publishButton jest test file
NARUDESIGNS Dec 13, 2021
36ed578
Merge branch 'main' into fix-publish-button-jest-file
jywarren Dec 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 18 additions & 8 deletions test/ui-testing/publishButton.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,24 @@
const timeout = process.env.SLOWMO ? 60000 : 10000;
const fs = require('fs');
beforeAll(async () => {
path = fs.realpathSync('file://../examples/index.html');
await page.goto('file://' + path, {waitUntil: 'domcontentloaded'});
});

describe('Publish button', () => {

test('something we are testing described here', () => {
var $;
beforeAll(async () => {
path = fs.realpathSync('file://../examples/index.html');
Copy link
Member

@jywarren jywarren Dec 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not 100% sure here, but working from https://stackoverflow.com/a/46987959/1116657 I'm thinking we should try something like this:

Suggested change
path = fs.realpathSync('file://../examples/index.html');
import { launch } from 'puppeteer'
(async () => {
const browser = await launch({headless: false});
const page = await browser.newPage();
await page.goto('file://../examples/index.html', {waitUntil: 'networkidle'});
//path = fs.realpathSync('file://../examples/index.html');
await page.addScriptTag({url: 'https://code.jquery.com/jquery-3.2.1.min.js'});
await page.waitForNavigation()

My main uncertainty is how to load the local file rather than a remote URL. Not sure what I wrote here will work.

Copy link
Collaborator Author

@NARUDESIGNS NARUDESIGNS Dec 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea exactly, I bumped into this as well since I decided I could no longer make use of jsdom. I tried this but it didn't work for me.
I think we might be able to load the local version of jquery using:

await page.addScriptTag({path: require.resolve('jquery')})

but I wasn't sure what that path (path to jquery) is for our project. So I did

const jqueryPath = require('jquery')

then I hovered on 'jquery' and saw the path, I copied it and used it directly. Here's the new error I got:

Screenshot 2021-12-19 at 19 17 08

I'm not so sure what the '_productName' is but I'm still looking. Do you have any idea what it is?
@jywarren

await page.goto('file://' + path, {waitUntil: 'domcontentloaded'});

const {JSDOM} = require("jsdom");
const myJSDom = new JSDOM(fs.readFileSync(path));
$ = require('jquery')(myJSDom.window);
});

test('something we are testing described here', () => {
// Check initially that Publish button is disabled.
expect($('.ple-publish').prop('disabled')).toBe(true);
Copy link
Member

@jywarren jywarren Dec 17, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK this is what's failing now. And it looks like a real failure - but is it? In theory, the editor's Publish button should really be disabled on initial page load, right? because it's waiting for you to input a title and some text before it thinks you should be able to press Publish.

Maybe we should start by checking something more basic, like this?

expect($('.ple-publish')).toBeDefined();

That way we know we're looking at the correct page at least, then we can try to figure out why the button is not disabled. How does that sound?

Copy link
Member

@jywarren jywarren Dec 17, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm working from this list of Jest assertions: https://jestjs.io/docs/using-matchers

Copy link
Member

@jywarren jywarren Dec 17, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, i see. From your gitter chat comment, you're saying the button gets created, but validation is never run (_editor.validate()), so it never adds the disabled state to the button because it never checks if you've added a title.

That would be good, in that we are reading the actual HTML. But why isn't it running validation? Normally these lines should "boot up" the editor including running initial validations:

PublicLab.Editor/examples/index.html

Lines 410 to 419 in f8e1edb

(function () {
editor = new PL.Editor({
textarea: $(".ple-textarea")[0],
destination: "/notes/create",
mapModule: true,
format: "publiclab",
lat: 23,
lon: 77,
zoom: 5,
});

And after all, the test file this one is based on does the exact same thing - and relies on that Editor "boot-up" to have run: https://github.com/publiclab/PublicLab.Editor/blob/main/spec/javascripts/button_spec.js

How can we see the errors that may occur preventing that bootup from happening? When we look through the log in this PR, are there signs that some code hit an error or did not run?

Earlier tests seem to have run. Did they load the page properly?https://github.com/publiclab/PublicLab.Editor/runs/4510360996?check_suite_focus=true#step:7:8

Hmm, a lot of them seem to be asynchronous, meaning they're waiting for other stuff to complete before trying to run. Do we need to do the same for this new test?

PublicLab.Editor/test/ui-testing/CustomInsert.test.js

Lines 9 to 13 in f8e1edb

test('Add Custom Insert text in rich text mode', async () => {
if (await page.evaluate(() => $(".woofmark-mode-markdown").is(":disabled"))) {
await page.click('.woofmark-mode-wysiwyg');
}
await page.waitForSelector('.ple-module-body');

Copy link
Member

@jywarren jywarren Dec 17, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So would that be like this, plus adding async to the top of the containing function?

Suggested change
expect($('.ple-publish').prop('disabled')).toBe(true);
await expect($('.ple-publish').prop('disabled')).toBe(true);

// Add title.
$('.ple-module-title input').val('A title');
$('.ple-module-title input').keydown();
// Check final state of Publish button.
expect($('.ple-publish').prop('disabled')).toBe(false);
});

});
}, timeout);