From ffc84fd724f87ad922e5796ce4c50d0c5489a544 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89ric=20Louvard?=
 <9567496+cnrun@users.noreply.github.com>
Date: Tue, 3 Nov 2020 20:38:55 +0100
Subject: [PATCH] feat: Tests/enhance e2e test coverage (#326)

* locate search field

* use search field

* open and close panel for risk description

* add test for "hamburger menu"

* run testcafe file with tests.ts extention.

* Test should test local server.

* add screenshots

* rename .test.ts to spec.ts

* format code

* format code

* take some screenshots

* add some screenshots

* fix typo

* screenshots in ignore list

* remove existence and visibility tests because of redundancy

* tests should run localy

* remove unused configuration entry

* chore: refactor testcafe e2e tests, make some more code reusable (#349)

Co-authored-by: ChristophWersal <45358216+ChristophWersal@users.noreply.github.com>
---
 .gitignore                                    |  1 +
 .../{testUtils.ts => elements/muiButton.ts}   |  5 --
 testcafe/elements/muiTypography.ts            | 10 ++++
 testcafe/introScreens.spec.ts                 | 25 +--------
 testcafe/pages/Intro.ts                       | 33 +++++++++++
 testcafe/pages/MainMap.ts                     | 17 ++++++
 testcafe/searchField.spec.ts                  | 55 +++++++++++++++++++
 7 files changed, 119 insertions(+), 27 deletions(-)
 rename testcafe/{testUtils.ts => elements/muiButton.ts} (58%)
 create mode 100644 testcafe/elements/muiTypography.ts
 create mode 100644 testcafe/pages/Intro.ts
 create mode 100644 testcafe/pages/MainMap.ts
 create mode 100644 testcafe/searchField.spec.ts

diff --git a/.gitignore b/.gitignore
index c38af412..96cf4526 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,4 @@ CovQuestions/
 static/changelog.md
 package-lock.json
 hosting/data
+screenshots/
diff --git a/testcafe/testUtils.ts b/testcafe/elements/muiButton.ts
similarity index 58%
rename from testcafe/testUtils.ts
rename to testcafe/elements/muiButton.ts
index ecdd8bf9..9b3cb43e 100644
--- a/testcafe/testUtils.ts
+++ b/testcafe/elements/muiButton.ts
@@ -1,10 +1,5 @@
 import { Selector } from "testcafe";
 
-// This should work with text inside a Material-UI <Typography>
-export function textExists(titleForIntro1: string) {
-  return Selector("p").withText(titleForIntro1).exists;
-}
-
 // This should work with the label of a Material-UI <Button>
 export function buttonWithText(nextButtonText: string) {
   return Selector("a").withAttribute("role", "button").child().withText(nextButtonText);
diff --git a/testcafe/elements/muiTypography.ts b/testcafe/elements/muiTypography.ts
new file mode 100644
index 00000000..20b31273
--- /dev/null
+++ b/testcafe/elements/muiTypography.ts
@@ -0,0 +1,10 @@
+import { Selector } from "testcafe";
+
+const anythingSelector = Selector(() => {
+  return document.querySelectorAll("*");
+});
+
+// This should work with text inside a Material-UI <Typography>
+export function textExists(titleForIntro1: string) {
+  return Selector(anythingSelector).withText(titleForIntro1).exists;
+}
diff --git a/testcafe/introScreens.spec.ts b/testcafe/introScreens.spec.ts
index 7d216a0a..f2ccf3b2 100644
--- a/testcafe/introScreens.spec.ts
+++ b/testcafe/introScreens.spec.ts
@@ -1,27 +1,8 @@
 import { Config } from "./testcafe.config";
-import { buttonWithText, textExists } from "./testUtils";
+import { finishIntroScreens } from "./pages/Intro";
 
 fixture`Intro screens test`.page`${Config.baseUrl}`;
 
-test("Finish intro screens", async (t) => {
-  const nextButton = buttonWithText("Weiter");
-
-  const titleForIntro1 = "Willkommen bei der CovMap";
-  const titleForIntro2 = "Was ist die CovMap?";
-  const titleForIntro3 = "Was zeigt mir die CovMap an?";
-  const titleTextForPostalCode = "Für Dein regionales Risiko brauchen wir noch die Postleitzahl Deines Wohnortes";
-
-  await t.expect(textExists(titleForIntro1)).ok();
-  await t.click(nextButton);
-
-  await t.expect(textExists(titleForIntro2)).ok();
-  await t.click(nextButton);
-
-  await t.expect(textExists(titleForIntro3)).ok();
-  await t.click(nextButton);
-
-  await t.expect(textExists(titleTextForPostalCode)).ok();
-  await t.pressKey("1 2 3 4 5 tab space tab tab enter");
-
-  await t.expect(textExists(titleTextForPostalCode)).notOk();
+test("Finish intro screens", async () => {
+  await finishIntroScreens();
 });
diff --git a/testcafe/pages/Intro.ts b/testcafe/pages/Intro.ts
new file mode 100644
index 00000000..e84bbec3
--- /dev/null
+++ b/testcafe/pages/Intro.ts
@@ -0,0 +1,33 @@
+import { t } from "testcafe";
+
+import { textExists } from "../elements/muiTypography";
+import { buttonWithText } from "../elements/muiButton";
+
+export async function finishIntroScreens() {
+  const nextButton = buttonWithText("Weiter");
+
+  const titleForIntro1 = "Willkommen bei der CovMap";
+  const titleForIntro2 = "Was ist die CovMap?";
+  const titleForIntro3 = "Was zeigt mir die CovMap an?";
+  const titleTextForPostalCode = "Für Dein regionales Risiko brauchen wir noch die Postleitzahl Deines Wohnortes";
+
+  await t.takeScreenshot();
+
+  await t.expect(textExists(titleForIntro1)).ok();
+  await t.click(nextButton);
+
+  await t.takeScreenshot();
+  await t.expect(textExists(titleForIntro2)).ok();
+  await t.click(nextButton);
+
+  await t.takeScreenshot();
+  await t.expect(textExists(titleForIntro3)).ok();
+  await t.click(nextButton);
+
+  await t.takeScreenshot();
+  await t.expect(textExists(titleTextForPostalCode)).ok();
+  await t.pressKey("1 2 3 4 5 tab space tab tab enter");
+
+  await t.takeScreenshot();
+  await t.expect(textExists(titleTextForPostalCode)).notOk();
+}
diff --git a/testcafe/pages/MainMap.ts b/testcafe/pages/MainMap.ts
new file mode 100644
index 00000000..4be76ea0
--- /dev/null
+++ b/testcafe/pages/MainMap.ts
@@ -0,0 +1,17 @@
+import { Selector } from "testcafe";
+
+export const searchField = Selector("#autocomplete").withAttribute("placeholder", "PLZ oder Landkreis");
+
+export const expandInfoBoxIcon = Selector("button")
+  .withAttribute("aria-label", "show more")
+  .withAttribute("aria-expanded", "false");
+export const shrinkInfoBoxIcon = Selector("button")
+  .withAttribute("aria-label", "show more")
+  .withAttribute("aria-expanded", "true");
+
+export const openHamburgerMenu = Selector("button")
+  .withAttribute("aria-label", "Main Menu")
+  .withAttribute("aria-controls", "menu-appbar");
+export const closeHamburgerMenu = Selector("button")
+  .withAttribute("aria-label", "Close Main Menu")
+  .withAttribute("aria-controls", "menu-appbar");
diff --git a/testcafe/searchField.spec.ts b/testcafe/searchField.spec.ts
new file mode 100644
index 00000000..eaa14bf4
--- /dev/null
+++ b/testcafe/searchField.spec.ts
@@ -0,0 +1,55 @@
+import { Config } from "./testcafe.config";
+import { finishIntroScreens } from "./pages/Intro";
+import {
+  closeHamburgerMenu,
+  expandInfoBoxIcon,
+  openHamburgerMenu,
+  searchField,
+  shrinkInfoBoxIcon,
+} from "./pages/MainMap";
+import { textExists } from "./elements/muiTypography";
+
+fixture`Search field test`.page`${Config.baseUrl}`
+  .beforeEach(async () => {
+    await finishIntroScreens();
+  })
+  .afterEach(async () => {
+    // place holder
+  });
+
+test("find search field", async (t) => {
+  await t.click(searchField).typeText(searchField, "Stuttgart").pressKey("enter");
+
+  // wait until the map has scrolled.
+  await t.wait(1000);
+  await t.takeScreenshot();
+
+  // open panel for risk description
+  await t.click(expandInfoBoxIcon).expect(textExists("Kontaktverhalten der Bevölkerung")).ok();
+
+  // close panel for risk description
+  await t.click(shrinkInfoBoxIcon).expect(textExists("Kontaktverhalten der Bevölkerung")).notOk();
+  await t.takeScreenshot();
+});
+
+test("Hamburger menu", async (t) => {
+  // open panel and check if close button is visible, hamburger menu should be invisible
+  await t
+    .expect(closeHamburgerMenu.visible)
+    .notOk()
+    .takeScreenshot()
+    .click(openHamburgerMenu)
+    .expect(textExists("Über die CovMap"))
+    .ok();
+  // the hamburger menu will not be made invisible when the panel is visible, so the assertion do not works.
+  // .expect(openHamburgerMenu.visible).notOk();
+
+  await t.takeScreenshot();
+
+  // console.log("websiteText "+ (await closeHamburgerMenu.textContent)+" "+(await closeHamburgerMenu.visible));
+
+  // close menu panel and check if hamburger menu is visible
+  await t.click(closeHamburgerMenu).expect(closeHamburgerMenu.visible).notOk().expect(openHamburgerMenu.visible).ok();
+
+  await t.takeScreenshot();
+});