diff --git a/change/@ni-nimble-components-26aadfad-c24c-4ad0-ae8e-e75769665e95.json b/change/@ni-nimble-components-26aadfad-c24c-4ad0-ae8e-e75769665e95.json new file mode 100644 index 0000000000..e8c300512d --- /dev/null +++ b/change/@ni-nimble-components-26aadfad-c24c-4ad0-ae8e-e75769665e95.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update date-text column tests to pass on all browsers", + "packageName": "@ni/nimble-components", + "email": "20542556+mollykreis@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/nimble-components/src/table-column/date-text/testing/table-column-date-text.pageobject.ts b/packages/nimble-components/src/table-column/date-text/testing/table-column-date-text.pageobject.ts index 8072421bc0..c80e1a798f 100644 --- a/packages/nimble-components/src/table-column/date-text/testing/table-column-date-text.pageobject.ts +++ b/packages/nimble-components/src/table-column/date-text/testing/table-column-date-text.pageobject.ts @@ -8,6 +8,15 @@ import { TableColumnDateTextCellView } from '../cell-view'; export class TableColumnDateTextPageObject< T extends TableRecord > extends TableColumnFormattedTextPageObject { + public getDefaultFormattedCellText(value: number, locale: string): string { + const defaultOptions: Intl.DateTimeFormatOptions = { + dateStyle: 'medium', + timeStyle: 'medium' + }; + const formatter = new Intl.DateTimeFormat(locale, defaultOptions); + return formatter.format(value); + } + protected override verifyCellType( rowIndex: number, columnIndex: number diff --git a/packages/nimble-components/src/table-column/date-text/tests/table-column-date-text.spec.ts b/packages/nimble-components/src/table-column/date-text/tests/table-column-date-text.spec.ts index 10f1077218..9654eb147c 100644 --- a/packages/nimble-components/src/table-column/date-text/tests/table-column-date-text.spec.ts +++ b/packages/nimble-components/src/table-column/date-text/tests/table-column-date-text.spec.ts @@ -78,12 +78,15 @@ describe('TableColumnDateText', () => { expect(column.checkValidity()).toBeTrue(); }); - // WebKit skipped, see https://github.com/ni/nimble/issues/1940 - it('changing fieldName updates display #SkipWebkit', async () => { + it('changing fieldName updates display', async () => { + const fieldValue = new Date('Dec 10, 2012, 10:35:05 PM').valueOf(); + const anotherFieldValue = new Date( + 'Jan 20, 2018, 4:05:45 AM' + ).valueOf(); await table.setData([ { - field: new Date('Dec 10, 2012, 10:35:05 PM').valueOf(), - anotherField: new Date('Jan 20, 2018, 4:05:45 AM').valueOf() + field: fieldValue, + anotherField: anotherFieldValue } ]); await waitForUpdatesAsync(); @@ -91,19 +94,22 @@ describe('TableColumnDateText', () => { column.fieldName = 'anotherField'; await waitForUpdatesAsync(); + const expectedFormattedValue = pageObject.getDefaultFormattedCellText( + anotherFieldValue, + 'en-US' + ); expect(pageObject.getRenderedCellContent(0, 0)).toEqual( - 'Jan 20, 2018, 4:05:45 AM' + expectedFormattedValue ); }); - // WebKit skipped, see https://github.com/ni/nimble/issues/1940 - it('changing data from value to null displays blank #SkipWebkit', async () => { - await table.setData([ - { field: new Date('Dec 10, 2012, 10:35:05 PM').valueOf() } - ]); + it('changing data from value to null displays blank', async () => { + const fieldValue = new Date('Dec 10, 2012, 10:35:05 PM').valueOf(); + await table.setData([{ field: fieldValue }]); await waitForUpdatesAsync(); + const expectedFormattedValue = pageObject.getDefaultFormattedCellText(fieldValue, 'en-US'); expect(pageObject.getRenderedCellContent(0, 0)).toEqual( - 'Dec 10, 2012, 10:35:05 PM' + expectedFormattedValue ); const updatedValue = { field: null }; @@ -114,19 +120,18 @@ describe('TableColumnDateText', () => { expect(pageObject.getRenderedCellContent(0, 0)).toEqual(''); }); - // WebKit skipped, see https://github.com/ni/nimble/issues/1940 - it('changing data from null to value displays value #SkipWebkit', async () => { + it('changing data from null to value displays value', async () => { await table.setData([{ field: null }]); await waitForUpdatesAsync(); expect(pageObject.getRenderedCellContent(0, 0)).toEqual(''); - await table.setData([ - { field: new Date('Dec 10, 2012, 10:35:05 PM').valueOf() } - ]); + const fieldValue = new Date('Dec 10, 2012, 10:35:05 PM').valueOf(); + await table.setData([{ field: fieldValue }]); await waitForUpdatesAsync(); + const expectedFormattedValue = pageObject.getDefaultFormattedCellText(fieldValue, 'en-US'); expect(pageObject.getRenderedCellContent(0, 0)).toEqual( - 'Dec 10, 2012, 10:35:05 PM' + expectedFormattedValue ); }); @@ -140,12 +145,10 @@ describe('TableColumnDateText', () => { expect(pageObject.getRenderedCellContent(0, 0)).toEqual(''); }); - // WebKit skipped, see https://github.com/ni/nimble/issues/1940 - it('sets title when cell text is ellipsized #SkipWebkit', async () => { + it('sets title when cell text is ellipsized', async () => { table.style.width = '200px'; - await table.setData([ - { field: new Date('Dec 10, 2012, 10:35:05 PM').valueOf() } - ]); + const fieldValue = new Date('Dec 10, 2012, 10:35:05 PM').valueOf(); + await table.setData([{ field: fieldValue }]); await waitForUpdatesAsync(); tablePageObject.dispatchEventToCell( 0, @@ -153,8 +156,9 @@ describe('TableColumnDateText', () => { new MouseEvent('mouseover') ); await waitForUpdatesAsync(); + const expectedFormattedValue = pageObject.getDefaultFormattedCellText(fieldValue, 'en-US'); expect(pageObject.getCellTitle(0, 0)).toEqual( - 'Dec 10, 2012, 10:35:05 PM' + expectedFormattedValue ); }); @@ -193,14 +197,13 @@ describe('TableColumnDateText', () => { expect(pageObject.getCellTitle(0, 0)).toEqual(''); }); - // WebKit skipped, see https://github.com/ni/nimble/issues/1940 - it('sets group header text to rendered date value #SkipWebkit', async () => { - await table.setData([ - { field: new Date('Dec 10, 2012, 10:35:05 PM').valueOf() } - ]); + it('sets group header text to rendered date value', async () => { + const fieldValue = new Date('Dec 10, 2012, 10:35:05 PM').valueOf(); + await table.setData([{ field: fieldValue }]); await waitForUpdatesAsync(); + const expectedFormattedValue = pageObject.getDefaultFormattedCellText(fieldValue, 'en-US'); expect(pageObject.getRenderedGroupHeaderContent(0)).toBe( - 'Dec 10, 2012, 10:35:05 PM' + expectedFormattedValue ); }); @@ -214,19 +217,19 @@ describe('TableColumnDateText', () => { expect(pageObject.getRenderedCellContent(0, 0)).toBe('12/10/2012'); }); - // WebKit skipped, see https://github.com/ni/nimble/issues/1940 - it('updates displayed date when lang token changes #SkipWebkit', async () => { - await table.setData([ - { field: new Date('Dec 10, 2012, 10:35:05 PM').valueOf() } - ]); + it('updates displayed date when lang token changes', async () => { + const fieldValue = new Date('Dec 10, 2012, 10:35:05 PM').valueOf(); + await table.setData([{ field: fieldValue }]); await waitForUpdatesAsync(); + const expectedEnglishFormattedValue = pageObject.getDefaultFormattedCellText(fieldValue, 'en-US'); expect(pageObject.getRenderedCellContent(0, 0)).toBe( - 'Dec 10, 2012, 10:35:05 PM' + expectedEnglishFormattedValue ); lang.setValueFor(table, 'fr'); await waitForUpdatesAsync(); + const expectedFrenchFormattedValue = pageObject.getDefaultFormattedCellText(fieldValue, 'fr'); expect(pageObject.getRenderedCellContent(0, 0)).toBe( - '10 déc. 2012, 22:35:05' + expectedFrenchFormattedValue ); }); diff --git a/packages/nimble-components/src/table-column/date-text/tests/table-column-date-text.stories.ts b/packages/nimble-components/src/table-column/date-text/tests/table-column-date-text.stories.ts index 6c3effd969..990a953a4d 100644 --- a/packages/nimble-components/src/table-column/date-text/tests/table-column-date-text.stories.ts +++ b/packages/nimble-components/src/table-column/date-text/tests/table-column-date-text.stories.ts @@ -109,6 +109,14 @@ The object's type is \`TableColumnValidity\`, and it contains the following bool - \`invalidCustomOptionsCombination\`: \`true\` when an invalid combination of formatting options (i.e. \`custom-*\`) have been specified. To determine which specific options are in conflict, you may use [MDN's Try It widget](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#try_it) or a browser console to get a detailed exception message. `; +const formatDescription = `By default, dates are formatted similar to "Jan 1, 2023, 12:00:00 AM". To use a different format, set this attribute to +\`custom\` and provide additional attributes corresponding to [\`Intl.DateTimeFormat()\` options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat). +Each \`Intl.DateTimeFormat()\` option has a corresponding attribute whose name is kebab-cased and prefixed with \`custom-\` e.g. \`custom-date-style\` +corresponds to \`dateStyle\`. + +Note: The exact formatting of the resulting date time string is browser-specific and may vary slightly between browsers. +`; + export const dateTextColumn: StoryObj = { parameters: {}, // prettier-ignore @@ -162,8 +170,7 @@ export const dateTextColumn: StoryObj = { 'The placeholder text to display when the field value is `undefined` or `null` for a record.' }, format: { - description: - 'By default, dates are formatted like "Jan 1, 2023, 12:00:00 AM". To use a different format, set this attribute to `custom` and provide additional attributes corresponding to [`Intl.DateTimeFormat()` options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat). Each `Intl.DateTimeFormat()` option has a corresponding attribute whose name is kebab-cased and prefixed with `custom-` e.g. `custom-date-style` corresponds to `dateStyle`.', + description: formatDescription, options: Object.keys(DateTextFormat), control: { type: 'radio' } },