如何使用 cypress/test printJS 与 cypress 存根 contentwindow.print

Question

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

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 但到目前为止似乎不起作用。在 printJS 的代码中，打印发生在这里

frameElement.contentWindow.print()

来自 their github page，第 63 行

我处理它的方式给出了这个问题

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

问题是在启动 printJS 之前调用 onBeforeLoad 挂钩，当导入 printJS 时它会调用它的 init() 函数并覆盖 window.print 中的存根。

存根太早了

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

加载组件并启动 printJS 后存根

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
  })
})

Answer 2

这是对我有用的解决方案。在我的例子中，我在页面上有一个打印按钮。我需要单击才能打开 window。我存根 window.

  cy.get('.white-header > .ui-g-12 > .pull-right').then((data) => {
  cy.window().then((win) => {
  cy.stub(win, 'open').returns("Print window is opened")
  data.click()
  expect(win.open).to.be.calledOnce
})
})

如何使用 cypress/test printJS 与 cypress 存根 contentwindow.print

How to stub contentwindow.print with cypress/test printJS with cypress

javascript

end-to-end

sinon

printjs

cypress