New Lexeme Special Page form

This repository holds the form for the new version of the NewLexeme special page on Wikidata.

Please report bugs on phabricator.

Local Development

Prerequisites: This repository requires node v14+ and npm v7+

Initial setup

1. Clone this repository
2. Install dependecies with npm i

This will also install some Git pre-commit hooks that check any modified files against the configured linters. (Use git commit -n to skip these hooks, e.g. to create some work-in-progress commits that will be cleaned up later.)

Regular development

TL;DR: All checks are run with:

npm t

Dev Entry point

To run the development entry point also known as the dev server:

npm run dev

You can visit the dev entry point at http://localhost:3000/. Changes to the source files will be applied automatically, so you can start this once and then leave it running in the background.

For instructions to see the form in the context of the special page, see the WikibaseLexeme readme.

The dev entry point can also read some parameters from the URL, as a single JSON-serialized initParams object in the same format as the special page passes to the app. Here are some useful links:

• no params
• empty params
• full params
• lemma
• language item with language code
• language item without language code
• language item with invalid language code
• lexical category

Linting

The linters, except for TypeScript type checking, can be run with:

npm run lint

Many linter errors can be fixed automatically:

npm run fix

Static type checking is executed with

npm run check-types

Testing

Several npm scripts are available to only run a subset of tests, such as:

npm run test-only # only tests without linters
npm run test:unit
npm run test:integration

Unit tests (in tests/unit/) focus on excercising a self-contained piece of code, while integration tests in (tests/integration/) are designed to test the interaction between several components and the store.

You can run individual unit or integration tests using npx jest, for example:

npx jest tests/unit/store/actions.test.ts
npx jest tests/integration/App.test.ts

Finally, browser tests in cypress/integration/ are designed to test this application end-to-end with actual browser interaction. They are also the main place for the automated accessiblity tests.

Cypress tests are run against the dev entry point (see above) and thus use /index.html to provide the scaffolding. After you've started the dev server, you can open the interactive browser tests environment with:

npm run cypress:open