[CL-524] Ignore flaky elements in Chromatic tests (#12561)

bitwarden · Dec 30, 2024 · a95427e · a95427e
1 parent 6539f06
commit a95427e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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 = {