minor test restructuring, run base then mask then full component tests

Author: ericblade

playwright.config.ts

@@ -34,39 +34,55 @@ export default defineConfig({
 
   /* Configure projects for major browsers */
   projects: [
+    {
+      name: 'base tests',
+      testMatch: '**/base.spec.ts',
+    },
+    {
+      name: 'mask tests',
+      testMatch: '**/mask.spec.ts',
+      dependencies: ['base tests'],
+    },
     {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
+      dependencies: ['base tests', 'mask tests'],
     },
 
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
+      dependencies: ['base tests', 'mask tests'],
     },
 
     {
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
+      dependencies: ['base tests', 'mask tests'],
     },
 
     /* Test against mobile viewports. */
     {
       name: 'Mobile Chrome',
       use: { ...devices['Pixel 5'] },
+      dependencies: ['base tests', 'mask tests'],
     },
     {
       name: 'Mobile Safari',
       use: { ...devices['iPhone 12'] },
+      dependencies: ['base tests', 'mask tests'],
     },
 
     /* Test against branded browsers. */
     {
       name: 'Microsoft Edge',
       use: { ...devices['Desktop Edge'], channel: 'msedge' },
+      dependencies: ['base tests', 'mask tests'],
     },
     {
       name: 'Google Chrome',
       use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+      dependencies: ['base tests', 'mask tests'],
     },
   ],
 

tests/base.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+import * as path from 'path';
+
+const projectDir = path.resolve(__dirname, '../');
+const filePath = path.join(projectDir, 'examples/index.html');
+const fileUrl = `file://${filePath}`;
+
+test.describe('base tests', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto(fileUrl);
+    });
+
+    test('sanity startup', async ({ page }) => {
+        const currencyInput = await page.locator('#currency-input');
+        await expect(currencyInput).toHaveValue('$0.00 USD');
+    });
+
+    test('undefined value results in correct 0 of input', async ({ page }) => {
+        const nullInputTest = await page.locator('#null-input-test');
+        await expect(nullInputTest).toHaveValue('$0.00 USD');
+    });
+});

tests/test.spec.ts

@@ -5,22 +5,6 @@ const projectDir = path.resolve(__dirname, '../');
 const filePath = path.join(projectDir, 'examples/index.html');
 const fileUrl = `file://${filePath}`;
 
-test.describe('test', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(fileUrl);
-  });
-
-  test('sanity startup', async ({ page }) => {
-    const currencyInput = await page.locator('#currency-input');
-    await expect(currencyInput).toHaveValue('$0.00 USD');
-  });
-
-  test('undefined value results in correct 0 of input', async ({ page }) => {
-    const nullInputTest = await page.locator('#null-input-test');
-    await expect(nullInputTest).toHaveValue('$0.00 USD');
-  });
-});
-
 test.describe('input caret selection', () => {
   const suffix = ' USD';
   const prefix = '$';