chore(eslint): add playwright specific rules

- fix linting errors

Author: SimonGolms

.eslintrc.js

@@ -104,6 +104,9 @@ module.exports = {
     ],
     "import/prefer-default-export": "off",
     "no-console": ["warn", { allow: ["warn", "error"] }],
+    "playwright/prefer-to-be": "error",
+    "playwright/prefer-to-have-length": "error",
+    "playwright/require-top-level-describe": "error",
     "prettier/prettier": "error",
     "react/jsx-sort-props": [
       "error",

src/components/Avatar/Avatar.test.tsx

@@ -10,17 +10,17 @@ import { Avatar } from "./Avatar";
 
 const { mail } = MOCK_RESPONSE_MICROSOFT_GRAPH_GET_ME;
 
-test.beforeEach(async ({ page }) => {
-  await page.route(`**/v1.0/users/${mail}/photos/64x64/$value`, async (route) => {
-    return route.fulfill({
-      body: Buffer.from(MOCK_RESPONST_MICROSOFT_GRAPH_GET_USERS_PHOTOS_64_VALUE, "base64"),
-      contentType: "image/jpeg",
-      status: 200,
+test.describe("Avatar", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route(`**/v1.0/users/${mail}/photos/64x64/$value`, async (route) => {
+      return route.fulfill({
+        body: Buffer.from(MOCK_RESPONST_MICROSOFT_GRAPH_GET_USERS_PHOTOS_64_VALUE, "base64"),
+        contentType: "image/jpeg",
+        status: 200,
+      });
     });
   });
-});
 
-test.describe("Avatar", () => {
   test("renders photo with valid id", async ({ mount }) => {
     const component = await mount(
       <BrowserRouter>

src/components/Greeter/Greeter.test.tsx

@@ -5,17 +5,17 @@ import { MOCK_RESPONSE_MICROSOFT_GRAPH_GET_ME } from "../../utils/test/api.me.mo
 import { MsalMock } from "../../utils/test/MsalMock";
 import { Greeter } from "./Greeter";
 
-test.beforeEach(async ({ page }) => {
-  await page.route("**/v1.0/me/", (route) => {
-    return route.fulfill({
-      body: JSON.stringify(MOCK_RESPONSE_MICROSOFT_GRAPH_GET_ME),
-      contentType: "application/json",
-      status: 200,
+test.describe("Greeter", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route("**/v1.0/me/", (route) => {
+      return route.fulfill({
+        body: JSON.stringify(MOCK_RESPONSE_MICROSOFT_GRAPH_GET_ME),
+        contentType: "application/json",
+        status: 200,
+      });
     });
   });
-});
 
-test.describe("Greeter", () => {
   test("renders", async ({ mount }) => {
     const component = await mount(
       <BrowserRouter>

src/pages/ProtectedPages.test.tsx

@@ -5,17 +5,17 @@ import { MOCK_RESPONSE_MICROSOFT_GRAPH_GET_ME } from "../utils/test/api.me.mock"
 import { MsalMock } from "../utils/test/MsalMock";
 import { ProtectedPages } from "./ProtectedPages";
 
-test.beforeEach(async ({ page }) => {
-  await page.route("**/v1.0/me/", (route) => {
-    return route.fulfill({
-      body: JSON.stringify(MOCK_RESPONSE_MICROSOFT_GRAPH_GET_ME),
-      contentType: "application/json",
-      status: 200,
+test.describe("ProtectedPages", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route("**/v1.0/me/", (route) => {
+      return route.fulfill({
+        body: JSON.stringify(MOCK_RESPONSE_MICROSOFT_GRAPH_GET_ME),
+        contentType: "application/json",
+        status: 200,
+      });
     });
   });
-});
 
-test.describe("ProtectedPages", () => {
   test("renders", async ({ mount }) => {
     const component = await mount(
       <BrowserRouter>