How should someone test a button that evokes `showSaveFilePicker` using Cypress?

Question

I'm trying to test a web text editor that saves and opens files from the local system. I'm using Cypress v11.2.0 with Chrome v107.

The file operations use the File System Access API through the browser-fs-access library.

I'm unable to test any of the file operations like save, for example. When the underline system function showSaveFilePicker is called, the test throws an error.

This is the test code:

  it("'new' creates and links to an empty file", () => {
    cy.visit("/");
    cy.get("#new").click();
  });

Here is the error image:

The operation is working fine in the app.

My question is: how should someone test a button that evokes showSaveFilePicker using Cypress?

Answer 1

It will work with plugin library cypress-real-events

import 'cypress-real-events'

it("'new' creates and links to an empty file", () => {
  cy.visit('https://googlechromelabs.github.io/browser-fs-access/demo/');
  cy.contains("button", 'Save Image File')
    .realClick();
});

---

Stubbing

Although, the problem is what to do next? The test can't interact with the live popup.

I guess stub the call as per example here Window confirm popup.

But that doesn't need cypress-real-events, since the dialog is not actually called.

it("'new' creates and links to an empty file", () => {
  cy.visit('https://googlechromelabs.github.io/browser-fs-access/demo/');

  cy.window().then((win) =>
    cy.stub(win, 'showSaveFilePicker').as('showSaveFilePicker').returns(true),
  )

  cy.contains("button", 'Save Image File')
    .click();

  cy.get('@showSaveFilePicker')
    .should('have.been.calledOnce')
    .invoke('restore')
});