Add E2E tests for the behavior of config.meta.<setting>.env, `.cumu…

…lative` and `.effect` (vikejs#2005)

Co-authored-by: Romuald Brillout <[email protected]>

package.json

@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@brillout/test-e2e": "^0.5.36",
+    "@brillout/test-e2e": "^0.5.37",
     "@brillout/test-types": "^0.1.13",
     "playwright": "^1.47.0",
     "prettier": "^3.2.5",

test/playground/pages/about/e2e-test.ts

@@ -0,0 +1,23 @@
+export { testCumulativeSetting }
+
+import { expect, fetchHtml, test } from '@brillout/test-e2e'
+
+function testCumulativeSetting() {
+  test('Cumulative setting (not serialized but imported)', async () => {
+    let html: string
+    const expectGlobalMetaTags = () => {
+      expect(html).toContain('<meta charSet="UTF-8"/>')
+      expect(html).toContain('<meta name="viewport" content="width=device-width, initial-scale=1.0"/>')
+    }
+    const expectAboutMetaTags = () => {
+      expect(html).toContain('<meta name="description" content="Playground for testing."/>')
+    }
+
+    html = await fetchHtml('/')
+    expectGlobalMetaTags()
+
+    html = await fetchHtml('/about')
+    expectAboutMetaTags()
+    expectGlobalMetaTags()
+  })
+}

test/playground/pages/config-meta/VikeConfig.d.ts

@@ -0,0 +1,18 @@
+declare global {
+  namespace Vike {
+    interface Config {
+      settingServerOnly?: { nested: string }
+      settingClientOnly?: { nested: string }
+      settingConfigOnly?: { nested: string }
+      settingStandard?: { nested: string }
+      settingCumulative?: { nested: string }
+      settingWithEffect?: boolean
+      dependentSetting?: string
+    }
+    interface ConfigResolved {
+      settingCumulative?: { nested: string }[]
+    }
+  }
+}
+
+export {}

test/playground/pages/config-meta/cumulative/+Page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { usePageContext } from 'vike-react/usePageContext'
+import { serializePageContext } from './serializePageContext'
+
+export function Page() {
+  const pageContext = usePageContext()
+  const json = serializePageContext(pageContext)
+  return <p id="serialized-settings">{json}</p>
+}

test/playground/pages/config-meta/cumulative/+config.ts

@@ -0,0 +1,17 @@
+import { Config } from 'vike/types'
+
+export default {
+  settingStandard: { nested: 'default for standard @ /cumulative' },
+  settingCumulative: { nested: 'default for cumulative @ /cumulative' },
+  meta: {
+    // Used for testing different merge behaviors
+    settingStandard: {
+      env: { server: true, client: true, config: true },
+      cumulative: false
+    },
+    settingCumulative: {
+      env: { server: true, client: true, config: true },
+      cumulative: true
+    }
+  }
+} satisfies Config

test/playground/pages/config-meta/cumulative/e2e-test.ts

@@ -0,0 +1,38 @@
+export { testSettingInheritedByDescendants }
+
+import { expect, test } from '@brillout/test-e2e'
+import { retrievePageContext } from '../retrievePageContext'
+
+function testSettingInheritedByDescendants() {
+  test('Standard and cumulative settings are inherited correctly', async () => {
+    expect(await retrievePageContext('/config-meta/cumulative')).to.deep.equal({
+      settingStandard: { nested: 'default for standard @ /cumulative' },
+      settingCumulative: [{ nested: 'default for cumulative @ /cumulative' }]
+    })
+
+    expect(await retrievePageContext('/config-meta/cumulative/nested')).to.deep.equal({
+      settingStandard: { nested: 'override for standard @ /nested' },
+      settingCumulative: [
+        { nested: 'override for cumulative @ /nested' },
+        { nested: 'default for cumulative @ /cumulative' }
+      ]
+    })
+
+    expect(await retrievePageContext('/config-meta/cumulative/nested/no-overrides')).to.deep.equal({
+      settingStandard: { nested: 'override for standard @ /nested' },
+      settingCumulative: [
+        { nested: 'override for cumulative @ /nested' },
+        { nested: 'default for cumulative @ /cumulative' }
+      ]
+    })
+
+    expect(await retrievePageContext('/config-meta/cumulative/nested/deeply-nested')).to.deep.equal({
+      settingStandard: { nested: 'override for standard @ /deeply-nested' },
+      settingCumulative: [
+        { nested: 'override for cumulative @ /deeply-nested' },
+        { nested: 'override for cumulative @ /nested' },
+        { nested: 'default for cumulative @ /cumulative' }
+      ]
+    })
+  })
+}

test/playground/pages/config-meta/cumulative/nested/+Page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { usePageContext } from 'vike-react/usePageContext'
+import { serializePageContext } from '../serializePageContext'
+
+export function Page() {
+  const pageContext = usePageContext()
+  const json = serializePageContext(pageContext)
+  return <p id="serialized-settings">{json}</p>
+}

test/playground/pages/config-meta/cumulative/nested/+config.ts

@@ -0,0 +1,6 @@
+import { Config } from 'vike/types'
+
+export default {
+  settingStandard: { nested: 'override for standard @ /nested' },
+  settingCumulative: { nested: 'override for cumulative @ /nested' }
+} satisfies Config

test/playground/pages/config-meta/cumulative/nested/deeply-nested/+Page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { usePageContext } from 'vike-react/usePageContext'
+import { serializePageContext } from '../../serializePageContext'
+
+export function Page() {
+  const pageContext = usePageContext()
+  const json = serializePageContext(pageContext)
+  return <p id="serialized-settings">{json}</p>
+}

test/playground/pages/config-meta/cumulative/nested/deeply-nested/+config.ts

@@ -0,0 +1,6 @@
+import { Config } from 'vike/types'
+
+export default {
+  settingStandard: { nested: 'override for standard @ /deeply-nested' },
+  settingCumulative: { nested: 'override for cumulative @ /deeply-nested' }
+} satisfies Config

test/playground/pages/config-meta/cumulative/nested/no-overrides/+Page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { usePageContext } from 'vike-react/usePageContext'
+import { serializePageContext } from '../../serializePageContext'
+
+export function Page() {
+  const pageContext = usePageContext()
+  const json = serializePageContext(pageContext)
+  return <p id="serialized-settings">{json}</p>
+}

test/playground/pages/config-meta/cumulative/serializePageContext.ts

@@ -0,0 +1,6 @@
+import { PageContext } from 'vike/types'
+import { serializePageContext as serializePageContextGeneric } from '../serializePageContext'
+
+export function serializePageContext(pageContext: PageContext) {
+  return serializePageContextGeneric(pageContext, ['settingStandard', 'settingCumulative'])
+}

test/playground/pages/config-meta/effect/+config.ts

@@ -0,0 +1,24 @@
+import type { Config } from 'vike/types'
+
+export default {
+  dependentSetting: 'default @ /effect',
+  meta: {
+    dependentSetting: {
+      env: { server: false, client: false }
+    },
+    settingWithEffect: {
+      env: { server: false, client: false, config: true },
+      effect: function ({ configValue, configDefinedAt }) {
+        return (configValue as boolean)
+          ? {
+              meta: {
+                dependentSetting: {
+                  env: { server: true, client: true }
+                }
+              }
+            }
+          : {}
+      }
+    }
+  }
+} satisfies Config

test/playground/pages/config-meta/effect/e2e-test.ts

@@ -0,0 +1,24 @@
+export { testSettingEffect }
+
+import { expect, test } from '@brillout/test-e2e'
+import { retrievePageContext } from '../retrievePageContext'
+
+function testSettingEffect() {
+  test('Setting Effect - Not applied', async () => {
+    let json = await retrievePageContext('/config-meta/effect/without-effect')
+
+    expect(json).to.deep.equal({
+      settingWithEffect: 'undefined',
+      dependentSetting: 'undefined'
+    })
+  })
+
+  test('Setting Effect - Applied', async () => {
+    let json = await retrievePageContext('/config-meta/effect/with-effect')
+
+    expect(json).to.deep.equal({
+      settingWithEffect: 'undefined',
+      dependentSetting: 'default @ /effect'
+    })
+  })
+}

test/playground/pages/config-meta/effect/serializePageContext.ts

@@ -0,0 +1,6 @@
+import { PageContext } from 'vike/types'
+import { serializePageContext as serializePageContextGeneric } from '../serializePageContext'
+
+export function serializePageContext(pageContext: PageContext) {
+  return serializePageContextGeneric(pageContext, ['settingWithEffect', 'dependentSetting'])
+}

test/playground/pages/config-meta/effect/with-effect/+Page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { usePageContext } from 'vike-react/usePageContext'
+import { serializePageContext } from '../serializePageContext'
+
+export function Page() {
+  const pageContext = usePageContext()
+  const json = serializePageContext(pageContext)
+  return <p id="serialized-settings">{json}</p>
+}

test/playground/pages/config-meta/effect/with-effect/+config.ts

@@ -0,0 +1,7 @@
+import { Config } from 'vike/types'
+
+// dependentSetting is influenced both by the ConfigEffect
+// of settingWithEffect and by a locally set value
+export default {
+  settingWithEffect: true
+} satisfies Config

test/playground/pages/config-meta/effect/without-effect/+Page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { usePageContext } from 'vike-react/usePageContext'
+import { serializePageContext } from '../serializePageContext'
+
+export function Page() {
+  const pageContext = usePageContext()
+  const json = serializePageContext(pageContext)
+  return <p id="serialized-settings">{json}</p>
+}

test/playground/pages/config-meta/env/+config.ts

@@ -0,0 +1,20 @@
+import type { Config, ConfigEffect } from 'vike/types'
+
+const x: Config | null = null
+
+export default {
+  settingServerOnly: { nested: 'serverOnly @ /env' },
+  settingClientOnly: { nested: 'clientOnly @ /env' },
+  settingConfigOnly: { nested: 'configOnly @ /env' },
+  meta: {
+    settingServerOnly: {
+      env: { server: true }
+    },
+    settingClientOnly: {
+      env: { client: true }
+    },
+    settingConfigOnly: {
+      env: { config: true }
+    }
+  }
+} satisfies Config

test/playground/pages/config-meta/env/client/+Page.tsx

@@ -0,0 +1,17 @@
+import React, { useEffect, useState } from 'react'
+import { usePageContext } from 'vike-react/usePageContext'
+import { serializePageContext } from '../serializePageContext'
+import { isBrowser } from '../../../../utils/isBrowser'
+
+export function Page() {
+  const pageContext = usePageContext()
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+  if (!mounted || !isBrowser) {
+    return <></>
+  }
+  const json = serializePageContext(pageContext)
+  return <p id="serialized-settings">{json}</p>
+}

test/playground/pages/config-meta/env/client/+config.ts

@@ -0,0 +1,5 @@
+import { Config } from 'vike/types'
+
+export default {
+  prerender: false
+} satisfies Config

test/playground/pages/config-meta/env/e2e-test.ts

@@ -0,0 +1,26 @@
+export { testSettingOnlyAvailableInCorrectEnv }
+
+import { expect, test } from '@brillout/test-e2e'
+import { retrievePageContext } from '../retrievePageContext'
+
+function testSettingOnlyAvailableInCorrectEnv() {
+  test('Custom Setting Env - Client-only', async () => {
+    let json = await retrievePageContext('/config-meta/env/client', { clientSide: true })
+
+    expect(json).to.deep.equal({
+      settingServerOnly: 'undefined',
+      settingClientOnly: { nested: 'clientOnly @ /env' },
+      settingConfigOnly: 'undefined'
+    })
+  })
+
+  test('Custom Setting Env - Server-only', async () => {
+    let json = await retrievePageContext('/config-meta/env/server')
+
+    expect(json).to.deep.equal({
+      settingServerOnly: { nested: 'serverOnly @ /env' },
+      settingClientOnly: 'undefined',
+      settingConfigOnly: 'undefined'
+    })
+  })
+}

test/playground/pages/config-meta/env/serializePageContext.ts

@@ -0,0 +1,6 @@
+import { PageContext } from 'vike/types'
+import { serializePageContext as serializePageContextGeneric } from '../serializePageContext'
+
+export function serializePageContext(pageContext: PageContext) {
+  return serializePageContextGeneric(pageContext, ['settingServerOnly', 'settingClientOnly', 'settingConfigOnly'])
+}

test/playground/pages/config-meta/env/server/+Page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { usePageContext } from 'vike-react/usePageContext'
+import { serializePageContext } from '../serializePageContext'
+
+export function Page() {
+  const pageContext = usePageContext()
+  const json = serializePageContext(pageContext)
+  return <p id="serialized-settings">{json}</p>
+}

test/playground/pages/config-meta/retrievePageContext.ts

@@ -0,0 +1,22 @@
+export { retrievePageContext }
+
+import { autoRetry, expect, fetchHtml, getServerUrl, page } from '@brillout/test-e2e'
+import { extractPageContext } from './serializePageContext'
+
+async function retrievePageContext(pathname: string, options?: { clientSide?: true }) {
+  if (options?.clientSide) {
+    await page.goto(getServerUrl() + pathname)
+    // `autoRetry` because browser-side code may not be loaded yet
+    return await autoRetry(async () => {
+      const text = await page.textContent('#serialized-settings')
+      const { pageContextSubset, isBrowser } = extractPageContext(text)
+      expect(isBrowser).toBe(true)
+      return pageContextSubset
+    })
+  } else {
+    const html = await fetchHtml(pathname)
+    const { pageContextSubset, isBrowser } = extractPageContext(html)
+    expect(isBrowser).toBe(false)
+    return pageContextSubset
+  }
+}