Add login options 2e2 test

js/e2e-tests/fake-player.mjs

@@ -7,9 +7,15 @@ export default {
 
         return response;
     },
+
+    async showLoginOptions(page) {
+        await page.getByRole("link", { name: /You need to login/ }).click();
+    },
 
     async login(page) {
-        await page.getByRole("link", { name: /You need to login/ }).click();
+        await this.showLoginOptions(page);
+        await page.getByRole("link", { name: /github/ }).click();
+        // How can we login automatically?
     },
 
     async playOptimization(page) {

js/e2e-tests/localhost-login-dev.spec.js

@@ -0,0 +1,28 @@
+import { test, expect, request } from "@playwright/test";
+
+import fakePlayer from "./fake-player.mjs";
+
+const url = "http://localhost:8080";
+
+//test.beforeAll(async ({ request }) => {
+//    // Create a new repository
+//    const response = await fakePlayer.clear(request, url);
+//    expect(response.ok()).toBeTruthy();
+//});
+
+// We just check the login page is working OK
+test('showLoginOptions', async ({ page }) => {
+    await page.goto(url);
+    await fakePlayer.showLoginOptions(page);
+});
+
+test('login', async ({ page }) => {
+    await page.goto(url);
+    await fakePlayer.login(page);
+});
+
+// We can not login automatically without fakeUser
+//test("play-optimization", async ({ page }) => {
+//    await page.goto(url);
+//    await fakePlayer.playOptimization(page);
+//});

js/package.json

@@ -22,8 +22,9 @@
         "lint": "eslint --fix src/main/resources/static",
         "lint_debug": "eslint --fix src/main/resources/static --debug",
         "preview": "vite preview",
-        "pw_localhost8080": "npx playwright test localhost8080  --project=chromium",
-        "pw_localhost8080_ui": "npx playwright test localhost8080  --project=chromium --ui"
+        "pw_localhost8080": "SPRING_ACTIVE_PROFILES=unsafe,inmemory,fakeuser npx playwright test localhost8080  --project=chromium",
+        "pw_localhost8080_nofakeuser": "SPRING_ACTIVE_PROFILES=unsafe,inmemory npx playwright test localhost-login  --project=chromium",
+        "pw_localhost8080_ui": "SPRING_ACTIVE_PROFILES=unsafe,inmemory,fakeuser npx playwright test localhost8080  --project=chromium --ui"
     },
     "type": "module",
     "version": "0.0.0"

js/playwright.config.mjs

@@ -8,6 +8,9 @@ import { defineConfig, devices } from "@playwright/test";
  */
 // require('dotenv').config({ path: path.resolve(__dirname, '.env') });
 
+const commandSpringBoot = `(mvn install; cd ../server; mvn spring-boot:run -Dspring-boot.run.profiles=${process.env.SPRING_ACTIVE_PROFILES};)`;
+console.log("commandSpringBoot", commandSpringBoot);
+
 /**
  * @see https://playwright.dev/docs/test-configuration
  */
@@ -92,7 +95,7 @@ const config = defineConfig({
         // `mvn install` to ensure `js` is fresh (especially important in local dev)
         // `cd ../server` to relocate in the backend folder
         // `mvn spring-boot:run` to effectively starts a server
-        command: "(mvn install; cd ../server; mvn spring-boot:run;)",
+        command: commandSpringBoot,
         //   url: 'http://127.0.0.1:3000',
         url: "http://127.0.0.1:8080",
         reuseExistingServer: !process.env.CI,

js/src/main/resources/static/ui/js/login-checker.js

@@ -9,15 +9,17 @@ export default {
 		LoginOptions,
 	},
 	computed: {
-		...mapState(useKumiteStore, ["nbAccountFetching"]),
+		...mapState(useKumiteStore, ["nbAccountFetching", "account", "needsToLogin"]),
 		...mapState(useKumiteStore, {
 			user(store) {
-				return store.account || { error: "not_loaded" };
+				return store.account || { error: "not_loaded", raw: {error: "not_loaded"} };
 			},
 		}),
 	},
 	setup() {
 		const store = useKumiteStore();
+
+        console.log("user", store.account || { error: "not_loaded", raw: {error: "not_loaded"} });
 
 		store.loadUser();
 
@@ -30,6 +32,6 @@ export default {
                 <LoginOptions />
             </div>
         </div>
-        <div>Welcome {{user.raw.name}}. ?Logout?</div>
+        <div v-else>Welcome {{user.raw.name}}. ?Logout?</div>
     `,
 };

js/src/main/resources/static/ui/js/login-providers.js

@@ -8,7 +8,7 @@ export default {
 			loginProviders: [],
 		});
 
-		async function theData(url) {
+		async function fetchTheUrl(url) {
 			try {
 				isLoading.value = true;
 				const response = await fetch(url);
@@ -22,7 +22,7 @@ export default {
 			}
 		}
 
-		theData("/api/v1/login/v1/providers");
+		fetchTheUrl("/api/login/v1/providers");
 
 		return { isLoading, loginProviders };
 	},

js/src/main/resources/static/ui/js/store.js

@@ -35,7 +35,7 @@ export const useKumiteStore = defineStore("kumite", {
 		nbBoardFetching: 0,
 
 		// Currently connected account
-		account: {},
+		account: { raw: {}},
 		tokens: {},
 		// Initially, we assume we are logged-in as we may have a session cookie
 		// May be turned to true by 401 on `loadUser()`
@@ -54,6 +54,7 @@ export const useKumiteStore = defineStore("kumite", {
 		nbBoardOperating: 0,
 	}),
 	getters: {
+        isLoggedIn: (store) => Object.keys(store.account.raw).length > 0,
 		// There will be a way to choose a different playerId amongst the account playerIds
 		playingPlayerId: (store) => store.account.playerId,
 		// Default headers: we authenticate ourselves
@@ -151,7 +152,7 @@ export const useKumiteStore = defineStore("kumite", {
 
 		// @throws UserNeedsToLoginError if not logged-in
 		async ensureUser() {
-			if (Object.keys(this.account || {}).length !== 0) {
+			if (this.isLoggedIn) {
 				// We have loaded a user: we assume it does not need to login
 				return Promise.resolve(this.account);
 			} else {
@@ -211,8 +212,8 @@ export const useKumiteStore = defineStore("kumite", {
 				}
 			}
 
-			return this.ensureUser().then(() => {
-				console.log("We do have a User. Let's fetch tokens");
+			return this.ensureUser().then(user => {
+				console.log("We do have a User. Let's fetch tokens", user);
 				return fetchFromUrl(`/api/login/v1/oauth2/token?player_id=${this.playingPlayerId}`);
 			});
 		},