✨(app-desk) design static Header

Design static Header, we will add the interactivity later.

src/frontend/apps/e2e/__tests__/app-desk/app.spec.ts

@@ -7,9 +7,10 @@ test.beforeEach(async ({ page }) => {
   await keyCloakSignIn(page);
 });
 
-test.describe('App', () => {
-  test('should display the homepage after keycloak login', async ({ page }) => {
-    await expect(page.locator('h2')).toContainText('Hello world!');
+test.describe("App", () => {
+  test("should display the main elements", async ({ page }) => {
+    await expect(page.locator('header').first()).toContainText('Desk');
+    await expect(page.getByLabel('Team name')).toBeVisible();
   });
 
   test('creates 2 teams and displayed them', async ({ page }) => {

src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts

@@ -0,0 +1,38 @@
+import { expect, test } from "@playwright/test";
+
+import { keyCloakSignIn } from "./common";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/");
+  await keyCloakSignIn(page);
+});
+
+test.describe("Header", () => {
+  test("checks all the elements are visible", async ({ page }) => {
+    const header = page.locator("header").first();
+
+    await expect(header.getByAltText("Marianne Logo")).toBeVisible();
+
+    await expect(
+      header.getByAltText("Freedom Equality Fraternity Logo"),
+    ).toBeVisible();
+
+    await expect(header.getByAltText("Desk Logo")).toBeVisible();
+    await expect(header.locator("h2").getByText("Desk")).toHaveCSS(
+      "color",
+      "rgb(0, 0, 145)",
+    );
+    await expect(header.locator("h2").getByText("Desk")).toHaveCSS(
+      "font-family",
+      "marianne",
+    );
+
+    await expect(
+      header.getByRole("button", { name: "Access to FAQ" }),
+    ).toBeVisible();
+    await expect(header.getByAltText("FAQ Icon")).toBeVisible();
+    await expect(header.getByText("FAQ")).toBeVisible();
+
+    await expect(header.getByAltText("Cells icon")).toBeVisible();
+  });
+});