To set up the environment dependencies ( node version 5++ )
$ npm install
To build app into minified bundle
$ npm run build
To run app server
$ npm run start:prod
Open this url http://localhost:8000
The image list can be seen at the left pane immediately after app is already running
Upload image form can be found at the top of left pane. Browse .png or .jpeg formatted image file by clicking Choose File button. Uploaded image will be displayed at the left pane automatically after upload process is done.
Add Text
To add text from menu to canvas, simply type something in text input field and then click button Add Text. Text will automatically be displayed in canvas.
Add Image
To add image from menu to canvas, simply click on one of image list at left pane. Image will automatically be displayed on canvas.
How to move image / text
To move image or text in canvas, simply click on text / image in canvas until we see blue border around image / text. Then we can move by dragging it.
How to delete image / text
To delete image / text, simply click on text / image in canvas until we see blue border around image / text. Then click button Delete at the right pane.
Save image / text to browser storage
To save image / text, simply click on text / image in canvas until we see blue border around image / text. Then click button Save at the right pane. Then try to refresh the browser, it should reload image / text we previously saved.
Clear saved image / text
Simply click on button Clear Storage at the right pane. Then try to refresh the browser, it should not reload the image / text anymore.
Prerequisite: Run the app by using below command
$ npm run start:prod
On another terminal / console / command line, run UI automated test by using below command
$ npm run test:ui
After automated test process is finished, a new server will be created at port 3000. New browser window will come up to show the automation test report.