feat(adapter): update createConfig helper to use deep merge (#38)

* remove custom overrides type

* use deep merge to combine default config w/ overrides

* add `DeepPartial` type for overrides

* swap to deepmerge package

* add to breaking changes

* fix rebase errors

Author: tanner-reits

BREAKING_CHANGES.md

@@ -10,3 +10,4 @@ This is a list of all breaking changes introduced in the Stencil Playwright adap
 ### v0.2.0
 
 - `createStencilPlaywrightConfig` renamed to `createConfig`
+- `createConfig` uses a deep merge to combine default config values with overrides

cspell.json

@@ -1,4 +1,15 @@
 {
-  "ignorePaths": ["**/node_modules/**", "**/third-party/**"],
-  "words": ["appload", "domcontentloaded", "networkidle", "outfile", "tada", "upvote"]
+  "ignorePaths": [
+    "**/node_modules/**",
+    "**/third-party/**"
+  ],
+  "words": [
+    "appload",
+    "deepmerge",
+    "domcontentloaded",
+    "networkidle",
+    "outfile",
+    "tada",
+    "upvote"
+  ]
 }

package-lock.json

@@ -71,6 +71,7 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
+    "deepmerge": "^4.3.1",
     "glob": "^10.3.10"
   }
 }

package.json

@@ -1,26 +1,15 @@
 import { PlaywrightTestConfig } from '@playwright/test';
+import merge from 'deepmerge';
 
 import { loadConfigMeta } from './load-config-meta';
 import { ProcessConstants } from './process-constants';
 
-/**
- * Options for creating a Playwright config for Stencil projects. This extends the default Playwright config
- * with some additional options specific to overriding options for the Playwright dev server.
- */
-export type CreateStencilPlaywrightConfigOptions = Partial<PlaywrightTestConfig> & {
-  /**
-   * The command to execute to start the dev server. This can be a bash command or a local npm script.
-   *
-   * Defaults to `npm start -- --no-open`.
-   */
-  webServerCommand?: string;
-  /**
-   * The maximum time to wait for the dev server to start before aborting.
-   *
-   * Defaults to `60000` (60 seconds).
-   */
-  webServerTimeout?: number;
-};
+// Recursively apply the `Partial` type to all nested object types in the provided generic type
+type DeepPartial<T> = T extends object
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;
 
 /**
  * Helper function to easily create a Playwright config for Stencil projects. This function will
@@ -31,7 +20,9 @@ export type CreateStencilPlaywrightConfigOptions = Partial<PlaywrightTestConfig>
  * @param overrides Values to override in the default config. Any Playwright config option can be overridden.
  * @returns A {@link PlaywrightTestConfig} object
  */
-export const createConfig = async (overrides?: CreateStencilPlaywrightConfigOptions): Promise<PlaywrightTestConfig> => {
+export const createConfig = async (
+  overrides: DeepPartial<PlaywrightTestConfig> = {},
+): Promise<PlaywrightTestConfig> => {
   const { webServerUrl, baseURL, stencilEntryPath, stencilNamespace } = await loadConfigMeta();
 
   // Set the Stencil namespace and entry path as environment variables so we can use them when constructing
@@ -40,27 +31,23 @@ export const createConfig = async (overrides?: CreateStencilPlaywrightConfigOpti
   process.env[ProcessConstants.STENCIL_NAMESPACE] = stencilNamespace;
   process.env[ProcessConstants.STENCIL_ENTRY_PATH] = stencilEntryPath;
 
-  // Strip off overrides that are not top-level playwright options. We need to remove
-  // this properties to avoid runtime errors since they are not valid playwright options.
-  const playwrightOverrides = JSON.parse(JSON.stringify(overrides ?? {}));
-  delete playwrightOverrides.webServerCommand;
-  delete playwrightOverrides.webServerTimeout;
-
-  return {
-    testMatch: '*.e2e.ts',
-    use: {
-      baseURL,
-    },
-    webServer: {
-      command: overrides?.webServerCommand ?? 'stencil build --dev --watch --serve --no-open',
-      url: webServerUrl,
-      reuseExistingServer: !!!process.env.CI,
-      // Max time to wait for dev server to start before aborting, defaults to 60000 (60 seconds)
-      timeout: overrides?.webServerTimeout ?? undefined,
-      // Pipe the dev server output to the console
-      // Gives visibility to the developer if the dev server fails to start
-      stdout: 'pipe',
+  return merge<DeepPartial<PlaywrightTestConfig>>(
+    {
+      testMatch: '*.e2e.ts',
+      use: {
+        baseURL,
+      },
+      webServer: {
+        command: 'stencil build --dev --watch --serve --no-open',
+        url: webServerUrl,
+        reuseExistingServer: !!!process.env.CI,
+        // Max time to wait for dev server to start before aborting, defaults to 60000 (60 seconds)
+        timeout: undefined,
+        // Pipe the dev server output to the console
+        // Gives visibility to the developer if the dev server fails to start
+        stdout: 'pipe',
+      },
     },
-    ...playwrightOverrides,
-  };
+    overrides,
+  ) as PlaywrightTestConfig;
 };

src/create-config.ts

@@ -31,7 +31,9 @@ describe('createConfig', () => {
 
   it('should override the default config', async () => {
     const config = await createConfig({
-      webServerCommand: 'npm start -- --no-open --port 4444',
+      webServer: {
+        port: 4444,
+      },
       testDir: 'tests/e2e',
     });
 
@@ -42,10 +44,11 @@ describe('createConfig', () => {
         baseURL: 'http://localhost:3333',
       },
       webServer: {
-        command: 'npm start -- --no-open --port 4444',
+        command: 'stencil build --dev --watch --serve --no-open',
         url: 'http://localhost:3333/ping',
         reuseExistingServer: !process.env.CI,
         timeout: undefined,
+        port: 4444,
         stdout: 'pipe',
       },
     });