javascript-todo-list-tutorial I got a test error while doing a clean yarn/npm install when cloning the repo

Hi, I got that error and the tests failed afterwards when I did a clean install. I'm using macOS Catalina 10.15.5.

 ✖ <input autofocus> is "activeElement"
      operator: equal
      expected: |-
        <body>...</body>
      actual: |-
        <input class="new-todo" autofocus="" id="new"></input>
      at: Test.<anonymous> (/Users/miltiadisbouchalakis/projects/todo-mvc/javascript-todo-list-tutorial/test/elmish.test.js:60:5)
      stack: |-

My temp solution was to comment that test but I'm not sure how to fix it since I just started checking this project.

Thanks, M

Aug 10 '20 23:08 miltiadis

Hi @miltiadis thanks for opening this issue to share your experience. 👍 It's very strange that one of the tests would fail when none of the devDependencies has diverged. Can you: a. try using npm test instead of yarn b. let us know what OS and version of Node.js you are using.

Aug 11 '20 00:08 nelsonic

Scratch that! I just did a fresh install and got the same error! 🤦

Going to check it out now!

Aug 11 '20 00:08 nelsonic

Ah, no worries!

I'm glad we spotted it early.

Thanks for trying to help.

Aug 11 '20 00:08 miltiadis

Ok, so it looks like the test is expecting <input class="new-todo" autofocus= ...> but the actual result is: <body> ... </body> i.e. the full <body> of the DOM.

the document.activeElement is actually HTMLBodyElement {} ... 😕

Aug 11 '20 00:08 nelsonic

Ok, I've tracked it down. JSDOM has introduced a breaking change! 🤦 If you change the line in you package.json

from:

https://github.com/dwyl/javascript-todo-list-tutorial/blob/e6736add9df1f46035f8a9d1dbdc14c71a7cdb41/package.json#L14

to:

    "jsdom": "16.0.1",

i.e. you set the version of jsdom to be fixed not a "greater than". then the tests all pass again.

Aug 11 '20 00:08 nelsonic

Thanks for the ultra-fast solution 👍
I just locked the version to the one you mentioned and it works for me as well.

Shall I close this issue

Aug 11 '20 00:08 miltiadis

@miltiadis sadly, we cannot close the issue unless we apply the "fix" to master. But we prefer to actually fix the issue permanently rather than just pin the version of jsdom. The jsdom changelog https://github.com/jsdom/jsdom/blob/master/Changelog.md says v16.4.0 "fixed" el.focus() ... But in reality they have diverged the expected behaviour ... 🙄

Aug 11 '20 00:08 nelsonic

Known issue: https://github.com/jsdom/jsdom/issues/2586#issuecomment-627155416 ... 🤦 This is very much an issue with JSDOM not with our test or how our ("elmish") microframework works. 🤷‍♂️

Aug 11 '20 23:08 nelsonic

No longer an issue. Fresh git clone, npm install & npm test:

    root HTMLDivElement {}
    JSDOM window.location.href: about:blank
    START window.location.hash:  (empty string)
    START window.history.length: 1
    UPDATED window.history.length: 2
    UPDATED state: { hash: '#/active' }
    UPDATED window.location.hash: #/active
    value: Let's solve our own problem
    value: Let's solve our own problem
    value: Let's solve our own problem
    value: Let's solve our own problem
    value: Let's solve our own problem
    -------------|---------|----------|---------|---------|-------------------
    File         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
    -------------|---------|----------|---------|---------|-------------------
    All files    |     100 |      100 |     100 |     100 |
     elmish.js   |     100 |      100 |     100 |     100 |
     todo-app.js |     100 |      100 |     100 |     100 |
    -------------|---------|----------|---------|---------|-------------------

  total:     137
  passing:   137

  duration:  1.4s

Aug 05 '23 06:08 nelsonic