How to use the @stencil/core/testing.newSpecPage function in @stencil/core

async function setup(props: Props) {
  const page = await newSpecPage({
    components: [ManifoldPlanDetails, ManifoldSelect],
    html: '<div></div>',
  });

  const component = page.doc.createElement('manifold-plan-details');

  // add load event listener for later
  if (props.loadCallback) {
    page.doc.addEventListener('manifold-planSelector-load', props.loadCallback);
  }

  component.plan = paidPlan;
  component.product = product;

  const root = page.root as HTMLDivElement;
  root.appendChild(component);

async function snapshotTestIcon(iconName: string) {
  const page = await newSpecPage({
    components: [AmplifyIcon],
    html: ``,
  });

  expect(page.root).toMatchSnapshot();
}

async function setup(props: Props) {
  const page = await newSpecPage({
    components: [ManifoldDataResizeButton],
    html: '<div></div>',
  });

  const component = page.doc.createElement('manifold-data-resize-button');
  component.graphqlFetch = createGraphqlFetch({ endpoint: () =&gt; graphqlEndpoint });
  component.planId = props.planId;
  component.resourceLabel = props.resourceLabel;
  component.resourceId = props.resourceId;

  const root = page.root as HTMLDivElement;
  root.appendChild(component);
  await page.waitForChanges();

  return { page, component };
}

async function setup(props: Props) {
  const page = await newSpecPage({
    components: [ManifoldCredentials, ManifoldCredentialsView],
    html: '<div></div>',
  });

  const component = page.doc.createElement('manifold-credentials');
  component.graphqlFetch = createGraphqlFetch({
    endpoint: () =&gt; graphqlEndpoint,
    getAuthToken: jest.fn(() =&gt; '1234'),
    wait: () =&gt; 10,
    setAuthToken: jest.fn(),
  });
  component.resourceLabel = props.resourceLabel;

  const root = page.root as HTMLDivElement;
  root.appendChild(component);
  await page.waitForChanges();

async function setup(props: Props) {
  const page = await newSpecPage({
    components: [ManifoldResourcePlan, ManifoldPlanDetails],
    html: '<div></div>',
  });

  const component = page.doc.createElement('manifold-resource-plan');
  component.loading = props.loading;
  component.gqlData = props.gqlData;

  const root = page.root as HTMLDivElement;
  root.appendChild(component);
  await page.waitForChanges();
  return { page, component };
}

async function setup(props: Props) {
  const page = await newSpecPage({
    components: [ManifoldResourceSso, ManifoldDataSsoButton],
    html: '<div></div>',
  });

  const component = page.doc.createElement('manifold-resource-sso');
  component.disabled = props.disabled;
  component.gqlData = props.gqlData;
  component.loading = props.loading;

  const root = page.root as HTMLDivElement;
  root.appendChild(component);
  await page.waitForChanges();

  return { page, component };
}

async function setup(props: Props) {
  const page = await newSpecPage({
    components: [ManifoldDataSsoButton],
    html: '<div></div>',
  });

  const component = page.doc.createElement('manifold-data-sso-button');
  component.loading = props.loading;
  component.disabled = props.disabled;
  component.resourceLabel = props.resourceLabel;
  component.resourceId = props.resourceId;
  component.graphqlFetch = createGraphqlFetch({ endpoint: () =&gt; graphqlEndpoint });

  const root = page.root as HTMLDivElement;
  root.appendChild(component);
  await page.waitForChanges();

  return { page, component };

async function setup({ onLoad, label }: Setup) {
  const page = await newSpecPage({
    components: [ManifoldDataHasResource],
    html: '<div></div>',
  });

  const component = page.doc.createElement('manifold-data-has-resource');
  component.innerHTML = `
    <div slot="loading"></div>
    <div slot="has-resource"></div>
    <div slot="no-resource"></div>
  `;

  component.graphqlFetch = createGraphqlFetch({ endpoint: () =&gt; graphqlEndpoint });
  component.paused = true;
  component.label = label;

  if (onLoad) {

async function setup(props: Props) {
  const page = await newSpecPage({
    components: [ManifoldResourceDeprovision, ManifoldDataDeprovisionButton],
    html: '<div></div>',
  });

  const component = page.doc.createElement('manifold-resource-deprovision');
  component.disabled = props.disabled;
  component.gqlData = props.gqlData;
  component.loading = props.loading;

  const root = page.root as HTMLDivElement;
  root.appendChild(component);
  await page.waitForChanges();

  return { page, component };
}

async function setup(props: Props) {
  const page = await newSpecPage({
    components: [ManifoldProductCard, ManifoldProductCardView],
    html: '<div></div>',
  });

  const component = page.doc.createElement('manifold-product-card');
  component.graphqlFetch = createGraphqlFetch({
    endpoint: () =&gt; graphqlEndpoint,
  });
  component.productLabel = props.productLabel;
  component.productLinkFormat = props.productLinkFormat;
  component.preserveEvent = props.preserveEvent;

  const root = page.root as HTMLDivElement;
  root.appendChild(component);
  await page.waitForChanges();