Test Environment and Testing

1

Can anyone suggest a good article on testing code for web development?

I have noodled around in DEVTOOLS and learned a tiny bit about using it to debug and to fix errors. I have node.js/npm installed. I use VS Code and the Live Server extension. Even with all that, I find myself lost in trying to test what code I’ve written.

Being an old (very old) COBOL/BAL/PL1 programmer, I used to rely heavily on the ability to see how my code affected variables by using core dumps produced when my code failed. I can’t seem to find anything analogous to that in web development code.

For example, I have a simple form taken from the MDN tutorial on forms processing. It consists of a name, and email address, and a text message all created with HTML and CSS. I have a javascript file that attempts to take the information from the form console log the data entered. After entering a name, email address and text message and clicking the Submit button, I get an HTTP 405 error. I’ve read about what that means and how to fix it, but I’d like to be able to see the data. So far I haven’t found a way to do that.

Instead of asking this group to debug my code, I’m asking instead for help to learn how to do it myself.

2

what is your code? if you want to use the data in the frontend you should stop the form from submitting

1 Like
3

Pretty much just the browser debugger and console logs. Most people rarely even use the debugger, but do console log debugging. But it is true, you need to know what to log.

It sounds like this is all client side, but if you used an API there are also tools like Insomnia/Postman, etc. used to test APIs.

Maybe you could post the tutorial and your code so we understand the context of the question a little better.

1 Like
4

Thanks for the replies.

I have attempted to create a form that is filled in on the client side, and processed by javascript. I want a simple example to learn from. I’m trying to use the code example from the MDN tutorial. It defines the form as follows:

 <form action="/my-handling-form-page" method="post">
      <p>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name" />
      </p>
      <p>
        <label for="mail">Email:</label>
        <input type="email" id="mail" name="user_email" />
      </p>
      <p>
        <label for="msg">Message:</label>
        <textarea id="msg" name="user_message"></textarea>
      </p>
      <p class="button">
        <button type="submit">Send your message</button>
      </p>
      
    </form>

. . . and js code is:

async function sendData(data) {
  // Construct a FormData instance
  const formData = new FormData();

  // Add a text field
  formData.append("name", "email", "message");

  // Add a file
  const selection = await window.showOpenFilePicker();
  if (selection.length > 0) {
    const file = await selection[0].getFile();
    formData.append("file", file);
  }

  try {
    const response = await fetch("https://example.org/post", {
      method: "POST",
      // Set the FormData instance as the request body
      body: formData,
    });
    console.log(await response.json());
  } catch (e) {
    console.error(e);
  }
}

const send = document.querySelector("#send");
send.addEventListener("click", sendData);

I have to admit that I don’t fully understand it. From the HTTP 405 error, it seems the method is faulty. As I understand it, post is a valid method; so there must be something else wrong (or I don’t understand what the 405 error means).

Because the value assigned to the action attribute is not a URL (but a path, I think), the example I’ve chosen to follow does not include backend code. I’m trying to understand form entry processing before tackling backend data handling.

There is no limit to my ignorance.

5

There is kind of a lot to unpack here. You may have skipped some important information on the MDN page.

  1. Native web forms works without JS. The action is an endpoint and the method is a HTTP method (GET/POST, etc.). With your code, you would need a server that accepts a POST on the endpoint in the action attribute.
  1. When doing it all in JS you do not need the action or method attributes on the form. And your POST endpoint is in the fetch code, not the form.

So for your code:

  1. Remove the action and method from the form. You do not need them when it is handled with JS.

  2. You are doing a POST to https://example.org/post in the JS so that is the “action endpoint”, not /my-handling-form-page.

  3. The append method is used to create a FormData object from scratch, I assume you just want to get the values out of the form.

  1. Your https://example.org/post POST is going to get CORS blocked by the browser. I would suggest setting up a simple Express server locally and testing using that instead.
1 Like
6

Thanks for the response.

I’m still unpacking it.

7

That is fine, once you add servers and backend code complexity goes up quickly.

Also, quick note of the MDN article use of formData. The multipart/form-data content type isn’t something Express have a built-in middleware for. You have to use something like Multer. Just mentioning it because otherwise it can get really confusing why the body payload isn’t working. More modern web frameworks have better out-of-the-box support for it.

1 Like