From d3bc9e3c0ea496fae43c5f1743408f9c236a844c Mon Sep 17 00:00:00 2001 From: Benoit Lacelle Date: Sun, 22 Sep 2024 00:48:45 +0400 Subject: [PATCH] Add login options 2e2 test --- js/e2e-tests/fake-player.mjs | 8 +++++- js/e2e-tests/localhost-login-dev.spec.js | 28 +++++++++++++++++++ js/package.json | 5 ++-- js/playwright.config.mjs | 5 +++- .../resources/static/ui/js/login-checker.js | 8 ++++-- .../resources/static/ui/js/login-providers.js | 4 +-- js/src/main/resources/static/ui/js/store.js | 9 +++--- 7 files changed, 54 insertions(+), 13 deletions(-) create mode 100644 js/e2e-tests/localhost-login-dev.spec.js diff --git a/js/e2e-tests/fake-player.mjs b/js/e2e-tests/fake-player.mjs index e9bbeff..1e4207e 100644 --- a/js/e2e-tests/fake-player.mjs +++ b/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) { diff --git a/js/e2e-tests/localhost-login-dev.spec.js b/js/e2e-tests/localhost-login-dev.spec.js new file mode 100644 index 0000000..622e08b --- /dev/null +++ b/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); +//}); diff --git a/js/package.json b/js/package.json index 692c975..450ccd5 100644 --- a/js/package.json +++ b/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" diff --git a/js/playwright.config.mjs b/js/playwright.config.mjs index fdafbfe..9e6913b 100644 --- a/js/playwright.config.mjs +++ b/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, diff --git a/js/src/main/resources/static/ui/js/login-checker.js b/js/src/main/resources/static/ui/js/login-checker.js index 6a00cf3..12733c6 100644 --- a/js/src/main/resources/static/ui/js/login-checker.js +++ b/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 { -
Welcome {{user.raw.name}}. ?Logout?
+
Welcome {{user.raw.name}}. ?Logout?
`, }; diff --git a/js/src/main/resources/static/ui/js/login-providers.js b/js/src/main/resources/static/ui/js/login-providers.js index 08ea64b..4c9202d 100644 --- a/js/src/main/resources/static/ui/js/login-providers.js +++ b/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 }; }, diff --git a/js/src/main/resources/static/ui/js/store.js b/js/src/main/resources/static/ui/js/store.js index 0c8e691..8350034 100644 --- a/js/src/main/resources/static/ui/js/store.js +++ b/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}`); }); },