La mayor parte de la investigación que he realizado con respecto a las pruebas unitarias de prueba de broma y/o las pruebas de integración está muy orientada a React. Pero no estoy usando reaccionar en este proyecto, usando vainilla javascript. Entonces, el problema es que no tengo idea de cómo escribir una prueba para este formulario simple que verifica los valores de entrada y los guarda en una variable.

¿Cómo escribo una prueba para este formulario a continuación usando broma? o usando JSDOM?

índice.js

 const form = document.querySelector('form'); // input[name="type"] I have 3 inputs with attributes of: name, email and card //So I want their values when form is submitted.. Code works but No idea on how to write test for this. const newValue = (type) => document.querySelector(`input[name="${type}"]`).value; const clearInput = (type) => document.querySelector(`input[name="${type}"]`).value = ''; // How do I write a test for this form.addEventListener ?? form.addEventListener("submit", (e) => { // vanilla js I prevent the page to reloa d upon form submission e.preventDefault(); // building helper arrays for the incoming logic const resultArray = []; const arrayTypes = ['name', 'email', 'card'] // Looping through with for of on arrayTypes then sending each type to their relative helper function for (const type of arrayTypes) { resultArray.push(newValue(type)) clearInput(type) } // Assigning the respected Object key to each object key so that the backend can work accordingly let obj = Object.assign({}, resultArray); let { 0: name, 1: email, 2: card } = obj; obj = { name, email, card }; return obj; });

Aquí hay una muestra para el formulario HTML:

 <form action=""> <div class="flex"> <label for="name">Name:</label> <input value="" type="text" name="name" id="name" placeholder="Enter Your Name"/> </div> <div class="flex"> <label for="email">Email:</label> <input value="" type="email" name="email" id="email" placeholder="Enter Your Email"/> </div> <div class="flex"> <label for="card">Card:</label> <input value="" type="number" name="card" id="card" placeholder="Enter a Proxy Credit Card Number"/> </div> <div> <input id="submit" type="submit" value="Submit"/> </div> </form>