4 votes

Comment déclencher un changement sur une entrée de fichier dans un test d'intégration ember ?

J'essaie d'écrire un test d'intégration pour un composant de téléchargement de fichiers, mais je ne parviens pas à déclencher un événement de changement sur le type d'entrée fichier. Alors que l'écouteur jQuery est déclenché, l'événement de changement de fichier n'est pas déclenché.

Je simule un événement avec un objet simple et je passe celui-ci à jQuery. trigger méthode. Cela fonctionne bien si je ne mets pas en place la méthode target de l'événement simulé. Dans ce cas, le gestionnaire d'événement jQuery et l'événement ember sont déclenchés.

Je me moque des fichiers avec Blob et de les utiliser comme target de mon événement fictif. Si je passe celle-ci pour déclencher le gestionnaire d'événement jQuery est toujours déclenché mais l'événement ember ne l'est pas.

Voici comment cela se présente en code.

// mock a file
let file = new Blob(['content'], { type: 'image/jpeg' });
// mock an event
let event = { type: 'change' };
// set events target
event.target = { files: [file] };
this.$('input').trigger(event);

J'ai créé un Ember Twiddle qui démontre que this.$('input').trigger({ type: 'change' }) déclenche l'événement de changement d'ember mais this.$('input').trigger({ target: { files: [file] }, type: 'change' }) ne le fait pas alors que les deux fonctionnent pour le gestionnaire d'événements jQuery : https://ember-twiddle.com/5189be1875c147e96d31dea41668b006?openFiles=tests.integration.components.file-input-test.js%2C

Il fonctionnait dans les premières versions d'ember mais n'a pas été utilisé pendant un certain temps donc je ne suis pas tout à fait sûr quand il a été cassé.

Utilisation de jQuery.Event('change') au lieu d'un simple objet donne les mêmes résultats. Cela ne fonctionne donc pas non plus :

jQuery.Event('change');
event.target = { files: [file] };
this.$('input').trigger(event);

Veuillez noter que le chapeau document.createEvent() o new Event() ne peut pas être utilisé puisque target propriété de Événement est en lecture seule.

Je suis particulièrement confus que this.$('input').on('change', () => { }) est déclenché alors que l'événement de changement d'ember ne l'est pas.

Mise à jour : Je ne suis pas sûr que ça ait déjà fonctionné dans Ember. J'ai remarqué que l'exemple que j'avais en tête ( ember-cli-file-pickers uploadFileHelper ) ne peut fonctionner que parce qu'il n'utilise pas l'événement de changement de braises mais enregistre un gestionnaire d'événements jQuery dans le crochet didInsertElement.

0voto

ansmonjol Points 28

Vous pouvez utiliser l'assistant de test Ember triggerEvent .

Je ressemble à ça

import { triggerEvent } from '@ember/test-helpers'
...
triggerEvent(selector, eventName, options)

J'ai implémenté un événement de téléchargement de fichier comme ceci triggerEvent(selector, 'change', files)

Voici le document : https://github.com/emberjs/ember-test-helpers/blob/master/API.md#triggerevent

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X