fix: Fix button snapshots (#1655)

Realized there was a race condition where button snapshots were not
still running. Added detection to ensure button tests run + re-ran
snapshots

tests/styleguide.spec.ts

@@ -1,82 +1,96 @@
 /* eslint-disable no-await-in-loop */
-import { expect, Page, test } from '@playwright/test';
-
-let page: Page;
-const sampleSectionIds: string[] = [];
-const buttonSectionIds: string[] = [];
-
-test.beforeAll(async ({ browser }) => {
-  page = await browser.newPage();
-
+import { expect, test } from '@playwright/test';
+
+const sampleSectionIds: string[] = [
+  'sample-section-typography',
+  'sample-section-colors',
+  'sample-section-theme-color-palette',
+  'sample-section-semantic-colors',
+  'sample-section-chart-colors',
+  'sample-section-editor-colors',
+  'sample-section-grid-colors',
+  'sample-section-component-colors',
+  'sample-section-buttons-regular',
+  'sample-section-buttons-outline',
+  'sample-section-buttons-inline',
+  'sample-section-buttons-socketed',
+  'sample-section-progress',
+  'sample-section-alerts',
+  'sample-section-inputs',
+  'sample-section-item-list-inputs',
+  'sample-section-draggable-lists',
+  'sample-section-time-slider-inputs',
+  'sample-section-dialog',
+  'sample-section-modals',
+  'sample-section-context-menus',
+  'sample-section-dropdown-menus',
+  'sample-section-navigations',
+  'sample-section-tooltips',
+  'sample-section-icons',
+  'sample-section-editors',
+  'sample-section-grids-grid',
+  'sample-section-grids-static',
+  'sample-section-grids-data-bar',
+  'sample-section-grids-quadrillion',
+  'sample-section-grids-async',
+  'sample-section-grids-tree',
+  'sample-section-grids-iris',
+  'sample-section-charts',
+  'sample-section-spectrum-buttons',
+  'sample-section-spectrum-collections',
+  'sample-section-spectrum-content',
+  'sample-section-spectrum-forms',
+  'sample-section-spectrum-overlays',
+  'sample-section-spectrum-well',
+];
+const buttonSectionIds: string[] = [
+  'sample-section-buttons-regular',
+  'sample-section-buttons-outline',
+  'sample-section-buttons-inline',
+  'sample-section-buttons-socketed',
+];
+
+test('UI regression test - Styleguide section count', async ({ page }) => {
   await page.goto('/ide/styleguide');
 
-  // Get the ids of the sample sections
-  const sampleSections = page.locator('.sample-section');
-  const expectedSampleSectionsCount = 40;
-  await expect(sampleSections).toHaveCount(expectedSampleSectionsCount);
-
-  sampleSectionIds.length = 0;
-  for (let i = 0; i < expectedSampleSectionsCount; i += 1) {
-    const sampleSection = sampleSections.nth(i);
-    const id = String(await sampleSection.getAttribute('id'));
-    sampleSectionIds.push(id);
-  }
+  const sampleSections = await page.locator('.sample-section');
 
-  // Get the ids of the button sections
-  const buttonSections = page.locator('[id^="sample-section-buttons-"]');
-  const expectedButtonSectionsCount = 4;
-  await expect(buttonSections).toHaveCount(expectedButtonSectionsCount);
-
-  buttonSectionIds.length = 0;
-  for (let i = 0; i < expectedButtonSectionsCount; i += 1) {
-    const buttonSection = buttonSections.nth(i);
-    const id = String(await buttonSection.getAttribute('id'));
-    buttonSectionIds.push(id);
-  }
-
-  await page.close();
+  await expect(sampleSections).toHaveCount(sampleSectionIds.length);
 });
 
-test.beforeEach(async ({ browser }) => {
-  page = await browser.newPage();
-});
+test('UI regression test - Styleguide button section count', async ({
+  page,
+}) => {
+  await page.goto('/ide/styleguide');
+
+  const buttonSections = await page.locator('[id^="sample-section-buttons-"]');
 
-test.afterEach(async () => {
-  await page.close();
+  await expect(buttonSections).toHaveCount(buttonSectionIds.length);
 });
 
 // Iterate over all sample sections and take a screenshot of each one.
-test('UI regression test - Styleguide sections', async () => {
-  for (let i = 0; i < sampleSectionIds.length; i += 1) {
-    const id = sampleSectionIds[i];
-
+sampleSectionIds.forEach(id => {
+  test(`UI regression test - Styleguide section - ${id}`, async ({ page }) => {
     // Isolate the section
     await page.goto(`/ide/styleguide?isolateSection=true#${id}`);
 
-    // Have to reload since we are calling in a loop and only the hash is changing
-    await page.reload();
-
     const sampleSection = page.locator(`#${id}`);
 
     await expect(sampleSection).toHaveScreenshot(
       `${id.replace(/^sample-section-/, '')}.png`
     );
-  }
+  });
 });
 
-test('Buttons regression test', async () => {
-  // Test focus and hover states for each enabled button
-  for (let i = 0; i < buttonSectionIds.length; i += 1) {
-    const id = buttonSectionIds[i];
-
+buttonSectionIds.forEach((id, i) => {
+  test(`Buttons regression test - ${id}`, async ({ page }) => {
     // Isolate the section
     await page.goto(`/ide/styleguide?isolateSection=true#${id}`);
 
-    // Need to reload since we are calling in a loop and only the hash is changing
-    await page.reload();
+    const sampleSection = page.locator(`#${id}`);
 
-    const section = page.locator(`#${id}`);
-    const buttons = section.locator('button');
+    const buttons = sampleSection.locator('button');
+    await expect(buttons, `Button section: '${id}'`).not.toHaveCount(0);
 
     const buttonCount = await buttons.count();
 
@@ -89,7 +103,7 @@ test('Buttons regression test', async () => {
 
       // Focus
       await button.focus();
-      await expect(section).toHaveScreenshot(
+      await expect(sampleSection).toHaveScreenshot(
         `buttons-focus-section-${i}-${j}${isDisabled ? '-disabled' : ''}.png`
       );
 
@@ -99,7 +113,7 @@ test('Buttons regression test', async () => {
 
       // Hover
       await button.hover();
-      await expect(section).toHaveScreenshot(
+      await expect(sampleSection).toHaveScreenshot(
         `buttons-hover-section-${i}-${j}${isDisabled ? '-disabled' : ''}.png`
       );
       await page.mouse.move(0, 0);
@@ -108,10 +122,10 @@ test('Buttons regression test', async () => {
         await button.blur();
       }
     }
-  }
+  });
 });
 
-test('Inputs regression test', async () => {
+test('Inputs regression test', async ({ page }) => {
   await page.goto('/ide/styleguide?isolateSection=true#sample-section-inputs');
 
   const columns = page.locator('#sample-section-inputs .col');