Resium
Home
Installation
Getting StartedGuide
Components
ExamplesAdvancedMigration GuideContributionReporting bugsWhen you have a questionSuggesting new features or new componentsStart hackingAdding new properties to a componentAdding unit tests for components

Contribution

Your contribution welcome!

Reporting bugs

If you find bugs ascribed to resium, please open a issue in GitHub issues.

When you have a question

Post your question to GitHub issues.

Suggesting new features or new components

Please open a issue in GitHub issues.

Start hacking

Resium required an editor supporting TypeScript, ESLint, Prettier, and Yarn.

  1. Fork resium repository.
  2. Clone a new repository made with forking.
  3. Install modules: yarn
  4. Let's develop!
  5. Commit and push your changes.
  6. Make a new pull request in resium repository.
  • To run test: yarn test
  • To start storybook: yarn storybook
  • To build: yarn build

Adding new properties to a component

It is very easy to add a new typical property to a Cesium component. Your PR welcome!

For example, let's add a new property test added to Viewer class in Cesium, to <Viewer> component. Open and edit src/Viewer.tsx.

If test is a variable property:

export interface ViewerCesiumProps {
// ...
test?: string; // <=== Add a new property type
}
const cesiumProps: Array<keyof ViewerCesiumProps> = [
// ...
"test", // <== Add a new property name
];

If test is a read only property:

export interface ViewerCesiumReadonlyProps {
// ...
test?: string; // <=== Add a new property type
}
const cesiumReadonlyProps: Array<keyof ViewerCesiumProps> = [
// ...
"test", // <== Add a new property name
];

If test is an event property:

Note: Follow React's convention for the event name. For example:

  • tickEvent => onTick
  • progress => onProgress
export interface ViewerProps extends ViewerCesiumProps, ViewerCesiumReadonlyProps {
// ...
onTest?: () => void; // <=== Add a new property type
}
const cesiumEventProps: EventKeyMap<Viewer, ViewerProps> {
onTest: "test" // <== Add a new property name mapping
}

Done!

Adding unit tests for components

Unit tests for core are mostly well, but for components are lack. Your PR welcome!

1. Add stubs

Resium uses Jest as a test runner and assertion library. But Cesium cannot be loaded in Jest, because it deeply depends on Web APIs (WebWorker, WebGL and so on). That's why creating stubs for Cesium is required.

Stubs are located in __mocks__ directory. For details, refer to existing stubs.

2. Add unit tests

Unit tests are located in src/tests directory. For details, refer to existing tests: src/tests/Entity.test.tsx. It uses enzyme.

Please write test code to test as follows:

  • Test if the component can mount properly.
  • Test if the component can update properties properly.
  • Test if the component can unmount properly.