Как проверить функцию rendercart без выполнения иждивенного резюме оплаты. ⇐ Javascript

[Anonymous]

Я пытаюсь написать модульный тест для функции rendercart в моем файле ordersummary.js с использованием jasmine. Тем не менее, я сталкиваюсь с проблемой, в которой модуль Paymentumary.js, который импортируется в ordersummary.js, выполняется во время теста. Это вызывает ошибки, потому что Paymentsummary.js пытается обновить элементы DOM, которых нет в моей настройке теста. < /P>
Вот соответствующий код: < /p>
strong> 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 'https://unpkg.com/dayjs@1.11.10/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 += `



`;
});
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();

тестовый код

Код: Выделить всё

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 = `

`;

// 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();
});
});
< /code>
И я получаю следующую ошибку: < /p>
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
< /code>

  издевательные элементы Dom: < /strong> < /li>
< /ol>
Я добавил Все необходимые элементы DOM для моей настройки теста: < /p>
document.body.innerHTML = `

`;
< /code>

  Spying on Updateordersummary: < /strong> < /li>
< /ol>
Я попытался шпионить за обновлениями, чтобы предотвратить его запуск:
spyOn(paymentSummary, 'updateOrderSummary');

Тем не менее, это не работает, потому что Updateordersummary выполняется немедленно, когда импортируется paymentsummary.js.

Подробнее здесь: https://stackoverflow.com/questions/794 ... mary-js-in