Jest.js Configurations #449

Forchapeatl · 2022-08-25T06:37:25Z

Jest.js Configurations

Fixes #418 and #448

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

PR is descriptively titled 📑 and links the original issue above 🔗
tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR
code is in uniquely-named feature branch and has no merge conflicts 📁
screenshots/GIFs are attached 📎 in case of UI updation
ask @publiclab/reviewers for help, in a comment below

Jest.js Configurations

gitpod-io · 2022-08-25T06:37:29Z

Installing Jest.js

jywarren · 2022-08-25T11:11:43Z

Hi @Forchapeatl this is looking great. Before we merge, let's try to add just one test, of something really simple or obvious. Then I can help connect it with GitHub actions and we'll see the green check mark. How does that sound?

Example test

Forchapeatl · 2022-08-25T20:00:46Z

Hello @jywarren . I have done as requested. Is the /test/ui/ directory okay to work with ? Please let me know if it needs any adjustments.

jywarren · 2022-08-25T21:49:58Z

Hi, it looks great! Just added the command to package.json so it runs in GitHub Actions now!

infragram/.github/workflows/tests.yml

Line 25 in a69271b

run: npm test

But now it says:

> [email protected] test /home/runner/work/infragram/infragram
> jest

sh: 1: jest: not found
npm ERR! Test failed.  See above for more details.
Error: Process completed with exit code 1.

So I think we may need to add jest as a dependency. Yes, look:

https://github.com/publiclab/PublicLab.Editor/blob/main/package.json#L65-L66

jywarren · 2022-08-25T21:54:30Z

Hmm, ok, it looks like it's running now, but it got stuck on this line:

https://github.com/publiclab/infragram/runs/8025926511?check_suite_focus=true#step:7:11

jywarren · 2022-08-25T21:57:27Z

package.json

@@ -4,7 +4,8 @@
  "description": "A minimal core of the Infragram project in JavaScript.",
  "main": "dist/infragram.js",
  "scripts": {
-    "build": "grunt build"
+    "build": "grunt build",
+    "test": "jest"


Hi @Forchapeatl I think I have this line wrong. When you ran npm test i would have guessed it to run this. But maybe I'm wrong and this line was not needed? In any case, can you see how we're actually running in GitHub Actions now, and maybe make a suggestion of how to fix this? Thank you!!! Exciting!!

The error I see in the log is:

> [email protected] test /home/runner/work/infragram/infragram > jest /home/runner/work/infragram/infragram/node_modules/jest-cli/build/cli/index.js:161 if (error?.stack) { ^ SyntaxError: Unexpected token . at Module._compile (internal/modules/cjs/loader.js:[7](https://github.com/publiclab/infragram/runs/8025926511?check_suite_focus=true#step:7:8)23:23) at Object.Module._extensions..js (internal/modules/cjs/loader.js:7[8](https://github.com/publiclab/infragram/runs/8025926511?check_suite_focus=true#step:7:9)[9](https://github.com/publiclab/infragram/runs/8025926511?check_suite_focus=true#step:7:10):[10](https://github.com/publiclab/infragram/runs/8025926511?check_suite_focus=true#step:7:11)) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:[12](https://github.com/publiclab/infragram/runs/8025926511?check_suite_focus=true#step:7:13)) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18) at Object.<anonymous> (/home/runner/work/infragram/infragram/node_modules/jest-cli/build/index.js:[13](https://github.com/publiclab/infragram/runs/8025926511?check_suite_focus=true#step:7:14):12) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) npm ERR! Test failed. See above for more details. Error: Process completed with exit code 1.

Here: https://github.com/publiclab/infragram/runs/8025926511?check_suite_focus=true#step:7:10

@jywarren , sorry for the late response. I've been trying to compile some documents from school.

infragram/.github/workflows/tests.yml

Line 21 in 1dabd5c

run: npm install grunt-cli

could we do a simple npm install instead ? I think jest is not being installed properly.

I think npm install is automatically run beforehand; that line is only because grunt-cli is not installed as a regular dependency. Previously i was getting something like "no command jest" but now i think jest is being run.

But, now that I look at this:

https://github.com/publiclab/image-sequencer/blob/main/.github/workflows/tests.yml#L74-L75

I think you could be right. I'll try adding grunt-cli to the devDependencies and then modifying that line to just be npm install.

added puppeteer dependency downgraded jest version

Add jest and jest-puppeteer to dependencies block

After Puppeteer has been installed

jywarren · 2022-08-26T21:45:47Z

Hi @Forchapeatl just wanted to say i think you're trying everything I would have, good detective work!

One clue is, that error?.stack seems to be ES6 syntax... is that right? Like, are we allowed to use a question mark in a variable name in < ES6? Is it possible we're running things in the wrong node version or something? Does this code run perfectly locally and what node version are you running?

https://github.com/facebook/jest/blame/a20bd2c31e126fc998c2407cfc6c1ecf39ead709/packages/jest-cli/src/cli/index.ts#L40

Here's the line that's failing. Ah - it's this operator - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Let's check version in the GitHub Actions environment. We are in Node 10 here, should we upgrade it?

infragram/.github/workflows/tests.yml

Line 11 in 1dabd5c

node-version: '10.x'

Forchapeatl · 2022-08-27T07:03:47Z

Hello @jywarren , I am using node version 14.19.3 on ubuntu 20.4 . Yes please , let's update it.

Added Presets Ndvi Red, Ndiv Blue with Color

jywarren · 2022-08-29T15:39:29Z

I'll try updating node now!

jywarren · 2022-08-29T15:41:53Z

Hey, it's working now! Jest tests are definitely running!

Run npm test

> [email protected] test
> jest

FAIL test/ui/presets.test.js
  Presets Raw 
    ✕ Test values of Presets Raw and related feilds (1 ms)
  Presets Ndvi Blue 
    ✕ Test values of Presets Ndvi Blue and related feilds
  Presets Ndvi Blue color 
    ✕ Test values of Presets Ndvi Blue color and related feilds
  Presets Ndvi Red
    ✕ Test values of Presets Ndvi Red and related feilds
  Presets Ndvi Red color
    ✕ Test values of Presets Ndvi Red color and related feilds

  ● Presets Raw  › Test values of Presets Raw and related feilds

    net::ERR_CONNECTION_REFUSED at http://127.0.0.1:8080/index.html

      1 | const timeout = process.env.SLOWMO ? 30000 : 100000;
      2 | beforeAll(async () => {
    > 3 |   await page.goto('http://127.0.0.1:8080/index.html', {waitUntil: 'domcontentloaded'});
        |   ^
      [4](https://github.com/publiclab/infragram/runs/8074362111?check_suite_focus=true#step:7:5) | });
      [5](https://github.com/publiclab/infragram/runs/8074362111?check_suite_focus=true#step:7:6) |
      [6](https://github.com/publiclab/infragram/runs/8074362111?check_suite_focus=true#step:7:7) | describe('Presets Raw ', () => {

OK, let's see what's up with the port 8080 issue.

test/ui/presets.test.js

Wait in background

removed concurrency

uncomment #modeSwitcher

uncomment G B values

uncomment #colorbar-container

jywarren · 2022-08-30T18:39:55Z

Ah, what did you find? Some of these passed, huh?

uncommented presets NDVI

uncommented preset_modalInput variable

log CSS styles

Forchapeatl · 2022-08-31T10:47:20Z

Ah, what did you find? Some of these passed, huh?

Yes , we pass on github actions only when we log the CSS styling

infragram/test/ui/presets.test.js

Line 39 in a74ce83

console.log(">>>>>>>>>>>>>>>>>>>>>>>> "+ colorbar_containerInput );

I believe it's ready to merge

jywarren · 2022-08-31T13:10:11Z

Oh... Is it reading the log as the results? By convention, an output of the digit 0 is read as failing, I think? Or is it 1?

You can read how some other folks are configuring jest here and some discussion of exit codes: jestjs/jest#9324

But it's a long thread and there are probably better resources for how log statements affect success or failure.

I still think the best approach is to closely match an existing jest test suite, like the image sequencer project. Let me take a look at these logs, but can you ask Cess and Tilda for help in the chat as well?

Thanks for sticking with this. We're almost there.

jywarren · 2022-08-31T13:14:56Z

That's strange.

FAIL test/ui/presets.test.js
  Presets Raw 
    ✕ Test values of Presets Raw and related feilds (2294 ms)

It doesn't error it actually fails. Meaning it successfully runs the whole test but it reads the test output as a failure. Could this have something to do with the asynchronicity of the test? Like, maybe it just waits until the time out, and then fails. But if we add a comment, somehow, it waits long enough? I don't know if that makes any sense.

jywarren · 2022-08-31T13:18:26Z

test/ui/presets.test.js

+    console.log(">>>>>>>>>>>>>>>>>>>>>>>>  "+ colorbar_containerInput );
+    console.log(">>>>>>>>>>>>>>>>>>>>>>>>  "+ preset_modalInput );
+
+    // Check if #colorbar_Container appears


Can we remove the logs and try inserting an obvious true assertion like:

expect (true).toBeTrue();

?

Then try one that should fail? I'm worried we aren't actually testing any of these expect lines if it's getting lost waiting for await.

Aren't we supposed to see a confirming output for each of the expect statements?

changed toEqual() to toBe()

Forchapeatl · 2022-09-02T09:34:31Z

@jywarren ,please may I merge this?

jywarren · 2022-09-02T13:25:56Z

Was it toEqual vs. toBe? Just let me know by commenting when you solve something so I can follow along! Thanks, yes, let's merge it! You go ahead!

jywarren · 2022-09-02T13:26:23Z

test/ui/presets.test.js

@@ -40,9 +40,9 @@ describe('Presets Raw ', () => {
    //console.log(">>>>>>>>>>>>>>>>>>>>>>>>  "+ preset_modalInput );

    // Check if #colorbar_Container appears
-    expect(colorbar_containerInput).toEqual('none');
+    expect(colorbar_containerInput).toBe('none');


aha, great catch.

jywarren · 2022-09-02T13:27:03Z

Great job!!

Jest.js Configurations

e937e80

Jest.js Configurations

Installing Jest.js

81d149a

Installing Jest.js

Forchapeatl requested a review from jywarren August 25, 2022 06:40

Create presets.test.js

a69271b

Example test

add jest command for "npm test"

1c7b2f1

add jest to npm, track lockfile

8cb5fb5

jywarren reviewed Aug 25, 2022

View reviewed changes

Forchapeatl added 6 commits August 26, 2022 06:20

added puppeteer dependency downgraded jest version

e44c4a0

added puppeteer dependency downgraded jest version

Update package.json

224d779

Update package.json

dc68e30

Add jest and jest-puppeteer to dependencies block

1c9f674

Add jest and jest-puppeteer to dependencies block

After Puppeteer has been installed

15c99fc

After Puppeteer has been installed

Downgraded jest

6da6437

Added Presets Ndvi Red, Ndiv Blue with Color

9a2c9bb

Added Presets Ndvi Red, Ndiv Blue with Color

Forchapeatl requested a review from jywarren August 28, 2022 09:25

update node in GitHub Actions to v16

0bba014

jywarren reviewed Aug 29, 2022

View reviewed changes

test/ui/presets.test.js Show resolved Hide resolved

Update test/ui/presets.test.js

19fb57b

jywarren reviewed Aug 29, 2022

View reviewed changes

test/ui/presets.test.js Outdated Show resolved Hide resolved

Update test/ui/presets.test.js

1e5744d

jywarren reviewed Aug 29, 2022

View reviewed changes

test/ui/presets.test.js Show resolved Hide resolved

Forchapeatl added 10 commits August 30, 2022 06:28

used http-server . &

3f08dc0

Added conccureency

237b3df

Wait for 5 seconds before testing

6a7a8f4

Update tests.yml

bfe8a98

Wait in background

f38ce47

Wait in background

Update presets.test.js

d17e6f6

removed concurrency

d5f1060

removed concurrency

uncomment #modeSwitcher

afacfe9

uncomment #modeSwitcher

uncomment G B values

95c0239

uncomment G B values

uncomment #colorbar-container

579eec6

uncomment #colorbar-container

Forchapeatl added 7 commits August 31, 2022 07:34

Update presets.test.js

57292a6

log css style

0cd430a

uncommented presets NDVI

e689cd1

uncommented presets NDVI

uncommented preset_modalInput variable

a901a08

uncommented preset_modalInput variable

Update presets.test.js

48539e4

removed logs

a94679e

log CSS styles

a74ce83

log CSS styles

downgrade jest

c270f69

jywarren reviewed Aug 31, 2022

View reviewed changes

Forchapeatl added 2 commits August 31, 2022 14:21

removed logs

93ba88d

changed toEqual() to toBe()

934ea99

changed toEqual() to toBe()

jywarren reviewed Sep 2, 2022

View reviewed changes

Forchapeatl merged commit 2dd7900 into main Sep 2, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Jest.js Configurations #449

Jest.js Configurations #449

Forchapeatl commented Aug 25, 2022

gitpod-io bot commented Aug 25, 2022

jywarren commented Aug 25, 2022

Forchapeatl commented Aug 25, 2022 •

edited

Loading

jywarren commented Aug 25, 2022

jywarren commented Aug 25, 2022

jywarren Aug 25, 2022

jywarren Aug 25, 2022

Forchapeatl Aug 26, 2022

jywarren Aug 26, 2022

jywarren commented Aug 26, 2022

Forchapeatl commented Aug 27, 2022

jywarren commented Aug 29, 2022

jywarren commented Aug 29, 2022

jywarren commented Aug 30, 2022

Forchapeatl commented Aug 31, 2022 •

edited

Loading

jywarren commented Aug 31, 2022

jywarren commented Aug 31, 2022

jywarren Aug 31, 2022

jywarren Aug 31, 2022

Forchapeatl commented Sep 2, 2022 •

edited

Loading

jywarren commented Sep 2, 2022

jywarren Sep 2, 2022

jywarren commented Sep 2, 2022

Jest.js Configurations #449

Jest.js Configurations #449

Conversation

Forchapeatl commented Aug 25, 2022

gitpod-io bot commented Aug 25, 2022

jywarren commented Aug 25, 2022

Forchapeatl commented Aug 25, 2022 • edited Loading

jywarren commented Aug 25, 2022

jywarren commented Aug 25, 2022

jywarren Aug 25, 2022

Choose a reason for hiding this comment

jywarren Aug 25, 2022

Choose a reason for hiding this comment

Forchapeatl Aug 26, 2022

Choose a reason for hiding this comment

jywarren Aug 26, 2022

Choose a reason for hiding this comment

jywarren commented Aug 26, 2022

Forchapeatl commented Aug 27, 2022

jywarren commented Aug 29, 2022

jywarren commented Aug 29, 2022

jywarren commented Aug 30, 2022

Forchapeatl commented Aug 31, 2022 • edited Loading

jywarren commented Aug 31, 2022

jywarren commented Aug 31, 2022

jywarren Aug 31, 2022

Choose a reason for hiding this comment

jywarren Aug 31, 2022

Choose a reason for hiding this comment

Forchapeatl commented Sep 2, 2022 • edited Loading

jywarren commented Sep 2, 2022

jywarren Sep 2, 2022

Choose a reason for hiding this comment

jywarren commented Sep 2, 2022

Forchapeatl commented Aug 25, 2022 •

edited

Loading

Forchapeatl commented Aug 31, 2022 •

edited

Loading

Forchapeatl commented Sep 2, 2022 •

edited

Loading