test(component): enable (#206)

.circleci/config.yml

@@ -56,6 +56,10 @@ jobs:
             DocId=$(curl -s --data-binary @commands/serve/data/apps/ctrl00.qvf http://localhost:9076/v1/apps/import | jq -r '.attributes.id')
             echo "export DOC_ID=$DocId" >> $BASH_ENV
 
+      - run:
+          name: Test component
+          command: yarn run test:component --chrome.browserWSEndpoint "ws://localhost:3000" --no-launch
+
       - run:
           name: Test integration
           command: APP_ID=$DOC_ID yarn run test:integration --chrome.browserWSEndpoint "ws://localhost:3000" --no-launch

commands/serve/lib/webpack.serve.js

@@ -60,7 +60,8 @@ module.exports = async ({
       warnings: false,
       errors: true,
     },
-    quiet: true,
+    quiet: false,
+    noInfo: true,
     open,
     contentBase: [contentBase],
     historyApiFallback: {
@@ -108,20 +109,20 @@ module.exports = async ({
         context: '/render',
         target: `http://${host}:${port}/eRender.html`,
         ignorePath: true,
+        logLevel: 'error',
       },
       {
         context: '/dev',
         target: `http://${host}:${port}/eDev.html`,
         ignorePath: true,
+        logLevel: 'error',
       },
     ],
     watchOptions: {
       ignored: /node_modules/,
     },
   };
 
-  console.log('Starting development server...');
-
   WebpackDevServer.addDevServerEntrypoints(config, options);
   const compiler = webpack(config);
   const server = new WebpackDevServer(compiler, options);
@@ -150,7 +151,7 @@ module.exports = async ({
       if (!initiated) {
         initiated = true;
         const url = `http://${host}:${port}`;
-        console.log(`...running at ${chalk.green(url)}`);
+        console.log(`Development server running at ${chalk.green(url)}`);
 
         resolve({
           context: '',

package.json

@@ -12,6 +12,7 @@
     "spec": "lerna run spec --stream --concurrency 99",
     "test": "yarn run test:unit",
     "test:integration": "aw puppet -c aw.config.js --testExt '*.int.js' --glob 'test/integration/*.int.js'",
+    "test:component": "aw puppet -c aw.config.js --testExt '*.comp.js' --glob 'test/component/**/*.comp.js'",
     "test:unit": "aw -c aw.config.js"
   },
   "repository": {

test/component/object/incomplete-sn.comp.js

@@ -1,5 +1,5 @@
 describe('sn', () => {
-  const selector = '.nebulajs-cell [data-tid="error-title"';
+  const selector = '.nebulajs-cell [data-tid="error-title"]';
   it('should show incomplete visualization', async () => {
     await page.goto('http://localhost:8000/render/?fixture=./object/incomplete-sn.fix.js&theme=dark');
 

test/component/setup.comp.js

@@ -0,0 +1,34 @@
+const path = require('path');
+const serve = require('@nebula.js/cli-serve'); // eslint-disable-line
+
+if (!process.env.BASE_URL) {
+  let s;
+  process.env.MONO = true;
+  before(async () => {
+    s = await serve({
+      entry: path.resolve(__dirname, 'sn.js'),
+      open: false,
+      build: false,
+    });
+
+    process.env.BASE_URL = s.url;
+
+    page.on('pageerror', e => {
+      console.error('Web: ', e.message);
+    });
+
+    page.on('console', msg => {
+      for (let i = 0; i < msg.args().length; ++i) {
+        const text = msg.text();
+        if (text.includes('WDS') || text.includes('React DevTools')) {
+          return;
+        }
+        console.log(`console ${text}`);
+      }
+    });
+  });
+
+  after(() => {
+    s.close();
+  });
+}

test/component/sn.js

@@ -0,0 +1,14 @@
+/* eslint import/no-amd: 0 */
+/* global define */
+
+define([], function s() {
+  const sn = {
+    component: {
+      mounted(element) {
+        element.textContent = 'Hello engine!'; // eslint-disable-line no-param-reassign
+      },
+    },
+  };
+
+  return sn;
+});