Disable and tag tests failing in specific browsers (#1941)

# Pull Request

## 🤨 Rationale

One of the tasks in #1747 is to run nimble-components tests in WebKit
and see if there are any new failures. There are several.

We also wanted to start tracking specific issues for each root cause
rather than catch all issues like #1074 and #1075.

## 👩‍💻 Implementation

Marked each failing test with one of these specific issues:
- #1936
- #1938 TODO: ALSO FILE AZDO BUG
- #1939 
- #1940 
- #1942 
- #1943

Also re-enabled a couple of table header tests in Firefox which are now
passing.

## 🧪 Testing

Ran tests in Playwright webkit browser, Firefox, and Safari and and all
the enabled tests now pass.

## ✅ 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). -->

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

---------

Co-authored-by: Milan Raj <rajsite@users.noreply.github.com>

change/@ni-nimble-components-1e68ef0e-2e70-4f32-86a4-e9073c251a0e.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Marking tests that fail on some browsers",
+  "packageName": "@ni/nimble-components",
+  "email": "jattasNI@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/nimble-components/src/dialog/tests/dialog.spec.ts

@@ -272,8 +272,8 @@ describe('Dialog', () => {
         await disconnect();
     });
 
-    // Firefox skipped, see: https://github.com/ni/nimble/issues/1075
-    it('focuses the first button on the dialog when it opens #SkipFirefox', async () => {
+    // Some browsers skipped, see: https://github.com/ni/nimble/issues/1936
+    it('focuses the first button on the dialog when it opens #SkipFirefox #SkipWebkit', async () => {
         const { element, connect, disconnect } = await setup();
         await connect();
         const okButton = document.getElementById('ok')!;
@@ -285,8 +285,8 @@ describe('Dialog', () => {
         await disconnect();
     });
 
-    // Firefox skipped, see: https://github.com/ni/nimble/issues/1075
-    it('focuses the button with autofocus when the dialog opens #SkipFirefox', async () => {
+    // Some browsers skipped, see: https://github.com/ni/nimble/issues/1936
+    it('focuses the button with autofocus when the dialog opens #SkipFirefox #SkipWebkit', async () => {
         const { element, connect, disconnect } = await setup();
         await connect();
         const cancelButton = document.getElementById('cancel')!;
@@ -300,8 +300,8 @@ describe('Dialog', () => {
         await disconnect();
     });
 
-    // Firefox skipped, see: https://github.com/ni/nimble/issues/1075
-    it('supports opening multiple dialogs on top of each other #SkipFirefox', async () => {
+    // Some browsers skipped, see: https://github.com/ni/nimble/issues/1943
+    it('supports opening multiple dialogs on top of each other #SkipFirefox #SkipWebkit', async () => {
         const { element, connect, disconnect } = await setup();
         await connect();
         const secondDialog = document.createElement('nimble-dialog');

packages/nimble-components/src/drawer/tests/drawer.spec.ts

@@ -133,7 +133,7 @@ describe('Drawer', () => {
             await expectAsync(promise).toBePending();
         });
 
-        // Firefox skipped, see: https://github.com/ni/nimble/issues/1075
+        // Firefox skipped, see: https://github.com/ni/nimble/issues/1937
         it('should resolve promise if drawer completely opens before being closed #SkipFirefox', async () => {
             const promise = element.show();
             await completeAnimationAsync(element);
@@ -235,24 +235,24 @@ describe('Drawer', () => {
             expect(afterDrawerCloseActiveElement).toBe(button2);
         });
 
-        // Firefox skipped, see: https://github.com/ni/nimble/issues/1075
-        it('focuses the first button on the drawer when it opens #SkipFirefox', () => {
+        // Some browsers skipped, see: https://github.com/ni/nimble/issues/1936
+        it('focuses the first button on the drawer when it opens #SkipFirefox #SkipWebkit', () => {
             const okButton = document.getElementById('ok')!;
             void element.show();
             expect(document.activeElement).toBe(okButton);
         });
 
-        // Firefox skipped, see: https://github.com/ni/nimble/issues/1075
-        it('focuses the button with autofocus when the drawer opens #SkipFirefox', () => {
+        // Some browsers skipped, see: https://github.com/ni/nimble/issues/1936
+        it('focuses the button with autofocus when the drawer opens #SkipFirefox #SkipWebkit', () => {
             const cancelButton = document.getElementById('cancel')!;
             cancelButton.setAttribute('autofocus', '');
             processUpdates();
             void element.show();
             expect(document.activeElement).toBe(cancelButton);
         });
 
-        // Firefox skipped, see: https://github.com/ni/nimble/issues/1075
-        it('supports opening multiple drawers on top of each other #SkipFirefox', () => {
+        // Some browsers skipped, see: https://github.com/ni/nimble/issues/1943
+        it('supports opening multiple drawers on top of each other #SkipFirefox #SkipWebkit', () => {
             const secondDrawer = document.createElement('nimble-drawer');
             const secondDrawerButton = document.createElement('nimble-button');
             secondDrawer.append(secondDrawerButton);

packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts

@@ -353,7 +353,8 @@ describe('RichTextEditorMention', () => {
                 expect(pageObject.getMentionButtonLabel(0)).toBe('');
             });
 
-            it('should have button title and text when `button-label` updated', async () => {
+            // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+            it('should have button title and text when `button-label` updated #SkipWebkit', async () => {
                 const { userMentionElement } = await appendUserMentionConfiguration(element);
                 userMentionElement.buttonLabel = 'at mention';
                 await waitForUpdatesAsync();
@@ -1032,7 +1033,8 @@ describe('RichTextEditor user mention via template', () => {
             expect(pageObject.getEditorFirstChildTextContent()).toBe('User @');
         });
 
-        it('should get `@` text without a preceding whitespace after a hard break, when button clicked', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('should get `@` text without a preceding whitespace after a hard break, when button clicked #SkipWebkit', async () => {
             await pageObject.setEditorTextContent('User');
             await pageObject.pressShiftEnterKeysInEditor();
             await pageObject.clickUserMentionButton();
@@ -1045,7 +1047,8 @@ describe('RichTextEditor user mention via template', () => {
             expect(pageObject.getEditorFirstChildTextContent()).toBe('User@');
         });
 
-        it('should get `@` text with a single preceding whitespace after a hard break with a text, when button clicked', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('should get `@` text with a single preceding whitespace after a hard break with a text, when button clicked #SkipWebkit', async () => {
             await pageObject.setEditorTextContent('User');
             await pageObject.pressShiftEnterKeysInEditor();
             await pageObject.setEditorTextContent('Text');
@@ -1354,7 +1357,8 @@ describe('RichTextEditorMentionListbox', () => {
             expect(pageObject.isMentionListboxOpened()).toBeFalse();
         });
 
-        it('setting `disabled` should close the mention popup', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('setting `disabled` should close the mention popup #SkipWebkit', async () => {
             await appendUserMentionConfiguration(element, [
                 { key: 'user:1', displayName: 'username1' },
                 { key: 'user:2', displayName: 'username2' }

packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts

@@ -215,20 +215,28 @@ describe('RichTextEditor', () => {
 
     describe('keyboard shortcuts should update the checked state of the buttons', () => {
         parameterizeSpec(formattingButtons, (spec, name, value) => {
-            spec(`"${name}" button keyboard shortcut check`, async () => {
-                expect(
-                    pageObject.getButtonCheckedState(value.toolbarButtonIndex)
-                ).toBeFalse();
+            spec(
+                // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+                `"${name}" button keyboard shortcut check #SkipWebkit`,
+                async () => {
+                    expect(
+                        pageObject.getButtonCheckedState(
+                            value.toolbarButtonIndex
+                        )
+                    ).toBeFalse();
 
-                await pageObject.clickEditorShortcutKeys(
-                    value.shortcutKey,
-                    value.shiftKey
-                );
+                    await pageObject.clickEditorShortcutKeys(
+                        value.shortcutKey,
+                        value.shiftKey
+                    );
 
-                expect(
-                    pageObject.getButtonCheckedState(value.toolbarButtonIndex)
-                ).toBeTrue();
-            });
+                    expect(
+                        pageObject.getButtonCheckedState(
+                            value.toolbarButtonIndex
+                        )
+                    ).toBeTrue();
+                }
+            );
         });
     });
 
@@ -255,7 +263,8 @@ describe('RichTextEditor', () => {
     });
 
     describe('rich text formatting options to its respective HTML elements', () => {
-        it('should have "br" tag name when clicking shift + enter', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('should have br tag name when pressing shift + enter #SkipWebkit', async () => {
             await pageObject.setEditorTextContent('Plain text 1');
             await pageObject.pressShiftEnterKeysInEditor();
             await pageObject.setEditorTextContent('Plain text 2');
@@ -272,7 +281,8 @@ describe('RichTextEditor', () => {
             expect(pageObject.getEditorLeafContents()).toEqual(['bold']);
         });
 
-        it('should have br tag name when pressing shift + Enter with bold content', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('should have br tag name when pressing shift + Enter with bold content #SkipWebkit', async () => {
             await pageObject.toggleFooterButton(ToolbarButton.bold);
             await pageObject.setEditorTextContent('bold1');
             await pageObject.pressShiftEnterKeysInEditor();
@@ -294,7 +304,8 @@ describe('RichTextEditor', () => {
             expect(pageObject.getEditorLeafContents()).toEqual(['italics']);
         });
 
-        it('should have br tag name when pressing shift + Enter with Italics content', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('should have br tag name when pressing shift + Enter with Italics content #SkipWebkit', async () => {
             await pageObject.toggleFooterButton(ToolbarButton.italics);
             await pageObject.setEditorTextContent('italics1');
             await pageObject.pressShiftEnterKeysInEditor();
@@ -437,7 +448,8 @@ describe('RichTextEditor', () => {
             });
         });
 
-        it('should have br tag name when pressing shift + Enter with numbered list content', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('should have br tag name when pressing shift + Enter with numbered list content #SkipWebkit', async () => {
             await pageObject.setEditorTextContent('numbered list1');
             await pageObject.toggleFooterButton(ToolbarButton.numberedList);
             await pageObject.pressShiftEnterKeysInEditor();
@@ -496,7 +508,8 @@ describe('RichTextEditor', () => {
             ).toBeTrue();
         });
 
-        it('should have br tag name when pressing shift + Enter with nested numbered lists content', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('should have br tag name when pressing shift + Enter with nested numbered lists content #SkipWebkit', async () => {
             await pageObject.setEditorTextContent('List');
             await pageObject.toggleFooterButton(ToolbarButton.numberedList);
             await pageObject.pressEnterKeyInEditor();
@@ -585,7 +598,8 @@ describe('RichTextEditor', () => {
             expect(pageObject.getEditorLeafContents()).toEqual(['Bullet List']);
         });
 
-        it('should have br tag name when pressing shift + Enter with bulleted list content', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('should have br tag name when pressing shift + Enter with bulleted list content #SkipWebkit', async () => {
             await pageObject.setEditorTextContent('Bulleted List 1');
             await pageObject.toggleFooterButton(ToolbarButton.bulletList);
             await pageObject.pressShiftEnterKeysInEditor();
@@ -644,7 +658,8 @@ describe('RichTextEditor', () => {
             ).toBeTrue();
         });
 
-        it('should have br tag name when pressing shift + Enter with nested bulleted lists content', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('should have br tag name when pressing shift + Enter with nested bulleted lists content #SkipWebkit', async () => {
             await pageObject.setEditorTextContent('List');
             await pageObject.toggleFooterButton(ToolbarButton.bulletList);
             await pageObject.pressEnterKeyInEditor();

packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts

@@ -273,7 +273,8 @@ describe('Markdown serializer', () => {
    * Nested bulleted list`);
         });
 
-        it('Hard break', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('Hard break #SkipWebkit', async () => {
             await pageObject.setEditorTextContent('Plain text 1');
             await pageObject.pressShiftEnterKeysInEditor();
             await pageObject.setEditorTextContent('Plain text 2');
@@ -284,7 +285,8 @@ Plain text 2\
 Plain text 3`);
         });
 
-        it('Hard break with bold', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('Hard break with bold #SkipWebkit', async () => {
             await pageObject.toggleFooterButton(ToolbarButton.bold);
             await pageObject.setEditorTextContent('Bold');
             await pageObject.pressShiftEnterKeysInEditor();
@@ -293,7 +295,8 @@ Plain text 3`);
 **Bold**`);
         });
 
-        it('Hard break with italics', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('Hard break with italics #SkipWebkit', async () => {
             await pageObject.toggleFooterButton(ToolbarButton.italics);
             await pageObject.setEditorTextContent('Italics');
             await pageObject.pressShiftEnterKeysInEditor();
@@ -302,7 +305,8 @@ Plain text 3`);
 *Italics*`);
         });
 
-        it('Hard break with bulleted list', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('Hard break with bulleted list #SkipWebkit', async () => {
             await pageObject.setEditorTextContent('Bulleted');
             await pageObject.toggleFooterButton(ToolbarButton.bulletList);
             await pageObject.pressShiftEnterKeysInEditor();
@@ -311,7 +315,8 @@ Plain text 3`);
   list`);
         });
 
-        it('Hard break with numbered list', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('Hard break with numbered list #SkipWebkit', async () => {
             await pageObject.setEditorTextContent('Numbered');
             await pageObject.toggleFooterButton(ToolbarButton.numberedList);
             await pageObject.pressShiftEnterKeysInEditor();
@@ -320,7 +325,8 @@ Plain text 3`);
    list`);
         });
 
-        it('Hard break with mention node', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1938
+        it('Hard break with mention node #SkipWebkit', async () => {
             await appendUserMentionConfiguration(element, [
                 { key: 'user:1', displayName: 'username1' }
             ]);

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

@@ -119,7 +119,8 @@ describe('TableColumnDateText', () => {
             });
         });
 
-        it('changing fieldName updates display', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1940
+        it('changing fieldName updates display #SkipWebkit', async () => {
             await table.setData([
                 {
                     field: new Date('Dec 10, 2012, 10:35:05 PM').valueOf(),
@@ -136,7 +137,8 @@ describe('TableColumnDateText', () => {
             );
         });
 
-        it('changing data from value to null displays blank', async () => {
+        // 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() }
             ]);
@@ -153,7 +155,8 @@ describe('TableColumnDateText', () => {
             expect(pageObject.getRenderedCellContent(0, 0)).toEqual('');
         });
 
-        it('changing data from null to value displays value', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1940
+        it('changing data from null to value displays value #SkipWebkit', async () => {
             await table.setData([{ field: null }]);
             await waitForUpdatesAsync();
             expect(pageObject.getRenderedCellContent(0, 0)).toEqual('');
@@ -178,7 +181,8 @@ describe('TableColumnDateText', () => {
             expect(pageObject.getRenderedCellContent(0, 0)).toEqual('');
         });
 
-        it('sets title when cell text is ellipsized', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1940
+        it('sets title when cell text is ellipsized #SkipWebkit', async () => {
             table.style.width = '200px';
             await table.setData([
                 { field: new Date('Dec 10, 2012, 10:35:05 PM').valueOf() }
@@ -230,7 +234,8 @@ describe('TableColumnDateText', () => {
             expect(pageObject.getCellTitle(0, 0)).toEqual('');
         });
 
-        it('sets group header text to rendered date value', async () => {
+        // 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() }
             ]);
@@ -250,7 +255,8 @@ describe('TableColumnDateText', () => {
             expect(pageObject.getRenderedCellContent(0, 0)).toBe('12/10/2012');
         });
 
-        it('updates displayed date when lang token changes', async () => {
+        // 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() }
             ]);

packages/nimble-components/src/table/components/header/tests/table-header.spec.ts

@@ -46,8 +46,7 @@ describe('TableHeader', () => {
         expect(pageObject.isSortDescendingIconVisible()).toBeFalse();
     });
 
-    // Firefox skipped, see: https://github.com/ni/nimble/issues/1075
-    it('has correct state when sorted ascending #SkipFirefox', async () => {
+    it('has correct state when sorted ascending', async () => {
         element.sortDirection = TableColumnSortDirection.ascending;
         element.firstSortedColumn = true;
         await waitForUpdatesAsync();
@@ -57,8 +56,7 @@ describe('TableHeader', () => {
         expect(pageObject.isSortDescendingIconVisible()).toBeFalse();
     });
 
-    // Firefox skipped, see: https://github.com/ni/nimble/issues/1075
-    it('has correct state when sorted descending #SkipFirefox', async () => {
+    it('has correct state when sorted descending', async () => {
         element.sortDirection = TableColumnSortDirection.descending;
         element.firstSortedColumn = true;
         await waitForUpdatesAsync();

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

@@ -495,7 +495,8 @@ describe('Table Interactive Column Sizing', () => {
             expect(pageObject.isHorizontalScrollbarVisible()).toBeTrue();
         });
 
-        it('sizing table with a horizontal scrollbar does not change column widths until sized beyond current column pixel widths', async () => {
+        // WebKit skipped, see https://github.com/ni/nimble/issues/1939
+        it('sizing table with a horizontal scrollbar does not change column widths until sized beyond current column pixel widths #SkipWebkit', async () => {
             // create horizontal scrollbar with total column width of 450
             pageObject.dragSizeColumnByRightDivider(2, [100]);
             // size table below threshhold of total column widths