Merge pull request #2034 from filipesilva/flaky-e2e

tighten flaky e2e

.github/workflows/build.yml

@@ -71,6 +71,18 @@ jobs:
        - uses: ./.github/custom-actions/clojure-env
        - uses: ./.github/custom-actions/node-env
 
+       # Caching the build is generally a terrible idea, but e2e is really slow
+       # and shadow-cljs is usually pretty good at cache invalidation.
+       # Still, if you think this cache is breaking builds, just bump the version number.
+       - name: Restore shadow-cljs build cache
+         uses: actions/cache@v2
+         id: restore-shadow-cljs-build-cache
+         with:
+           path: ./.shadow-cljs
+           key: ${{ runner.os }}-v1-shadow-cljs-build-cache-${{ hashFiles('yarn.lock') }}
+           restore-keys: |
+             ${{ runner.os }}-v1-shadow-cljs-build-cache
+
        - name: Compile JS assets for dev
          run: yarn client:dev-build
 

test/e2e/athena-navigation.spec.ts

@@ -1,36 +1,38 @@
 import { expect } from '@playwright/test';
 import { test } from './electron-test';
+import { deleteCurrentPage, inputInAthena, pageTitleLocator } from "./utils";
+
 
 test('athena create new page then enter', async ({ page }) => {
+  const title = 'create-enter'
+  await inputInAthena(page, title);
 
-  // Click button:has-text("Find or create a page")
-  await page.click('button:has-text("Find or create a page")');
-  // Fill [placeholder="Find or Create Page"]
-  await page.fill('[placeholder="Find or Create Page"]', 'arst');
   // Press Enter
   await Promise.all([
-    page.press('[placeholder="Find or Create Page"]', 'Enter')]);
-  await expect(page.locator(".node-page > header > h1 > textarea")).toHaveValue('arst');
+    page.press('[placeholder="Find or Create Page"]', 'Enter'),
+    page.waitForNavigation()
+  ]);
+  await expect(page.locator(pageTitleLocator)).toHaveText(title);
 
+  await deleteCurrentPage(page);
 });
 
 test('athena create new page then click create page', async ({ page }) => {
+  const title = 'create-click';
+  await inputInAthena(page, title);
 
-// Click button:has-text("Find or create a page")
-  await page.click('button:has-text("Find or create a page")');
-  // Fill [placeholder="Find or Create Page"]
-  await page.fill('[placeholder="Find or Create Page"]', 'arst');
-  // Click text=Create Page: arst
   await Promise.all([
-    page.click('text=Create Page: arst')]);
-  await expect(page.locator(".node-page > header > h1 > textarea")).toHaveValue('arst');
+    page.click('text=Create Page: ' + title),
+    page.waitForNavigation()
+  ]);
+  await expect(page.locator(pageTitleLocator)).toHaveText(title);
+
+  await deleteCurrentPage(page);
 });
 
 test('athena search block then enter on result', async ({ page }) => {
-  // Click button:has-text("Find or create a page")
-  await page.click('button:has-text("Find or create a page")');
-  // Fill [placeholder="Find or Create Page"]
-  await page.fill('[placeholder="Find or Create Page"]', 'welcome');
+  await inputInAthena(page, 'welcome');
+
   // Press ArrowDown
   await page.press('[placeholder="Find or Create Page"]', 'ArrowDown');
   // Press ArrowDown
@@ -42,10 +44,7 @@ test('athena search block then enter on result', async ({ page }) => {
 });
 
 test('athena search block then click on result', async ({ page }) => {
-// Click button:has-text("Find or create a page")
-  await page.click('button:has-text("Find or create a page")');
-  // Fill [placeholder="Find or Create Page"]
-  await page.fill('[placeholder="Find or Create Page"]', 'welcome');
+  await inputInAthena(page, 'welcome');
   // Click text=WelcomeWelcome to Athens, Open-Source Networked Thought!
   await page.click('text=WelcomeWelcome to Athens, Open-Source Networked Thought!');
   await expect(page.locator(".block-page > h1 > textarea")).toHaveValue('Welcome to Athens, Open-Source Networked Thought!');

test/e2e/utils.ts

@@ -42,13 +42,16 @@ export const saveLastBlock = async (page:Page, text:string) => {
 };
 
 export const saveLastBlockAndEnter = async (page:Page, text:string) => {
+    if (text=="") {
+        // This is a side effect of how we're waiting for the new block to appear below.
+        // If someone finds a better way to do this you can remove this restriction.
+        throw new Error("Cannot use saveLastBlockAndEnter with empty string.");
+    }
     await inputInLastBlock(page, text);
     await page.press(lastBlockSelector, 'Enter');
-    // Wait a bit for transaction and focus events to be resolved between saves.
-    // Without waiting, it's possible for multiple calls to end up in the same block instead of
-    // different blocks, because by the time the second call runs the new block hasn't appeared yet.
+    // Wait for the new block to be visible.
     // TODO: we shouldn't need to do this, instead we should have deterministic states from input.
-    await page.waitForTimeout(200);
+    await page.locator('.textarea.is-editing:text-is("")').waitFor();
 };
 
 export const indentLastBlock = async (page:Page) => {
@@ -77,18 +80,25 @@ export const waitForBoot = async (page:Page) => {
     await page.waitForSelector("text=Find");
 }
 
-export const createPage = async (page:Page, title:string) => {
-    // Invoke Athena
+export const inputInAthena = async (page:Page, query:string) => {
     await page.click('button:has-text("Find or create a page")');
+    await page.fill('[placeholder="Find or Create Page"]', query);
+}
+
 
-    // Fill [placeholder="Find or Create Page"]
-    await page.fill('[placeholder="Find or Create Page"]', title);
+export const pageTitleLocator = ".node-page > header > h1 > span";
+
+export const createPage = async (page:Page, title:string) => {
+    await inputInAthena(page, title);
 
     // Press Enter
     await Promise.all([
         page.press('[placeholder="Find or Create Page"]', 'Enter'),
         page.waitForNavigation()
     ]);
+
+    // Wait for the page to show the title.
+    await page.locator(`${pageTitleLocator}:has-text("${title}")`).waitFor();
 }
 
 export const deleteCurrentPage = async (page:Page) => {