From a95427eee0265c30322afec4c48e489a71ad1d7c Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Mon, 30 Dec 2024 16:42:53 -0500
Subject: [PATCH] [CL-524] Ignore flaky elements in Chromatic tests (#12561)

---
 .../src/platform/popup/layout/popup-layout.stories.ts  | 10 ++++++++--
 libs/components/src/menu/menu-trigger-for.directive.ts |  2 +-
 .../dialog-virtual-scroll-block.component.ts           |  4 ++--
 .../src/stories/kitchen-sink/kitchen-sink.stories.ts   |  3 +++
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
index cd467cecbd2..c1ac8823261 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
+++ b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
@@ -41,7 +41,7 @@ class ExtensionContainerComponent {}
 
 @Component({
   selector: "vault-placeholder",
-  template: `
+  template: /*html*/ `
     <bit-section>
       <bit-item-group aria-label="Mock Vault Items">
         <bit-item *ngFor="let item of data; index as i">
@@ -53,7 +53,7 @@ class ExtensionContainerComponent {}
 
           <ng-container slot="end">
             <bit-item-action>
-              <button type="button" bitBadge variant="primary">Auto-fill</button>
+              <button type="button" bitBadge variant="primary">Fill</button>
             </bit-item-action>
             <bit-item-action>
               <button type="button" bitIconButton="bwi-clone" aria-label="Copy item"></button>
@@ -301,6 +301,12 @@ class MockVaultSubpageComponent {}
 export default {
   title: "Browser/Popup Layout",
   component: PopupPageComponent,
+  parameters: {
+    chromatic: {
+      // Disable tests while we troubleshoot their flaky-ness
+      disableSnapshot: true,
+    },
+  },
   decorators: [
     moduleMetadata({
       imports: [
diff --git a/libs/components/src/menu/menu-trigger-for.directive.ts b/libs/components/src/menu/menu-trigger-for.directive.ts
index 786554e981c..96d430c5e6a 100644
--- a/libs/components/src/menu/menu-trigger-for.directive.ts
+++ b/libs/components/src/menu/menu-trigger-for.directive.ts
@@ -36,7 +36,7 @@ export class MenuTriggerForDirective implements OnDestroy {
   private defaultMenuConfig: OverlayConfig = {
     panelClass: "bit-menu-panel",
     hasBackdrop: true,
-    backdropClass: "cdk-overlay-transparent-backdrop",
+    backdropClass: ["cdk-overlay-transparent-backdrop", "bit-menu-panel-backdrop"],
     scrollStrategy: this.overlay.scrollStrategies.reposition(),
     positionStrategy: this.overlay
       .position()
diff --git a/libs/components/src/stories/kitchen-sink/components/dialog-virtual-scroll-block.component.ts b/libs/components/src/stories/kitchen-sink/components/dialog-virtual-scroll-block.component.ts
index a867d9cdf53..02b49a3e915 100644
--- a/libs/components/src/stories/kitchen-sink/components/dialog-virtual-scroll-block.component.ts
+++ b/libs/components/src/stories/kitchen-sink/components/dialog-virtual-scroll-block.component.ts
@@ -10,9 +10,9 @@ import { TableDataSource, TableModule } from "../../../table";
   selector: "dialog-virtual-scroll-block",
   standalone: true,
   imports: [DialogModule, IconButtonModule, SectionComponent, TableModule, ScrollingModule],
-  template: ` <bit-section>
+  template: /*html*/ `<bit-section>
     <cdk-virtual-scroll-viewport scrollWindow itemSize="47">
-      <bit-table [dataSource]="dataSource">
+      <bit-table [dataSource]="dataSource" data-chromatic="ignore">
         <ng-container header>
           <tr>
             <th bitCell bitSortable="id" default>Id</th>
diff --git a/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts b/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
index 203c510f814..44080e29049 100644
--- a/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
+++ b/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
@@ -130,6 +130,9 @@ export const MenuOpen: Story = {
     const menuButton = getAllByRole(table, "button")[0];
     await userEvent.click(menuButton);
   },
+  parameters: {
+    chromatic: { ignoreSelectors: [".bit-menu-panel-backdrop"] },
+  },
 };
 
 export const DefaultDialogOpen: Story = {