From db89b41056ce3d5ae2ba4a609c421d673c2f57d1 Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <c.wilkinson@elifesciences.org>
Date: Tue, 24 Aug 2021 12:09:31 +0100
Subject: [PATCH] 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                  | 12 +++++++
 .../welcome-Desktop-Chrome-linux.png          |  3 ++
 .../welcome-iPhone-11-linux.png               |  3 ++
 integration/src/utils.ts                      | 31 ++++++++++++++++++-
 4 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 integration/src/home.spec.ts-snapshots/welcome-Desktop-Chrome-linux.png
 create mode 100644 integration/src/home.spec.ts-snapshots/welcome-iPhone-11-linux.png

diff --git a/integration/src/home.spec.ts b/integration/src/home.spec.ts
index 1268f938..5feb1c38 100644
--- a/integration/src/home.spec.ts
+++ b/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")');
diff --git a/integration/src/home.spec.ts-snapshots/welcome-Desktop-Chrome-linux.png b/integration/src/home.spec.ts-snapshots/welcome-Desktop-Chrome-linux.png
new file mode 100644
index 00000000..92d67423
--- /dev/null
+++ b/integration/src/home.spec.ts-snapshots/welcome-Desktop-Chrome-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4fea68a1f6d7282c83cc7783dcd38eef47069057d40b2e302000696d5e957847
+size 260223
diff --git a/integration/src/home.spec.ts-snapshots/welcome-iPhone-11-linux.png b/integration/src/home.spec.ts-snapshots/welcome-iPhone-11-linux.png
new file mode 100644
index 00000000..8dbf6280
--- /dev/null
+++ b/integration/src/home.spec.ts-snapshots/welcome-iPhone-11-linux.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fe1000207543bd3a8e0d32aec1288b30b7c8406afb0f953e56ccdf37a77715e8
+size 558921
diff --git a/integration/src/utils.ts b/integration/src/utils.ts
index f42ecf9e..53db4690 100644
--- a/integration/src/utils.ts
+++ b/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
+      });
+    });
+  });
+}