javascript - 如何用 Cypress stub contentwindow.print/用 Cypress 测试 printJS

Question

我的程序使用 printJS这是一个帮助格式化页面内容以供打印的库。我想用 cypress 编写测试来测试是否调用了打印预览。目前我有一个按钮在单击时调用 printJS，并且由于 cypress 无法与打印预览窗口交互，我认为将对 printJS 的调用 stub 然后写一个它被调用一次的断言是个好主意。我知道这适用于 window.print()，因为您可以使用此代码 stub 。

cy.visit('http://127.0.0.1/',{
    onBeforeLoad: (win) => {
        cy.stub(win, 'print')
    }
})

然后断言

cy.contains('print').click()
cy.window().then((win) => {
    expect(win.print).to.be.calledOnce
})

我的旧按钮

<button type="button" class="btn btn-secnodary" onclick="window.print()">
    Print
</button>

但是我使用了 printJS，这意味着我的按钮现在看起来像这样

<button type="button" onclick="printJS({printable: 'id_preview_modal_body', type: 'html'})" data-dismiss="modal">
    Print
</button>

javascript 作为 print.min.js 加载，可以在 here 中找到.我试图对 contentwindow 进行 stub ，但到目前为止似乎还行不通。在 printJS 的代码中，打印发生在这里

frameElement.contentWindow.print()

来自 their github page , 第 63 行

我 stub 的方式给出了这个问题

cy.visit('http://127.0.0.1:8000/notices/new/',{
    onBeforeLoad: (win) => {
        cy.stub(win, 'printJS')
    }
})

Uncaught TypeError: Cannot stub non-existent own property printJS

断言也给出了这个错误

cy.window().then((win) => {
    expect(win.printJS).to.be.calledOnce
})

TypeError: [Function: init] is not a spy or a call to a spy!

我认为 [Function: init] 是从他们的 index.js file 引用 const printJS = print.init .但我不知道如何进一步调试这个问题。任何帮助，将不胜感激。谢谢!

Answer 1

问题是 onBeforeLoad Hook 在 printJS 启动之前被调用，当 printJS 被导入时它调用它的 init() 函数并覆盖你在 window 中的 stub .print.

stub 太早了

cy.visit('http://127.0.0.1:8000/notices/new/',{
    onBeforeLoad: (win) => {
        cy.stub(win, 'printJS')
    }
})

在组件加载并启动 printJS 后 stub

const printStub

before(function(){

  cy.visit('http://127.0.0.1:8000/notices/new/')

  // maybe wait for loading to complete

  cy.window().then(win => {
    printStub = cy.stub(win, 'printJS')
  })
})

it('stubs printJS', () => {
  cy.contains('button', 'Print').click()
  cy.window().then(win => {
    expect(printStub).to.be.calledOnce
  })
})