test: add better assert messages and increase snapshot timeout

Author: areisle

.storybook/preview.tsx

@@ -81,8 +81,8 @@ const preview = definePreview({
 export async function hasFinishedLoading({ step, canvas }: Pick<Parameters<NonNullable<StoryObj['play']>>[0], 'step' | 'canvas'>) {
   await step('Finished Loading', async () => {
     await waitFor(async () => {
-      await expect(canvas.queryAllByRole('progressbar')).toHaveLength(0);
-      await expect(canvas.queryAllByText(/loading\.\.\./i)).toHaveLength(0);
+      await expect(canvas.queryAllByRole('progressbar'), 'has no progress bars').toHaveLength(0);
+      await expect(canvas.queryAllByText(/loading\.\.\./i), 'has no loading messages').toHaveLength(0);
     }, { timeout: 10000 });
   });
 }

.storybook/tests.tsx

@@ -3,11 +3,11 @@ import { expect, test } from 'vitest';
 
 export function createSnapshotTest(testName: string, story: { run: () => Promise<void>; composed: { parameters: { snapshot: boolean; }}}) {
   if (!story.composed.parameters?.snapshot) return;
-  return test(testName, async () => {
+  return test(testName, { timeout: 30000 }, async () => {
     await story.run();
     // make sure done loading
     await waitFor(() => {
-      expect(document.querySelectorAll('.MuiTouchRipple-childLeaving')).toHaveLength(0);
+      expect(document.querySelectorAll('.MuiTouchRipple-childLeaving'), 'has no button ripples in progress').toHaveLength(0);
     });
     const children = Array.from(document.body.childNodes).filter((node) => (node.nodeName !== '#text' || node.textContent?.trim() != '') && !(node as Element).classList?.contains('sb-wrapper'));
     const child = children.length <= 1 ? children[0] : children;