Standardize JEST unit test names and definition
Open, In Progress, LowPublic1 Estimated Story Points
Actions

Assigned To

Authored By

	SimoneThisDot
	May 17 2022, 8:20 AM

Description

As a developer, I would like the unit test to be well structured so that I will easily be able to contribute and add more unit tests and/or modify existing one while working on codex.

Context
The current Jest unit test do not have a common structure and can be hard to contribute too. An example can be the lookup tests. This file is very well tested, but all tests are set in one big group. A developer would need to read all the tests to make sure he can add a new one without duplication.

Change proposes
A suggested change would be to separate the tests into different groups. This can easily be done using nested describes. Furthermore this will allow the test itself to also be simplified as it will allow setup tests to be added into its own group.

Break up tests into groups
Update the Documentation to explain how to write and breakup tests
Simplify tests by moving reusable setup

Details

Subject	Repo	Branch	Lines +/-
Update Codex from 1.7.0 to 1.8.0	mediawiki/core	master	+596 -247
Menu: Refactor tests using given-when-then structure	design/codex	main	+876 -825
Update Codex from v0.6.0 to v0.6.2	mediawiki/core	master	+198 -204
code: Clean up TextInput files	design/codex	main	+266 -245
Update Codex from v0.1.0-alpha.10 to v0.1.1	mediawiki/core	master	+2 K -3 K
tests: reorganize Lookup tests per new standards	design/codex	main	+288 -251
tests: Reorganize Checkbox tests per new standards	design/codex	main	+126 -106
docs: Standardize JEST unit test names and structure	design/codex	main	+138 -11

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Invalid		AnneT	T311244 Lower the burden of contributing code to Codex
		In Progress		AnneT	T308520 Standardize JEST unit test names and definition

Event Timeline

SimoneThisDot created this task.May 17 2022, 8:20 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 17 2022, 8:20 AM

Simplify tests by moving reusable setup

I have a patch pending, https://gerrit.wikimedia.org/r/c/design/codex/+/789841, that seeks to do this by adding shortcut expectations for common parts of a test, like that an element is visible. If you want to take a look

AnneT subscribed.Jun 6 2022, 7:52 PM

Thank you @DannyS712 , I was refering more to increase the use of "beforeEach" and "afterEach" to define standard components and props.

Change 811997 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[design/codex@main] [POC] Standardize JEST unit test names and definition

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

gerritbot added a project: Patch-For-Review.Jul 7 2022, 1:48 PM

I have created a POC patch with updated documentation to be used as a discussion point in JEST writing standards.

The suggestions are very opinionated and should be agreed upon within the team (to be discussed during engineer enclave)

Change 817370 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] tests: Reorganize Checkbox tests per new standards

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

Change 817371 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] tests: reorganize Lookup tests per new standards

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

I've pushed patches to demonstrate some of Simone's recommendations:

Checkbox: this is a pretty simple test file and the patch mostly shows how basic organization can help, and how the sentences formed by the "given, when, then" notation are nice both for test file readibility and pinpointing issues when a test fails
Lookup: this is a more complex test file and the reorganization led to a lot of significant changes and, IMO, improvements that allow you to get a clearer picture of what's being tested and what is covered by tests when you look at the file. I also updated all the tests that look at whether the menu is expanded to test the actual visibility of the menu, rather than the value of the expanded data property.

Some other notes:

There's a lot of leeway in terms of how closely we follow the "given, when, then" notation. For example, I decided not to have more than 3 describe blocks (including the first one, which just includes the name of the component), so in a couple of cases for Lookup, I included another "when" statement in the "then" part. Here's an example of that:

// '...' represents code removed for brevity
describe( 'Lookup', () => {
	describe( 'when the text input is focused', () => {
		...

		describe( 'and there are no menu items to show', () => {
			...

			it( 'if there is no-results slot content, opens menu and shows "no results" message', async () => {
				...
			} );
		} );
	} );
} );

One thing I haven't covered in these files is shared code in beforeEach and afterEach. TypeaheadSearch would be a good candidate for demonstrating that, as it already does this to some extent.

AnneT changed the task status from Open to In Progress.Aug 18 2022, 3:18 PM

AnneT claimed this task.

AnneT mentioned this in T311244: Lower the burden of contributing code to Codex.Aug 18 2022, 4:18 PM

Change 811997 merged by jenkins-bot:

[design/codex@main] docs: Standardize JEST unit test names and structure

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

Change 817370 merged by jenkins-bot:

[design/codex@main] tests: Reorganize Checkbox tests per new standards

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

Change 817371 merged by jenkins-bot:

[design/codex@main] tests: reorganize Lookup tests per new standards

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