From 5feab1b84b4f93389556e1016f5ac38b1db82e17 Mon Sep 17 00:00:00 2001
From: Moritz Kiefer <moritz.kiefer@purelyfunctional.org>
Date: Mon, 8 Jun 2020 11:26:03 +0200
Subject: [PATCH] Fix waitForSelector calls in create-daml-app-tests (#6253)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`waitForSelector` returns immediately if the selector is already
present (which is documented). This means that the waitForSelector
after the second follow isn’t doing anything since we already waited
for after the first follow. `waitForFunction` seemed like the simplest
solution and doesn’t require patching the HTML which is a bit finnicky
in the compat tests.

changelog_begin
changelog_end
---
 compatibility/bazel_tools/create-daml-app/index.test.ts | 8 ++++++--
 templates/create-daml-app-test-resources/index.test.ts  | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/compatibility/bazel_tools/create-daml-app/index.test.ts b/compatibility/bazel_tools/create-daml-app/index.test.ts
index f381fc47b136..0f3be962b46f 100644
--- a/compatibility/bazel_tools/create-daml-app/index.test.ts
+++ b/compatibility/bazel_tools/create-daml-app/index.test.ts
@@ -307,7 +307,9 @@ test("log in as three different users and start following each other", async ()
 
   // Add Party 3 as well and check both are in the list.
   await follow(page1, party3);
-  await page1.waitForSelector(".test-select-following");
+  await page1.waitForFunction(
+    () => document.querySelectorAll(".test-select-following").length == 2
+  );
   const followingList11 = await page1.$$eval(
     ".test-select-following",
     (following) => following.map((e) => e.innerHTML)
@@ -344,7 +346,9 @@ test("log in as three different users and start following each other", async ()
   await follow(page2, party3);
 
   // Check the following list is updated correctly.
-  await page2.waitForSelector(".test-select-following");
+  await page2.waitForFunction(
+    () => document.querySelectorAll(".test-select-following").length == 2
+  );
   const followingList2 = await page2.$$eval(
     ".test-select-following",
     (following) => following.map((e) => e.innerHTML)
diff --git a/templates/create-daml-app-test-resources/index.test.ts b/templates/create-daml-app-test-resources/index.test.ts
index d1a688b62ed5..7053f4a30eed 100644
--- a/templates/create-daml-app-test-resources/index.test.ts
+++ b/templates/create-daml-app-test-resources/index.test.ts
@@ -234,7 +234,9 @@ test('log in as three different users and start following each other', async ()
 
    // Add Party 3 as well and check both are in the list.
    await follow(page1, party3);
-   await page1.waitForSelector('.test-select-following');
+   await page1.waitForFunction(
+    () => document.querySelectorAll(".test-select-following").length == 2
+   );
    const followingList11 = await page1.$$eval('.test-select-following', following => following.map(e => e.innerHTML));
    expect(followingList11).toHaveLength(2);
    expect(followingList11).toContain(party2);
@@ -266,7 +268,9 @@ test('log in as three different users and start following each other', async ()
   await follow(page2, party3);
 
   // Check the following list is updated correctly.
-  await page2.waitForSelector('.test-select-following');
+  await page2.waitForFunction(
+    () => document.querySelectorAll(".test-select-following").length == 2
+  );
   const followingList2 = await page2.$$eval('.test-select-following', following => following.map(e => e.innerHTML));
   expect(followingList2).toHaveLength(2);
   expect(followingList2).toContain(party1);