feat(test): Run Playwright tests using bundles.

Author: onurtemizkan

.github/workflows/build.yml

@@ -276,9 +276,18 @@ jobs:
             ${{ github.workspace }}/packages/serverless/dist-awslambda-layer/*.zip
 
   job_browser_playwright_tests:
-    name: Browser Playwright Tests
+    name: Browser Playwright Tests (Bundle ${{ matrix.bundle }})
     needs: job_build
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        bundle:
+          - esm
+          - dist
+          - bundle
+          - bundle_min
+          - bundle_es6
+          - bundle_es6_min
     steps:
       - name: Check out current commit (${{ github.sha }})
         uses: actions/checkout@v2
@@ -297,6 +306,8 @@ jobs:
           path: ${{ env.CACHED_BUILD_PATHS }}
           key: ${{ env.BUILD_CACHE_KEY }}
       - name: Run Playwright tests
+        env:
+          PW_BUNDLE: ${{ matrix.bundle }}
         run: |
           cd packages/integration-tests
           yarn run playwright install-deps webkit

packages/integration-tests/package.json

@@ -13,10 +13,16 @@
     "lint": "run-s lint:prettier lint:eslint",
     "lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish",
     "lint:prettier": "prettier --check \"{suites,utils}/**/*.ts\"",
-    "test:ci": "playwright test ./suites --browser='all' --reporter='line'",
     "type-check": "tsc",
     "pretest": "yarn clean && yarn type-check",
-    "test": "playwright test ./suites"
+    "test": "playwright test ./suites",
+    "test:bundle": "PW_BUNDLE=bundle yarn test",
+    "test:bundle:min": "PW_BUNDLE=bundle_min yarn test",
+    "test:bundle:es6": "PW_BUNDLE=bundle_es6 yarn test",
+    "test:bundle:es6:min": "PW_BUNDLE=bundle_es6_min yarn test",
+    "test:dist": "PW_BUNDLE=dist yarn test",
+    "test:esm": "PW_BUNDLE=esm yarn test",
+    "test:ci": "playwright test ./suites --browser='all' --reporter='line'"
   },
   "dependencies": {
     "@babel/preset-typescript": "^7.16.7",

packages/integration-tests/utils/generatePage.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { Package } from '@sentry/types';
 import { existsSync, mkdirSync, promises } from 'fs';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
@@ -8,6 +9,29 @@ import webpackConfig from '../webpack.config';
 
 const PACKAGE_PATH = '../../packages';
 
+const bundleKey = process.env.PW_BUNDLE || '';
+const useCompiledModule = (bundleKey && bundleKey === 'esm') || bundleKey === 'dist';
+const useBundle = bundleKey && !useCompiledModule;
+
+const TEST_PATHS: Record<string, Record<string, string>> = {
+  browser: {
+    dist: 'dist/index.js',
+    esm: 'esm/index.js',
+    bundle: 'build/bundle.js',
+    bundle_min: 'build/bundle.min.js',
+    bundle_es6: 'build/bundle.es6.js',
+    bundle_es6_min: 'build/bundle.es6.min.js',
+  },
+  tracing: {
+    dist: 'dist/index.js',
+    esm: 'esm/index.js',
+    bundle: 'build/bundle.tracing.js',
+    bundle_min: 'build/bundle.tracing.min.js',
+    bundle_es6: 'build/bundle.tracing.js',
+    bundle_es6_min: 'build/bundle.tracing.min.js',
+  },
+};
+
 /**
  * Generate webpack aliases based on packages in monorepo
  * Example of an alias: '@sentry/serverless': 'path/to/sentry-javascript/packages/serverless',
@@ -19,11 +43,26 @@ async function generateSentryAlias(): Promise<Record<string, string>> {
 
   return Object.fromEntries(
     await Promise.all(
-      dirents.map(async d => {
+      dirents.map(async packageName => {
         const packageJSON: Package = JSON.parse(
-          (await promises.readFile(path.resolve(PACKAGE_PATH, d, 'package.json'), { encoding: 'utf-8' })).toString(),
+          (
+            await promises.readFile(path.resolve(PACKAGE_PATH, packageName, 'package.json'), { encoding: 'utf-8' })
+          ).toString(),
         );
-        return [packageJSON['name'], path.resolve(PACKAGE_PATH, d)];
+
+        const packagePath = path.resolve(PACKAGE_PATH, packageName);
+
+        if (useCompiledModule && TEST_PATHS[packageName]) {
+          const bundlePath = path.resolve(packagePath, TEST_PATHS[packageName][bundleKey]);
+
+          if (!existsSync(bundlePath)) {
+            console.warn(`${bundlePath} is not found. Try building the package before running tests.`);
+          }
+
+          return [packageJSON['name'], bundlePath];
+        }
+
+        return [packageJSON['name'], packagePath];
       }),
     ),
   );
@@ -44,6 +83,14 @@ export async function generatePage(
     mkdirSync(localPath, { recursive: true });
   }
 
+  const bundlesToInject = useBundle
+    ? ['browser', 'tracing'].map(sentryPackage =>
+        path.resolve(PACKAGE_PATH, sentryPackage, TEST_PATHS[sentryPackage][bundleKey]),
+      )
+    : [];
+
+  const initializationEntry = bundlesToInject.concat(initializationPath);
+
   if (!existsSync(bundlePath)) {
     await new Promise<void>((resolve, reject) => {
       const compiler = webpack(
@@ -52,7 +99,7 @@ export async function generatePage(
             alias,
           },
           entry: {
-            initialization: initializationPath,
+            initialization: initializationEntry,
             subject: subjectPath,
           },
           output: {
@@ -65,7 +112,6 @@ export async function generatePage(
               template: templatePath,
               initialization: 'initialization.bundle.js',
               subject: `subject.bundle.js`,
-              inject: false,
             }),
           ],
         }),

packages/integration-tests/webpack.config.ts

@@ -1,6 +1,6 @@
 import { Configuration } from 'webpack';
 
-const config = function(userConfig: Record<string, unknown>): Configuration {
+const config = function (userConfig: Record<string, unknown>): Configuration {
   return {
     ...userConfig,
     mode: 'none',