Skip to content

Commit

Permalink
Merge branch 'main' into alamiami/fixes-insufficient-target-size-for-…
Browse files Browse the repository at this point in the history 
…chart-legends
  • Loading branch information
@orangevolon
orangevolon authored Jan 28, 2025
2 parents 0616e8b + baad5f7 commit c1b3534
Show file tree
Hide file tree
Showing 22 changed files with 441 additions and 234 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
4 changes: 2 additions & 2 deletions src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,14 +212,15 @@ exports[`test-utils selectors 1`] = `
],
"date-range-picker": [
"awsui_apply-button_mgja0",
"awsui_calendar-date_1afkv",
"awsui_calendar-header_mgja0",
"awsui_calendar-next-month-btn_mgja0",
"awsui_calendar-prev-month-btn_mgja0",
"awsui_calendar-week_1afkv",
"awsui_cancel-button_mgja0",
"awsui_clear-button_mgja0",
"awsui_custom-range-duration-input_16zmw",
"awsui_custom-range-unit-select_16zmw",
"awsui_day_1mfbn",
"awsui_disabled-reason-tooltip_1mfbn",
"awsui_dropdown_mgja0",
"awsui_end-date-input_mgja0",
Expand All @@ -235,7 +236,6 @@ exports[`test-utils selectors 1`] = `
"awsui_start-date_1mfbn",
"awsui_start-time-input_mgja0",
"awsui_validation-error_mgja0",
"awsui_week_1mfbn",
],
"drawer": [
"awsui_drawer_1sxt8",
Expand Down
51 changes: 30 additions & 21 deletions src/calendar/__tests__/calendar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@

import * as React from 'react';
import { fireEvent, render } from '@testing-library/react';
import addMonths from 'date-fns/addMonths';
import range from 'lodash/range';
import MockDate from 'mockdate';

import '../../__a11y__/to-validate-a11y';
Expand Down Expand Up @@ -42,13 +44,20 @@ function getDayText(wrapper: CalendarWrapper, row: number, col: number) {
return wrapper.findDateAt(row, col).findByClassName(styles['date-inner'])!.getElement().textContent;
}

describe('Calendar', () => {
test('check a11y', async () => {
const { container } = renderCalendar();
await expect(container).toValidateA11y();
});
test('check a11y', async () => {
const { container } = renderCalendar();
await expect(container).toValidateA11y();
});

const eachMonthOfTheYear = range(0, 11).map(month => addMonths(new Date('2025-01-01'), month).toISOString().split('T')[0]);
test.each(eachMonthOfTheYear)(
'always renders 42 days, value=%s',
value => {
renderCalendar({ value });
expect(document.querySelectorAll(`.${styles['calendar-date']}`)).toHaveLength(42);
}
);

describe('Calendar locale US', () => {
beforeEach(() => {
const locale = new Intl.DateTimeFormat('en-US', { timeZone: 'EST' });
Expand All @@ -60,6 +69,22 @@ describe('Calendar locale US', () => {
const { wrapper } = renderCalendar();
expect(findCalendarWeekdays(wrapper)[0]).toBe('Sun');
});

describe('Calendar header', () => {
test('previous button navigates to previous month', () => {
const { wrapper } = renderCalendar({ value: '2022-01-07' });
expect(wrapper.findHeader().getElement()).toHaveTextContent('January 2022');
wrapper.findPreviousButton().click();
expect(wrapper.findHeader().getElement()).toHaveTextContent('December 2021');
});

test('next button navigates to next month', () => {
const { wrapper } = renderCalendar({ value: '2022-01-07' });
expect(wrapper.findHeader().getElement()).toHaveTextContent('January 2022');
wrapper.findNextButton().click();
expect(wrapper.findHeader().getElement()).toHaveTextContent('February 2022');
});
});
});

describe('Calendar locale DE', () => {
Expand All @@ -75,22 +100,6 @@ describe('Calendar locale DE', () => {
});
});

describe('Calendar header', () => {
test('previous button navigates to previous month', () => {
const { wrapper } = renderCalendar({ value: '2022-01-07' });
expect(wrapper.findHeader().getElement()).toHaveTextContent('January 2022');
wrapper.findPreviousButton().click();
expect(wrapper.findHeader().getElement()).toHaveTextContent('December 2021');
});

test('next button navigates to next month', () => {
const { wrapper } = renderCalendar({ value: '2022-01-07' });
expect(wrapper.findHeader().getElement()).toHaveTextContent('January 2022');
wrapper.findNextButton().click();
expect(wrapper.findHeader().getElement()).toHaveTextContent('February 2022');
});
});

describe('aria labels', () => {
describe('aria-label', () => {
test('can be set', () => {
Expand Down
27 changes: 10 additions & 17 deletions src/calendar/grid/use-calendar-grid-rows.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
// SPDX-License-Identifier: Apache-2.0

import { useMemo } from 'react';
import { getCalendarMonth } from 'mnth';

import { getCalendarMonthWithSixRows, getCalendarYear } from '../../internal/utils/date-time/calendar.js';
import { normalizeStartOfWeek } from '../../internal/utils/locale/index.js';
import { CalendarProps } from '../interfaces.js';

export default function useCalendarGridRows({
baseDate,
granularity,
locale,
startOfWeek,
startOfWeek: rawStartOfWeek,
}: {
baseDate: Date;
granularity: CalendarProps.Granularity;
Expand All @@ -20,21 +20,14 @@ export default function useCalendarGridRows({
}) {
const isMonthPicker = granularity === 'month';

const rows = useMemo<Date[][]>(
() =>
isMonthPicker
? getCalendarYear(baseDate)
: getCalendarMonth(baseDate, { firstDayOfWeek: normalizeStartOfWeek(startOfWeek, locale) }),
[baseDate, isMonthPicker, startOfWeek, locale]
);
const rows = useMemo<Date[][]>(() => {
if (isMonthPicker) {
return getCalendarYear(baseDate);
} else {
const startOfWeek = normalizeStartOfWeek(rawStartOfWeek, locale);
return getCalendarMonthWithSixRows(baseDate, { startOfWeek, padDates: 'after' });
}
}, [baseDate, isMonthPicker, rawStartOfWeek, locale]);

return rows;
}

// Returns a 3-by-4 matrix with dates corresponding to the initial date-time of each month of the year for a given date.
function getCalendarYear(date: Date): Date[][] {
const year = date.getFullYear();
return new Array(4)
.fill(0)
.map((_, i: number) => new Array(3).fill(0).map((_, j: number) => new Date(year, i * 3 + j)));
}
21 changes: 13 additions & 8 deletions src/date-picker/__tests__/date-picker-calendar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import {
import calendarStyles from '../../../lib/components/calendar/styles.selectors.js';
import screenreaderOnlyStyles from '../../../lib/components/internal/components/screenreader-only/styles.selectors.js';

const toLocaleDateString = window.Date.prototype.toLocaleDateString;

describe('Date picker calendar', () => {
const defaultProps: DatePickerProps = {
i18nStrings: {
Expand All @@ -40,7 +42,10 @@ describe('Date picker calendar', () => {
const locale = new Intl.DateTimeFormat('en-US', { timeZone: 'UTC' });
jest.spyOn(Intl, 'DateTimeFormat').mockImplementation(() => locale);
});
afterEach(() => jest.restoreAllMocks());
afterEach(() => {
jest.restoreAllMocks();
window.Date.prototype.toLocaleDateString = toLocaleDateString;
});

describe('basic calendar interaction', () => {
let wrapper: DatePickerWrapper, getByTestId: (selector: string) => HTMLElement;
Expand Down Expand Up @@ -116,18 +121,18 @@ describe('Date picker calendar', () => {

test('should allow locale override', () => {
const locale = 'de-DE';
const localStringMock = jest.fn().mockReturnValue('März 2018');
const oldImpl = window.Date.prototype.toLocaleDateString;
const localStringMock = jest.fn().mockReturnValue('translated');
window.Date.prototype.toLocaleDateString = localStringMock;

const { wrapper } = renderDatePicker({ ...defaultProps, locale });
wrapper.findOpenCalendarButton().click();
expect(findCalendarHeaderText(wrapper)).toBe('März 2018');
// we render 2018/03/22 which results in
// -> 35 (5 weeks á 7 days) + 7 (weekday names) * 2 + 1 (month name)
expect(localStringMock).toHaveBeenCalledTimes(51);
expect(findCalendarHeaderText(wrapper)).toBe('translated');
// For each calendar we render 6 weeks (42 days) and each requires a label.
// Additionally, we generate short and full labels for weekday names (14 in total),
// and 2 labels for month name.
// 42 + 14 + 2 = 58.
expect(localStringMock).toHaveBeenCalledTimes(58);
expect(localStringMock).toHaveBeenCalledWith(locale, expect.any(Object));
window.Date.prototype.toLocaleDateString = oldImpl;
});

test('should override start day of week', () => {
Expand Down
2 changes: 2 additions & 0 deletions src/date-range-picker/calendar/grids/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,7 @@ export const Grids = ({
<InternalSpaceBetween size="xs" direction="horizontal">
{!isSingleGrid && (
<MonthlyGrid
padDates="before"
className={styles['first-grid']}
baseDate={addMonths(baseDate, -1)}
selectedEndDate={selectedEndDate}
Expand All @@ -195,6 +196,7 @@ export const Grids = ({
/>
)}
<MonthlyGrid
padDates="after"
className={styles['second-grid']}
baseDate={baseDate}
selectedEndDate={selectedEndDate}
Expand Down
Loading

0 comments on commit c1b3534

Please sign in to comment.