Skip to content

Commit

Permalink
chore: Add missing instanceIdentifier to ExpandableSection (#3215)
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaeldowseza
michaeldowseza authored Jan 27, 2025
1 parent c357e20 commit 0be1ec7
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 23 deletions.
36 changes: 18 additions & 18 deletions pages/funnel-analytics/mock-funnel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const funnelMetricsLog: { action: string; resolvedProps?: any; props: any }[] =

export const MockedFunnelMetrics: IFunnelMetrics = {
funnelStart(props): string {
const funnelName = document.querySelector(props.funnelNameSelector)?.innerHTML;
const funnelName = document.querySelector(props.funnelNameSelector)?.textContent;
funnelMetricsLog.push({ action: 'funnelStart', props, resolvedProps: { funnelName } });
return 'mocked-funnel-id';
},
Expand All @@ -34,35 +34,35 @@ export const MockedFunnelMetrics: IFunnelMetrics = {
},

funnelStepStart(props): void {
const stepName = document.querySelector(props.stepNameSelector!)?.innerHTML;
const stepName = document.querySelector(props.stepNameSelector!)?.textContent;
funnelMetricsLog.push({ action: 'funnelStepStart', props, resolvedProps: { stepName } });
},

funnelStepComplete(props): void {
const stepName = document.querySelector(props.stepNameSelector!)?.innerHTML;
const stepName = document.querySelector(props.stepNameSelector!)?.textContent;
funnelMetricsLog.push({ action: 'funnelStepComplete', props, resolvedProps: { stepName } });
},

funnelStepNavigation(props): void {
const stepName = document.querySelector(props.stepNameSelector!)?.innerHTML;
const stepName = document.querySelector(props.stepNameSelector!)?.textContent;
// 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;
const stepName = document.querySelector(props.stepNameSelector!)?.textContent;
funnelMetricsLog.push({ action: 'funnelStepError', props, resolvedProps: { stepName } });
},

funnelStepChange(props): void {
const stepName = document.querySelector(props.stepNameSelector!)?.innerHTML;
const stepName = document.querySelector(props.stepNameSelector!)?.textContent;
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 stepName = document.querySelector(props.stepNameSelector!)?.textContent;
const subStepName = document.querySelector(props.subStepNameSelector)?.textContent;
const subStepAllElements = document.querySelectorAll(props.subStepAllSelector);
const subStepElement = document.querySelector(props.subStepSelector);

Expand All @@ -74,8 +74,8 @@ export const MockedFunnelMetrics: IFunnelMetrics = {
},

funnelSubStepComplete(props): void {
const stepName = document.querySelector(props.stepNameSelector!)?.innerHTML;
const subStepName = document.querySelector(props.subStepNameSelector)?.innerHTML;
const stepName = document.querySelector(props.stepNameSelector!)?.textContent;
const subStepName = document.querySelector(props.subStepNameSelector)?.textContent;
const subStepAllElements = document.querySelectorAll(props.subStepAllSelector);
const subStepElement = document.querySelector(props.subStepSelector);

Expand All @@ -87,10 +87,10 @@ export const MockedFunnelMetrics: IFunnelMetrics = {
},

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;
const stepName = document.querySelector(props.stepNameSelector!)?.textContent;
const subStepName = document.querySelector(props.subStepNameSelector)?.textContent;
const fieldLabel = document.querySelector(props.fieldLabelSelector!)?.textContent;
const fieldError = document.querySelector(props.fieldErrorSelector!)?.textContent;

funnelMetricsLog.push({
action: 'funnelSubStepError',
Expand All @@ -100,8 +100,8 @@ export const MockedFunnelMetrics: IFunnelMetrics = {
},

helpPanelInteracted(props): void {
const stepName = document.querySelector(props.stepNameSelector!)?.innerHTML;
const subStepName = document.querySelector(props.subStepNameSelector)?.innerHTML;
const stepName = document.querySelector(props.stepNameSelector!)?.textContent;
const subStepName = document.querySelector(props.subStepNameSelector)?.textContent;
const subStepElement = document.querySelectorAll(props.subStepSelector);
const subStepAllElements = document.querySelectorAll(props.subStepAllSelector);
const element = document.querySelector(props.elementSelector);
Expand All @@ -114,8 +114,8 @@ export const MockedFunnelMetrics: IFunnelMetrics = {
},

externalLinkInteracted(props): void {
const stepName = document.querySelector(props.stepNameSelector!)?.innerHTML;
const subStepName = document.querySelector(props.subStepNameSelector)?.innerHTML;
const stepName = document.querySelector(props.stepNameSelector!)?.textContent;
const subStepName = document.querySelector(props.subStepNameSelector)?.textContent;
const subStepElement = document.querySelectorAll(props.subStepSelector);
const subStepAllElements = document.querySelectorAll(props.subStepAllSelector);
const element = document.querySelector(props.elementSelector);
Expand Down
20 changes: 20 additions & 0 deletions pages/funnel-analytics/static-single-page-flow.page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
BreadcrumbGroup,
Button,
Container,
ExpandableSection,
Form,
FormField,
Header,
Expand All @@ -32,6 +33,7 @@ export default function StaticSinglePageCreatePage() {
const [mounted, setUnmounted] = useState(true);
const [modalVisible, setModalVisible] = useState(false);
const [value, setValue] = useState('');
const [value2, setValue2] = useState('');
const [errorText, setErrorText] = useState('');
const [validationError, setValidationError] = useState<string | undefined>();
const [fetchError, setFetchError] = useState<string | null>(null);
Expand Down Expand Up @@ -188,6 +190,24 @@ export default function StaticSinglePageCreatePage() {
<S3ResourceSelector {...s3ResourceSelectorProps} />
</FormField>
</Container>
<ExpandableSection
analyticsMetadata={{ instanceIdentifier: 'expandable-section-1' }}
variant="container"
headerText="Expandable Section 1 - Header"
defaultExpanded={true}
>
<SpaceBetween size="s">
<FormField label="This is an ordinary text field">
<Input
data-testid="field2"
value={value2}
onChange={event => {
setValue2(event.detail.value);
}}
/>
</FormField>
</SpaceBetween>
</ExpandableSection>
</SpaceBetween>
</Form>
)
Expand Down
7 changes: 6 additions & 1 deletion src/expandable-section/expandable-section-container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {

import { InternalContainerAsSubstep } from '../container/internal';
import { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';
import { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
import { GeneratedAnalyticsMetadataExpandableSectionComponent } from './analytics-metadata/interfaces';
import { InternalVariant } from './interfaces';
Expand Down Expand Up @@ -36,6 +37,7 @@ export const ExpandableSectionContainer = ({
__injectAnalyticsComponentMetadata,
...rest
}: ExpandableSectionContainerProps) => {
const analyticsMetadata = getAnalyticsMetadataProps(rest as BasePropsWithAnalyticsMetadata);
const analyticsComponentMetadata: GeneratedAnalyticsMetadataExpandableSectionComponent = {
name: 'awsui.ExpandableSection',
label: { root: 'self' },
Expand All @@ -48,7 +50,10 @@ export const ExpandableSectionContainer = ({

if (variant === 'container' || variant === 'stacked') {
return (
<AnalyticsFunnelSubStep>
<AnalyticsFunnelSubStep
subStepIdentifier={analyticsMetadata?.instanceIdentifier}
subStepErrorContext={analyticsMetadata?.errorContext}
>
<InternalContainerAsSubstep
{...rest}
className={className}
Expand Down
2 changes: 1 addition & 1 deletion src/expandable-section/internal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export default function InternalExpandableSection({

return (
<ExpandableSectionContainer
{...baseProps}
{...props}
expanded={expanded}
className={clsx(baseProps.className, styles.root, analyticsSelectors.root)}
variant={variant}
Expand Down
31 changes: 28 additions & 3 deletions src/internal/analytics/__integ__/static-single-page-flow.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,10 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
subStepConfiguration: [
{ name: 'Container 1 - header', number: 1, subStepIdentifier: 'container-1' },
{ name: 'Container 2 - header', number: 2, subStepIdentifier: 'container-2' },
{ name: 'Expandable Section 1 - Header', number: 3, subStepIdentifier: 'expandable-section-1' },
],
stepNumber: 1,
totalSubSteps: 2,
totalSubSteps: 3,
});
})
);
Expand All @@ -102,7 +103,7 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
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
await page.keys('Tab'); // S3 Resource selector Browse button -> Additional configuration header
const { funnelLog, actions } = await page.getFunnelLog();
expect(actions).toEqual([
'funnelStart',
Expand All @@ -111,6 +112,7 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
'funnelSubStepComplete',
'funnelSubStepStart',
'funnelSubStepComplete',
'funnelSubStepStart',
]);

// funnelSubStepStart - Container 1
Expand Down Expand Up @@ -204,6 +206,29 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
stepName: 'Form Header',
subStepName: 'Container 2 - header',
});

// funnelSubStepStart - Expandable Section 1
expect(funnelLog[6].props).toEqual({
stepNameSelector: expect.any(String),
subStepNameSelector: expect.any(String),
subStepAllSelector: expect.any(String),
subStepSelector: expect.any(String),
funnelInteractionId: FUNNEL_INTERACTION_ID,
funnelIdentifier: FUNNEL_IDENTIFIER,
stepIdentifier: STEP_IDENTIFIER,
subStepIdentifier: 'expandable-section-1',
stepName: 'Form Header',
stepNumber: 1,
subStepName: 'Expandable Section 1 - Header',
subStepNumber: 3,
});

expect(funnelLog[6].resolvedProps).toEqual({
subStepAllElements: expect.any(Object),
subStepElement: expect.any(Object),
stepName: 'Form Header',
subStepName: 'Expandable Section 1 - Header',
});
})
);

Expand Down Expand Up @@ -238,7 +263,7 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
stepIdentifier: STEP_IDENTIFIER,
stepName: 'Form Header',
stepNumber: 1,
totalSubSteps: 2,
totalSubSteps: 3,
});
expect(funnelStepCompleteEvent.resolvedProps).toEqual({
stepName: 'Form Header',
Expand Down

0 comments on commit 0be1ec7

Please sign in to comment.