Using deep merge objects and some changes to debug (#249)

* Using deep merge objects and some changes to debug

* Fix import LAUNCH from environment

* Improve test

Author: mmarkelov

extends.js

@@ -1,8 +1,8 @@
 /* global jestPlaywright, browserName, deviceName */
-const { getSkipFlag } = require('./lib/utils')
+// TODO Rewrite with TS?
+const { getSkipFlag, deepMerge } = require('./lib/utils')
 
 const DEBUG_OPTIONS = {
-  launchType: 'LAUNCH',
   launchOptions: {
     headless: false,
     devtools: true,
@@ -14,18 +14,7 @@ const runDebugTest = (jestTestType, ...args) => {
   // TODO Looks wierd - need to be rewritten
   let options = DEBUG_OPTIONS
   if (isConfigProvided) {
-    const {
-      contextOptions,
-      launchOptions = {},
-      launchType = DEBUG_OPTIONS.launchType,
-    } = args[0]
-    // TODO Add function for deep objects merging
-    options = {
-      ...DEBUG_OPTIONS,
-      launchType,
-      launchOptions: { ...DEBUG_OPTIONS.launchOptions, ...launchOptions },
-      contextOptions,
-    }
+    options = deepMerge(DEBUG_OPTIONS, args[0])
   }
 
   jestTestType(args[isConfigProvided ? 1 : 0], async () => {

src/PlaywrightEnvironment.ts

@@ -2,24 +2,25 @@
 import type { Event, State } from 'jest-circus'
 import type {
   Browser,
-  Page,
   BrowserContext,
   BrowserContextOptions,
+  Page,
 } from 'playwright-core'
 import type {
-  JestPlaywrightConfig,
-  GenericBrowser,
   BrowserType,
-  JestPlaywrightProjectConfig,
   ConnectOptions,
+  GenericBrowser,
+  JestPlaywrightConfig,
+  JestPlaywrightProjectConfig,
 } from '../types/global'
 import {
   CHROMIUM,
   IMPORT_KIND_PLAYWRIGHT,
-  LAUNCH,
   PERSISTENT,
+  LAUNCH,
 } from './constants'
 import {
+  deepMerge,
   getBrowserOptions,
   getBrowserType,
   getDeviceType,
@@ -174,41 +175,33 @@ export const getPlaywrightEnv = (basicEnv = 'node'): unknown => {
           config: JestPlaywrightConfig,
           isDebug?: boolean,
         ): Promise<ConfigParams> => {
-          const { contextOptions, launchOptions, launchType } = config
           let resultBrowserConfig: JestPlaywrightConfig
           let resultContextOptions: BrowserContextOptions | undefined
           if (isDebug) {
             resultBrowserConfig = config
-            resultContextOptions = contextOptions
+            resultContextOptions = config.contextOptions
           } else {
-            // TODO Add function for deep objects merging
-            resultBrowserConfig = {
-              ...this._jestPlaywrightConfig,
-              launchType,
-              launchOptions: {
-                ...this._jestPlaywrightConfig.launchOptions,
-                ...launchOptions,
-              },
-            }
+            resultBrowserConfig = deepMerge(this._jestPlaywrightConfig, {
+              ...config,
+              launchType: LAUNCH,
+            })
             resultContextOptions = {
               ...this._jestPlaywrightConfig.contextOptions,
-              ...contextOptions,
+              ...config.contextOptions,
             }
           }
-          const browserOrContext = await getBrowserPerProcess(
+          const browser = await getBrowserPerProcess(
             playwrightInstance,
             browserType,
             resultBrowserConfig,
           )
-          const browser = launchType === PERSISTENT ? null : browserOrContext
           const newContextOptions = getBrowserOptions(
             browserName,
             resultContextOptions,
           )
-          const context =
-            launchType === PERSISTENT
-              ? (browserOrContext as BrowserContext)
-              : await (browser as Browser)!.newContext(newContextOptions)
+          const context = await (browser as Browser)!.newContext(
+            newContextOptions,
+          )
           const page = await context!.newPage()
           return { browser, context, page }
         },

src/utils.test.ts

@@ -37,6 +37,10 @@ describe('readConfig', () => {
       },
       browser: 'chromium',
       contextOptions: {
+        viewport: {
+          width: 800,
+          height: 640,
+        },
         ignoreHTTPSErrors: true,
       },
     }

src/utils.ts

@@ -30,6 +30,32 @@ export const checkBrowserEnv = (param: BrowserType): void => {
   }
 }
 
+const isObject = (item: any) => {
+  return item && typeof item === 'object' && !Array.isArray(item)
+}
+
+export const deepMerge = <T extends Record<string, any>>(
+  target: T,
+  source: T,
+): T => {
+  let output = { ...target }
+  const keys: (keyof T)[] = Object.keys(source)
+  if (isObject(target) && isObject(source)) {
+    keys.forEach((key) => {
+      if (isObject(source[key])) {
+        if (!(key in target)) {
+          output = { ...output, [key]: source[key] }
+        } else {
+          output[key] = deepMerge(target[key], source[key])
+        }
+      } else {
+        output = { ...output, [key]: source[key] }
+      }
+    })
+  }
+  return output
+}
+
 export const checkDeviceEnv = (
   device: string,
   availableDevices: string[],
@@ -202,19 +228,7 @@ export const readConfig = async (
 
   const localConfig = await require(absConfigPath)
   validateConfig(localConfig)
-  // TODO Add function for deep objects merging
-  return {
-    ...DEFAULT_CONFIG,
-    ...localConfig,
-    launchOptions: {
-      ...DEFAULT_CONFIG.launchOptions,
-      ...(localConfig.launchOptions || {}),
-    },
-    contextOptions: {
-      ...DEFAULT_CONFIG.contextOptions,
-      ...(localConfig.contextOptions || {}),
-    },
-  }
+  return deepMerge<JestPlaywrightConfig>(DEFAULT_CONFIG, localConfig)
 }
 
 export const formatError = (error: string): string =>