@wordpress/e2e-test-utils/build-module/inserter.js

End-To-End (E2E) test utils for WordPress.

import { ElementHandle } from "puppeteer-core";
import { pressKeyWithModifier } from "./press-key-with-modifier";
import { canvas } from "./canvas";
const INSERTER_SEARCH_SELECTOR = ".block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search";
async function openGlobalBlockInserter() {
  if (!await isGlobalInserterOpen()) {
    await toggleGlobalBlockInserter();
    await page.waitForSelector(".block-editor-inserter__menu");
  }
}
async function closeGlobalBlockInserter() {
  if (await isGlobalInserterOpen()) {
    await toggleGlobalBlockInserter();
  }
}
async function isGlobalInserterOpen() {
  return await page.evaluate(() => {
    return !!document.querySelector(
      '.edit-post-header [aria-label="Add block"].is-pressed,.edit-site-header-edit-mode [aria-label="Add block"].is-pressed,.edit-post-header [aria-label="Block Inserter"].is-pressed,.edit-site-header [aria-label="Block Inserter"].is-pressed,.edit-widgets-header [aria-label="Block Inserter"].is-pressed,.edit-widgets-header [aria-label="Add block"].is-pressed,.edit-site-header-edit-mode__inserter-toggle.is-pressed,.editor-header [aria-label="Block Inserter"].is-pressed'
    );
  });
}
async function toggleGlobalBlockInserter() {
  await page.click(
    '.editor-document-tools__inserter-toggle,.edit-post-header [aria-label="Add block"],.edit-site-header [aria-label="Add block"],.edit-post-header [aria-label="Block Inserter"],.edit-site-header [aria-label="Block Inserter"],.edit-widgets-header [aria-label="Add block"],.edit-widgets-header [aria-label="Block Inserter"],.edit-site-header-edit-mode__inserter-toggle'
  );
}
async function selectGlobalInserterTab(label) {
  const tabs = await page.$(".block-editor-inserter__tabs");
  if (!tabs) {
    return;
  }
  const activeTab = await page.waitForSelector(
    // Targeting a class name is necessary here, because there are likely
    // two implementations of the `Tabs` component visible to this test, and
    // we want to confirm that it's waiting for the correct one.
    '.block-editor-inserter__tabs [role="tab"][aria-selected="true"]'
  );
  const activeTabLabel = await page.evaluate(
    (el) => el.innerText,
    activeTab
  );
  if (activeTabLabel === label) {
    return;
  }
  let labelSelector;
  switch (label) {
    case "Blocks":
    case "Patterns":
    case "Media":
      labelSelector = `. = "${label}"`;
      break;
    case "Synced patterns":
      labelSelector = `@aria-label = "${label}"`;
      break;
  }
  const targetTab = await page.waitForXPath(
    `//div[contains(@class, "block-editor-inserter__tabs")]//button[${labelSelector}]`
  );
  await targetTab.click();
}
async function focusSelectedBlock() {
  await page.evaluate(() => {
    wp.data.dispatch("core/block-editor").selectBlock(
      wp.data.select("core/block-editor").getSelectedBlockClientId(),
      0
    );
  });
}
async function waitForInserterCloseAndContentFocus() {
  await canvas().waitForFunction(
    () => document.activeElement.closest(
      ".block-editor-block-list__layout"
    ) !== null
  );
}
async function searchGlobalInserter(category, searchTerm) {
  await openGlobalBlockInserter();
  await page.waitForSelector(INSERTER_SEARCH_SELECTOR);
  await page.focus(INSERTER_SEARCH_SELECTOR);
  await pressKeyWithModifier("primary", "a");
  await page.keyboard.type(searchTerm);
  await page.waitForSelector(".block-editor-inserter__block-list", {
    hidden: true
  });
  let waitForInsertElement;
  let waitForNoResults;
  switch (category) {
    case "Blocks":
    case "Patterns":
    case "Synced patterns": {
      waitForInsertElement = async () => {
        return await page.waitForXPath(
          `//*[@role='option' and contains(., '${searchTerm}')]`
        );
      };
      waitForNoResults = async () => {
        await page.waitForSelector(
          ".block-editor-inserter__no-results"
        );
        return null;
      };
      break;
    }
    case "Block Directory": {
      waitForInsertElement = async () => {
        return await page.waitForSelector(
          ".block-directory-downloadable-blocks-list button:first-child"
        );
      };
      waitForNoResults = async () => {
        return await new Promise(
          (resolve) => setTimeout(() => resolve(null), 5e3)
        );
      };
    }
  }
  return await Promise.race([waitForInsertElement(), waitForNoResults()]);
}
async function insertFromGlobalInserter(category, searchTerm) {
  await openGlobalBlockInserter();
  await selectGlobalInserterTab(category);
  let insertButton;
  if (["Blocks", "Synced patterns"].includes(category)) {
    try {
      insertButton = (await page.$x(
        `//*[@role='option' and contains(., '${searchTerm}')]`
      ))[0];
    } catch (error) {
    }
  }
  if (!insertButton) {
    insertButton = await searchGlobalInserter(category, searchTerm);
  }
  if (!insertButton) {
    throw new Error(
      `Couldn't find "${searchTerm}" in the ${category} category.`
    );
  }
  await insertButton.click();
  if (category === "Synced patterns") {
    await canvas().waitForSelector(
      ".block-library-block__reusable-block-container"
    );
  }
  if (category === "Block Directory") {
    await page.waitForSelector(
      ".block-directory-downloadable-blocks-list button:first-child:not(.is-busy)"
    );
  }
  await focusSelectedBlock();
  await waitForInserterCloseAndContentFocus();
}
async function searchForBlock(searchTerm) {
  return await searchGlobalInserter("Blocks", searchTerm);
}
async function searchForPattern(searchTerm) {
  return await searchGlobalInserter("Patterns", searchTerm);
}
async function searchForReusableBlock(searchTerm) {
  return await searchGlobalInserter("Reusable", searchTerm);
}
async function searchForBlockDirectoryBlock(searchTerm) {
  return await searchGlobalInserter("Block Directory", searchTerm);
}
async function insertBlock(searchTerm) {
  await insertFromGlobalInserter("Blocks", searchTerm);
}
async function insertPattern(searchTerm) {
  await insertFromGlobalInserter("Patterns", searchTerm);
}
async function insertBlockDirectoryBlock(searchTerm) {
  return await insertFromGlobalInserter("Block Directory", searchTerm);
}
export {
  closeGlobalBlockInserter,
  insertBlock,
  insertBlockDirectoryBlock,
  insertFromGlobalInserter,
  insertPattern,
  openGlobalBlockInserter,
  searchForBlock,
  searchForBlockDirectoryBlock,
  searchForPattern,
  searchForReusableBlock,
  searchGlobalInserter,
  selectGlobalInserterTab,
  toggleGlobalBlockInserter
};
//# sourceMappingURL=inserter.js.map