From 9236679bef7b2ba1cf852f697294ca974669c5e8 Mon Sep 17 00:00:00 2001 From: Michael Dowse Date: Wed, 18 Oct 2023 14:53:47 +0200 Subject: [PATCH] chore: Add integ tests for single page funnels This adds tests for the existing behaviour. It includes some fix mes that were found while writing and is intended as a start to testing. --- pages/funnel-analytics/mock-funnel.ts | 129 ++++++ .../static-single-page-flow.page.tsx | 180 ++++++++ pages/s3-resource-selector/main.page.tsx | 14 +- pages/s3-resource-selector/shared.tsx | 14 + .../__integ__/static-single-page-flow.test.ts | 399 ++++++++++++++++++ 5 files changed, 724 insertions(+), 12 deletions(-) create mode 100644 pages/funnel-analytics/mock-funnel.ts create mode 100644 pages/funnel-analytics/static-single-page-flow.page.tsx create mode 100644 pages/s3-resource-selector/shared.tsx create mode 100644 src/internal/analytics/__integ__/static-single-page-flow.test.ts diff --git a/pages/funnel-analytics/mock-funnel.ts b/pages/funnel-analytics/mock-funnel.ts new file mode 100644 index 0000000000..06df1504dc --- /dev/null +++ b/pages/funnel-analytics/mock-funnel.ts @@ -0,0 +1,129 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import { IFunnelMetrics } from '~components/internal/analytics/interfaces'; + +const funnelMetricsLog: { action: string; resolvedProps?: any; props: any }[] = []; +(window as any).__awsuiFunnelMetrics__ = funnelMetricsLog; + +export const MockedFunnelMetrics: IFunnelMetrics = { + funnelStart(props): string { + const funnelName = document.querySelector(props.funnelNameSelector)!.innerHTML; + funnelMetricsLog.push({ action: 'funnelStart', props, resolvedProps: { funnelName } }); + return 'mocked-funnel-id'; + }, + + funnelError(props): void { + funnelMetricsLog.push({ action: 'funnelError', props }); + }, + + funnelComplete(props): void { + funnelMetricsLog.push({ action: 'funnelComplete', props }); + }, + + funnelSuccessful(props): void { + funnelMetricsLog.push({ action: 'funnelSuccessful', props }); + }, + + funnelCancelled(props): void { + funnelMetricsLog.push({ action: 'funnelCancelled', props }); + }, + + funnelChange(props): void { + funnelMetricsLog.push({ action: 'funnelChange', props }); + }, + + funnelStepStart(props): void { + const stepName = document.querySelector(props.stepNameSelector)!.innerHTML; + funnelMetricsLog.push({ action: 'funnelStepStart', props, resolvedProps: { stepName } }); + }, + + funnelStepComplete(props): void { + const stepName = document.querySelector(props.stepNameSelector)!.innerHTML; + funnelMetricsLog.push({ action: 'funnelStepComplete', props, resolvedProps: { stepName } }); + }, + + funnelStepNavigation(props): void { + const stepName = document.querySelector(props.stepNameSelector)!.innerHTML; + // const subStepAllElements = document.querySelectorAll(props.subStepAllSelector); // TODO: Does not work + + funnelMetricsLog.push({ action: 'funnelStepNavigation', props, resolvedProps: { stepName } }); + }, + + funnelStepError(props): void { + const stepName = document.querySelector(props.stepNameSelector)!.innerHTML; + funnelMetricsLog.push({ action: 'funnelStepError', props, resolvedProps: { stepName } }); + }, + + funnelStepChange(props): void { + const stepName = document.querySelector(props.stepNameSelector)!.innerHTML; + funnelMetricsLog.push({ action: 'funnelStepChange', props, resolvedProps: { stepName } }); + }, + + funnelSubStepStart(props): void { + const stepName = document.querySelector(props.stepNameSelector)!.innerHTML; + const subStepName = document.querySelector(props.subStepNameSelector)!.innerHTML; + const subStepAllElements = document.querySelectorAll(props.subStepAllSelector); + const subStepElement = document.querySelector(props.subStepSelector); + + funnelMetricsLog.push({ + action: 'funnelSubStepStart', + props, + resolvedProps: { stepName, subStepName, subStepAllElements, subStepElement }, + }); + }, + + funnelSubStepComplete(props): void { + const stepName = document.querySelector(props.stepNameSelector)?.innerHTML; + const subStepName = document.querySelector(props.subStepNameSelector)?.innerHTML; + const subStepAllElements = document.querySelectorAll(props.subStepAllSelector); + const subStepElement = document.querySelector(props.subStepSelector); + + funnelMetricsLog.push({ + action: 'funnelSubStepComplete', + props, + resolvedProps: { stepName, subStepName, subStepAllElements, subStepElement }, + }); + }, + + funnelSubStepError(props): void { + const stepName = document.querySelector(props.stepNameSelector)!.innerHTML; + const subStepName = document.querySelector(props.subStepNameSelector)!.innerHTML; + const fieldLabel = document.querySelector(props.fieldLabelSelector!)!.innerHTML; + const fieldError = document.querySelector(props.fieldErrorSelector!)!.innerHTML; + + funnelMetricsLog.push({ + action: 'funnelSubStepError', + props, + resolvedProps: { fieldLabel, fieldError, stepName, subStepName }, + }); + }, + + helpPanelInteracted(props): void { + const stepName = document.querySelector(props.stepNameSelector)!.innerHTML; + const subStepName = document.querySelector(props.subStepNameSelector)!.innerHTML; + const subStepElement = document.querySelectorAll(props.subStepSelector); + const subStepAllElements = document.querySelectorAll(props.subStepAllSelector); + const element = document.querySelector(props.elementSelector); + + funnelMetricsLog.push({ + action: 'helpPanelInteracted', + props, + resolvedProps: { stepName, subStepName, subStepAllElements, element, subStepElement }, + }); + }, + + externalLinkInteracted(props): void { + const stepName = document.querySelector(props.stepNameSelector)!.innerHTML; + const subStepName = document.querySelector(props.subStepNameSelector)!.innerHTML; + const subStepElement = document.querySelectorAll(props.subStepSelector); + const subStepAllElements = document.querySelectorAll(props.subStepAllSelector); + const element = document.querySelector(props.elementSelector); + + funnelMetricsLog.push({ + action: 'externalLinkInteracted', + props, + resolvedProps: { stepName, subStepName, subStepAllElements, element, subStepElement }, + }); + }, +}; diff --git a/pages/funnel-analytics/static-single-page-flow.page.tsx b/pages/funnel-analytics/static-single-page-flow.page.tsx new file mode 100644 index 0000000000..eb03b11acd --- /dev/null +++ b/pages/funnel-analytics/static-single-page-flow.page.tsx @@ -0,0 +1,180 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useState } from 'react'; +import { + Box, + BreadcrumbGroup, + Button, + Container, + Form, + FormField, + Header, + Input, + Link, + Modal, + NonCancelableCustomEvent, + S3ResourceSelector, + S3ResourceSelectorProps, + SpaceBetween, +} from '~components'; + +import { fetchBuckets, fetchObjects, fetchVersions } from '../s3-resource-selector/data/request'; +import { i18nStrings } from '../s3-resource-selector/data/i18n-strings'; +import { SelfDismissibleAlert, uriToConsoleUrl } from '../s3-resource-selector/shared'; + +import { setFunnelMetrics } from '~components/internal/analytics'; +import { MockedFunnelMetrics } from './mock-funnel'; + +setFunnelMetrics(MockedFunnelMetrics); + +export default function StaticSinglePageCreatePage() { + const [mounted, setUnmounted] = useState(true); + const [modalVisible, setModalVisible] = useState(false); + const [value, setValue] = useState(''); + const [errorText, setErrorText] = useState(''); + const [validationError, setValidationError] = useState(); + const [fetchError, setFetchError] = useState(null); + const [resource, setResource] = useState({ uri: '' }); + + function wrapWithErrorHandler Promise>(callback: T): T { + return ((...args) => { + setFetchError(null); + return callback(...args).catch(error => { + setFetchError(error.message); + throw error; + }); + }) as T; + } + + const s3ResourceSelectorProps: S3ResourceSelectorProps = { + resource, + viewHref: resource?.uri !== '' && !validationError ? uriToConsoleUrl(resource.uri) : '', + alert: fetchError && ( + + {fetchError} + + ), + invalid: !!validationError, + selectableItemsTypes: ['objects', 'versions'], + bucketsVisibleColumns: ['CreationDate', 'Region', 'Name'], + objectsIsItemDisabled: object => !!object.IsFolder, + i18nStrings, + fetchBuckets: wrapWithErrorHandler(fetchBuckets), + fetchObjects: wrapWithErrorHandler(fetchObjects), + fetchVersions: wrapWithErrorHandler(fetchVersions), + onChange: ({ detail }: NonCancelableCustomEvent) => { + setResource(detail.resource); + setValidationError(detail.errorText); + }, + }; + + return ( + + + {mounted && ( +
+ + + {modalVisible && ( + + I am a form +
+ )} + + + + } + header={ +
Info} description="Form header description"> + Form Header +
+ } + > + + + Container 1 - header + + } + > + + + Learn more + + } + errorText={value === 'error' ? 'Trigger error' : ''} + label="This is an ordinary text field" + > + { + setValue(event.detail.value); + }} + /> + + + + + Container 2 - header + + } + > + + Info + + } + label="Read audio files from S3" + description="Choose an audio file in Amazon S3. Amazon S3 is object storage built to store and retrieve data." + constraintText="Format: s3://bucket/prefix/object. For objects in a bucket with versioning enabled, you can choose the most recent or a previous version of the object." + errorText={validationError} + stretch={true} + > + + + + + + )} + + ); +} diff --git a/pages/s3-resource-selector/main.page.tsx b/pages/s3-resource-selector/main.page.tsx index ac33d070c6..4600caeb98 100644 --- a/pages/s3-resource-selector/main.page.tsx +++ b/pages/s3-resource-selector/main.page.tsx @@ -1,7 +1,7 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 import React, { useState } from 'react'; -import Alert, { AlertProps } from '~components/alert'; +import Box from '~components/box'; import Container from '~components/container'; import FormField from '~components/form-field'; import Header from '~components/header'; @@ -10,17 +10,7 @@ import S3ResourceSelector, { S3ResourceSelectorProps } from '~components/s3-reso import { fetchBuckets, fetchObjects, fetchVersions } from './data/request'; import { i18nStrings } from './data/i18n-strings'; -import Box from '~components/box'; - -function SelfDismissibleAlert(props: Omit) { - const [visible, setVisible] = React.useState(true); - return setVisible(false)} />; -} - -function uriToConsoleUrl(uri: string) { - const prefix = 'https://s3.console.aws.amazon.com/s3/buckets/'; - return uri.replace(/^s3:\/\//, prefix); -} +import { SelfDismissibleAlert, uriToConsoleUrl } from './shared'; export default function S3PickerExample() { const [validationError, setValidationError] = useState(); diff --git a/pages/s3-resource-selector/shared.tsx b/pages/s3-resource-selector/shared.tsx new file mode 100644 index 0000000000..2d804c074a --- /dev/null +++ b/pages/s3-resource-selector/shared.tsx @@ -0,0 +1,14 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; +import Alert, { AlertProps } from '~components/alert'; + +export function SelfDismissibleAlert(props: Omit) { + const [visible, setVisible] = React.useState(true); + return setVisible(false)} />; +} + +export function uriToConsoleUrl(uri: string) { + const prefix = 'https://s3.console.aws.amazon.com/s3/buckets/'; + return uri.replace(/^s3:\/\//, prefix); +} diff --git a/src/internal/analytics/__integ__/static-single-page-flow.test.ts b/src/internal/analytics/__integ__/static-single-page-flow.test.ts new file mode 100644 index 0000000000..7dbb92d619 --- /dev/null +++ b/src/internal/analytics/__integ__/static-single-page-flow.test.ts @@ -0,0 +1,399 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects'; +import useBrowser from '@cloudscape-design/browser-test-tools/use-browser'; +import createWrapper from '../../../../lib/components/test-utils/selectors'; + +interface ExtendedWindow extends Window { + __awsuiFunnelMetrics__: Array; +} +declare const window: ExtendedWindow; + +const wrapper = createWrapper(); +const FUNNEL_INTERACTION_ID = 'mocked-funnel-id'; + +class SinglePageCreate extends BasePageObject { + async getFunnelLog() { + const funnelLog = await this.browser.execute(() => window.__awsuiFunnelMetrics__); + const actions = funnelLog.map(item => item.action); + return { funnelLog, actions }; + } +} + +const setupTest = (testFn: (page: SinglePageCreate) => Promise) => { + return useBrowser(async browser => { + const page = new SinglePageCreate(browser); + await browser.url('#/light/funnel-analytics/static-single-page-flow'); + await testFn(page); + }); +}; + +describe('Single-page create', () => { + test( + 'Starts funnel and funnel step as page is loaded', + setupTest(async page => { + const { funnelLog, actions } = await page.getFunnelLog(); + expect(actions).toEqual(['funnelStart', 'funnelStepStart']); + + const [funnelStartEvent, funnelStepStartEvent] = funnelLog; + expect(funnelStartEvent.props).toEqual({ + componentVersion: expect.any(String), + funnelNameSelector: expect.any(String), + funnelVersion: expect.any(String), + funnelType: 'single-page', + optionalStepNumbers: [], + theme: 'vr', + totalFunnelSteps: 1, + stepConfiguration: [ + { + name: 'Form Header', + isOptional: false, + number: 1, + }, + ], + }); + expect(funnelStartEvent.resolvedProps).toEqual({ + funnelName: 'Form Header', + }); + + expect(funnelStepStartEvent.props).toEqual({ + stepNameSelector: expect.any(String), + subStepAllSelector: expect.any(String), + funnelInteractionId: FUNNEL_INTERACTION_ID, + stepName: 'Form Header', + subStepConfiguration: [ + { name: 'Container 1 - header', number: 1 }, + { name: 'Container 2 - header', number: 2 }, + ], + stepNumber: 1, + totalSubSteps: 2, + }); + }) + ); + + test( + 'Starts and ends substep when navigating between containers', + setupTest(async page => { + await page.click('[data-testid=field1]'); + await page.keys('Tab'); // From Input -> S3 Resource selector Info + await page.keys('Tab'); // S3 Resource selector Info -> S3 Resource Selector Input + await page.keys('Tab'); // S3 Resource selector Input -> S3 Resource selector Browse button + await page.keys('Tab'); // S3 Resource selector Browse button -> Cancel button + const { funnelLog, actions } = await page.getFunnelLog(); + expect(actions).toEqual([ + 'funnelStart', + 'funnelStepStart', + 'funnelSubStepStart', + 'funnelSubStepComplete', + 'funnelSubStepStart', + 'funnelSubStepComplete', + ]); + + // funnelSubStepStart - Container 1 + expect(funnelLog[2].props).toEqual({ + stepNameSelector: expect.any(String), + subStepNameSelector: expect.any(String), + subStepAllSelector: expect.any(String), + subStepSelector: expect.any(String), + funnelInteractionId: FUNNEL_INTERACTION_ID, + stepName: 'Form Header', + stepNumber: 1, + subStepName: 'Container 1 - header', + }); + + expect(funnelLog[2].resolvedProps).toEqual({ + subStepAllElements: expect.any(Object), + subStepElement: expect.any(Object), + stepName: 'Form Header', + subStepName: 'Container 1 - header', + }); + + // funnelSubStepComplete - Container 1 + expect(funnelLog[3].props).toEqual({ + stepNameSelector: expect.any(String), + subStepNameSelector: expect.any(String), + subStepAllSelector: expect.any(String), + subStepSelector: expect.any(String), + funnelInteractionId: FUNNEL_INTERACTION_ID, + stepName: 'Form Header', + stepNumber: 1, + subStepName: 'Container 1 - header', + }); + + expect(funnelLog[3].resolvedProps).toEqual({ + subStepAllElements: expect.any(Object), + subStepElement: expect.any(Object), + stepName: 'Form Header', + subStepName: 'Container 1 - header', + }); + + // funnelSubStepStart - Container 2 + expect(funnelLog[4].props).toEqual({ + stepNameSelector: expect.any(String), + subStepNameSelector: expect.any(String), + subStepAllSelector: expect.any(String), + subStepSelector: expect.any(String), + funnelInteractionId: FUNNEL_INTERACTION_ID, + stepName: 'Form Header', + stepNumber: 1, + subStepName: 'Container 2 - header', + }); + + expect(funnelLog[4].resolvedProps).toEqual({ + subStepAllElements: expect.any(Object), + subStepElement: expect.any(Object), + stepName: 'Form Header', + subStepName: 'Container 2 - header', + }); + + // funnelSubStepComplete - Container 2 + expect(funnelLog[5].props).toEqual({ + stepNameSelector: expect.any(String), + subStepNameSelector: expect.any(String), + subStepAllSelector: expect.any(String), + subStepSelector: expect.any(String), + funnelInteractionId: FUNNEL_INTERACTION_ID, + stepName: 'Form Header', + stepNumber: 1, + subStepName: 'Container 2 - header', + }); + + expect(funnelLog[5].resolvedProps).toEqual({ + subStepAllElements: expect.any(Object), + subStepElement: expect.any(Object), + stepName: 'Form Header', + subStepName: 'Container 2 - header', + }); + }) + ); + + test( + 'Form submission', + setupTest(async page => { + await page.click('[data-testid=submit]'); + const { funnelLog, actions } = await page.getFunnelLog(); + expect(actions).toEqual([ + 'funnelStart', + 'funnelStepStart', + 'funnelComplete', + 'funnelSuccessful', + 'funnelStepComplete', // TODO: This is how it is currently. It should probably be triggered before funnelComplete + ]); + + const [, , funnelCompleteEvent, funnelSuccessfulEvent, funnelStepCompleteEvent] = funnelLog; + expect(funnelCompleteEvent.props).toEqual({ + funnelInteractionId: FUNNEL_INTERACTION_ID, + }); + expect(funnelSuccessfulEvent.props).toEqual({ + funnelInteractionId: FUNNEL_INTERACTION_ID, + }); + + expect(funnelStepCompleteEvent.props).toEqual({ + stepNameSelector: expect.any(String), + subStepAllSelector: expect.any(String), + funnelInteractionId: FUNNEL_INTERACTION_ID, + stepName: 'Form Header', + stepNumber: 1, + totalSubSteps: 2, + }); + expect(funnelStepCompleteEvent.resolvedProps).toEqual({ + stepName: 'Form Header', + }); + }) + ); + + test( + 'Form cancelled', + setupTest(async page => { + await page.click('[data-testid=cancel]'); + const { funnelLog, actions } = await page.getFunnelLog(); + expect(actions).toEqual(['funnelStart', 'funnelStepStart', 'funnelCancelled']); + + const funnelCancelledEvent = funnelLog[2]; + expect(funnelCancelledEvent.props).toEqual({ + funnelInteractionId: FUNNEL_INTERACTION_ID, + }); + }) + ); + + test( + 'Form abandoned', + setupTest(async page => { + await page.click('[data-testid=unmount]'); + const { funnelLog, actions } = await page.getFunnelLog(); + expect(actions).toEqual(['funnelStart', 'funnelStepStart', 'funnelCancelled']); + + const [, , funnelCancelledEvent] = funnelLog; + expect(funnelCancelledEvent.props).toEqual({ + funnelInteractionId: FUNNEL_INTERACTION_ID, + }); + }) + ); + + test( + 'Form inline error', + setupTest(async page => { + await page.click('[data-testid=field1]'); + await page.setValue(wrapper.findInput('[data-testid=field1]').findNativeInput().toSelector(), 'error'); + const { funnelLog, actions } = await page.getFunnelLog(); + expect(actions).toEqual(['funnelStart', 'funnelStepStart', 'funnelSubStepStart', 'funnelSubStepError']); // FIXME: Missing funnelStepError? + + const funnelSubStepErrorEvent = funnelLog[3]; + expect(funnelSubStepErrorEvent.props).toEqual({ + fieldErrorSelector: expect.any(String), + fieldLabelSelector: expect.any(String), + subStepNameSelector: expect.any(String), + stepNameSelector: expect.any(String), + subStepSelector: expect.any(String), + subStepAllSelector: expect.any(String), + funnelInteractionId: FUNNEL_INTERACTION_ID, + stepName: 'Form Header', + stepNumber: 1, + subStepName: 'Container 1 - header', + }); + + expect(funnelSubStepErrorEvent.resolvedProps).toEqual({ + fieldLabel: 'This is an ordinary text field', + fieldError: 'Trigger error', + stepName: 'Form Header', + subStepName: 'Container 1 - header', + }); + }) + ); + + test( + 'Form error', + setupTest(async page => { + await page.click('[data-testid=field1]'); + await page.setValue(wrapper.findInput('[data-testid=field1]').findNativeInput().toSelector(), 'error'); + await page.click('[data-testid=submit]'); + + const { funnelLog, actions } = await page.getFunnelLog(); + expect(actions).toEqual([ + 'funnelStart', + 'funnelStepStart', + 'funnelSubStepStart', + 'funnelSubStepError', + 'funnelSubStepError', // FIXME: Missing funnelStepError? + 'funnelError', + 'funnelSubStepComplete', + ]); + const funnelErrorEvent = funnelLog[5]; + expect(funnelErrorEvent.props).toEqual({ + funnelInteractionId: FUNNEL_INTERACTION_ID, + }); + }) + ); + + test( + 'Form external link', + setupTest(async page => { + await page.click('[data-testid=external-link]'); + const { funnelLog, actions } = await page.getFunnelLog(); + expect(actions).toEqual(['funnelStart', 'funnelStepStart', 'externalLinkInteracted', 'funnelSubStepStart']); + + const [, , externalLinkInteractedEvent] = funnelLog; + expect(externalLinkInteractedEvent.props).toEqual({ + elementSelector: expect.any(String), + stepNameSelector: expect.any(String), + subStepAllSelector: expect.any(String), + subStepNameSelector: expect.any(String), + subStepSelector: expect.any(String), + funnelInteractionId: FUNNEL_INTERACTION_ID, + stepName: 'Form Header', + subStepName: 'Container 1 - header', + stepNumber: 1, + }); + expect(externalLinkInteractedEvent.resolvedProps).toEqual({ + subStepElement: expect.any(Object), + subStepAllElements: expect.any(Object), + element: expect.any(Object), + stepName: 'Form Header', + subStepName: 'Container 1 - header', + }); + }) + ); + + test( + 'Form help panel link', + setupTest(async page => { + await page.click('[data-testid=info-link]'); + const { funnelLog, actions } = await page.getFunnelLog(); + expect(actions).toEqual(['funnelStart', 'funnelStepStart', 'helpPanelInteracted', 'funnelSubStepStart']); + + const [, , helpPanelInteractedEvent] = funnelLog; + expect(helpPanelInteractedEvent.props).toEqual({ + elementSelector: expect.any(String), + stepNameSelector: expect.any(String), + subStepAllSelector: expect.any(String), + subStepNameSelector: expect.any(String), + subStepSelector: expect.any(String), + funnelInteractionId: FUNNEL_INTERACTION_ID, + stepName: 'Form Header', + subStepName: 'Container 2 - header', + stepNumber: 1, + }); + expect(helpPanelInteractedEvent.resolvedProps).toEqual({ + subStepElement: expect.any(Object), + subStepAllElements: expect.any(Object), + element: expect.any(Object), + stepName: 'Form Header', + subStepName: 'Container 2 - header', + }); + }) + ); + + test( + 'Opening a modal based component does not end the substep', + setupTest(async page => { + const s3ResourceSelectorWrapper = wrapper.findS3ResourceSelector(); + await page.click(s3ResourceSelectorWrapper.findInContext().findUriInput().toSelector()); + await page.click(s3ResourceSelectorWrapper.findInContext().findBrowseButton().toSelector()); + await page.click(s3ResourceSelectorWrapper.findTable().findTextFilter().toSelector()); + await page.click(s3ResourceSelectorWrapper.findModal().findDismissButton().toSelector()); + const { actions } = await page.getFunnelLog(); + expect(actions).toEqual(['funnelStart', 'funnelStepStart', 'funnelSubStepStart']); + }) + ); +}); + +describe('Embedded Form', () => { + test.skip( + 'Forms embedded in Modal unrelataed to the main Form', + setupTest(async page => { + await page.click('[data-testid=embedded-form-modal]'); + const { funnelLog, actions } = await page.getFunnelLog(); + expect(actions).toEqual(['funnelStart', 'funnelStepStart', 'funnelStart', 'funnelStepStart']); + const [, , funnelStartEvent, funnelStepStartEvent] = funnelLog; // First two events are the main Form Funnel + expect(funnelStartEvent.props).toEqual({ + componentVersion: expect.any(String), + funnelNameSelector: expect.any(String), + funnelVersion: expect.any(String), + funnelType: 'single-page', + optionalStepNumbers: [], + theme: 'vr', + totalFunnelSteps: 1, + stepConfiguration: [ + { + name: 'Modal title', + isOptional: false, + number: 1, + }, + ], + }); + expect(funnelStartEvent.resolvedProps).toEqual({ + funnelName: 'Modal title', + }); + + expect(funnelStepStartEvent.props).toEqual({ + stepNameSelector: expect.any(String), + subStepAllSelector: expect.any(String), + funnelInteractionId: FUNNEL_INTERACTION_ID, + stepName: 'Modal title', + subStepConfiguration: [], // FIXME: This does not return the correct value + stepNumber: 1, + totalSubSteps: 0, + }); + }) + ); +});