Skip to content

Fix e2e tests #895

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Oct 21, 2025
Merged

Fix e2e tests #895

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2eafa7d
delete unecessary test
javiert-okta Oct 8, 2025
47ddaab
add aria-label to card toolbar button
javiert-okta Oct 8, 2025
4a35998
fix jsx syntax on icons components
javiert-okta Oct 8, 2025
f9e09d9
Merge branch 'ui-redesign' of https://github.com/jsonwebtoken/jsonweb…
javiert-okta Oct 16, 2025
17221cf
add data test id to encoding format switch
javiert-okta Oct 21, 2025
7b73a15
add switch id to data test dictionary
javiert-okta Oct 21, 2025
9b2d905
fix decoder e2e tests
javiert-okta Oct 21, 2025
6023a28
fix encoder e2e tests
javiert-okta Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 67 additions & 93 deletions e2e/decoder.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
import { MessageStatusValue, MessageTypeValue } from "./e2e.values";
import { JwtDictionaryModel, JwtSignedWithDigitalModel } from "./e2e.models";
import jwts from "./jwt.json" with { type: "json" };
import { EncodingValues } from "@/features/common/values/encoding.values";

const TestJwts = (jwts as JwtDictionaryModel).byAlgorithm;

Expand All @@ -39,7 +40,7 @@ test.describe("Can interact with JWT Decoder JWT editor", () => {
const jwtEditorInput = getDecoderJwtEditorInput(page);

await expect(jwtEditorInput).toHaveValue(
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30",
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30"
);
});

Expand All @@ -53,8 +54,13 @@ test.describe("Can interact with JWT Decoder JWT editor", () => {
await expect(jwtEditorInput).toHaveValue(inputValue);
});

test("can copy value in JWT editor", async ({ page, context, browserName }) => {
const permissions = browserName === 'firefox' ? [] : ["clipboard-read", "clipboard-write"]
test("can copy value in JWT editor", async ({
page,
context,
browserName,
}) => {
const permissions =
browserName === "firefox" ? [] : ["clipboard-read", "clipboard-write"];
const inputValue = (TestJwts.RS512 as JwtSignedWithDigitalModel).withPemKey
.jwt;
await context.grantPermissions(permissions);
Expand All @@ -76,7 +82,7 @@ test.describe("Can interact with JWT Decoder JWT editor", () => {
await copyButton.click();

const clipboardContent = await page.evaluate(() =>
navigator.clipboard.readText(),
navigator.clipboard.readText()
);

expect(clipboardContent).toBe(inputValue);
Expand Down Expand Up @@ -105,51 +111,14 @@ test.describe("Can generate JWT examples", () => {
await page.goto(E2E_BASE_URL);
});

test("Can open and close JWT Decoder example widget", async ({ page }) => {
const lang = await getLang(page);
expectToBeNonNull(lang);

const pickersUiDictionary = getPickersUiDictionary(lang);

const decoderWidget = page.getByTestId(dataTestidDictionary.decoder.id);

const exampleButton = decoderWidget.getByRole("button", {
name: pickersUiDictionary.exampleAlgPicker.label,
});

await exampleButton.click();

await expect(exampleButton).not.toBeVisible();

const closeButton = page.getByRole("button", {
name: pickersUiDictionary.exampleAlgPicker.closeButton.label,
});

await closeButton.click();

await expect(exampleButton).toBeVisible();
await expect(closeButton).not.toBeVisible();
});

test.describe("Can generate a JWT decoder example", () => {
test.beforeEach(async ({ page }) => {
const lang = await getLang(page);
expectToBeNonNull(lang);

const pickersUiDictionary = getPickersUiDictionary(lang);

const decoderWidget = page.getByTestId(dataTestidDictionary.decoder.id);

const exampleButton = decoderWidget.getByRole("button", {
name: pickersUiDictionary.exampleAlgPicker.label,
});

await exampleButton.click();

await expect(exampleButton).not.toBeVisible();

const pickerIndicator = decoderWidget.getByText(
pickersUiDictionary.exampleAlgPicker.defaultValue,
const pickerIndicator = page.getByText(
pickersUiDictionary.exampleAlgPicker.defaultValue
);

await pickerIndicator.click();
Expand All @@ -174,7 +143,7 @@ test.describe("Can generate JWT examples", () => {
const targetToken = DefaultTokensValues[option];

const jwtEditor = decoderWidget.getByTestId(
dataTestidDictionary.decoder.jwtEditor.id,
dataTestidDictionary.decoder.jwtEditor.id
);
const jwtEditorInput = jwtEditor.getByRole("textbox");

Expand Down Expand Up @@ -203,7 +172,7 @@ test.describe("Can generate JWT examples", () => {
});

const secretKeyEditor = decoderWidget.getByTestId(
dataTestidDictionary.decoder.secretKeyEditor.id,
dataTestidDictionary.decoder.secretKeyEditor.id
);
const secretKeyInput = secretKeyEditor.getByRole("textbox");

Expand All @@ -217,9 +186,13 @@ test.describe("Can generate JWT examples", () => {
status: MessageStatusValue.VISIBLE,
});

const encodingValue = await secretKeyEditor
.locator(".react-select__single-value")
.innerText();
const isEncodingSwitchChecked = await page
.getByRole("switch")
.isChecked();

const encodingValue = isEncodingSwitchChecked
? EncodingValues.BASE64URL
: EncodingValues.UTF8;

expect(encodingValue).toBe(symmetricToken.secretEncoding);

Expand All @@ -236,8 +209,9 @@ test.describe("Can generate JWT examples", () => {
status: MessageStatusValue.VISIBLE,
});

const formatValue = await secretKeyEditor
const formatValue = await page
.locator(".react-select__single-value")
.nth(1)
.innerText();

expect(formatValue).toBe(asymmetricToken.publicKeyFormat);
Expand Down Expand Up @@ -270,7 +244,7 @@ test.describe("decode JWTs", () => {
const decoderWidget = page.getByTestId(dataTestidDictionary.decoder.id);

const jwtEditor = decoderWidget.getByTestId(
dataTestidDictionary.decoder.jwtEditor.id,
dataTestidDictionary.decoder.jwtEditor.id
);
const jwtEditorInput = jwtEditor.getByRole("textbox");

Expand Down Expand Up @@ -327,14 +301,14 @@ test.describe("decode JWTs", () => {
});

const secretKeyEditor = decoderWidget.getByTestId(
dataTestidDictionary.decoder.secretKeyEditor.id,
dataTestidDictionary.decoder.secretKeyEditor.id
);
const secretKeyEditorInput = secretKeyEditor.getByRole("textbox");

await secretKeyEditorInput.fill(entryWithUtf8Secret.secret);

await expect(secretKeyEditorInput).toHaveValue(
entryWithUtf8Secret.secret,
entryWithUtf8Secret.secret
);

await checkSecretKeyDecoderEditorStatusBarMessage({
Expand All @@ -343,9 +317,13 @@ test.describe("decode JWTs", () => {
status: MessageStatusValue.VISIBLE,
});

const encodingValue = await secretKeyEditor
.locator(".react-select__single-value")
.innerText();
const isEncodingSwitchChecked = await page
.getByRole("switch")
.isChecked();

const encodingValue = isEncodingSwitchChecked
? EncodingValues.BASE64URL
: EncodingValues.UTF8;

expect(encodingValue).toBe(entryWithUtf8Secret.secretEncoding);

Expand Down Expand Up @@ -388,17 +366,13 @@ test.describe("decode JWTs", () => {
status: MessageStatusValue.VISIBLE,
});

const formatPicker = secretKeyEditor.locator(
".react-select__single-value",
);

await formatPicker.click();
const encodingSwitch = await page.getByTestId(dataTestidDictionary.encoder.switch)
expect(encodingSwitch).toBeVisible()

await page
.getByRole("option", {
name: entryWithBase64urlSecret.secretEncoding,
})
.click();
if (
entryWithBase64urlSecret.secretEncoding === EncodingValues.BASE64URL
)
await encodingSwitch.click();

await secretKeyEditorInput.fill(entryWithBase64urlSecret.secret);

Expand Down Expand Up @@ -451,7 +425,7 @@ test.describe("decode JWTs", () => {
});

const secretKeyEditor = decoderWidget.getByTestId(
dataTestidDictionary.decoder.secretKeyEditor.id,
dataTestidDictionary.decoder.secretKeyEditor.id
);
const secretKeyEditorInput = secretKeyEditor.getByRole("textbox");

Expand All @@ -465,7 +439,7 @@ test.describe("decode JWTs", () => {
status: MessageStatusValue.VISIBLE,
});

const formatValue = await secretKeyEditor
const formatValue = await page
.locator(".react-select__single-value")
.innerText();

Expand Down Expand Up @@ -511,8 +485,8 @@ test.describe("decode JWTs", () => {
status: MessageStatusValue.VISIBLE,
});

const formatPicker = secretKeyEditor.locator(
".react-select__single-value",
const formatPicker = page.locator(
".react-select__single-value"
);

await formatPicker.click();
Expand All @@ -530,7 +504,7 @@ test.describe("decode JWTs", () => {
});

await secretKeyEditorInput.fill(
JSON.stringify(entrywithJwkKey.publicKey, null, 2),
JSON.stringify(entrywithJwkKey.publicKey, null, 2)
);

await checkJwtEditorStatusBarMessage({
Expand Down Expand Up @@ -581,8 +555,8 @@ test.describe("decode JWTs", () => {
status: MessageStatusValue.VISIBLE,
});

const formatPicker = secretKeyEditor.locator(
".react-select__single-value",
const formatPicker = page.locator(
".react-select__single-value"
);

await formatPicker.click();
Expand All @@ -594,7 +568,7 @@ test.describe("decode JWTs", () => {
.click();

await secretKeyEditorInput.fill(
JSON.stringify(entrywithJwkKey.publicKey, null, 2),
JSON.stringify(entrywithJwkKey.publicKey, null, 2)
);

await checkJwtEditorStatusBarMessage({
Expand Down Expand Up @@ -642,10 +616,10 @@ test("Can decode JWTs signed with a non-supported algorithm", async ({
kid: "sig",
};
const expectedDecodedPayload = {
"sub": "1234567890",
"name": "John Doe",
"admin": true,
"iat": 1516239022
sub: "1234567890",
name: "John Doe",
admin: true,
iat: 1516239022,
};

await page.goto(E2E_BASE_URL);
Expand All @@ -656,7 +630,7 @@ test("Can decode JWTs signed with a non-supported algorithm", async ({
const decoderWidget = page.getByTestId(dataTestidDictionary.decoder.id);

const jwtEditor = decoderWidget.getByTestId(
dataTestidDictionary.decoder.jwtEditor.id,
dataTestidDictionary.decoder.jwtEditor.id
);
const jwtEditorInput = jwtEditor.getByRole("textbox");

Expand All @@ -678,22 +652,22 @@ test("Can decode JWTs signed with a non-supported algorithm", async ({

await expect(
decoderWidget.getByTestId(
dataTestidDictionary.decoder.decodedHeader.json.id,
),
dataTestidDictionary.decoder.decodedHeader.json.id
)
).toHaveText(JSON.stringify(expectedDecodedHeader, null, 2), {
useInnerText: true,
});

await expect(
decoderWidget.getByTestId(
dataTestidDictionary.decoder.decodedPayload.json.id,
),
dataTestidDictionary.decoder.decodedPayload.json.id
)
).toHaveText(JSON.stringify(expectedDecodedPayload, null, 2), {
useInnerText: true,
});

const secretKeyEditor = decoderWidget.getByTestId(
dataTestidDictionary.decoder.secretKeyEditor.id,
dataTestidDictionary.decoder.secretKeyEditor.id
);

await expect(secretKeyEditor).not.toBeVisible();
Expand All @@ -711,10 +685,10 @@ test.describe("Decode pieces of JWTs in Base64Url", () => {
jwtPiece:
"eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0",
expectedDecodedOutput: {
"sub": "1234567890",
"name": "John Doe",
"admin": true,
"iat": 1516239022
sub: "1234567890",
name: "John Doe",
admin: true,
iat: 1516239022,
},
},
{
Expand All @@ -737,7 +711,7 @@ test.describe("Decode pieces of JWTs in Base64Url", () => {
const decoderWidget = page.getByTestId(dataTestidDictionary.decoder.id);

const jwtEditor = decoderWidget.getByTestId(
dataTestidDictionary.decoder.jwtEditor.id,
dataTestidDictionary.decoder.jwtEditor.id
);
const jwtEditorInput = jwtEditor.getByRole("textbox");

Expand All @@ -759,20 +733,20 @@ test.describe("Decode pieces of JWTs in Base64Url", () => {

await expect(
decoderWidget.getByTestId(
dataTestidDictionary.decoder.decodedHeader.json.id,
),
dataTestidDictionary.decoder.decodedHeader.json.id
)
).toHaveText(JSON.stringify(expectedDecodedOutput, null, 2), {
useInnerText: true,
});

await expect(
decoderWidget.getByTestId(
dataTestidDictionary.decoder.decodedPayload.json.id,
),
dataTestidDictionary.decoder.decodedPayload.json.id
)
).toBeEmpty();

const secretKeyEditor = decoderWidget.getByTestId(
dataTestidDictionary.decoder.secretKeyEditor.id,
dataTestidDictionary.decoder.secretKeyEditor.id
);

await expect(secretKeyEditor).not.toBeVisible();
Expand Down
Loading