test(integration): add a case for the welcome message

Adds a test case for checking that new visitors see a welcome message.

Refs #388

integration/src/home.spec.ts

@@ -2,6 +2,18 @@ import { test, expect } from '@playwright/test';
 import { screenshot } from './utils';
 
 test.describe('homepage', () => {
+  test('shows a welcome message to first-time visitors', async ({ page }) => {
+    await page.goto('/');
+
+    const welcome = await page.waitForSelector('[aria-label="welcome"]');
+
+    expect(await welcome.innerText()).toContain(
+      'Welcome to the new PREreview.org',
+    );
+
+    expect(await screenshot(page, welcome)).toMatchSnapshot('welcome.png');
+  });
+
   test('looks correct', async ({ page }) => {
     await page.goto('/');
     await page.click(':text("Get started")');

integration/src/utils.ts

@@ -52,7 +52,13 @@ async function hideTwitterTimelines(page: Page) {
 async function resetCarousels(page: Page) {
   const carouselControls = await page.$$('.slick-dots :text("1")');
 
-  await Promise.all(carouselControls.map(controls => controls.click()));
+  await Promise.all(
+    carouselControls.map(async controls => {
+      if (await isIntersectingViewport(controls)) {
+        await controls.click();
+      }
+    }),
+  );
 }
 
 async function removeTransitions(page: Page) {
@@ -66,3 +72,26 @@ async function removeTransitions(page: Page) {
       `,
   });
 }
+
+async function isIntersectingViewport(element: ElementHandle<Element>) {
+  const visibleRatio = await getVisibleRatio(element);
+
+  return visibleRatio > 0;
+}
+
+async function getVisibleRatio(element: ElementHandle<Element>) {
+  return await element.evaluate(async element => {
+    return await new Promise<number>(resolve => {
+      const observer = new IntersectionObserver(entries => {
+        resolve(entries[0].intersectionRatio);
+        observer.disconnect();
+      });
+
+      observer.observe(element);
+
+      requestAnimationFrame(() => {
+        // Do nothing
+      });
+    });
+  });
+}