Snapshots, yee shall kneel. (#5627)

* Give snapshotter a better chance of getting a good snapshot

* fmt tsc lint

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* Fix tests

* Again

* Make cmdBarFixture Locators getters

* Fix export error test

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/components/ActionIcon.tsx

@@ -19,21 +19,25 @@ export interface ActionIconProps extends React.PropsWithChildren {
   bgClassName?: string
   iconClassName?: string
   size?: keyof typeof iconSizes
+  'data-testid'?: string
 }
 
-export const ActionIcon = ({
-  icon = faCircleExclamation,
-  className,
-  bgClassName,
-  iconClassName,
-  size = 'md',
-  children,
-}: ActionIconProps) => {
+export const ActionIcon = (props: ActionIconProps) => {
+  const {
+    icon = faCircleExclamation,
+    className,
+    bgClassName,
+    iconClassName,
+    size = 'md',
+    children,
+  } = props
+
   const computedIconClassName = `h-auto text-inherit dark:text-current group-disabled:text-chalkboard-60 group-disabled:text-chalkboard-60 ${iconClassName}`
   const computedBgClassName = `bg-chalkboard-20 dark:bg-chalkboard-80 group-disabled:bg-chalkboard-30 dark:group-disabled:bg-chalkboard-80 ${bgClassName}`
 
   return (
     <div
+      data-testid={props['data-testid']}
       className={
         `w-fit self-stretch inline-grid place-content-center ${className} ` +
         computedBgClassName

src/components/NetworkHealthIndicator.tsx

@@ -99,6 +99,9 @@ export const NetworkHealthIndicator = () => {
       >
         <ActionIcon
           icon={overallConnectionStateIcon[overallState]}
+          data-testid={`network-toggle-${
+            overallState == NetworkHealthState.Ok ? 'ok' : 'other'
+          }`}
           className="p-1"
           iconClassName={overallConnectionStateColor[overallState].icon}
           bgClassName={