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');