DEVELOPMENT.md

Tests

The tests try to visit the app in localhost:5000. Before running the tests, set PORT=5000 and NODE_OPTIONS=--openssl-legacy-provider as environment variables to make them pass.

Recommended test command (headless Chrome only):

PORT=5000 NODE_OPTIONS=--openssl-legacy-provider npm run build
PORT=5000 npm run test-chrome-headless

Note: Firefox headless tests are not working reliably. Use test-chrome-headless for stable results.

If you modify a test cartridge, you have to run the build command again.

Internationalization

All user-facing strings (except things printed to the console) should be wrapped such that our i18n package (linguijs) can detect and translate them.

For strings that are a child in a react component, use the <Trans> tag.

Example:

import { Trans } from @lingui/macro
...
<div>
  <p><Trans>This is a translated string</Trans></p>
</div>

For strings that are html attributes or passed into a component as props, the component must be wrapped in an <I18n> tag, and render props used to make i18n() available. Then strings should be wrapped as: i18n._(t`This is a translated string`).

Example:

import { I18n } from "@lingui/react";
import { t } from "@lingui/macro";
...
return(
  <I18n>
    {({ i18n }) => (
      <Billboard
        heading={i18n._(t`This is a translated string`)}
      />
    )}
  </I18n>
)

For strings that exist outside of a react component (ex: utils functions) import the i18n configuration from index.js and then proceed as described above.

Example:

import { i18n } from "./index";
import { t } from "@lingui/macro";
...
return(
  <I18n>
    {({ i18n }) => (
      <Billboard
        heading={i18n._(t`This is a translated string`)}
      />
    )}
  </I18n>
)

To extract all strings from the app and prepare for translation, run yarn run extract.

To take the translation source files and compile for use by the app, run yarn run compile.