Solid UI integration test

.github/workflows/e2e.yml

@@ -10,16 +10,20 @@ jobs:
     steps:
       - name: Checkout commit
         uses: actions/checkout@v2
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7.1.0
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
           node-version: 14
       - name: Install Dependencies
-        run: npm ci
+        run: pnpm install
       - name: Install Playwright
-        run: npx playwright install --with-deps
+        run: pnpm exec playwright install --with-deps
       - name: Run E2E tests
-        run: npm run test:e2e:run
+        run: pnpm test:e2e:run
         env:
           PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
       - name: Save Test Results

.github/workflows/validate.yml

@@ -12,14 +12,18 @@ jobs:
     steps:
       - name: Checkout commit
         uses: actions/checkout@v2
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7.1.0
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
           node-version: 14
-          cache: 'npm'
+          cache: 'pnpm'
       - name: Install Dependencies
-        run: npm ci
-      - name: Check for linting issues
-        run: npm run lint
+        run: pnpm install
+      # - name: Check for linting issues
+      #   run: pnpm lint
       - name: Run functional tests
-        run: npm run test:func:run
+        run: pnpm test:func:run

.prettierignore

@@ -7,3 +7,4 @@ coverage
 .DS_Store
 test-results/
 playwright-report/
+*.yaml

e2e/command-palette-basic.spec.ts

@@ -26,10 +26,12 @@ test.describe('Test basic interactions of Command Palette', () => {
 
     await page.keyboard.type('GitHub');
 
-    const searchLocator = page.locator('input[type="search"]');
+    const searchLocator = page.locator('role=searchbox[name*="Search for an action"]');
     await expect(searchLocator).toHaveValue('GitHub');
 
-    const optionLocator = page.locator('[role="combobox"] >> [role="option"]');
+    const optionLocator = page.locator(
+      'role=combobox[name*="Search for an action"] >> role=option'
+    );
 
     const optionsNum = await optionLocator.count();
     expect(optionsNum).toBe(1);
@@ -45,7 +47,9 @@ test.describe('Test basic interactions of Command Palette', () => {
     await page.keyboard.press('ArrowDown');
     await page.keyboard.press('ArrowDown');
 
-    const optionLocator = page.locator('[role="combobox"] >> [role="option"]');
+    const optionLocator = page.locator(
+      'role=combobox[name*="Search for an action"] >> role=option'
+    );
     let isThirdOptionSelected = await optionLocator.nth(2).getAttribute('aria-selected');
 
     expect(isThirdOptionSelected).toEqual('true');
@@ -64,15 +68,18 @@ test.describe('Test basic interactions of Command Palette', () => {
     await page.goto('/demo');
     await triggerCommandPaletteOpen(page);
 
-    await expect(page.locator('[role="combobox"]')).not.toContainText('Unmute');
+    const paletteLocator = page.locator('role=combobox[name*="Search for an action"]');
+    await expect(paletteLocator).not.toContainText('Unmute');
 
     await page.keyboard.press('Escape');
-    await page.check('label >> text=Audible');
+    const unmuteLabelLocator = page.locator('label >> text=Audible');
+    await unmuteLabelLocator.check();
     await triggerCommandPaletteOpen(page);
-    await page.click('[role="combobox"] >> text=Unmute');
+    await paletteLocator.locator('text=Unmute').click();
 
-    const isUnmuted = await page.isChecked('label >> text=Audible');
-    expect(isUnmuted).toBeFalsy();
+    await expect(unmuteLabelLocator).toBeChecked({
+      checked: false,
+    });
   });
 
   test('should be able to run nested actions', async ({ page }) => {
@@ -81,11 +88,13 @@ test.describe('Test basic interactions of Command Palette', () => {
 
     await page.keyboard.type('Profile');
 
-    const optionLocator = page.locator('[role="combobox"] >> [role="option"]');
+    const optionLocator = page.locator(
+      'role=combobox[name*="Search for an action"] >> role=option'
+    );
 
     await optionLocator.locator('text=Set profile').click();
 
-    const searchLocator = page.locator('input[type="search"]');
+    const searchLocator = page.locator('role=searchbox[name*="Search for an action"]');
     await expect(searchLocator).toHaveValue('');
 
     const optionsNum = await optionLocator.count();

fix-jest-dom.mjs

@@ -0,0 +1,13 @@
+import fs from 'fs';
+import path from 'path';
+
+const typesPath = path.resolve('node_modules', '@types', 'testing-library__jest-dom', 'index.d.ts');
+const refMatcher = /[\r\n]+\/\/\/ <reference types="jest" \/>/;
+
+fs.readFile(typesPath, 'utf8', (err, data) => {
+  if (err) throw err;
+
+  fs.writeFile(typesPath, data.replace(refMatcher, ''), 'utf8', function (err) {
+    if (err) throw err;
+  });
+});