diff --git a/src/screens/SettingsScreen.stories.tsx b/src/screens/SettingsScreen.stories.tsx index ed193bd8..d87d1391 100644 --- a/src/screens/SettingsScreen.stories.tsx +++ b/src/screens/SettingsScreen.stories.tsx @@ -97,3 +97,61 @@ export const ClearDataDialogOpen: Story = { ).toBeInTheDocument(); }, }; + +/** Generated invite results visible with long invite code (issue #155 wrapping verification) */ +export const InviteGenerated: Story = { + play: async () => { + const canvas = getCanvas(); + const urlInput = await canvas.findByLabelText( + 'Remote Archive URL', + undefined, + { timeout: PLAY_TIMEOUT }, + ); + const tokenInput = await canvas.findByLabelText('Bearer Token', undefined, { + timeout: PLAY_TIMEOUT, + }); + + await userEvent.type( + urlInput, + 'https://archive.example-very-long-subdomain-name-that-takes-many-chars.com', + ); + await userEvent.type( + tokenInput, + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkphbmUgRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c', + ); + + const submitButton = await canvas.findByRole( + 'button', + { name: 'Generate Invite' }, + { timeout: PLAY_TIMEOUT }, + ); + await userEvent.click(submitButton); + + // Verify the results section renders with generated invite data + await canvas.findByText('Results', undefined, { timeout: PLAY_TIMEOUT }); + await canvas.findByText('Invite URL', undefined, { + timeout: PLAY_TIMEOUT, + }); + await canvas.findByText('Invite Code', undefined, { + timeout: PLAY_TIMEOUT, + }); + + // Verify the generated invite URL contains the code in the element + const inviteUrlCode = await canvas.findByText(/invite\?code=/, undefined, { + timeout: PLAY_TIMEOUT, + }); + await expect(inviteUrlCode).toBeVisible(); + + // Verify the generated invite code is displayed (long value wraps) + // Scoped to the invite-code row to avoid matching the URL code element + const inviteCodeLabel = await canvas.findByText('Invite Code', undefined, { + timeout: PLAY_TIMEOUT, + }); + const inviteCodeRow = inviteCodeLabel.closest('div')!; + const inviteCodeEl = inviteCodeRow.querySelector('code')!; + await expect(inviteCodeEl).toBeVisible(); + await expect(inviteCodeEl.textContent).toMatch( + /v1\.mock-encrypted-invite-code-/, + ); + }, +}; diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx index 8e7288d6..7ca9f417 100644 --- a/src/screens/SettingsScreen.tsx +++ b/src/screens/SettingsScreen.tsx @@ -360,7 +360,7 @@ export function SettingsScreen() { {intl.formatMessage(_messages.inviteUrlLabel)}

- + {inviteUrl}