E2E: Add Vue 2, add Angular, Mitosis output is source not package (#500)

* Include test context making E2E failures much easier to investigate

* mitosis-source approach for Vue 3

* mitosis-source approach for Solid

* mitosis-source approach for React

* mitosis-source approach for Svelte

* Move E2E spec in to e2e-app; makes semantic sense

* E2E for Vue 2

* build/test/lint everything else before E2E

* E2E: update state using methods in useStore

* Rename outputs per target

fixes #473
fixes #476
fixes #499

* E2E for Angular

* Accommodate upstream changes - all E2E passes

.github/workflows/on-push-build.yml

@@ -31,6 +31,9 @@ jobs:
       - name: Install browsers for Playwright
         run: yarn ci:e2e-prep
 
+      - name: Build E2E tests
+        run: yarn ci:e2e-build
+
       - name: Run E2E tests
         run: yarn ci:e2e
 

.github/workflows/pr-runner.yml

@@ -38,5 +38,8 @@ jobs:
       - name: Install browsers for Playwright
         run: yarn ci:e2e-prep
 
+      - name: Build E2E tests
+        run: yarn ci:e2e-build
+
       - name: Run E2E tests
         run: yarn ci:e2e

.gitignore

@@ -23,4 +23,3 @@ examples/**/output
 packages/e2e-app/output
 **/test-results/
 **/playwright-report/
-**/playwright/.cache/

.prettierignore

@@ -10,5 +10,7 @@ packages/e2e-app/output/**
 **/test-results/
 **/playwright-report/
 **/playwright/.cache/
-packages/e2e-vue3/src/lib/**
-**/tsconfig.json
+packages/e2e-*/src/**
+packages/e2e-*/*_src/lib/**
+packages/e2e-*/*_src/app/lib/**
+**/tsconfig.json

package.json

@@ -12,11 +12,12 @@
   },
   "scripts": {
     "lerna": "lerna",
-    "ci:build": "yarn workspaces foreach -pt --exclude @builder.io/mitosis-fiddle --verbose run build",
+    "ci:build": "yarn workspaces foreach -pt --exclude @builder.io/mitosis-fiddle --exclude \"*/e2e*\" --verbose run build",
     "ci:lint": "yarn run lint:prettier",
     "ci:test": "yarn workspaces foreach run test --passWithNoTests",
     "ci:e2e-prep": "playwright install --with-deps",
-    "ci:e2e": "yarn workspaces foreach run e2e",
+    "ci:e2e-build": "yarn workspaces foreach -pt --include \"*/e2e*\" --verbose run build",
+    "ci:e2e": "yarn workspaces foreach --verbose run e2e",
     "ci": "run-s \"ci:*\"",
     "commit": "git-cz",
     "fix": "run-p -c 'lint:* --fix'",
@@ -36,7 +37,6 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.6.0",
-    "@builder.io/e2e-app-spec": "workspace:*",
     "@playwright/test": "^1.22.2",
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",

packages/cli/src/build/helpers/extensions.ts

@@ -2,16 +2,22 @@ import { Target } from '@builder.io/mitosis';
 
 export const getFileExtensionForTarget = (target: Target) => {
   switch (target) {
+    case 'angular':
+      return '.ts';
+    case 'html':
+      return '.html';
+    case 'solid':
+      return '.jsx';
+    case 'svelte':
+      return '.svelte';
+    case 'swift':
+      return '.swift';
     case 'vue':
     case 'vue2':
     case 'vue3':
       return '.vue';
-    case 'swift':
-      return '.swift';
-    case 'svelte':
-      return '.svelte';
-    case 'solid':
-      return '.jsx';
+    case 'webcomponent':
+      return '.ts';
     default:
       return '.js';
   }

packages/e2e-angular/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

packages/e2e-angular/.gitignore

@@ -0,0 +1,30 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
+
+# Mitosis input, copied in from elsewhere
+src
+# Mitosis output
+angular_src/app/lib

packages/e2e-angular/README.md

@@ -0,0 +1,9 @@
+# E2E test harness for Angular
+
+To recompile and run just this set of E2E tests, you can run these commands at
+the project root:
+
+```bash
+yarn workspace @builder.io/e2e-angular run build
+yarn workspace @builder.io/e2e-angular run e2e
+```

packages/e2e-angular/angular.json

@@ -0,0 +1,79 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "e2e-angular": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "angular_src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/e2e-angular",
+            "index": "angular_src/index.html",
+            "main": "angular_src/main.ts",
+            "polyfills": "angular_src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": ["angular_src/favicon.ico", "angular_src/assets"],
+            "styles": ["angular_src/styles.css"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "angular_src/environments/environment.ts",
+                  "with": "angular_src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "e2e-angular:build:production"
+            },
+            "development": {
+              "browserTarget": "e2e-angular:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "e2e-angular:build"
+          }
+        }
+      }
+    }
+  }
+}

packages/e2e-angular/angular_src/app/app.component.html

@@ -0,0 +1 @@
+<my-component></my-component>

packages/e2e-angular/angular_src/app/app.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+})
+export class AppComponent {}

packages/e2e-angular/angular_src/app/app.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { MitosisModule } from './mitosis.module';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, MitosisModule],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

packages/e2e-angular/angular_src/app/mitosis.module.ts

@@ -0,0 +1,15 @@
+// This is a hand-written module, to match the exact names/paths of the
+// components we are using from Mitosis output. Ideally this would be generated
+// by Mitosis, and/or Angular 14 "standalone components" would be generated.
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import MyComponent from './lib/angular/src/components/my-component';
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MitosisModule {}

packages/e2e-angular/angular_src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+};

packages/e2e-angular/angular_src/environments/environment.ts

@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false,
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

packages/e2e-angular/angular_src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>E2eAngular</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

packages/e2e-angular/angular_src/main.ts

@@ -0,0 +1,13 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));

packages/e2e-angular/angular_src/polyfills.ts

@@ -0,0 +1,4 @@
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js'; // Included with Angular CLI.

packages/e2e-angular/angular_src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

packages/e2e-angular/mitosis.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  files: 'src/**',
+  dest: 'angular_src/app/lib',
+  targets: ['angular'],
+};

packages/e2e-angular/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@builder.io/e2e-angular",
+  "version": "0.0.1",
+  "scripts": {
+    "build": "yarn run mitosis && ng build",
+    "e2e": "../../node_modules/.bin/playwright test",
+    "mitosis": "syncdir ../e2e-app/src src --deleteOrphaned --quiet && mitosis build",
+    "ng": "ng",
+    "start": "yarn run mitosis && ng serve",
+    "serve": "http-server dist/e2e-angular",
+    "watch": "yarn run mitosis && ng build --watch --configuration development"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^14.0.0",
+    "@angular/common": "^14.0.0",
+    "@angular/compiler": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/forms": "^14.0.0",
+    "@angular/platform-browser": "^14.0.0",
+    "@angular/platform-browser-dynamic": "^14.0.0",
+    "@builder.io/e2e-app": "workspace:*",
+    "@builder.io/mitosis": "workspace:*",
+    "@builder.io/mitosis-cli": "workspace:*",
+    "http-server": "^14.1.1",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.0.2",
+    "@angular/cli": "~14.0.2",
+    "@angular/compiler-cli": "^14.0.0",
+    "sync-directory": "^5.1.5",
+    "typescript": "~4.7.2"
+  }
+}

packages/e2e-angular/playwright.config.ts

@@ -0,0 +1,3 @@
+import { configFor } from '@builder.io/e2e-app/shared.config';
+
+export default configFor('e2e-angular', 7506);

packages/e2e-angular/tsconfig.app.json

@@ -0,0 +1,11 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["angular_src/main.ts", "angular_src/polyfills.ts"],
+  "include": ["angular_src/**/*.d.ts"],
+  "exclude": ["angular_src/**/global.d.ts"]
+}