Partage
  • Partager sur Facebook
  • Partager sur Twitter

Aide sur l'exercice p3-c2b unit test

Réalisez vos premiers tests d’intégration avec Jest Test DOM / Testing

Zakira
    11 mai 2022 à 17:17:58

    Hello tout le monde :)

    Je fais actuellement l'exercice sur les tests unitaires en JavaScript : https://openclassrooms.com/fr/courses/7159306-testez-vos-applications-front-end-avec-javascript/7332810-realisez-vos-premiers-tests-d-integration-avec-jest-test-dom-testing-library#/id/r-7332808

    J'essaye de voir si ce que j'ai écrit fonctionne.

    /**
 * @jest-environment jsdom
 */

 import '@testing-library/jest-dom'
 import {
     getByRole,
     getByTestId,
 } from '@testing-library/dom'
 
 import SignIn from './index'
 
 // Je crée ma suite de test
 describe('Sign In Integration Test Suites', () => {
    it('should render "L\'e-mail n\'est pas correct"', () => {
        document.body.innerHTML = SignIn.render()

        const email = document.getElementById('user-email')
        email.value = 'thomas@thomas.com'

        const button = getByRole(document.body, 'button')
        button.click()

        expect(getByTestId(document.body, 'user-email-error-msg').textContent).toEqual('L\'e-mail n\'est pas correct')
    })
})


    Sauf que j'obtiens une erreur comme quoi mon élément `button` n'a pas la propriété "submit"...

    $ npm test

> testez-vos-applications-front-end-avec-javascript@1.0.0 test /home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript
> jest

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
 PASS  js/samples/unit/toBeNan.test.js
 PASS  js/utils/api/sensorsApi.test.js
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
 PASS  js/utils/env/index.test.js
 PASS  js/pages/common/pagination/index.unit.test.js
 PASS  js/samples/unit/toContain.test.js
 PASS  js/pages/common/header/index.test.js
 PASS  js/samples/unit/toEqual.test.js
 PASS  js/samples/unit/toBe.test.js
 PASS  js/samples/unit/unit1.test.js
 PASS  js/samples/unit/toBeDefined.test.js
 FAIL  js/utils/signInForm/index.test.js
  ● Test suite failed to run

    Your test suite must contain at least one test.

      at onResult (node_modules/@jest/core/build/TestScheduler.js:175:18)
      at node_modules/@jest/core/build/TestScheduler.js:316:17
      at node_modules/emittery/index.js:260:13
          at Array.map (<anonymous>)
      at Emittery.emit (node_modules/emittery/index.js:258:23)

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
 PASS  js/samples/integration/sample1.test.js
 PASS  js/pages/common/pagination/index.integration.test.js
 PASS  js/pages/signIn/index.test.js
  ● Console

    console.error
      Error: Not implemented: HTMLFormElement.prototype.submit
          at module.exports (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
          at HTMLFormElementImpl.submit (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/living/nodes/HTMLFormElement-impl.js:88:5)
          at HTMLFormElementImpl._doSubmit (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/living/nodes/HTMLFormElement-impl.js:80:10)
          at HTMLButtonElementImpl._activationBehavior (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/living/nodes/HTMLButtonElement-impl.js:23:14)
          at HTMLButtonElementImpl._dispatch (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:240:26)
          at fireAnEvent (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/living/helpers/events.js:18:36)
          at HTMLButtonElementImpl.click (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:79:5)
          at HTMLButtonElement.click (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jsdom/lib/jsdom/living/generated/HTMLElement.js:110:34)
          at Object.<anonymous> (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/js/pages/signIn/index.test.js:22:17)
          at Promise.then.completed (/home/zak/Documents/formations/openclassrooms/testez-vos-applications-front-end-avec-javascript/node_modules/jest-circus/build/utils.js:316:28) undefined

      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at module.exports (node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12:26)
      at HTMLFormElementImpl.submit (node_modules/jsdom/lib/jsdom/living/nodes/HTMLFormElement-impl.js:88:5)
      at HTMLFormElementImpl._doSubmit (node_modules/jsdom/lib/jsdom/living/nodes/HTMLFormElement-impl.js:80:10)
      at HTMLButtonElementImpl._activationBehavior (node_modules/jsdom/lib/jsdom/living/nodes/HTMLButtonElement-impl.js:23:14)
      at HTMLButtonElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:240:26)
      at fireAnEvent (node_modules/jsdom/lib/jsdom/living/helpers/events.js:18:36)

 PASS  js/router/index.test.js

Test Suites: 1 failed, 14 passed, 15 total
Tests:       32 passed, 32 total
Snapshots:   1 passed, 1 total
Time:        3.632 s
Ran all test suites.
npm ERR! Test failed.  See above for more details.



    Est-ce que vous pouvez m'éclairer là-dessus, s'il vous plaît ?

    • Partager sur Facebook
    • Partager sur Twitter
    SamuelGaborieau3
    • Javascript
      12 mai 2022 à 0:37:10

      Bonjour, en tapant le message d'erreur sur Google j'ai trouvé un issues du Github jsdom (qui date un petit peut 2017)

      Qui indique tout simplement que jsdom n'implémente pas la méthode submit des HTMLFormElement.

      Jsdom étant une abstraction de l'API du DOM certaine méthodes/API ne sont pas disponible dans jsdom.

      Parmi les propositions de "solutions de contournement" une personne propose de faire un genre de "mock artificiel" via:

      window.HTMLFormElement.prototype.submit = () => {}

      L'idée étant n'implémenté une version "fictive" de la méthode submit

      /**
 * @jest-environment jsdom
 */
 
import '@testing-library/jest-dom'
import {
    getByRole,
    getByTestId,
} from '@testing-library/dom'


// version fictive de la méthode HTMLFormElement.submit
// voir: (https://github.com/jsdom/jsdom/issues/1937)
window.HTMLFormElement.prototype.submit = () => {
	console.log("Form has been submit");
}

import SignIn from './index'
  
 // Je crée ma suite de test
 describe('Sign In Integration Test Suites', () => {
    it('should render "L\'e-mail n\'est pas correct"', () => {
        document.body.innerHTML = SignIn.render()
 
        const email = document.getElementById('user-email')
        email.value = 'thomas@thomas.com'
 
        const button = getByRole(document.body, 'button')
        button.click()
 
        expect(getByTestId(document.body, 'user-email-error-msg').textContent).toEqual('L\'e-mail n\'est pas correct')
    })
})

      Si tu veux vérifier que la méthode submit du formulaire est bien exécuter il faudra mocker la méthode submit et vérifier quelle à bien été appelé,

      après avoir cliquer sur le boutton de type submit.

      Ce qui peut donner un corps de test qui peut s'apparenter à cela:

              // séléctionne le formulaire
        const form = document.querySelector("form");

        // mock la méthode submit du formulaire
        const submitSpy = jest.spyOn(form, "submit");

        const button = getByRole(document.body, 'button')

        // click sur le boutton submit du formulaire
        // ce qui doit déclencher la méthode submit du formulaire
        button.click()

        // vérifie que la méthode submit du formulaire à été exécuté
        expect(submitSpy).toBeCalled();

        expect(getByTestId(document.body, 'user-email-error-msg').textContent).toEqual('L\'e-mail n\'est pas correct')

      Jest spyOn


      -
      Edité par SamuelGaborieau3 12 mai 2022 à 0:38:01

      • Partager sur Facebook
      • Partager sur Twitter

      suggestion de présentation.

      Aide sur l'exercice p3-c2b unit test

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur ●
      • Markdown