Skip to content

CONTRIBUTING.md

Latest commit

 

History

History
58 lines (35 loc) · 3.36 KB

CONTRIBUTING.md

File metadata and controls

58 lines (35 loc) · 3.36 KB
Raw

Contributing to this package

The package is part of the viewer-components-react monorepo - please make sure to have a look at repository's contribution guidelines.

Development

Set up steps:

  1. pnpm install in repository root to install dependencies.
  2. (optional) pnpm clean to clear previous build artifacts.
  3. pnpm build --scope property-grid-react to build the package.
  4. npm run test in package root to run its unit tests.

Often, you'll want to see the widget in a running application. For that, we have a test viewer application. To start it in watch mode:

  1. Follow steps 1-3 from above.
  2. pnpm build --to test-viewer to build the viewer an all its dependencies.
  3. cd apps/test-viewer to navigate to the viewer app directory.
  4. Fill the details in .env file in test viewer directory. See .env.template for an example.
  5. npm run start:dev to run the viewer.

Testing

We have two sets of tests - unit tests and end-to-end ones.

Unit tests

Purpose of these tests is to make sure each unit (class, function, component, etc.) works according to its specification.

Relevant scripts:

  • Run: npm run test.
  • Measure source coverage: npm run cover.

End-to-end tests

Purpose of end-to-end tests is to make sure the widget and its features work as a whole, taking into account all the dependencies. This is achieved by the test runner (playwright) starting the test-viewer and simulating user actions to test various features of the widget. In addition, our tests take widget screenshots in various situations to ensure we capture all styling changes.

Before running e2e tests, test viewer must be built using QA configuration:

  1. Set up .env in test-viewer directory to use QA configuration. See .env.template for an example.
  2. Run npm run dist in test-viewer directory to create a production build of the app.

Relevant scripts:

  • Run locally: npm run test:e2e:local.
  • Debug locally: npm run test:e2e:debug.
  • Run in a Docker container: npm run test:e2e. Note: This requires Docker to be running on your machine.

Running the tests in a non-CI environment automatically updates all the screenshots - please make sure the visual changes are expected and valid in case the screenshots change. In a CI environment the tests fail if any mismatches are detected.

Note: The screenshots might have slight visual differences between platforms. To ensure we always get consistent results, the screenshots should always be generated by running the tests in a docker container (npm run test:e2e script).

Another note: E2E tests are run against a specific iModel in our QA environment. Contact repository maintainers to get access to that iModel, if needed. The required credentials must be specified in .env.e2e at the package root - see .env.e2e.template for an example.

Debugging

Vitest does not provide a practical way to launch and debug a specific test via launch.json. Instead, use the Vitest extension (vitest.explorer) for VS Code. It integrates with the Test Explorer panel, allowing you to run and debug individual tests directly from the editor with breakpoints.