119 lines
3.1 KiB
TypeScript
119 lines
3.1 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { fn } from '@storybook/test';
|
|
import { within, userEvent } from '@storybook/test';
|
|
import { TwoFactorVerify } from './TwoFactorVerify';
|
|
|
|
/**
|
|
* TwoFactorVerify - Vérification 2FA
|
|
*
|
|
* Composant pour saisir le code de vérification 2FA
|
|
* lors de la connexion avec authentification à deux facteurs.
|
|
*/
|
|
const meta: Meta<typeof TwoFactorVerify> = {
|
|
title: 'Features/Auth/TwoFactorVerify',
|
|
component: TwoFactorVerify,
|
|
parameters: {
|
|
layout: 'centered',
|
|
docs: {
|
|
description: {
|
|
component: 'Formulaire de vérification 2FA avec support des codes de backup.',
|
|
},
|
|
},
|
|
},
|
|
tags: ['autodocs'],
|
|
args: {
|
|
onSuccess: fn(),
|
|
onCancel: fn(),
|
|
},
|
|
argTypes: {
|
|
onSuccess: {
|
|
description: 'Callback appelé avec le code après vérification réussie',
|
|
action: 'onSuccess',
|
|
},
|
|
onCancel: {
|
|
description: 'Callback appelé quand l\'utilisateur annule',
|
|
action: 'onCancel',
|
|
},
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
/**
|
|
* État par défaut - saisie du code TOTP.
|
|
*/
|
|
export const Default: Story = {
|
|
name: 'Par défaut',
|
|
};
|
|
|
|
/**
|
|
* État avec erreur de vérification.
|
|
*/
|
|
export const WithError: Story = {
|
|
name: 'Avec erreur',
|
|
play: async ({ canvasElement }) => {
|
|
const canvas = within(canvasElement);
|
|
|
|
// Saisir un code invalide
|
|
const codeInput = canvas.getByLabelText(/verification code/i);
|
|
await userEvent.type(codeInput, '123456');
|
|
|
|
// Cliquer sur Verify
|
|
const verifyButton = canvas.getByRole('button', { name: /verify/i });
|
|
await userEvent.click(verifyButton);
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: 'Affiche le message d\'erreur après un code invalide.',
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
* État de chargement pendant la vérification.
|
|
*/
|
|
export const Loading: Story = {
|
|
name: 'Chargement',
|
|
play: async ({ canvasElement }) => {
|
|
const canvas = within(canvasElement);
|
|
|
|
// Saisir un code
|
|
const codeInput = canvas.getByLabelText(/verification code/i);
|
|
await userEvent.type(codeInput, '123456');
|
|
|
|
// Cliquer sur Verify pour voir le spinner
|
|
const verifyButton = canvas.getByRole('button', { name: /verify/i });
|
|
await userEvent.click(verifyButton);
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: 'Montre le spinner pendant la vérification.',
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Mode backup code.
|
|
*/
|
|
export const BackupCode: Story = {
|
|
name: 'Code de backup',
|
|
play: async ({ canvasElement }) => {
|
|
const canvas = within(canvasElement);
|
|
|
|
// Cliquer sur "Use a backup code"
|
|
const backupLink = canvas.getByRole('button', { name: /use a backup code/i });
|
|
await userEvent.click(backupLink);
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: 'Interface pour utiliser un code de backup au lieu du TOTP.',
|
|
},
|
|
},
|
|
},
|
|
};
|