only-sow-placeholders-when-focused.js

import { html } from "../../packages/editor/src/utils/htm";

context("Captions", () => {
  beforeEach(() => {
    cy.visit("http://localhost:3000/");
  });

  it("should show if the image is focused", () => {
    cy.setEditorValue(html`
      <value>
        <document>
          <paragraph>focus</paragraph>
          <captioned_image>
            <image
              alt="test image"
              src="https://images.unsplash.com/photo-1560773526-435221de2527?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80"
            />
            <caption></caption>
          </captioned_image>
        </document>
      </value>
    `);

    cy.focusEditor();

    cy.getByText("caption for image")
      .closest("figcaption")
      .should("not.be.visible");

    cy.getByAltText("test image").click();

    cy.getByText("caption for image")
      .closest("figcaption")
      .should("be.visible");
  });

  it("should show if the caption is focused", () => {
    cy.setEditorValue(html`
      <value>
        <document>
          <paragraph>focus</paragraph>
          <captioned_image>
            <image
              alt="test image"
              src="https://images.unsplash.com/photo-1560773526-435221de2527?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80"
            />
            <caption></caption>
          </captioned_image>
        </document>
      </value>
    `);

    cy.focusEditor();

    cy.getByText("caption for image")
      .closest("figcaption")
      .should("not.be.visible");

    cy.getByAltText("test image").click();

    cy.getByText("caption for image").click({ force: true });

    cy.getByText("caption for image")
      .closest("figcaption")
      .should("be.visible");
  });

  it("should show if the caption has content", () => {
    cy.setEditorValue(html`
      <value>
        <document>
          <paragraph>focus</paragraph>
          <captioned_image>
            <image
              alt="test image"
              src="https://images.unsplash.com/photo-1560773526-435221de2527?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80"
            />
            <caption>
              Photo by Photographer
            </caption>
          </captioned_image>
        </document>
      </value>
    `);

    cy.focusEditor();

    cy.getByText("Photo by Photographer")
      .closest("figcaption")
      .should("be.visible");
  });
});