format and fix command

frontend/mockdata/mockConsultants.ts

@@ -1,10 +1,12 @@
 import { Variant } from "@/types";
 
-export const MockConsultants: Variant[] = [{
-  id: 'id',
-  name: 'Test Consultant',
-  email: '[email protected]',
-  competences: ['Frontend'],
-  department: 'My Department',
-  bookings: [{year: 2023, weekNumber: 10, bookedHours: 10}]
-}]
+export const MockConsultants: Variant[] = [
+  {
+    id: "id",
+    name: "Test Consultant",
+    email: "[email protected]",
+    competences: ["Frontend"],
+    department: "My Department",
+    bookings: [{ year: 2023, weekNumber: 10, bookedHours: 10 }],
+  },
+];

frontend/playwright.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
 /**
  * Read environment variables from file.
@@ -10,7 +10,7 @@ import { defineConfig, devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './tests',
+  testDir: "./tests",
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -20,31 +20,31 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://127.0.0.1:3000',
+    baseURL: "http://127.0.0.1:3000",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: "on-first-retry",
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
     },
 
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
     },
 
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
     },
 
     /* Test against mobile viewports. */
@@ -70,8 +70,8 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'yarn dev',
-    url: 'http://127.0.0.1:3000',
+    command: "yarn start-test",
+    url: "http://127.0.0.1:3000",
     reuseExistingServer: !process.env.CI,
   },
 });

frontend/src/auth/fetchWithToken.ts

@@ -3,7 +3,7 @@ import { loginRequest } from "@/authConfig";
 import { MockConsultants } from "../../mockdata/mockConsultants";
 
 export async function fetchWithToken(path: string) {
-  if(process.env.NEXT_PUBLIC_NO_AUTH){
+  if (process.env.NEXT_PUBLIC_NO_AUTH) {
     return mockedCall(path);
   }
 
@@ -45,9 +45,8 @@ export async function fetchWithToken(path: string) {
   }
 }
 
-function mockedCall(path: string){
-  if(path.includes('/variants')){
-      return MockConsultants;
-    }
+function mockedCall(path: string) {
+  if (path.includes("/variants")) {
+    return MockConsultants;
+  }
 }
-

frontend/src/components/PageLayout.tsx

@@ -34,10 +34,17 @@ export default function PageLayout({
 }
 
 function Authenticated({ children }: { children: React.ReactNode }) {
-  return process.env.NEXT_PUBLIC_NO_AUTH ? <>{children}</> : <AuthenticatedTemplate>{children}</AuthenticatedTemplate>;
+  return process.env.NEXT_PUBLIC_NO_AUTH ? (
+    <>{children}</>
+  ) : (
+    <AuthenticatedTemplate>{children}</AuthenticatedTemplate>
+  );
 }
 
 function Unauthenticated({ children }: { children: React.ReactNode }) {
-  return process.env.NEXT_PUBLIC_NO_AUTH ?
-    <></> : <UnauthenticatedTemplate>{children}</UnauthenticatedTemplate>;
-}
+  return process.env.NEXT_PUBLIC_NO_AUTH ? (
+    <></>
+  ) : (
+    <UnauthenticatedTemplate>{children}</UnauthenticatedTemplate>
+  );
+}

frontend/src/hooks/useVibesApi.ts

@@ -1,31 +1,37 @@
-"use client"
-import { Variant } from '@/types';
-import { fetchWithToken } from '@/auth/fetchWithToken';
-import { useIsAuthenticated } from '@azure/msal-react';
+"use client";
+import { Variant } from "@/types";
+import { fetchWithToken } from "@/auth/fetchWithToken";
+import { useIsAuthenticated } from "@azure/msal-react";
 import { useQuery, useQueryClient } from "react-query";
 import { useEffect } from "react";
 
 function useVibesApi(includeOccupied: boolean) {
-  const isAuthenticated = useIsAuthenticated() || process.env.NEXT_PUBLIC_NO_AUTH;
+  const isAuthenticated =
+    useIsAuthenticated() || process.env.NEXT_PUBLIC_NO_AUTH;
   const client = useQueryClient();
 
   //TODO: We need a better way of handling state/cache. This works for now though, but it's a bit hacky ngl
-  useEffect(()=> client.clear(), [includeOccupied, client])
+  useEffect(() => client.clear(), [includeOccupied, client]);
 
-  return useQuery({queryKey: 'vibes', queryFn: async () => {
-    if (isAuthenticated) {
-      try {
-        const response: Variant[] = await fetchWithToken(`/api/v0/variants?weeks=8&includeOccupied=${includeOccupied}`);
-        return response;
-
-      } catch (err) {
-        console.error(err)
-        return []
+  return useQuery({
+    queryKey: "vibes",
+    queryFn: async () => {
+      if (isAuthenticated) {
+        try {
+          const response: Variant[] = await fetchWithToken(
+            `/api/v0/variants?weeks=8&includeOccupied=${includeOccupied}`,
+          );
+          return response;
+        } catch (err) {
+          console.error(err);
+          return [];
+        }
       }
-    }
-    // If not authenticated, return an empty array
-    return [];
-  }, refetchOnWindowFocus: false
-})}
+      // If not authenticated, return an empty array
+      return [];
+    },
+    refetchOnWindowFocus: false,
+  });
+}
 
 export default useVibesApi;

frontend/tests/consultant-list.spec.ts

@@ -1,10 +1,8 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from "@playwright/test";
 
-test('has title', async ({ page }) => {
-  await page.goto('/');
-  const consultantName = await page.getByText('Test Consultant');
-
-  // Expect a title "to contain" a substring.
-  await expect(consultantName).toBeVisible()
+test("has title", async ({ page }) => {
+  await page.goto("/");
+  const consultantName = page.getByText("Test Consultant");
 
+  await expect(consultantName).toBeVisible();
 });