Thiết kế website giá rẻ

Question

When running the test the variables don’t get mocked, it fails and I get an error saying “document is not defined”
here’s the html file

<head>
  <link
    href="https://fonts.googleapis.com/css?family=Quicksand:400,700"
    rel="stylesheet"
  />
</head>
<body>
  <link rel="stylesheet" href="style.css" />
  <h3><b>B</b>ody <b>M</b>ass <b>I</b>ndex Calculator</h3>
  <form class="form" id="form" onsubmit="return validateForm()">
    <div class="row-one">
      <input
        type="text"
        class="text-input"
        id="age"
        autocomplete="off"
        required
      />
      <p class="text">Age</p>
      <label class="container">
        <input type="radio" name="radio" id="f" />
        <p class="text">Female</p>
        <span class="checkmark"></span>
      </label>
      <label class="container">
        <input type="radio" name="radio" id="m" />
        <p class="text">Male</p>
        <span class="checkmark"></span>
      </label>
    </div>

    <div class="row-two">
      <input
        type="text"
        class="text-input"
        id="height"
        autocomplete="off"
        required
      />
      <p class="text">Height (cm)</p>
      <input
        type="text"
        class="text-input"
        id="weight"
        autocomplete="off"
        required
      />
      <p class="text">Weight (kg)</p>
    </div>
    <button type="button" id="submit">Submit</button>
    <script src="./index.js"></script>
  </form>
</body>

the js file:

var age = document.getElementById("age");
var height = document.getElementById("height");
var weight = document.getElementById("weight");
var male = document.getElementById("m");
var female = document.getElementById("f");
var form = document.getElementById("form");
function validateForm() {
  if (
    age.value == "" ||
    height.value == "" ||
    weight.value == "" ||
    (male.checked == false && female.checked == false)
  ) {
    alert("All fields are required!");
    document.getElementById("submit").removeEventListener("click", countBmi);
  } else {
    countBmi();
  }
}
document.getElementById("submit").addEventListener("click", validateForm);
function countBmi() {
  var p = [age.value, height.value, weight.value];
  if (male.checked) {
    p.push("male");
  } else if (female.checked) {
    p.push("female");
  }
  form.reset();
  var bmi = Number(p[2]) / (((Number(p[1]) / 100) * Number(p[1])) / 100);
  var result = "";
  if (bmi < 18.5) {
    result = "Underweight";
  } else if (18.5 <= bmi && bmi <= 24.9) {
    result = "Healthy";
  } else if (25 <= bmi && bmi <= 29.9) {
    result = "Overweight";
  } else if (30 <= bmi && bmi <= 34.9) {
    result = "Obese";
  } else if (35 <= bmi) {
    result = "Extremely obese";
  }
  var h1 = document.createElement("h1");
  var h2 = document.createElement("h2");
  var t = document.createTextNode(result);
  var b = document.createTextNode("BMI: ");
  var r = document.createTextNode(parseFloat(bmi).toFixed(2));
  h1.appendChild(t);
  h2.appendChild(b);
  h2.appendChild(r);
  document.body.appendChild(h1);
  document.body.appendChild(h2);
  document.getElementById("submit").removeEventListener("click", countBmi);
  document.getElementById("submit").removeEventListener("click", validateForm);
}
document.getElementById("submit").addEventListener("click", countBmi);

and the test itself written in vitest:

import { test, expect } from "vitest";
import { JSDOM } from "jsdom";
import { validateForm, countBmi } from "../src/index";

test("Validation for empty fields", () => {
  // Create a mock document object
  const mockDocument = new JSDOM().window.document;

  // Mocking alert function
  const alertMock = jest.spyOn(window, "alert").mockImplementation(() => {});

  // Mock the getElementById function
  mockDocument.getElementById = jest.fn().mockReturnValue({ value: "" });

  // Assign the mock document to global.document
  global.document = mockDocument;

  // Calling validateForm with empty fields
  validateForm();

  // Expecting alert to be called
  expect(alertMock).toHaveBeenCalledWith("All fields are required!");
});

test("Validation for filled fields", () => {
  // Create a mock document object
  const mockDocument = new JSDOM().window.document;

  // Mock the countBmi function
  const countBmiMock = jest
    .spyOn(window, "countBmi")
    .mockImplementation(() => {});

  // Mock the getElementById function
  mockDocument.getElementById = jest.fn().mockReturnValue({ value: "25" });

  // Assign the mock document to global.document
  global.document = mockDocument;

  // Calling validateForm with filled fields
  validateForm(25, 170, 70, true);

  // Expecting countBmi to be called
  expect(countBmiMock).toHaveBeenCalled();
});

test("BMI calculation", () => {
  // Create a mock document object
  const mockDocument = new JSDOM().window.document;

  // Mock the createElement function
  mockDocument.createElement = jest.fn().mockReturnValue({ textContent: "" });

  // Assign the mock document to global.document
  global.document = mockDocument;

  // Calling countBmi
  countBmi(170, 70, true);

  // Expecting BMI result to be appended to body
  expect(mockDocument.createElement).toHaveBeenCalled();
});

this is the error btw:
this is the error

I tried working with gpt with different types of mocking but it still doesn’t work

Thiết kế website giá rẻ

Danh mục

Mocking a form varible in vitest