sandbox-test-server
Tool for ui components test automation
Motivation
There are several ways to test components
- Unit testing with tools like Jest
Pros:
- Easy to setup
- Quite fast
- Snapshot testing Cons:
- No real browser testing (crossbrowser things)
- No component interactions/integration testing
- Manual testing using tools like storybook
Pros:
- Visualization
- Testing in different browsers Cons:
- No built-in automation except snapshot testing
- End-to-end automation tools like testcafe, selenium
Pros:
- Visualization
- Automation
- Crossbrowser testing Cons:
- Has to be used against application or sandbox like storybook
- Can't define a data (or component) in test unit.
Idea
is to combine those 3 ways. So test can be automated, isolated (with its testing data) and run against real browser environment.
Example
;
or
;
where './test-cases/basic-tab' is
import React from 'react';import Tab from 'semantic-ui-react';const panes = menuItem: 'Tab 1' <Tab.Pane> <div ="content1">Tab 1 Content</div> </Tab.Pane> menuItem: 'Tab 2' <Tab.Pane> <div ="content2">Tab 2 Content</div> </Tab.Pane> menuItem: 'Tab 3' <Tab.Pane> <div ="content3">Tab 3 Content</div> </Tab.Pane> ; <Tab = />;
What's inside
There are expressjs server, api to register components, webpack that compiles components on the fly
What's supported
React!
I expect that with some webpack config replacements VueJS, Angular or Polymer can be used as well.