test: add WebKit browser testing and fix webkit-related issues

packages/atomic/playwright.config.ts

@@ -35,10 +35,17 @@ export default defineConfig({
     //   name: 'firefox',
     //   use: {...devices['Desktop Firefox'], viewport: DEFAULT_DESKTOP_VIEWPORT},
     // },
-    // {
-    //   name: 'webkit',
-    //   use: {...devices['Desktop Safari'], viewport: DEFAULT_DESKTOP_VIEWPORT},
-    // },
+    ...(process.env.CI
+      ? [
+          {
+            name: 'webkit',
+            use: {
+              ...devices['Desktop Safari'],
+              viewport: DEFAULT_DESKTOP_VIEWPORT,
+            },
+          },
+        ]
+      : []),
   ],
   expect: {
     timeout: 7 * 1000,

packages/atomic/src/components/commerce/atomic-product-children/atomic-product-children.spec.ts

@@ -2,6 +2,7 @@ import type {ChildProduct} from '@coveo/headless/commerce';
 import {html} from 'lit';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {describe, expect, it, vi} from 'vitest';
+import {server} from 'vitest/browser';
 import type {AtomicProduct} from '@/src/components/commerce/atomic-product/atomic-product';
 import {closest} from '@/src/utils/dom-utils';
 import {renderInAtomicProduct} from '@/vitest-utils/testing-helpers/fixtures/atomic/commerce/atomic-product-fixture';
@@ -162,51 +163,54 @@ describe('atomic-product-children', () => {
     });
   });
 
-  describe('when a child product is touched', () => {
-    const touchChild = async () => {
-      const {childProducts} = await renderProductChildren();
-      childProducts[3].dispatchEvent(
-        new TouchEvent('touchstart', {
-          touches: [
-            new Touch({
-              identifier: 0,
-              target: childProducts[3],
-              clientX: 100,
-              clientY: 100,
-              screenX: 100,
-              screenY: 100,
-              pageX: 100,
-              pageY: 100,
-              radiusX: 10,
-              radiusY: 10,
-              rotationAngle: 0,
-              force: 0.5,
-            }),
-          ],
-        })
-      );
-      return childProducts;
-    };
-
-    it('should change the active child product', async () => {
-      const childProducts = await touchChild();
-      await expect
-        .poll(() => childProducts[3])
-        .toHaveClass('box-border rounded border border-primary');
-      await expect
-        .poll(() => childProducts[0])
-        .not.toHaveClass('box-border rounded border border-primary');
-    });
+  describe.skipIf(server.browser === 'webkit')(
+    'when a child product is touched',
+    () => {
+      const touchChild = async () => {
+        const {childProducts} = await renderProductChildren();
+        childProducts[3].dispatchEvent(
+          new TouchEvent('touchstart', {
+            touches: [
+              new Touch({
+                identifier: 0,
+                target: childProducts[3],
+                clientX: 100,
+                clientY: 100,
+                screenX: 100,
+                screenY: 100,
+                pageX: 100,
+                pageY: 100,
+                radiusX: 10,
+                radiusY: 10,
+                rotationAngle: 0,
+                force: 0.5,
+              }),
+            ],
+          })
+        );
+        return childProducts;
+      };
+
+      it('should change the active child product', async () => {
+        const childProducts = await touchChild();
+        await expect
+          .poll(() => childProducts[3])
+          .toHaveClass('box-border rounded border border-primary');
+        await expect
+          .poll(() => childProducts[0])
+          .not.toHaveClass('box-border rounded border border-primary');
+      });
 
-    it('should dispatch the "atomic/selectChildProduct" event', async () => {
-      const dispatchSpy = vi.spyOn(
-        AtomicProductChildren.prototype,
-        'dispatchEvent'
-      );
-      await touchChild();
-      expect(dispatchSpy).toHaveBeenCalled();
-    });
-  });
+      it('should dispatch the "atomic/selectChildProduct" event', async () => {
+        const dispatchSpy = vi.spyOn(
+          AtomicProductChildren.prototype,
+          'dispatchEvent'
+        );
+        await touchChild();
+        expect(dispatchSpy).toHaveBeenCalled();
+      });
+    }
+  );
 
   describe('when a child product is clicked', () => {
     it('should stop propagation if the parent element is an <a> tag', async () => {

packages/atomic/vitest.config.js

@@ -113,6 +113,16 @@ const atomicDefault = defineConfig({
             actionTimeout: 3000,
           },
         },
+        ...(process.env.CI
+          ? [
+              {
+                browser: 'webkit',
+                context: {
+                  actionTimeout: 3000,
+                },
+              },
+            ]
+          : []),
       ],
     },
   },