playwright integration test with mocked keycloak

[Tockra]

Hi,

I want to run and test my application on localhost:3000. I want to mock all requests against my local keycloak (localhost:8888). I already found: https://github.com/authts/react-oidc-context/issues/867

So I mocked "/openid-configuration", "/token", "/authorize?*". I used one old jwt token as access_token (I don't know if this works, because the token is not valid anymore.).

export async function mockLogin(page: Page) {
  const configurationResponse = {
    issuer: "http://localhost:8888",
    authorization_endpoint: "http://localhost:8888/authorize",
    token_endpoint: "http://localhost:8888/token",
  };
  await page.route("**/.well-known/openid-configuration", async route => {
    await route.fulfill({
      status: 200,
      body: JSON.stringify(configurationResponse),
    });
  });

  const tokenResponse = {
    access_token: "access_token",
    refresh_token: "refresh_token",
    signature: "signature",
    scope: "refresh_token custom_permissions openid api",
    id_token:
      "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJnY292b0hNTFk5OTF3RWVWanppX1Byc3JZX0ttX3lXRjJ0QkdOcF9EaU5jIn0.eyJleHAiOjE3MTk4MjcxNTQsImlhdCI6MTcxOTgyNjg1NCwiYXV0aF90aW1lIjoxNzE5ODI2ODU0LCJqdGkiOiIyM2FkMjJhYy1iNmI1LTQzOTUtYWUzMS1lMGQzNTI0N2Q2ZDAiLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0Ojg4ODgvcmVhbG1zL3Rlc3QtY29tcGFueSIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiJhNjFlZDY0OC0xZjRhLTQ5NTQtYjQ4ZS0xYjNiOTUyMmE0NjYiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJlbWJlci13ZWIiXXXXWUsIm5hbWUiOiJUZXN0IFVzZXIiLCJwcmVmZXJyZWRfdXNlcm5hbWUiOiJ0ZXN0dXNlckB0ZXN0LmRlIiwiZ2l2ZW5fbmFtZSI6IlRlc3QiLCJmYW1pbHlfbmFtZSI6IlVzZXIiLCJlbWFpbCI6InRlc3R1c2VyQHRlc3QuZGUifQ.vOLwNzJda3zjf7H1fO8Y1vxA2_ycJN5mYJVwCCxmswOXGQIwKyrJSrzfXjiXTJaOav8GU54MkFejIvI1gKYRRdKlBgszdRpkHMooU48U14xhLBm7AFGnZo2kk6e0inG0GbiPgJc9UcK9Wg5eNOr3VIdZWAE6Om0xR-4Si5XCS9616GY8zCfAXDeMMQezPvJzT8GWggg3x2V_Q7iP-uK3Wta17g53EhNk7q66ZE9OvvKh8lnEO1LLpQiMRuB67MM1-7tSJ922EpyVSfXMpP-MPSPO1Aw1oCdhv-oypgBe8gHqkIPOAFAuXYcfRBy7DkyyTqutzPOBDBH1dzKq91lA0w",
    instance_url: "http://localhost:8888",
    id: "ember_web",
    token_type: "Bearer",
    issued_at: "1687254941736",
  };
  await page.route("**/token", async route => {
    await route.fulfill({ status: 200, body: JSON.stringify(tokenResponse) });
  });

  await page.route("**/authorize?*", route => {
    const url = new URL(route.request().url());
    const state = url.searchParams.get("state");
    route.fulfill({
      status: 302,
      headers: {
        Location: `http://localhost:3000/?code=1234&state=${state}`,
      },
    });
  });
}

But my test fails with error:

Error: Metadata does not contain property userinfo_endpoint
    at MetadataService._getMetadataProperty (webpack-internal:///(app-pages-browser)/./node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js:728:21)
    at async UserInfoService.getClaims (webpack-internal:///(app-pages-browser)/./node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js:915:17)
    at async ResponseValidator._processClaims (webpack-internal:///(app-pages-browser)/./node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js:1209:20)
    at async ResponseValidator.validateSigninResponse (webpack-internal:///(app-pages-browser)/./node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js:1129:5)
    at async OidcClient.processSigninResponse (webpack-internal:///(app-pages-browser)/./node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js:1716:5)
    at async UserManager._signinEnd (webpack-internal:///(app-pages-browser)/./node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js:2891:28)
    at async UserManager.signinRedirectCallback (webpack-internal:///(app-pages-browser)/./node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js:2611:18)
    at async UserManager.signinCallback (webpack-internal:///(app-pages-browser)/./node_modules/oidc-client-ts/dist/esm/oidc-client-ts.js:2774:16)
    at async eval (webpack-internal:///(app-pages-browser)/./node_modules/react-oidc-context/dist/esm/react-oidc-context.js:179:18)

T