Update date-text column tests to pass on all browsers (#1959)

# Pull Request

## 🤨 Rationale

Resolves #1940 

## 👩‍💻 Implementation

Added a page object function to get the expected cell text for a given
value/locale combination. The function internally uses
`Intl.DateTimeFormat` to determine the expected text, so that it will
always return the correct value for a given browser. With this change,
the tests still test all the column, cell, and group row formatting code
without actually testing the nuances of the string returned from
`Intl.DateTimeFormat`.

## 🧪 Testing

Ran the tests for the date-text column in WebKit on my machine (Windows
10) and on the pipeline to verify they pass on both.

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [ ] I have updated the project documentation to reflect my changes or
determined no changes are needed.

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"
+}

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<T> {
+    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

packages/nimble-components/src/table-column/date-text/tests/table-column-date-text.spec.ts

@@ -78,32 +78,38 @@ 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();
 
             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,21 +145,20 @@ 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,
                 0,
                 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
             );
         });
 

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<TextColumnTableArgs> = {
     parameters: {},
     // prettier-ignore
@@ -162,8 +170,7 @@ export const dateTextColumn: StoryObj<TextColumnTableArgs> = {
                 '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' }
         },