[CL-890] fix flakey tests (#17160)

* remove animations to try and fix flakey tests

* allow some diff in tootltip story

* dedicated collapsed nav story

* remove viewports and add delay

* add back animations

* add input to disable responsive behavior

* remove responsive input. open nav on lg viewports

* create story to capture collapsed nav

* remove unused import

* more explicit user preference logic

.storybook/preview.tsx

@@ -4,6 +4,7 @@ import { componentWrapperDecorator } from "@storybook/angular";
 import type { Preview } from "@storybook/angular";
 
 import docJson from "../documentation.json";
+
 setCompodocJson(docJson);
 
 const wrapperDecorator = componentWrapperDecorator((story) => {

libs/components/src/navigation/nav-group.stories.ts

@@ -66,8 +66,6 @@ export default {
       type: "figma",
       url: "https://www.figma.com/design/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=16329-40145&t=b5tDKylm5sWm2yKo-4",
     },
-    // remove disableSnapshots in CL-890
-    chromatic: { viewports: [640, 1280], disableSnapshot: true },
   },
 } as Meta;
 

libs/components/src/navigation/nav-item.stories.ts

@@ -42,8 +42,7 @@ export default {
       type: "figma",
       url: "https://www.figma.com/design/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=16329-40145&t=b5tDKylm5sWm2yKo-4",
     },
-    // remove disableSnapshots in CL-890
-    chromatic: { viewports: [640, 1280], disableSnapshot: true },
+    chromatic: { delay: 1000 },
   },
 } as Meta;
 
@@ -136,3 +135,28 @@ export const ForceActiveStyles: Story = {
     `,
   }),
 };
+
+export const CollapsedNavItems: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <bit-nav-item text="First Nav" icon="bwi-collection-shared"></bit-nav-item>
+      <bit-nav-item text="Active Nav" icon="bwi-collection-shared" [forceActiveStyles]="true"></bit-nav-item>
+      <bit-nav-item text="Third Nav" icon="bwi-collection-shared"></bit-nav-item>
+    `,
+  }),
+  play: async () => {
+    const toggleButton = document.querySelector(
+      "[aria-label='Toggle side navigation']",
+    ) as HTMLButtonElement;
+
+    if (toggleButton) {
+      toggleButton.click();
+    }
+  },
+  parameters: {
+    chromatic: {
+      delay: 1000,
+    },
+  },
+};

libs/components/src/navigation/side-nav.component.ts

@@ -1,6 +1,6 @@
 import { CdkTrapFocus } from "@angular/cdk/a11y";
 import { CommonModule } from "@angular/common";
-import { Component, ElementRef, input, viewChild } from "@angular/core";
+import { Component, ElementRef, inject, input, viewChild } from "@angular/core";
 
 import { I18nPipe } from "@bitwarden/ui-common";
 
@@ -22,8 +22,7 @@ export class SideNavComponent {
   readonly variant = input<SideNavVariant>("primary");
 
   private readonly toggleButton = viewChild("toggleButton", { read: ElementRef });
-
-  constructor(protected sideNavService: SideNavService) {}
+  protected sideNavService = inject(SideNavService);
 
   protected handleKeyDown = (event: KeyboardEvent) => {
     if (event.key === "Escape") {

libs/components/src/navigation/side-nav.service.ts

@@ -2,25 +2,38 @@ import { Injectable } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { BehaviorSubject, Observable, combineLatest, fromEvent, map, startWith } from "rxjs";
 
+type CollapsePreference = "open" | "closed" | null;
+
+const SMALL_SCREEN_BREAKPOINT_PX = 768;
+
 @Injectable({
   providedIn: "root",
 })
 export class SideNavService {
-  private _open$ = new BehaviorSubject<boolean>(!window.matchMedia("(max-width: 768px)").matches);
+  private _open$ = new BehaviorSubject<boolean>(
+    !window.matchMedia(`(max-width: ${SMALL_SCREEN_BREAKPOINT_PX}px)`).matches,
+  );
   open$ = this._open$.asObservable();
 
-  private isSmallScreen$ = media("(max-width: 768px)");
+  private isSmallScreen$ = media(`(max-width: ${SMALL_SCREEN_BREAKPOINT_PX}px)`);
+  private _userCollapsePreference$ = new BehaviorSubject<CollapsePreference>(null);
+  userCollapsePreference$ = this._userCollapsePreference$.asObservable();
 
   isOverlay$ = combineLatest([this.open$, this.isSmallScreen$]).pipe(
     map(([open, isSmallScreen]) => open && isSmallScreen),
   );
 
   constructor() {
-    this.isSmallScreen$.pipe(takeUntilDestroyed()).subscribe((isSmallScreen) => {
-      if (isSmallScreen) {
-        this.setClose();
-      }
-    });
+    combineLatest([this.isSmallScreen$, this.userCollapsePreference$])
+      .pipe(takeUntilDestroyed())
+      .subscribe(([isSmallScreen, userCollapsePreference]) => {
+        if (isSmallScreen) {
+          this.setClose();
+        } else if (userCollapsePreference !== "closed") {
+          // Auto-open when user hasn't set preference (null) or prefers open
+          this.setOpen();
+        }
+      });
   }
 
   get open() {
@@ -37,6 +50,9 @@ export class SideNavService {
 
   toggle() {
     const curr = this._open$.getValue();
+    // Store user's preference based on what state they're toggling TO
+    this._userCollapsePreference$.next(curr ? "closed" : "open");
+
     if (curr) {
       this.setClose();
     } else {

libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts

@@ -200,3 +200,12 @@ export const VirtualScrollBlockingDialog: Story = {
     await userEvent.click(dialogButton);
   },
 };
+
+export const ResponsiveSidebar: Story = {
+  render: Default.render,
+  parameters: {
+    chromatic: {
+      viewports: [640, 1280],
+    },
+  },
+};

libs/components/src/tooltip/tooltip.stories.ts

@@ -48,6 +48,10 @@ export default {
       type: "figma",
       url: "https://www.figma.com/design/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?m=auto&node-id=30558-13730&t=4k23PtzCwqDekAZW-1",
     },
+    chromatic: {
+      // Allows 30% difference for the tooltip stories since they are rendered in a portal and may be affected by the environment.
+      diffThreshold: 0.3,
+    },
   },
   argTypes: {
     bitTooltip: {