Tester les interactions utilisateur

7 min

Tester les interactions utilisateur

Les tests générés peuvent être complétés afin de vérifier les interactions utilisateur dans une vue.

Ces tests permettent de s’assurer qu’une action réalisée dans l’interface déclenche bien le comportement attendu.

Ils sont notamment utiles pour tester :

un clic sur un bouton ;

une saisie dans un champ ;

le déclenchement d’une action de parcours ;

l’appel d’une mutation GraphQL ;

la mise à jour de l’affichage après une action.

Test d’affichage

Un test d’affichage permet de vérifier que la vue se rend correctement une fois les données chargées.

Le test suit généralement les étapes suivantes :

configurer les mocks avec setupServer ;

rendre le composant ;

attendre le retour des appels API et des queries GraphQL interceptés via MSW ;

vérifier le rendu stabilisé de la vue.

Exemple de test d’affichage

it('simple test - snapshot', async () => { setupServer(); const { container } = render(<Home />, { wrapper: ({ children }) => ( <TestsProviders environment=> </TestsProviders> ) });

await screen.findByRole('heading', { value: viewIds.HOME }); await screen.findByText('Is loaded GetProject: yes');

expect(container).toMatchSnapshot(); });

Test d’interaction utilisateur

Un test d’interaction permet de vérifier le comportement d’une vue lorsqu’un utilisateur réalise une action.

Le test suit généralement les étapes suivantes :

configurer l’utilisateur avec userEvent.setup() ;

configurer les mocks avec setupServer ;

rendre le composant ;

attendre le chargement des données nécessaires ;

interagir avec le DOM, par exemple avec click, type ou dblClick ;

attendre le retour de l’action effectuée ;

vérifier que la mutation GraphQL a été appelée avec les bonnes données.

Exemple de test d’action NEXT

it('userEvent - action - NEXT', async () => { const user = userEvent.setup(); let isMutationValid = new Promise((resolve, reject) => { setTimeout(() => reject('did not handle the request'), 1500); });

setupServer([ graphql.mutation('ProcessActionMutation', (req, res, ctx) => { const { input } = req.variables;

isMutationValid = Promise.resolve( equals(input, { action: 'HOME_NEXT', viewId: 'HOME' }) );

return res( ctx.data({ processAction: { ok: true, error: null, process: { id: 'id', context: { projectId: 'projectId', viewId: 'HOME', actions: ['NEXT', '_DEFAULT_'] } } } }) ); }) ]);

render(<Home />, { wrapper: ({ children }) => ( <TestsProviders environment=> </TestsProviders> ) });

await screen.findByRole('heading', { value: viewIds.HOME }); await screen.findByText('Is loaded GetProject: yes');

const button = await screen.findByRole('button', { name: 'NEXT' });

await user.click(button);

await waitFor(() => expect(isMutationValid).toBeTruthy()); });

Exemple de test avec mutation GraphQL

L’exemple suivant illustre un test déclenchant une mutation GraphQL à partir d’une action utilisateur dans la page.

it('simple test - create a customer', async () => { const user = userEvent.setup(); let isMutationValid = new Promise((resolve, reject) => { setTimeout(() => reject('did not handle the request'), 1500); });

setupServer([ graphql.mutation('CreateCustomerMutation', (req, res, ctx) => { const { input } = req.variables;

isMutationValid = Promise.resolve( equals(input, { email: '[email protected]', firstName: 'starter', lastName: 'starter' }) );

return res( ctx.data({ createCustomer_M_start: { ok: true, error: null } }) ); }),

graphql.query('GetCustomerQuery', (req, res, ctx) => { return res( ctx.data({ getCustomer_start: { email: '[email protected]', firstName: 'starter', lastName: 'starter' } }) ); }) ]);

render(<Start />, { wrapper: ({ children }) => ( <TestsProviders environment=> </TestsProviders> ) });

await screen.findByRole('heading', { value: viewIds.START }); await screen.findByText('Is loaded GetStartProject: yes'); await screen.findByText('Is loaded GetCustomer: yes');

const button = await screen.findByRole('button', { name: 'Create Customer' });

await user.click(button);

await waitFor(() => expect(isMutationValid).toBeTruthy()); });

Bonnes pratiques

Pour tester une interaction utilisateur, il est recommandé de :

attendre que la vue soit réellement chargée avant d’interagir avec elle ;

utiliser userEvent pour simuler les actions utilisateur ;

vérifier les variables envoyées à la mutation GraphQL ;

mocker explicitement les queries ou mutations nécessaires au scénario ;

éviter les snapshots trop larges lorsque le comportement attendu peut être vérifié plus précisément.

Remarques

Les tests générés automatiquement doivent être considérés comme une base.

L’équipe projet peut les compléter afin de couvrir les règles spécifiques au parcours, les cas d’erreur ou les interactions métier importantes.