test for add step (#1366)

* test for add step

* adding relative path and testing with npm run test-ui(for testing in travis but it will abort previous test-ui)

* checking index.html

* checking index.html

* changing test location and reverting index.html

* remove console.log

.travis.yml

@@ -13,6 +13,7 @@ before_script:
 script:
   - npm test
   - npm run test-ui
+  - npm run test-ui-2
   - grunt build
 after_success:
   - bash <(curl -s https://codecov.io/bash)

jest-puppeteer.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  launch: {
+    headless: process.env.HEADLESS !== 'false',
+  },
+  server: {
+    command: 'grunt serve',
+    port:3000,
+    launchTimeout: 5000000,
+  },
+  
+};

jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  preset: 'jest-puppeteer',
+  testRegex: './*\\.test\\.js$',
+  verbose: true,
+};
+

package.json

@@ -7,6 +7,7 @@
     "debug": "TEST=true node ./index.js -i ./examples/images/monarch.png -s invert",
     "test": "TEST=true istanbul cover tape test/core/*.js test/core/ui/user-interface.js test/core/modules/*.js | tap-spec; node test/core/sequencer/benchmark.js;  browserify test/core/sequencer/meta-modules.js test/core/sequencer/image-sequencer.js test/core/sequencer/chain.js  test/core/sequencer/replace.js test/core/sequencer/import-export.js test/core/sequencer/run.js test/core/sequencer/dynamic-imports.js test/core/util/*.js | tape-run --render=\"tap-spec\"",
     "test-ui": "node node_modules/jasmine/bin/jasmine test/ui/spec/*.js",
+    "test-ui-2":"node ./node_modules/.bin/jest",
     "setup": "npm i && npm i -g grunt grunt-cli && grunt build",
     "start": "grunt serve"
   },
@@ -92,6 +93,8 @@
     "jasmine-core": "^3.3.0",
     "jasmine-jquery": "^2.1.1",
     "jasmine-spec-reporter": "^4.2.1",
+    "jest": "^24.9.0",
+    "jest-puppeteer": "^4.3.0",
     "lint-staged": "^9.1.0",
     "looks-same": "^7.0.0",
     "matchdep": "^2.0.0",

test/ui-2/test/frontend.test.js

@@ -0,0 +1,24 @@
+const timeout = process.env.SLOWMO ? 30000 : 10000;
+const fs = require('fs');
+beforeAll(async () => {
+  path = fs.realpathSync('file://../examples/index.html');
+  await page.goto('file://' + path, {waitUntil: 'domcontentloaded'});
+});
+
+describe('title of the page', () => {
+  test('Title of the page', async () => {
+    const title = await page.title();
+    expect(title).toBe('Image Sequencer');
+        
+  }, timeout);
+});
+describe('Add step', () => {
+  test('length is increased', async () => {
+    	await page.waitForSelector('.step');
+    const previousLength = await page.evaluate(() => document.querySelectorAll('.step').length);
+    await page.click('[data-value=\'brightness\']');
+    const previousLength1 = await page.evaluate(() => document.querySelectorAll('.step').length);
+    expect(previousLength).toBe(1);
+    expect(previousLength1).toBe(2);
+  }, timeout);
+});