README
GridApp
Getting Started
- Install Yarn
npm intall -g yarn
- install dependencies -
yarn
- To start the project -
yarn start
Building for production
yarn build
Storybook
We use storybook to develop widgets and components in isolation it also allows us to do visual regression testing of the app
yarn storybook
Storybook: How to view a widget
After starting a storybook with yarn storybook
, you will be automatically redirected to the storybook page.
On the left side, there is a panel which contains categories with stories (scenarios), the one you want is Widgets
.
Each widget is in its own separate folder. At the widgets folder root, there is a story called default
showing the whole widget.
You can test how the widget behaves using addons which are below the displayed widget (If not visible, press A
).
In addons you can change the Theme and Knobs (variables used in the story).
Each widget has its own separate components directory containing stories for its components.
These stories can be interacted in the same way as the widgets default
story with theme and knobs.
Formatting
yarn prettier
Linting
yarn lint
Running tests
yarn test:jest
yarn test:cypress
Bundle analyzing
yarn build --bindleSize
Supported browsers compilation
https://browserl.ist/?q=%3E+0.25%25%2C+not+dead
How to test Dashboard on Local
Due to the nature of the dashboard, with auth, You need to run a mock server:
Run yarn mockserver
If it complains about port, change it to a new port, maybe 3002, to do this,
change all ports in robohydra.conf and development.json to 3002
Then open up a new CLI:
Run yarn start
And visit http://localhost:3001/domain/dashboard
How to add a new mock to mockserver for websockets
We can take robohydra/api/widgets/seriesDashboard.js and make a copy of it Rename the file according to the widget name and the other file name convention Change the data to mock the response you get, an easy way of doing this is getting a live message, copying it and modifying it Go to robohydra/api/index.js, import the file, add it to the widgets object, and then make an addition to the switch case.
How to test with cypress
Cypress is used for E2E testing, it uses the mockserver.
If you are using WSL, make sure you have WSL2 and follow this, https://nickymeuleman.netlify.app/blog/gui-on-wsl2-cypress
Always make sure to run XLaunch before yarn test:cypress
, and disable access control in the configuration.
How to test with jest
Run yarn test
, you can use yarn test -u
to update tests.