test(transpile): split apart transpile spec

src/compiler/bundle/test/bundle.spec.ts

@@ -0,0 +1,104 @@
+import { TestingCompiler } from '../../../testing';
+import { wroteFile } from '../../../testing/utils';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+
+describe('bundle', () => {
+
+  let c: TestingCompiler;
+
+  beforeEach(async () => {
+    c = new TestingCompiler();
+    await c.fs.writeFile('/src/index.html', `<cmp-a></cmp-a>`);
+    await c.fs.commit();
+  });
+
+
+  it('wildcard imports should remain within component files', async () => {
+    c.config.bundles = [ { components: ['cmp-a']}, { components: ['cmp-b'] } ];
+    await c.fs.writeFiles({
+      '/src/new-dir/cmp-a.tsx': `
+        import * as file from './file';
+        @Component({ tag: 'cmp-a' }) export class CmpA {
+          render() {
+            return file.file;
+          }
+        }
+      `,
+      '/src/new-dir/cmp-b.tsx': `
+        import * as file from './file';
+        @Component({ tag: 'cmp-b' }) export class CmpB {
+          render() {
+            return file.file;
+          }
+        }
+      `,
+      '/src/new-dir/file.ts': `export const file = 'filetext';`,
+    }, { clearFileCache: true });
+
+    await c.fs.commit();
+
+    const r = await c.build();
+    expect(r.diagnostics).toEqual([]);
+    expect(r.bundleBuildCount).toEqual(3);
+  });
+
+  it('get component dependencies from imports', async () => {
+    c.config.bundles = [ { components: ['cmp-a'] } ];
+    await c.fs.writeFiles({
+      '/src/new-dir/cmp-b.tsx': `@Component({ tag: 'cmp-b' }) export class CmpB {}`,
+      '/src/new-dir/cmp-c.tsx': `@Component({ tag: 'cmp-c' }) export class CmpC {}`,
+      '/src/new-dir/cmp-d.tsx': `@Component({ tag: 'cmp-d' }) export class CmpD {}`,
+      '/src/new-dir/cmp-e.tsx': `@Component({ tag: 'cmp-e' }) export class CmpE {}`,
+      '/src/util-1.tsx': `
+        import { getImportedCmpC } from './util-2';
+        export function getCmpB() {
+          const el = document.createElement("cmp-b");
+          return el;
+        }
+        export function getCmpC() {
+          return getImportedCmpC();
+        }
+      `,
+      '/src/util-2.tsx': `
+        import { getJsxCmpD } from './util-3';
+        export function getImportedCmpC() {
+          return {
+            cmpC: document.createElement("cmp-c"),
+            cmpD: getJsxCmpD()
+          };
+        }
+      `,
+      '/src/util-3.tsx': `
+        export function getJsxCmpD() {
+          return <cmp-d/>;
+        }
+        export function getJsxCmpE() {
+          return document.createElement('cmp-e');
+        }
+      `
+    }, { clearFileCache: true });
+
+    await c.fs.writeFile('/src/cmp-a.tsx', `
+      import { getCmpB, getCmpC } from './util-1';
+
+      @Component({ tag: 'cmp-a' }) export class CmpA {
+        componentWillLoad() {
+          getCmpB();
+        }
+        componentDidLoad() {
+          getCmpC();
+        }
+      }
+    `, { clearFileCache: true });
+    await c.fs.commit();
+
+    const r = await c.build();
+    expect(r.diagnostics).toEqual([]);
+
+    expect(r.components[0].dependencies).toEqual(['cmp-b', 'cmp-c', 'cmp-d', 'cmp-e']);
+  });
+
+
+});

src/compiler/entries/test/entries.spec.ts

@@ -0,0 +1,238 @@
+import { TestingCompiler } from '../../../testing';
+import { wroteFile } from '../../../testing/utils';
+import * as path from 'path';
+import * as ts from 'typescript';
+
+
+describe('entries', () => {
+
+  let c: TestingCompiler;
+
+  beforeEach(async () => {
+    c = new TestingCompiler();
+    await c.fs.writeFile('/src/index.html', `<cmp-a></cmp-a>`);
+    await c.fs.commit();
+  });
+
+
+  it('should transpile attr in componet static property', async () => {
+    c.config.bundles = [ { components: ['cmp-a'] } ];
+    await c.fs.writeFile('/src/cmp-a.tsx', `
+      @Component({ tag: 'cmp-a' }) export class CmpA {
+        @Prop() str: string;
+        @Prop() myStr: string;
+        @Prop() myNum: number;
+        @Prop() myBool: boolean;
+        @Prop() myAny: any;
+        @Prop() myPromise: Promise<void>;
+        @Prop() arr: string[];
+        @Prop() obj: Object;
+      }
+    `, { clearFileCache: true });
+    await c.fs.commit();
+
+    const r = await c.build();
+    expect(r.diagnostics).toEqual([]);
+
+    const content = await c.fs.readFile('/www/build/app/cmp-a.js');
+    expect(content).toContain(`"arr": { "type": "Any", "attr": "arr" }`);
+    expect(content).toContain(`"myAny": { "type": "Any", "attr": "my-any"`);
+    expect(content).toContain(`"myBool": { "type": Boolean, "attr": "my-bool" }`);
+    expect(content).toContain(`"myNum": { "type": Number, "attr": "my-num" }`);
+    expect(content).toContain(`"myPromise": { "type": "Any", "attr": "my-promise" }`);
+    expect(content).toContain(`"myStr": { "type": String, "attr": "my-str" }`);
+    expect(content).toContain(`"obj": { "type": "Any", "attr": "obj" }`);
+    expect(content).toContain(`"str": { "type": String, "attr": "str" }`);
+  });
+
+  it('get component dependencies from imports w/ circular dependencies', async () => {
+    c.config.bundles = [ { components: ['cmp-a'] } ];
+    await c.fs.writeFiles({
+      '/src/new-dir/cmp-b.tsx': `@Component({ tag: 'cmp-b' }) export class CmpB {}`,
+      '/src/new-dir/cmp-c.tsx': `@Component({ tag: 'cmp-c' }) export class CmpC {}`,
+      '/src/util-1.tsx': `
+        import { getImportedCmpC } from './util-2';
+        export function getCmpB() {
+          return {
+            'b': document.createElement("cmp-b"),
+            'c': getImportedCmpC()
+          }
+        }
+      `,
+      '/src/util-2.tsx': `
+        import { getCmpB } from './util-1';
+        export function derpCircular() {
+          return getCmpB();
+        }
+        export function getImportedCmpC() {
+          return {
+            'b': document.createElement("cmp-b"),
+            'c': document.createElement("cmp-c")
+          };
+        }
+      `
+    }, { clearFileCache: true });
+
+    await c.fs.writeFile('/src/cmp-a.tsx', `
+      import { getCmpB } from './util-1';
+
+      @Component({ tag: 'cmp-a' }) export class CmpA {
+        componentWillLoad() {
+          getCmpB();
+        }
+      }
+    `, { clearFileCache: true });
+    await c.fs.commit();
+
+    const r = await c.build();
+    expect(r.diagnostics).toEqual([]);
+
+    expect(r.components[0].dependencies).toEqual(['cmp-b', 'cmp-c']);
+  });
+
+  it('get component dependencies from imports', async () => {
+    c.config.bundles = [ { components: ['cmp-a'] } ];
+    await c.fs.writeFiles({
+      '/src/new-dir/cmp-b.tsx': `@Component({ tag: 'cmp-b' }) export class CmpB {}`,
+      '/src/new-dir/cmp-c.tsx': `@Component({ tag: 'cmp-c' }) export class CmpC {}`,
+      '/src/new-dir/cmp-d.tsx': `@Component({ tag: 'cmp-d' }) export class CmpD {}`,
+      '/src/new-dir/cmp-e.tsx': `@Component({ tag: 'cmp-e' }) export class CmpE {}`,
+      '/src/util-1.tsx': `
+        import { getImportedCmpC } from './util-2';
+        export function getCmpB() {
+          const el = document.createElement("cmp-b");
+          return el;
+        }
+        export function getCmpC() {
+          return getImportedCmpC();
+        }
+      `,
+      '/src/util-2.tsx': `
+        import { getJsxCmpD } from './util-3';
+        export function getImportedCmpC() {
+          return {
+            cmpC: document.createElement("cmp-c"),
+            cmpD: getJsxCmpD()
+          };
+        }
+      `,
+      '/src/util-3.tsx': `
+        export function getJsxCmpD() {
+          return <cmp-d/>;
+        }
+        export function getJsxCmpE() {
+          return document.createElement('cmp-e');
+        }
+      `
+    }, { clearFileCache: true });
+
+    await c.fs.writeFile('/src/cmp-a.tsx', `
+      import { getCmpB, getCmpC } from './util-1';
+
+      @Component({ tag: 'cmp-a' }) export class CmpA {
+        componentWillLoad() {
+          getCmpB();
+        }
+        componentDidLoad() {
+          getCmpC();
+        }
+      }
+    `, { clearFileCache: true });
+    await c.fs.commit();
+
+    const r = await c.build();
+    expect(r.diagnostics).toEqual([]);
+
+    expect(r.components[0].dependencies).toEqual(['cmp-b', 'cmp-c', 'cmp-d', 'cmp-e']);
+  });
+
+  it('get CallExpression component dependencies', async () => {
+    c.config.bundles = [ { components: ['cmp-a'] } ];
+    await c.fs.writeFiles({
+      '/src/new-dir/cmp-b.tsx': `@Component({ tag: 'cmp-b' }) export class CmpB {}`,
+      '/src/new-dir/cmp-c.tsx': `@Component({ tag: 'cmp-c' }) export class CmpC {}`,
+      '/src/new-dir/no-find.tsx': `@Component({ tag: 'no-find' }) export class NoFind {}`
+    }, { clearFileCache: true });
+
+    await c.fs.writeFile('/src/cmp-a.tsx', `
+      @Component({ tag: 'cmp-a' }) export class CmpA {
+        render() {
+          someFunction('no-find');
+          if (true) {
+            return (
+              h('cmp-b')
+            );
+          }
+          return (
+            h('cmp-c')
+          );
+        }
+      }
+    `, { clearFileCache: true });
+    await c.fs.commit();
+
+    const r = await c.build();
+    expect(r.diagnostics).toEqual([]);
+
+    expect(r.components[0].tag).toBe('cmp-a');
+    expect(r.components[0].dependencies).toEqual(['cmp-b', 'cmp-c']);
+  });
+
+  it('get CallExpression PropertyAccessExpression component dependencies', async () => {
+    c.config.bundles = [ { components: ['cmp-a'] } ];
+    await c.fs.writeFiles({
+      '/src/new-dir/cmp-b.tsx': `@Component({ tag: 'cmp-b' }) export class CmpB {}`,
+      '/src/new-dir/cmp-c.tsx': `@Component({ tag: 'cmp-c' }) export class CmpC {}`,
+      '/src/new-dir/no-find.tsx': `@Component({ tag: 'no-find' }) export class NoFind {}`
+    }, { clearFileCache: true });
+
+    await c.fs.writeFile('/src/cmp-a.tsx', `
+      @Component({ tag: 'cmp-a' }) export class CmpA {
+        constructor() {
+          document.createElement('cmp-b');
+          var doc = document;
+          doc.createElementNS('cMp-C');
+          document.createElement('   no-find   ');
+          doc.someFunction('no-find');
+        }
+      }
+    `, { clearFileCache: true });
+    await c.fs.commit();
+
+    const r = await c.build();
+    expect(r.diagnostics).toEqual([]);
+
+    expect(r.components[0].tag).toBe('cmp-a');
+    expect(r.components[0].dependencies).toEqual(['cmp-b', 'cmp-c']);
+  });
+
+  it('get component dependencies from html string literals', async () => {
+    c.config.bundles = [ { components: ['cmp-a'] } ];
+    await c.fs.writeFiles({
+      '/src/new-dir/cmp-b.tsx': `@Component({ tag: 'cmp-b' }) export class CmpB {}`,
+      '/src/new-dir/cmp-c.tsx': `@Component({ tag: 'cmp-c' }) export class CmpC {}`,
+      '/src/new-dir/no-find.tsx': `@Component({ tag: 'no-find' }) export class NoFind {}`
+    }, { clearFileCache: true });
+
+    await c.fs.writeFile('/src/cmp-a.tsx', `
+      @Component({ tag: 'cmp-a' }) export class CmpA {
+        // no-find
+        //no-find
+        /* no-find */
+        /*no-find*/
+        constructor() {
+          this.el.innerHTML = '<cmp-b></cmp-b>';
+          $.append('<cmp-c></cmp-c>');
+        }
+      }
+    `, { clearFileCache: true });
+    await c.fs.commit();
+
+    const r = await c.build();
+    expect(r.diagnostics).toEqual([]);
+
+    expect(r.components[0].tag).toBe('cmp-a');
+    expect(r.components[0].dependencies).toEqual(['cmp-b', 'cmp-c']);
+  });
+
+});