javascript - How to Test renderCart function without executing dependent paymentSummary.js in Jasmine? - Stack Overflow

admin管理员组

文章数量:1312662

I’m trying to write a unit test for the renderCart function in my orderSummary.js file using Jasmine. However, I’m encountering an issue where the paymentSummary.js module, which is imported in orderSummary.js, is being executed during the test. This causes errors because paymentSummary.js tries to update DOM elements that don’t exist in my test setup.

Here’s the relevant code:

orderSummary.js

import { cart, removeFromCart, calculateCartQuantity, saveToStorage } from '../../data/cart.js';
import { getProduct, products } from '../../data/products.js';
import { formatCurrency } from '../utils/format-currency.js';
import dayjs from '/[email protected]/esm/index.js';
import { deliveryOptions } from '../../data/deliveryOptions.js';
import { updateOrderSummary } from './paymentSummary.js'; // Problematic import

export function renderCart() {
  // Generates HTML for the cart and updates the DOM
  let cartHTML = '';
  cart.forEach((cartItem, index) => {
    const matchingProduct = getProduct(cartItem.productID);
    // Generate cart item HTML
    cartHTML += `
      <div class="cart-item-container js-cart-item-container-${matchingProduct.id}">
        <!-- Cart item details -->
      </div>
    `;
  });
  document.querySelector('.js-order-summary').innerHTML = cartHTML;
}

paymentSummary.js

import { cart, calculateCartQuantity } from "../../data/cart.js";
import { deliveryOptions } from "../../data/deliveryOptions.js";
import { products, getProduct } from '../../data/products.js';
import { formatCurrency } from "../utils/format-currency.js";

export function updateOrderSummary() {
  // Calculates order summary and updates the DOM
  let itemPrice = 0;
  let shippingPrice = 0;
  cart.forEach((cartItem) => {
    const matchingProduct = getProduct(cartItem.productID);
    itemPrice += cartItem.quantity * matchingProduct.priceCents;
    // Calculate shipping price
  });
  displayOrderSummary(itemPrice, shippingPrice);
}

function displayOrderSummary(itemPrice, shippingPrice) {
  // Updates DOM elements with order summary details
  document.querySelector('.js-item-quantity').innerHTML = `Items: (${calculateCartQuantity()})`;
  document.querySelector('.js-payment-summary-money1').innerHTML = `$${formatCurrency(itemPrice)}`;
  // Update other DOM elements...
}

// Problem: This runs immediately when paymentSummary.js is imported
updateOrderSummary();

Test Code

import { renderCart } from "../scripts/checkout/orderSummary.js";

describe('Test suite: renderCart', () => {
  it('displays the cart', () => {
    // Mock the DOM element required by renderCart
    document.querySelector('.js-test-container').innerHTML = `
      <div class="js-order-summary"></div>
    `;

    // Mock localStorage data
    spyOn(localStorage, 'getItem').and.returnValue(
      JSON.stringify([
        {
          productID: '15b6fc6f-327a-4ec4-896f-486349e85a3d',
          quantity: 1,
          deliveryOptionID: '3',
        },
        {
          productID: '83d4ca15-0f35-48f5-b7a3-1ea210004f2e',
          quantity: 1,
          deliveryOptionID: '2',
        },
      ])
    );

    // Call the function under test
    renderCart();
  });
});

and i am getting following error :

paymentSummary.js:39 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
    at displayOrderSummary (paymentSummary.js:39:59)
    at updateOrderSummary (paymentSummary.js:28:5)
    at paymentSummary.js:31:1

1. Mocking DOM Elements:

I added all the required DOM elements to my test setup:

document.body.innerHTML = `
  <div class="js-item-quantity"></div>
  <div class="js-payment-summary-money1"></div>
  <div class="js-payment-summary-money2"></div>
  <div class="js-payment-summary-money3"></div>
  <div class="js-payment-summary-money4"></div>
  <div class="js-payment-summary-money5"></div>
  <div class="js-order-summary"></div>
  `;

2. Spying on updateOrderSummary:

I tried spying on updateOrderSummary to prevent it from running: spyOn(paymentSummary, 'updateOrderSummary'); However, this doesn’t work because updateOrderSummary is executed immediately when paymentSummary.js is imported.

本文标签：