Page MenuHomePhabricator
Create Task
Maniphest T329036

Setup a unit test environment in the frontend docs
Closed, ResolvedPublic
Actions

Description

The current setup in the docs/frontend vitepress site uses Vue SFC and es6. It would be nice to setup jest to test those components as it's already done with the rest of components in the extension.

Since the setup in the documentation project uses Codex's ES build instead of CommonJS modules it might be worth trying out vitest which simplifies the setup boilerplate for a Vite project to be tested. See also T305515: Consider migrating from Jest to Vitest

Details

SubjectRepoBranchLines +/-
Frontend documentation: use es2020 in test filesmediawiki/extensions/GrowthExperimentsmaster+8 -10
Frontend documentation: test a component that uses a Codex componentmediawiki/extensions/GrowthExperimentsmaster+1 K -49
Frontend documentation: fix stylelint config to lint the demo componentsmediawiki/extensions/GrowthExperimentsmaster+1 -1
Frontend documentation: break vitest suite on console errors and warnsmediawiki/extensions/GrowthExperimentsmaster+44 -1
Frontend documentation: setup vitestmediawiki/extensions/GrowthExperimentsmaster+928 -1 K
WIP setup jest for testing documentation/frontendmediawiki/extensions/GrowthExperimentsmaster+6 K -29
Customize query in gerrit

Related Objects
Search...

Event Timeline

Sgs renamed this task from Setup jest in the frontend documentation to Setup jest in the frontend docs.Feb 7 2023, 11:33 AM
Sgs created this task.
Tgr moved this task from Inbox to Triaged on the Growth-Team board.Feb 18 2023, 1:10 AM
gerritbot added a comment.Feb 27 2023, 5:40 PM

Change 892517 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] WIP setup jest for testing documentation/frontend

https://gerrit.wikimedia.org/r/892517

gerritbot added a project: Patch-For-Review.Feb 27 2023, 5:40 PM
kostajh assigned this task to Sgs.Feb 28 2023, 10:26 AM
Sgs renamed this task from Setup jest in the frontend docs to Setup a unit test evironement in the frontend docs.Mar 13 2023, 9:53 AM
Sgs changed the task status from Open to In Progress.
Sgs moved this task from Triaged to Sprint 0 (Growth Team) on the Growth-Team board.
Sgs edited projects, added Growth-Team (Sprint 0 (Growth Team)); removed Growth-Team.
Sgs moved this task from Incoming to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.
gerritbot added a comment.Mar 13 2023, 9:55 AM

Change 897825 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: setup vitest

https://gerrit.wikimedia.org/r/897825

Sgs updated the task description. (Show Details)Mar 13 2023, 9:57 AM
Sgs renamed this task from Setup a unit test evironement in the frontend docs to Setup a unit test environment in the frontend docs.Mar 13 2023, 11:13 AM
gerritbot added a comment.Mar 14 2023, 8:27 PM

Change 898853 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: break vitest suite on console errors and warns

https://gerrit.wikimedia.org/r/898853

gerritbot added a comment.Mar 14 2023, 8:27 PM

Change 898854 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: test a component that uses a Codex component

https://gerrit.wikimedia.org/r/898854

Sgs moved this task from In Progress to Blocked / Needs work on the Growth-Team (Sprint 0 (Growth Team)) board.Mar 14 2023, 8:28 PM
gerritbot added a comment.Mar 15 2023, 3:43 PM

Change 892517 abandoned by Sergio Gimeno:

[mediawiki/extensions/GrowthExperiments@master] WIP setup jest for testing documentation/frontend

Reason:

https://gerrit.wikimedia.org/r/892517

Sgs added a subscriber: kostajh.Mar 15 2023, 3:46 PM

It seems that tests of components which use Codex components trigger two warnings ( see build without errors and build with errors ):

[Vue warn]: resolveComponent can only be used in render() or setup().
[Vue warn]: Invalid VNode type: Symbol(Text) (symbol)
  at <DummyComponent ref="VTU_COMPONENT" >
  at <VTUROOT>

It would be nice to resolve these or at least know where they are coming from before writing unit tests for the prototype components since most of them will use Codex. Do you remember having clean these warns on our jest suite? cc @kostajh

kostajh added a comment.Mar 15 2023, 4:09 PM
In T329036#8698692, @Sgs wrote:

It seems that tests of components which use Codex components trigger two warnings ( see build without errors and build with errors ):

[Vue warn]: resolveComponent can only be used in render() or setup().
[Vue warn]: Invalid VNode type: Symbol(Text) (symbol)
  at <DummyComponent ref="VTU_COMPONENT" >
  at <VTUROOT>

It would be nice to resolve these or at least know where they are coming from before writing unit tests for the prototype components since most of them will use Codex. Do you remember having clean these warns on our jest suite? cc @kostajh

No, I don't remember seeing those before.

gerritbot added a comment.Mar 15 2023, 7:07 PM

Change 897825 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: setup vitest

https://gerrit.wikimedia.org/r/897825

gerritbot added a comment.Mar 15 2023, 7:09 PM

Change 898853 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: break vitest suite on console errors and warns

https://gerrit.wikimedia.org/r/898853

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.1; 2023-03-20).Mar 15 2023, 8:01 PM
gerritbot added a comment.Mar 20 2023, 8:54 AM

Change 901121 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: fix stylelint config to lint the demo components

https://gerrit.wikimedia.org/r/901121

gerritbot added a comment.Mar 20 2023, 9:45 AM

Change 901121 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: fix stylelint config to lint the demo components

https://gerrit.wikimedia.org/r/901121

Sgs moved this task from Blocked / Needs work to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.Mar 21 2023, 4:38 PM
Sgs added a comment.Mar 21 2023, 4:43 PM
In T329036#8698692, @Sgs wrote:

It seems that tests of components which use Codex components trigger two warnings ( see build without errors and build with errors ):

[Vue warn]: resolveComponent can only be used in render() or setup().
[Vue warn]: Invalid VNode type: Symbol(Text) (symbol)
  at <DummyComponent ref="VTU_COMPONENT" >
  at <VTUROOT>

It would be nice to resolve these or at least know where they are coming from before writing unit tests for the prototype components since most of them will use Codex. Do you remember having clean these warns on our jest suite? cc @kostajh

The reason for the errors was missing dependencies that also depend on vue. When importing a module directly from a NodeJS environement, it walks directories up the tree to look for the closest node_modules folder if a dependency is not satisfied in the local directory. This was causing the missing dependencies to be resolved by the parent node_modules including the parent node_modules/@vue module instead of the documentation/frontend/node_modules/@vue. Should be fixed in 898854 PS5.

kostajh closed this task as Resolved.Mar 22 2023, 1:48 PM
In T329036#8715610, @Sgs wrote:
In T329036#8698692, @Sgs wrote:

It seems that tests of components which use Codex components trigger two warnings ( see build without errors and build with errors ):

[Vue warn]: resolveComponent can only be used in render() or setup().
[Vue warn]: Invalid VNode type: Symbol(Text) (symbol)
  at <DummyComponent ref="VTU_COMPONENT" >
  at <VTUROOT>

It would be nice to resolve these or at least know where they are coming from before writing unit tests for the prototype components since most of them will use Codex. Do you remember having clean these warns on our jest suite? cc @kostajh

The reason for the errors was missing dependencies that also depend on vue. When importing a module directly from a NodeJS environement, it walks directories up the tree to look for the closest node_modules folder if a dependency is not satisfied in the local directory. This was causing the missing dependencies to be resolved by the parent node_modules including the parent node_modules/@vue module instead of the documentation/frontend/node_modules/@vue. Should be fixed in 898854 PS5.

Nice, thanks for tracking that down.

gerritbot added a comment.Mar 22 2023, 1:55 PM

Change 898854 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: test a component that uses a Codex component

https://gerrit.wikimedia.org/r/898854

Maintenance_bot removed a project: Patch-For-Review.Mar 22 2023, 2:11 PM
gerritbot added a comment.Mar 29 2023, 4:08 PM

Change 904205 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: use es2020 in test files

https://gerrit.wikimedia.org/r/904205

gerritbot added a project: Patch-For-Review.Mar 29 2023, 4:08 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL