chore: Add integ tests for single page funnels

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 },
+    });
+  },
+};

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<string | undefined>();
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [resource, setResource] = useState<S3ResourceSelectorProps.Resource>({ uri: '' });
+
+  function wrapWithErrorHandler<T extends (...args: any[]) => Promise<unknown>>(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 && (
+      <SelfDismissibleAlert type="error" header="Data fetching error">
+        {fetchError}
+      </SelfDismissibleAlert>
+    ),
+    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<S3ResourceSelectorProps.ChangeDetail>) => {
+      setResource(detail.resource);
+      setValidationError(detail.errorText);
+    },
+  };
+
+  return (
+    <Box>
+      <BreadcrumbGroup
+        items={[
+          { text: 'System', href: '#' },
+          { text: 'Components', href: '#components' },
+          {
+            text: 'Create Resource',
+            href: '#components/breadcrumb-group',
+          },
+        ]}
+        ariaLabel="Breadcrumbs"
+      />
+      {mounted && (
+        <Form
+          errorText={errorText}
+          actions={
+            <SpaceBetween size="xs" direction="horizontal">
+              <Button data-testid="unmount" onClick={() => setUnmounted(false)}>
+                Unmount component
+              </Button>
+              <Button data-testid="embedded-form-modal" onClick={() => setModalVisible(true)}>
+                Open Modal
+              </Button>
+              {modalVisible && (
+                <Modal header="Modal title" visible={modalVisible}>
+                  <Form>I am a form</Form>
+                </Modal>
+              )}
+              <Button data-testid="cancel" onClick={() => setUnmounted(false)}>
+                Cancel
+              </Button>
+              <Button
+                data-testid="submit"
+                variant="primary"
+                onClick={() => {
+                  if (value === 'error') {
+                    setErrorText('There is an error');
+                  } else {
+                    setErrorText('');
+                    setUnmounted(false);
+                  }
+                }}
+              >
+                Submit
+              </Button>
+            </SpaceBetween>
+          }
+          header={
+            <Header variant="h1" info={<Link>Info</Link>} description="Form header description">
+              Form Header
+            </Header>
+          }
+        >
+          <SpaceBetween size="m">
+            <Container
+              header={
+                <Header variant="h2" description="Container 1 - description">
+                  Container 1 - header
+                </Header>
+              }
+            >
+              <SpaceBetween size="s">
+                <FormField
+                  info={
+                    <Link data-testid="external-link" external={true} href="#">
+                      Learn more
+                    </Link>
+                  }
+                  errorText={value === 'error' ? 'Trigger error' : ''}
+                  label="This is an ordinary text field"
+                >
+                  <Input
+                    data-testid="field1"
+                    value={value}
+                    onChange={event => {
+                      setValue(event.detail.value);
+                    }}
+                  />
+                </FormField>
+              </SpaceBetween>
+            </Container>
+            <Container
+              header={
+                <Header variant="h2" description="Container 2 - description">
+                  Container 2 - header
+                </Header>
+              }
+            >
+              <FormField
+                info={
+                  <Link data-testid="info-link" variant="info">
+                    Info
+                  </Link>
+                }
+                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}
+              >
+                <S3ResourceSelector {...s3ResourceSelectorProps} />
+              </FormField>
+            </Container>
+          </SpaceBetween>
+        </Form>
+      )}
+    </Box>
+  );
+}

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<AlertProps, 'visible' | 'onDismiss'>) {
-  const [visible, setVisible] = React.useState(true);
-  return <Alert {...props} visible={visible} dismissible={true} onDismiss={() => 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<string | undefined>();

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<AlertProps, 'visible' | 'onDismiss'>) {
+  const [visible, setVisible] = React.useState(true);
+  return <Alert {...props} visible={visible} dismissible={true} onDismiss={() => setVisible(false)} />;
+}
+
+export function uriToConsoleUrl(uri: string) {
+  const prefix = 'https://s3.console.aws.amazon.com/s3/buckets/';
+  return uri.replace(/^s3:\/\//, prefix);
+}