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 <[email protected]>

.gitignore

@@ -19,3 +19,4 @@ CovQuestions/
 static/changelog.md
 package-lock.json
 hosting/data
+screenshots/

testcafe/testUtils.ts → 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);

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;
+}

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();
 });

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();
+}

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");

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();
+});