Add heading tests and testbed

[vincerubinetti]

Incorporates #51 (review)

• fix bug where id not added to heading (regression from 5c3728d)
• add heading link to topmost h1 afterall
• change innerText to textContent for support in jest (jsdom)
• add section of routes for dev-only test routes
• make testbed page for testing out and experimenting with component look and feel
• make test for app heading component to see that auto level and link work

[netlify]

✔️ Deploy Preview for monarch-ui-new ready!

🔨 Explore the source changes: e11a136

🔍 Inspect the deploy log: https://app.netlify.com/sites/monarch-ui-new/deploys/617726a8b54af7000730382a

😎 Browse the preview: https://deploy-preview-52--monarch-ui-new.netlify.app

[vincerubinetti]

@falquaddoomi If you already started looking at this, hold off. Adding one more significant commit.

[vincerubinetti]

@falquaddoomi ready for (re)review

[falquaddoomi]

Nice! I like the addition of the testbed endpoint. IIRC Sean mentioned it before, but you might be interested in Storybook, which is quite like your widget gallery but has support for injecting props, mocking external state, and other things.

Just FYI, I was able to run the tests and they all passed. There appear to be some warnings related to vuex, but I don't think they're critical or in our power to fix.

[vincerubinetti]

Regarding storybook, yeah the testbed is a very "lite" version of that idea. Actually using storybook is probably overkill, since so far we don't have a lot of components, options, or developers. Perhaps in the future when the ui team gets more members or maintainers, or when/if we have more components, we can implement it.

If we ever make some of these components publicly usable, that would also be a great case for implementing storybook. Not talking about the basic buttons/accordions/tooltips/etc which are not valuable to release; talking more specific widgets like genome feature viewer or something.

Regarding the test errors, I don't think I'm seeing any vuex errors on my machine. Could you paste what you're seeing? Here's what I'm seeing:

vue-cli-service lint --no-fix
 DONE  No lint errors found!
$ vue-cli-service test:unit /unit
ts-jest[versions] (WARN) Version 4.1.6 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.ts-jest[versions] (WARN) Version 4.1.6 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.ts-jest[versions] (WARN) Version 4.1.6 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.ts-jest[versions] (WARN) Version 4.1.6 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.ts-jest[versions] (WARN) Version 4.1.6 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions. PASS  tests/unit/AppAccordion.test.ts (13.924s)
 PASS  tests/unit/AppButton.test.ts (13.923s)
 PASS  tests/unit/AppMarkdown.test.ts (13.955s)
 PASS  tests/unit/AppLink.test.ts (13.993s)
 PASS  tests/unit/uptime.test.ts (14.137s)

Test Suites: 5 passed, 5 total
Tests:       7 passed, 7 total
Snapshots:   0 total
Time:        15.265s
Ran all test suites matching /\\unit/i.
$ vue-cli-service test:e2e --headless
 INFO  Starting e2e tests...
 INFO  Starting development server...


 WARNING  Compiled with 3 warnings                                                                                     1:18:34 PM
 warning 

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  js/chunk-vendors.15919843.js (432 KiB)

 warning 

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (614 KiB)
      css/chunk-vendors.c0bde074.css
      js/chunk-vendors.15919843.js
      css/app.dd25a8b6.css
      js/app.c589abde.js


 warning 

webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.8.129:8080/

  App is served in production mode.
  Note this is for preview or E2E testing only.



====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    3.8.3                                                                              │
  │ Browser:    Electron 78 (headless)                                                             │
  │ Specs:      3 found (app.js, header.js, title.js)                                              │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  app.js                                                                          (1 of 3)
Browserslist: caniuse-lite is outdated. Please run the following command: `npm update`
undefined

  √ App renders (1169ms)
undefined
  1 passing (1s)
undefined

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     1 second                                                                         │
  │ Spec Ran:     app.js                                                                           │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF
  -  Finished processing: tests\e2e\videos\app.js.mp4                                    (0 seconds)


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  header.js                                                                       (2 of 3)
undefined

  √ Header nav bar collapses on small screens (515ms)
undefined
  1 passing (533ms)
undefined

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     header.js                                                                        │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF
  -  Finished processing: tests\e2e\videos\header.js.mp4                                 (0 seconds)


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  title.js                                                                        (3 of 3)
undefined

  √ Document title updates on navigation (601ms)
undefined
  1 passing (615ms)
undefined

  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     title.js                                                                         │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF
  -  Finished processing: tests\e2e\videos\title.js.mp4                                  (0 seconds)


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ √  app.js                                   00:01        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ √  header.js                                530ms        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ √  title.js                                 618ms        1        1        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    √  All specs passed!                        00:02        3        3        -        -        -  

$ vue-cli-service test:unit /axe
ts-jest[versions] (WARN) Version 4.1.6 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.  console.log tests/axe/pages.test.ts:23

    ========== Testing page / ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /home ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /explore ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /tools ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /about ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /cite ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /team ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /publications ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /sources ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /terms ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /help ==========


 PASS  tests/axe/pages.test.ts (41.87s)
  √ Page accessibility checks (35783ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        42.42s
Ran all test suites matching /\\axe/i.
Done in 128.36s.

[falquaddoomi]

Fair point about Storybook being overkill, at least for now. I thought I'd mention it since your implementation looked similar.

Here are the warnings that I saw; note that they're just warnings, not errors, and they could be specific to my machine. I'm using node v16.8.0, fyi. (I did wipe node_modules and re-run yarn install to be sure it wasn't some cruft, but it didn't change anything.)

[ faisala@dagr ]$ yarn test
yarn run v1.22.5
$ yarn test:lint && yarn test:unit && yarn test:e2e && yarn test:axe
$ vue-cli-service lint --no-fix
 DONE  No lint errors found!
$ vue-cli-service test:unit /unit
ts-jest[versions] (WARN) Version 4.1.6 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
ts-jest[versions] (WARN) Version 4.1.6 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
ts-jest[versions] (WARN) Version 4.1.6 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
ts-jest[versions] (WARN) Version 4.1.6 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
ts-jest[versions] (WARN) Version 4.1.6 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
ts-jest[versions] (WARN) Version 4.1.6 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
(node:42209) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/faisala/Checkouts/chai/tislab-migration/monarch/monarch-ui-new/node_modules/vuex/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
 PASS  tests/unit/AppButton.test.ts
(node:42207) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/faisala/Checkouts/chai/tislab-migration/monarch/monarch-ui-new/node_modules/vuex/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:42210) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/faisala/Checkouts/chai/tislab-migration/monarch/monarch-ui-new/node_modules/vuex/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
 PASS  tests/unit/AppLink.test.ts
(node:42211) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/faisala/Checkouts/chai/tislab-migration/monarch/monarch-ui-new/node_modules/vuex/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
 PASS  tests/unit/AppMarkdown.test.ts
(node:42212) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/faisala/Checkouts/chai/tislab-migration/monarch/monarch-ui-new/node_modules/vuex/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
 PASS  tests/unit/AppAccordion.test.ts
(node:42208) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/faisala/Checkouts/chai/tislab-migration/monarch/monarch-ui-new/node_modules/vuex/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
 PASS  tests/unit/uptime.test.ts
 PASS  tests/unit/AppHeading.test.ts

Test Suites: 6 passed, 6 total
Tests:       9 passed, 9 total
Snapshots:   0 total
Time:        6.015s, estimated 67s
Ran all test suites matching /\/unit/i.
$ vue-cli-service test:e2e --headless
 INFO  Starting e2e tests...
 INFO  Starting development server...


 WARNING  Compiled with 3 warnings                                                                                                                                                                                                               11:35:54 AM

 warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  js/chunk-vendors.15919843.js (432 KiB)

 warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (614 KiB)
      css/chunk-vendors.c0bde074.css
      js/chunk-vendors.15919843.js
      css/app.73d68a79.css
      js/app.701fe07f.js


 warning

webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.0.0.196:8080/

  App is served in production mode.
  Note this is for preview or E2E testing only.


====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    3.8.3                                                                              │
  │ Browser:    Electron 78 (headless)                                                             │
  │ Specs:      3 found (app.js, header.js, title.js)                                              │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  app.js                                                                          (1 of 3)
Browserslist: caniuse-lite is outdated. Please run the following command: `npm update`


  ✓ App renders (938ms)

  1 passing (948ms)


  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     app.js                                                                           │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF
  -  Finished processing: tests/e2e/videos/app.js.mp4                                    (0 seconds)


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  header.js                                                                       (2 of 3)


  ✓ Header nav bar collapses on small screens (528ms)

  1 passing (542ms)


  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     header.js                                                                        │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF
  -  Finished processing: tests/e2e/videos/header.js.mp4                                 (0 seconds)


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  title.js                                                                        (3 of 3)


  ✓ Document title updates on navigation (667ms)

  1 passing (697ms)


  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      1                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     title.js                                                                         │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF
  -  Finished processing: tests/e2e/videos/title.js.mp4                                  (0 seconds)


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  app.js                                   947ms        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  header.js                                539ms        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  title.js                                 686ms        1        1        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        00:02        3        3        -        -        -

$ vue-cli-service test:unit /axe
ts-jest[versions] (WARN) Version 4.1.6 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
(node:42411) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/faisala/Checkouts/chai/tislab-migration/monarch/monarch-ui-new/node_modules/vuex/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
  console.log tests/axe/pages.test.ts:23

    ========== Testing page / ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /home ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /explore ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /tools ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /about ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /cite ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /team ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /publications ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /sources ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /terms ==========


  console.log tests/axe/pages.test.ts:23

    ========== Testing page /help ==========


 PASS  tests/axe/pages.test.ts (46.688s)
  ✓ Page accessibility checks (44557ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        47.385s, estimated 69s
Ran all test suites matching /\/axe/i.
✨  Done in 114.56s.

[vincerubinetti]

Thanks for posting. Weird that I don't get that message. Looks like it might be fixed soon and we'd just have to update vuex: vuejs/vuex#2071

Though there's a good possibility we'll never even have to use vuex in this project. I might even remove it for the time being since it's pretty easy to setup again.