test: Migrate jest to use projects feature

package.json

@@ -7,7 +7,7 @@
     "clean": "lerna run clean && lerna clean --yes && rm -rf node_modules",
     "lint": "tslint -p tsconfig.json && npm run types",
     "types": "tsc --noEmit",
-    "test": "jest",
+    "test": "jest --config ./scripts/jest/root.config.js",
     "test:integration": "yarn run build && lerna exec --scope lwc-integration -- yarn sauce",
     "test:performance": "lerna exec --scope benchmark -- best --runner remote",
     "build": "lerna run build --ignore benchmark --ignore lwc-integration",

packages/babel-plugin-transform-lwc-class/jest.config.js

@@ -0,0 +1,6 @@
+const BASE_CONFIG = require('../../scripts/jest/base.config');
+
+module.exports = {
+    ...BASE_CONFIG,
+    displayName: 'babel-plugin-transform-lwc-class',
+};

packages/lwc-compiler/jest.config.js

@@ -0,0 +1,6 @@
+const BASE_CONFIG = require('../../scripts/jest/base.config');
+
+module.exports = {
+    ...BASE_CONFIG,
+    displayName: 'lwc-compiler',
+};

packages/lwc-engine/jest.config.js

@@ -0,0 +1,7 @@
+const BASE_CONFIG = require('../../scripts/jest/base.config');
+
+module.exports = {
+    ...BASE_CONFIG,
+    displayName: 'lwc-engine',
+    setupTestFrameworkScriptFile: '<rootDir>/scripts/jest/setup.ts',
+};

packages/lwc-engine/package.json

@@ -9,9 +9,9 @@
     "clean": "rm -rf dist",
     "build": "concurrently \"yarn build:es-and-cjs\" \"yarn build:umd:prod\" \"yarn build:umd:dev\"",
     "test": "DIR=`pwd` && cd ../../ && yarn test $DIR",
-    "build:umd:dev": "rollup -c scripts/rollup.config.umd.dev.js",
-    "build:umd:prod": "rollup -c scripts/rollup.config.umd.prod.js",
-    "build:es-and-cjs": "rollup -c scripts/rollup.config.es-and-cjs.js"
+    "build:umd:dev": "rollup -c scripts/rollup/rollup.config.umd.dev.js",
+    "build:umd:prod": "rollup -c scripts/rollup/rollup.config.umd.prod.js",
+    "build:es-and-cjs": "rollup -c scripts/rollup/rollup.config.es-and-cjs.js"
   },
   "devDependencies": {
     "concurrently": "^3.5.1",

packages/lwc-engine/scripts/jest/setup.ts

@@ -0,0 +1,7 @@
+import { flushComponentRegistry } from '../../src/framework/def';
+
+// Clean-up after each test the engine component registry. This avoid having the
+// engine warning that multiple component class are registered with the same name.
+afterEach(() => {
+    flushComponentRegistry();
+});

packages/lwc-engine/scripts/rollup.config.es-and-cjs.js → packages/lwc-engine/scripts/rollup/rollup.config.es-and-cjs.js

@@ -3,11 +3,11 @@ const typescript = require('rollup-plugin-typescript');
 const nodeResolve = require('rollup-plugin-node-resolve');
 
 const { generateTargetName, ignoreCircularDependencies } = require('./engine.rollup.config.util');
-const { version } = require('../package.json');
+const { version } = require('../../package.json');
 
-const entry = path.resolve(__dirname, '../src/framework/main.ts');
-const commonJSDirectory = path.resolve(__dirname, '../dist/commonjs');
-const modulesDirectory = path.resolve(__dirname, '../dist/modules');
+const entry = path.resolve(__dirname, '../../src/framework/main.ts');
+const commonJSDirectory = path.resolve(__dirname, '../../dist/commonjs');
+const modulesDirectory = path.resolve(__dirname, '../../dist/modules');
 
 const banner = (`/* proxy-compat-disable */`);
 const footer = `/** version: ${version} */`;

packages/lwc-engine/scripts/rollup.config.umd.dev.js → packages/lwc-engine/scripts/rollup/rollup.config.umd.dev.js

@@ -3,11 +3,11 @@ const replace = require('rollup-plugin-replace');
 const typescript = require('rollup-plugin-typescript');
 const nodeResolve = require('rollup-plugin-node-resolve');
 
-const { version } = require('../package.json');
+const { version } = require('../../package.json');
 const { generateTargetName, ignoreCircularDependencies } = require('./engine.rollup.config.util');
 
-const input = path.resolve(__dirname, '../src/framework/main.ts');
-const outputDir = path.resolve(__dirname, '../dist/umd');
+const input = path.resolve(__dirname, '../../src/framework/main.ts');
+const outputDir = path.resolve(__dirname, '../../dist/umd');
 
 const banner = (`/* proxy-compat-disable */`);
 const footer = `/** version: ${version} */`;

packages/lwc-engine/scripts/rollup.config.umd.prod.js → packages/lwc-engine/scripts/rollup/rollup.config.umd.prod.js

@@ -5,11 +5,11 @@ const typescript = require('typescript');
 const rollupTypescriptPlugin = require('rollup-plugin-typescript');
 const nodeResolve = require('rollup-plugin-node-resolve');
 const babelMinify = require('babel-minify');
-const { version } = require('../package.json');
+const { version } = require('../../package.json');
 const { generateTargetName, ignoreCircularDependencies } = require('./engine.rollup.config.util');
 
-const entry = path.resolve(__dirname, '../src/framework/main.ts');
-const outputDir = path.resolve(__dirname, '../dist/umd');
+const entry = path.resolve(__dirname, '../../src/framework/main.ts');
+const outputDir = path.resolve(__dirname, '../../dist/umd');
 const banner = (`/* proxy-compat-disable */`);
 const footer = `/** version: ${version} */`;
 

packages/lwc-engine/src/framework/__tests__/class-list.spec.ts

@@ -17,7 +17,7 @@ describe('class-list', () => {
             }
             const elm = createElement('x-foo', { is: MyComponent });
             document.body.appendChild(elm);
-            const childElm = elm[ViewModelReflection].component.root.querySelector('x-child');
+            const childElm = elm[ViewModelReflection].component.template.querySelector('x-child');
             expect(childElm.className).toBe('foo');
         });
 
@@ -33,7 +33,7 @@ describe('class-list', () => {
             }
             const elm = createElement('x-foo', { is: MyComponent });
             document.body.appendChild(elm);
-            const childElm = elm[ViewModelReflection].component.root.querySelector('x-child');
+            const childElm = elm[ViewModelReflection].component.template.querySelector('x-child');
             expect(childElm.className).toBe('foo');
         });
 
@@ -53,7 +53,7 @@ describe('class-list', () => {
             }
             const elm = createElement('x-foo', { is: MyComponent });
             document.body.appendChild(elm);
-            const childElm = elm[ViewModelReflection].component.root.querySelector('x-child');
+            const childElm = elm[ViewModelReflection].component.template.querySelector('x-child');
             expect(childElm.className).toBe('bar baz foo');
         });
 
@@ -73,7 +73,7 @@ describe('class-list', () => {
             }
             const elm = createElement('x-foo', { is: MyComponent });
             document.body.appendChild(elm);
-            const childElm = elm[ViewModelReflection].component.root.querySelector('x-child');
+            const childElm = elm[ViewModelReflection].component.template.querySelector('x-child');
             expect(childElm.className).toBe('');
         });
 
@@ -93,7 +93,7 @@ describe('class-list', () => {
             }
             const elm = createElement('x-foo', { is: MyComponent });
             document.body.appendChild(elm);
-            const childElm = elm[ViewModelReflection].component.root.querySelector('x-child');
+            const childElm = elm[ViewModelReflection].component.template.querySelector('x-child');
             expect(childElm.className).toBe('foo');
         });
 
@@ -113,7 +113,7 @@ describe('class-list', () => {
             }
             const elm = createElement('x-foo', { is: MyComponent });
             document.body.appendChild(elm);
-            const childElm = elm[ViewModelReflection].component.root.querySelector('x-child');
+            const childElm = elm[ViewModelReflection].component.template.querySelector('x-child');
             expect(childElm.className).toBe('bar foo');
         });
 

packages/lwc-engine/src/framework/__tests__/component.spec.ts

@@ -51,7 +51,7 @@ describe('component', function() {
             const elm = createElement('x-foo', { is: Parent });
             document.body.appendChild(elm);
             expect(elm.lunch).toBe('salad');
-            expect(elm[ViewModelReflection].component.root.querySelector('x-component').breakfast).toBe('pancakes');
+            expect(elm[ViewModelReflection].component.template.querySelector('x-component').breakfast).toBe('pancakes');
         });
 
         it('should allow calling public getters when element is accessed by querySelector', function() {
@@ -358,7 +358,7 @@ describe('component', function() {
                 }
             });
             document.body.appendChild(elm);
-            expect(elm[ViewModelReflection].component.root.querySelector('section').style.cssText).toBe('color: red;');
+            expect(elm[ViewModelReflection].component.template.querySelector('section').style.cssText).toBe('color: red;');
             expect(calledCSSText).toBe(true);
         });
 
@@ -455,7 +455,7 @@ describe('component', function() {
 
             const elm = createElement('x-foo', { is: MyComponent });
             document.body.appendChild(elm);
-            const section = elm[ViewModelReflection].component.root.querySelector('section');
+            const section = elm[ViewModelReflection].component.template.querySelector('section');
             section.style.removeProperty = function() {
                 called = true;
             };

packages/lwc-engine/src/framework/__tests__/error-boundary.spec.ts

@@ -76,7 +76,7 @@ describe('error boundary component', () => {
                         return html;
                     }
                 }
-                const boundaryHostElm = createElement('x-boundary', {is: BoundryHost});
+                const boundaryHostElm = createElement('x-parent', {is: BoundryHost});
 
                 document.body.appendChild(boundaryHostElm);
                 expect(querySelectorAll.call(boundaryHostElm, 'x-boundary-sibling').length).toBe(1);
@@ -198,7 +198,7 @@ describe('error boundary component', () => {
                         return html;
                     }
                 }
-                const boundaryHostElm = createElement('x-boundary', {is: BoundryHost});
+                const boundaryHostElm = createElement('x-parent', {is: BoundryHost});
                 document.body.appendChild(boundaryHostElm);
 
                 expect(querySelectorAll.call(boundaryHostElm, 'x-boundary-sibling').length).toBe(1);
@@ -434,7 +434,7 @@ describe('error boundary component', () => {
                         return html;
                     }
                 }
-                const boundaryHostElm = createElement('x-boundary', {is: BoundryHost});
+                const boundaryHostElm = createElement('x-parent', {is: BoundryHost});
                 document.body.appendChild(boundaryHostElm);
 
                 expect(querySelectorAll.call(boundaryHostElm, 'x-boundary-sibling').length).toBe(1);
@@ -530,7 +530,7 @@ describe('error boundary component', () => {
                         return html;
                     }
                 }
-                const boundaryHostElm = createElement('x-boundary', {is: BoundryHost});
+                const boundaryHostElm = createElement('x-parent', {is: BoundryHost});
                 document.body.appendChild(boundaryHostElm);
 
                 expect(querySelectorAll.call(boundaryHostElm, 'x-boundary-sibling').length).toBe(1);

packages/lwc-engine/src/framework/__tests__/events.spec.ts

@@ -95,7 +95,7 @@ describe('Events on Custom Elements', () => {
         elm = createElement('x-foo', { is: Foo });
         elm.addEventListener('click', clicked2);
         document.body.appendChild(elm);
-        cmp.root.querySelector('div').click();
+        cmp.template.querySelector('div').click();
         expect(result).toEqual([1, 2]);
     });
 
@@ -120,7 +120,7 @@ describe('Events on Custom Elements', () => {
         }
         elm = createElement('x-foo', { is: Foo });
         document.body.appendChild(elm);
-        cmp.root.querySelector('div').click();
+        cmp.template.querySelector('div').click();
         expect(result).toEqual([1]);
     });
 
@@ -145,7 +145,7 @@ describe('Events on Custom Elements', () => {
         elm = createElement('x-foo', { is: Foo });
         elm.addEventListener('click', clicked2);
         document.body.appendChild(elm);
-        cmp.root.querySelector('div').click();
+        cmp.template.querySelector('div').click();
         expect(result).toEqual([1]);
     });
 
@@ -168,7 +168,7 @@ describe('Events on Custom Elements', () => {
         }
         elm = createElement('x-foo', { is: Foo });
         document.body.appendChild(elm);
-        cmp.root.querySelector('div').dispatchEvent(new CustomEvent('test', { bubbles: true }));  // intentionally without composed: true to see if the root captures can that
+        cmp.template.querySelector('div').dispatchEvent(new CustomEvent('test', { bubbles: true }));  // intentionally without composed: true to see if the root captures can that
         expect(result).toHaveLength(1);
     });
 
@@ -191,7 +191,7 @@ describe('Events on Custom Elements', () => {
         }
         elm = createElement('x-foo', { is: Foo });
         document.body.appendChild(elm);
-        cmp.root.querySelector('div').click();
+        cmp.template.querySelector('div').click();
         expect(result).toHaveLength(2);
         expect(result[0]).toBe(undefined); // context must be the component
         expect(result[1]).toBeInstanceOf(Event);

packages/lwc-engine/src/framework/__tests__/html-element.spec.ts

@@ -7,27 +7,28 @@ import { VNode } from "../../3rdparty/snabbdom/types";
 import { Component } from "../component";
 import { unwrap } from "../main";
 import { querySelector } from "../dom";
+import { callbackify } from "util";
 
 describe('html-element', () => {
     describe('#setAttributeNS()', () => {
         it('should set attribute on host element when element is nested in template', () => {
-            class MyComponent extends Element {
+            class Child extends Element {
                 setFoo() {
                     this.setAttributeNS('x', 'foo', 'bar');
                 }
             }
-            MyComponent.publicMethods = ['setFoo'];
+            Child.publicMethods = ['setFoo'];
 
             class Parent extends Element {
                 render() {
                     return ($api) => {
-                        return [$api.c('should-set-attribute-on-host-element-when-element-is-nested-in-template-child', MyComponent, {})]
+                        return [$api.c('x-child', Child, {})]
                     }
                 }
             }
             const element = createElement('should-set-attribute-on-host-element-when-element-is-nested-in-template', { is: Parent });
             document.body.appendChild(element);
-            const child = querySelector.call(element, 'should-set-attribute-on-host-element-when-element-is-nested-in-template-child');
+            const child = querySelector.call(element, 'x-child');
             child.setFoo();
             expect(child.hasAttributeNS('x', 'foo')).toBe(true);
             expect(child.getAttributeNS('x', 'foo')).toBe('bar');
@@ -61,23 +62,23 @@ describe('html-element', () => {
 
     describe('#setAttribute()', () => {
         it('should set attribute on host element when element is nested in template', () => {
-            class MyComponent extends Element {
+            class Child extends Element {
                 setFoo() {
                     this.setAttribute('foo', 'bar');
                 }
             }
-            MyComponent.publicMethods = ['setFoo'];
+            Child.publicMethods = ['setFoo'];
 
             class Parent extends Element {
                 render() {
                     return ($api) => {
-                        return [$api.c('should-set-attribute-on-host-element-when-element-is-nested-in-template-child', MyComponent, {})]
+                        return [$api.c('x-child', Child, {})]
                     }
                 }
             }
             const element = createElement('should-set-attribute-on-host-element-when-element-is-nested-in-template', { is: Parent });
             document.body.appendChild(element);
-            const child = querySelector.call(element, 'should-set-attribute-on-host-element-when-element-is-nested-in-template-child');
+            const child = querySelector.call(element, 'x-child');
             child.setFoo();
             expect(child.hasAttribute('foo')).toBe(true);
             expect(child.getAttribute('foo')).toBe('bar');
@@ -111,17 +112,17 @@ describe('html-element', () => {
 
     describe('#removeAttributeNS()', () => {
         it('should remove namespaced attribute on host element when element is nested in template', () => {
-            class MyComponent extends Element {
+            class Child extends Element {
                 removeTitle() {
                     this.removeAttributeNS('x', 'title');
                 }
             }
-            MyComponent.publicMethods = ['removeTitle'];
+            Child.publicMethods = ['removeTitle'];
 
             class Parent extends Element {
                 render() {
                     return ($api) => {
-                        return [$api.c('remove-namespaced-attribute-on-host-element-child', MyComponent, {
+                        return [$api.c('x-child', Child, {
                             attrs: {
                                 'x:title': 'foo',
                             }
@@ -131,7 +132,7 @@ describe('html-element', () => {
             }
             const element = createElement('remove-namespaced-attribute-on-host-element', { is: Parent });
             document.body.appendChild(element);
-            const child = querySelector.call(element, 'remove-namespaced-attribute-on-host-element-child');
+            const child = querySelector.call(element, 'x-child');
             child.removeTitle();
             expect(child.hasAttributeNS('x', 'title')).toBe(false);
         });
@@ -152,17 +153,17 @@ describe('html-element', () => {
 
     describe('#removeAttribute()', () => {
         it('should remove attribute on host element when element is nested in template', () => {
-            class MyComponent extends Element {
+            class Child extends Element {
                 removeTitle() {
                     this.removeAttribute('title');
                 }
             }
-            MyComponent.publicMethods = ['removeTitle'];
+            Child.publicMethods = ['removeTitle'];
 
             class Parent extends Element {
                 render() {
                     return ($api) => {
-                        return [$api.c('element-is-nested-in-template-child', MyComponent, {
+                        return [$api.c('x-child', Child, {
                             attrs: {
                                 title: 'foo',
                             }
@@ -172,7 +173,7 @@ describe('html-element', () => {
             }
             const element = createElement('element-is-nested-in-template', { is: Parent });
             document.body.appendChild(element);
-            const child = querySelector.call(element, 'element-is-nested-in-template-child');
+            const child = querySelector.call(element, 'x-child');
             child.removeTitle();
             expect(child.hasAttribute('title')).toBe(false);
         });

packages/lwc-engine/src/framework/__tests__/invoker.spec.ts

@@ -155,7 +155,7 @@ describe('invoker', () => {
                 }
             }
             function html($api) {
-                return [$api.c('x-foo', Child, {})];
+                return [$api.c('x-child', Child, {})];
             }
             class MyComponent3 extends Element {
                 renderedCallback() {