@saasquatch/mint-components 1.14.7-9 → 1.14.7

package/dist/cjs/{ShadowViewAddon-3c344355.js → ShadowViewAddon-28865623.js}

@@ -1665,7 +1665,6 @@ function PortalRegisterView(props) {
 const style$4 = {
   ErrorStyle: {
     "&::part(control)": {
-      background: "var(--sl-color-danger-10)",
       borderColor: "var(--sl-color-danger-500)",
       outline: "var(--sl-color-danger-500)",
     },
@@ -1704,8 +1703,9 @@ JSS.jss.setup(JSS.create());
 const sheet$4 = JSS.jss.createStyleSheet(style$4);
 const styleString$4 = sheet$4.toString();
 function CheckboxFieldView(props) {
-  var _b, _c;
+  var _a, _b, _c, _d, _e;
   const { states, content, callbacks } = props;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (index.h("div", { class: sheet$4.classes.FieldContainer, part: "sqm-base" },
     index.h("style", { type: "text/css" },
       vanillaStyle$2,
@@ -1713,12 +1713,20 @@ function CheckboxFieldView(props) {
     index.h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), required: false }), global.intl.formatMessage({
+      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
+        if (!value && !content.checkboxOptional) {
+          return content.errorMessage;
+        }
+      } }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.checkboxName]) ? {
+      class: sheet$4.classes.ErrorStyle,
+    }
+      : [])), global.intl.formatMessage({
       id: content.checkboxName + "-message",
       defaultMessage: content.checkboxLabel,
     }, {
       labelLink: (index.h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
-    }))));
+    })),
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (index.h("p", { class: sheet$4.classes.ErrorMessageStyle }, content.errorMessage))));
 }
 
 function ChangeMarktingView(props) {

package/dist/cjs/sqm-big-stat_43.cjs.entry.js

@@ -24,7 +24,7 @@ const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
 const usePortalLogin = require('./usePortalLogin-63d896d1.js');
 const AsYouType = require('./AsYouType-6788393a.js');
 const utilities = require('./utilities-78f5e169.js');
-const ShadowViewAddon = require('./ShadowViewAddon-3c344355.js');
+const ShadowViewAddon = require('./ShadowViewAddon-28865623.js');
 require('./sqm-portal-container-view-4f15143a.js');
 const usePayoutStatus = require('./usePayoutStatus-feeac99b.js');
 

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -36,7 +36,7 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-fe6
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.js');
 require('./ErrorView-b2fcf954.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-15dfc0b6.js');
-const ShadowViewAddon = require('./ShadowViewAddon-3c344355.js');
+const ShadowViewAddon = require('./ShadowViewAddon-28865623.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
 const sqmInvoiceTableView = require('./sqm-invoice-table-view-0f7fa309.js');
 const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-89308aab.js');

package/dist/collection/components/sqm-big-stat/sqm-big-stat.e2e.js

@@ -0,0 +1,168 @@
+import { newE2EPage } from "@stencil/core/testing";
+function statFunctions(page) {
+  return {
+    expectElement: async (selector) => { var _a; 
+    // convert to string because jest pretty printing the object causes errors
+    return expect((_a = (await page.find(selector))) === null || _a === void 0 ? void 0 : _a.id).not.toBeUndefined(); },
+    dontExpectElement: async (selector) => { var _a; return expect((_a = (await page.find(selector))) === null || _a === void 0 ? void 0 : _a.id).toBeUndefined(); },
+    hasStat: async (stat) => {
+      expect(stat.innerHTML).not.toEqual("!!!");
+    },
+    hasInvalidStat: async (stat) => {
+      expect(stat.innerHTML).toEqual("!!!");
+    },
+  };
+}
+// <script>
+// window.widgetIdent = {
+//   tenantAlias: "test_a7yoz8854cf6x",
+//   appDomain: "https://staging.referralsaasquatch.com",
+//   token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6Im55bmVsbGllIiwiaWQiOiJueW5lbGxpZSJ9fQ.3KV974VPLgk4tD8LQfJTi4IPkKCmnaB8w48HzVJYDuI",
+//   userId: "nynellie",
+//   accountId: "nynellie",
+//   programId: "ny-post-referrals",
+// }
+// </script>
+function getHTML(stat) {
+  return /*html*/ `
+  <div>
+    ${stat}
+  </div>
+  `;
+}
+const statTypes = [
+  "/referralsCount",
+  "/referralsCount/converted",
+  "/referralsCount/started",
+  "/referralsMonth",
+  "/referralsWeek",
+  "/rewardsCount",
+  "/rewardsCount/global",
+  "/rewardsCountFiltered",
+  "/rewardsCountFiltered/global",
+  "/rewardsCountFiltered/INTEGRATION",
+  "/rewardsCountFiltered/INTEGRATION/global",
+  "/rewardsCountFiltered/PCT_DISCOUNT",
+  "/rewardsCountFiltered/PCT_DISCOUNT/global",
+  "/rewardsCountFiltered/PCT_DISCOUNT/PENDING",
+  "/rewardsCountFiltered/PCT_DISCOUNT/AVAILABLE",
+  "/rewardsCountFiltered/PCT_DISCOUNT/CANCELLED",
+  "/rewardsCountFiltered/PCT_DISCOUNT/PENDING/global",
+  "/rewardsCountFiltered/CREDIT",
+  "/rewardsCountFiltered/CREDIT/global",
+  "/rewardsCountFiltered/CREDIT/COFFEE",
+  "/rewardsCountFiltered/CREDIT/COFFEE/global",
+  "/rewardsCountFiltered/CREDIT/COFFEE/PENDING/global",
+  "/rewardsCountFiltered/CREDIT/COFFEE/AVAILABLE/global",
+  "/rewardsCountFiltered/CREDIT/CASH%2FUSD",
+  "/rewardsCountFiltered/CREDIT/CASH%2FUSD/global",
+  "/rewardsCountFiltered/CREDIT/CASH%2FUSD/PENDING",
+  "/rewardsCountFiltered/CREDIT/CASH%2FUSD/PENDING/global",
+  "/integrationRewardsCountFiltered",
+  "/integrationRewardsCountFiltered/global",
+  "/integrationRewardsCountFiltered/PENDING/global",
+  "/integrationRewardsCountFiltered/AVAILABLE/global",
+  "/rewardsMonth",
+  "/rewardsMonth/global",
+  "/rewardsWeek",
+  "/rewardsWeek/global",
+  "/rewardsAssigned/CREDIT/COFFEE",
+  "/rewardsAssigned/CREDIT/COFFEE/global",
+  "/rewardsAssigned/CREDIT/CASH%2FUSD",
+  "/rewardsAssigned/CREDIT/CASH%2FUSD/global",
+  "/rewardsRedeemed/CREDIT/COFFEE",
+  "/rewardsRedeemed/CREDIT/CASH%2FUSD",
+  "/rewardsRedeemed/CREDIT/COFFEE/global",
+  "/rewardsRedeemed/CREDIT/CASH%2FUSD/global",
+  "/rewardsAvailable/CREDIT/COFFEE",
+  "/rewardsAvailable/CREDIT/COFFEE/global",
+  "/rewardsAvailable/CREDIT/CASH%2FUSD",
+  "/rewardsAvailable/CREDIT/CASH%2FUSD/global",
+  "/rewardBalance/CREDIT/COFFEE",
+  "/rewardBalance/CREDIT/CASH/USD",
+  "/rewardBalance/CREDIT/COFFEE/global",
+  "/rewardBalance/CREDIT/COFFEE/prettyValue",
+  "/rewardBalance/CREDIT/COFFEE/value",
+  "/rewardBalance/CREDIT/COFFEE/prettyValue/global",
+  "/rewardBalance/CREDIT/COFFEE/value/global",
+  "/rewardBalance/CREDIT/CASH%2FUSD",
+  "/rewardBalance/CREDIT/CASH%2FUSD/global",
+  "/rewardBalance/CREDIT/CASH%2FUSD/prettyValue",
+  "/rewardBalance/CREDIT/CASH%2FUSD/value",
+  "/rewardBalance/CREDIT/CASH%2FUSD/prettyValue/global",
+  "/rewardBalance/CREDIT/CASH%2FUSD/value/global",
+  "/programGoals/count/Paid-Member-Goal%2Freferrals",
+  "/programGoals/conversionCount/Paid-Member-Goal%2Freferrals",
+];
+describe("sqm-big-stat", () => {
+  statTypes.map((statType) => {
+    return test(statType, async () => {
+      const html = getHTML(`<sqm-big-stat stat-type="${statType}"></sqm-big-stat>`);
+      const page = await newE2EPage();
+      const { expectElement, hasStat } = statFunctions(page);
+      await page.setContent(html);
+      await page.waitForChanges();
+      await expectElement("sqm-big-stat");
+      const stat = await page.find(`sqm-big-stat >>> div > div[part="stat-value"]`);
+      hasStat(stat);
+      page.close();
+    });
+  });
+  test("No props returns !!!", async () => {
+    const html = getHTML(`<sqm-big-stat></sqm-big-stat>`);
+    const page = await newE2EPage();
+    const { expectElement, hasInvalidStat } = statFunctions(page);
+    await page.setContent(html);
+    await page.waitForChanges();
+    await expectElement("sqm-big-stat");
+    const stat = await page.find(`sqm-big-stat >>> div > div[part="stat-value"]`);
+    hasInvalidStat(stat);
+    page.close();
+  });
+  test("/garbage/props", async () => {
+    const html = getHTML(`<sqm-big-stat stat-type="/garbage/props"></sqm-big-stat>`);
+    const page = await newE2EPage();
+    const { expectElement, hasInvalidStat } = statFunctions(page);
+    await page.setContent(html);
+    await page.waitForChanges();
+    await expectElement("sqm-big-stat");
+    const stat = await page.find(`sqm-big-stat >>> div > div[part="stat-value"]`);
+    hasInvalidStat(stat);
+    page.close();
+  });
+  test("/programGoals/count returns !!!", async () => {
+    const html = getHTML(`<sqm-big-stat stat-type="/programGoals/count"></sqm-big-stat>`);
+    const page = await newE2EPage();
+    const { expectElement, hasInvalidStat } = statFunctions(page);
+    await page.setContent(html);
+    await page.waitForChanges();
+    await expectElement("sqm-big-stat");
+    const stat = await page.find(`sqm-big-stat >>> div > div[part="stat-value"]`);
+    hasInvalidStat(stat);
+    page.close();
+  });
+  test("/programGoals/conversionCount returns !!!", async () => {
+    const html = getHTML(`<sqm-big-stat stat-type="/programGoals/conversionCount"></sqm-big-stat>`);
+    const page = await newE2EPage();
+    const { expectElement, hasInvalidStat } = statFunctions(page);
+    await page.setContent(html);
+    await page.waitForChanges();
+    await expectElement("sqm-big-stat");
+    const stat = await page.find(`sqm-big-stat >>> div > div[part="stat-value"]`);
+    hasInvalidStat(stat);
+    page.close();
+  });
+  test("/programGoals/count/My-Goal/referrals returns !!!", async () => {
+    const html = getHTML(`<sqm-big-stat stat-type="/programGoals/count/My-Goal/referrals"></sqm-big-stat>`);
+    const page = await newE2EPage();
+    const { expectElement, hasInvalidStat } = statFunctions(page);
+    await page.setContent(html);
+    await page.waitForChanges();
+    await expectElement("sqm-big-stat");
+    const stat = await page.find(`sqm-big-stat >>> div > div[part="stat-value"]`);
+    hasInvalidStat(stat);
+    page.close();
+  });
+});
+// nice debugging tool
+// console.log(await page.evaluate(()=>document.body.innerHTML))

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field-view.js

@@ -5,7 +5,6 @@ import { intl } from "../../global/global";
 const style = {
   ErrorStyle: {
     "&::part(control)": {
-      background: "var(--sl-color-danger-10)",
       borderColor: "var(--sl-color-danger-500)",
       outline: "var(--sl-color-danger-500)",
     },
@@ -44,7 +43,7 @@ jss.setup(preset());
 const sheet = jss.createStyleSheet(style);
 const styleString = sheet.toString();
 export function CheckboxFieldView(props) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const { states, content, callbacks } = props;
   const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (h("div", { class: sheet.classes.FieldContainer, part: "sqm-base" },
@@ -54,10 +53,18 @@ export function CheckboxFieldView(props) {
     h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), required: false }), intl.formatMessage({
+      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
+        if (!value && !content.checkboxOptional) {
+          return content.errorMessage;
+        }
+      } }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.checkboxName]) ? {
+      class: sheet.classes.ErrorStyle,
+    }
+      : [])), intl.formatMessage({
       id: content.checkboxName + "-message",
       defaultMessage: content.checkboxLabel,
     }, {
       labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
-    }))));
+    })),
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, content.errorMessage))));
 }

package/dist/collection/components/sqm-context-router/sqm-context-router.e2e.js

@@ -0,0 +1,180 @@
+import { newE2EPage } from "@stencil/core/testing";
+function newRoute(id, path) {
+  return /*html*/ `
+  <sqm-route path="${path}">
+    <div id=${id}></div>
+  </sqm-route>`;
+}
+function newTemplate(id, path) {
+  return /*html*/ `
+  <template path="${path}">
+    <div id=${id}></div>
+  </template>`;
+}
+function newPageFunctions(page) {
+  return {
+    expectElement: async (selector) => { var _a; 
+    // convert to string because jest pretty printing the object causes errors
+    return expect((_a = (await page.find(selector))) === null || _a === void 0 ? void 0 : _a.id).not.toBeUndefined(); },
+    dontExpectElement: async (selector) => { var _a; return expect((_a = (await page.find(selector))) === null || _a === void 0 ? void 0 : _a.id).toBeUndefined(); },
+    expectTemplate: async (selector) => { var _a; return expect((_a = (await page.find("#" + selector))) === null || _a === void 0 ? void 0 : _a.id).not.toBeUndefined(); },
+    dontExpectTemplate: async (selector) => { var _a; return expect((_a = (await page.find("#" + selector))) === null || _a === void 0 ? void 0 : _a.id).toBeUndefined(); },
+    expectRoute: async (selector) => {
+      var _a;
+      return expect((_a = (await page.find('div[style="display: contents;"] > div#' + selector))) === null || _a === void 0 ? void 0 : _a.id).not.toBeUndefined();
+    },
+    dontExpectRoute: async (selector) => {
+      var _a;
+      return expect((_a = (await page.find('div[style="display: contents;"] > div#' + selector))) === null || _a === void 0 ? void 0 : _a.id).toBeUndefined();
+    },
+    history: {
+      push: (path) => page.evaluate((x) => window.squatchHistory.push(x), path),
+      back: () => page.evaluate(() => window.squatchHistory.back()),
+    },
+  };
+}
+describe("sqm-router", () => {
+  test("Default route", async () => {
+    const html = /*html*/ `
+    <sqm-router>
+      ${newRoute("RouteA", "/")}
+      ${newRoute("RouteB", "/B")}
+    </sqm-router>
+    `;
+    const page = await newE2EPage();
+    await page.setContent(html);
+    const { expectElement, expectRoute, dontExpectRoute } = newPageFunctions(page);
+    await expectElement("sqm-router");
+    await expectRoute("RouteA");
+    await dontExpectRoute("RouteB");
+    page.close();
+  });
+  test("Changing pages", async () => {
+    const html = /*html*/ `
+    <sqm-router>
+      ${newRoute("RouteA", "/")}
+      ${newRoute("RouteB", "/B")}
+    </sqm-router>
+    `;
+    const page = await newE2EPage();
+    await page.setContent(html);
+    const { expectElement, expectRoute, dontExpectRoute, history, } = newPageFunctions(page);
+    await expectElement("sqm-router");
+    await expectRoute("RouteA");
+    await dontExpectRoute("RouteB");
+    await history.push("/B");
+    await page.waitForChanges();
+    await dontExpectRoute("RouteA");
+    await expectRoute("RouteB");
+    await history.push("/");
+    await page.waitForChanges();
+    await expectRoute("RouteA");
+    await dontExpectRoute("RouteB");
+    page.close();
+  });
+  test("Going back", async () => {
+    const html = /*html*/ `
+    <sqm-router>
+      ${newRoute("RouteA", "/")}
+      ${newRoute("RouteB", "/B")}
+      ${newRoute("RouteC", "/C")}
+    </sqm-router>
+    `;
+    const page = await newE2EPage();
+    await page.setContent(html);
+    const { expectElement, expectRoute, dontExpectRoute, history, } = newPageFunctions(page);
+    await expectElement("sqm-router");
+    await expectRoute("RouteA");
+    await dontExpectRoute("RouteB");
+    await dontExpectRoute("RouteC");
+    await history.push("/B");
+    await page.waitForChanges();
+    await dontExpectRoute("RouteA");
+    await expectRoute("RouteB");
+    await dontExpectRoute("RouteC");
+    await history.push("/C");
+    await page.waitForChanges();
+    await dontExpectRoute("RouteA");
+    await dontExpectRoute("RouteB");
+    await expectRoute("RouteC");
+    await history.back();
+    await page.waitForChanges();
+    await dontExpectRoute("RouteA");
+    await expectRoute("RouteB");
+    await dontExpectRoute("RouteC");
+    await history.back();
+    await page.waitForChanges();
+    await expectRoute("RouteA");
+    await dontExpectRoute("RouteB");
+    await dontExpectRoute("RouteC");
+    page.close();
+  });
+  test("Template has precedence over route", async () => {
+    const html = /*html*/ `
+    <sqm-router>
+      ${newRoute("RouteA", "/")}
+      ${newTemplate("RouteB", "/")}
+      ${newRoute("RouteC", "/B")}
+    </sqm-router>
+    `;
+    const page = await newE2EPage();
+    await page.setContent(html);
+    const { expectElement, expectTemplate, dontExpectTemplate, expectRoute, dontExpectRoute, history, } = newPageFunctions(page);
+    await expectElement("sqm-router");
+    await dontExpectRoute("RouteA");
+    await expectTemplate("RouteB");
+    await dontExpectRoute("RouteC");
+    await history.push("/B");
+    await page.waitForChanges();
+    await dontExpectRoute("RouteA");
+    await dontExpectTemplate("RouteB");
+    await expectRoute("RouteC");
+    await history.push("/");
+    await page.waitForChanges();
+    await dontExpectRoute("RouteA");
+    await expectTemplate("RouteB");
+    await dontExpectRoute("RouteC");
+    page.close();
+  });
+  test("First matching element is chosen, with precedence", async () => {
+    const html = /*html*/ `
+    <sqm-router>
+      ${newRoute("RootA", "/")}
+      ${newRoute("RootB", "/")}
+      ${newTemplate("RootC", "/")}
+      ${newTemplate("RootD", "/")}
+      ${newRoute("StuffA", "/stuff")}
+      ${newRoute("StuffB", "/stuff")}
+    </sqm-router>
+    `;
+    const page = await newE2EPage();
+    await page.setContent(html);
+    const { expectElement, expectTemplate, dontExpectTemplate, expectRoute, dontExpectRoute, history, } = newPageFunctions(page);
+    await expectElement("sqm-router");
+    await dontExpectRoute("RootA");
+    await dontExpectRoute("RootB");
+    await expectTemplate("RootC");
+    await dontExpectTemplate("RootD");
+    await dontExpectRoute("StuffA");
+    await dontExpectRoute("StuffB");
+    await history.push("/stuff");
+    await page.waitForChanges();
+    await dontExpectRoute("RootA");
+    await dontExpectRoute("RootB");
+    await dontExpectTemplate("RootC");
+    await dontExpectTemplate("RootD");
+    await expectRoute("StuffA");
+    await dontExpectRoute("StuffB");
+    await history.push("/");
+    await page.waitForChanges();
+    await dontExpectRoute("RootA");
+    await dontExpectRoute("RootB");
+    await expectTemplate("RootC");
+    await dontExpectTemplate("RootD");
+    await dontExpectRoute("StuffA");
+    await dontExpectRoute("StuffB");
+    page.close();
+  });
+});
+// nice debugging tool
+//   console.log(await page.evaluate(()=>document.body.innerHTML))

package/dist/collection/components/sqm-rewards-table/sqm-rewards-table.e2e.js

@@ -0,0 +1,113 @@
+import { newE2EPage } from "@stencil/core/testing";
+function newColumn(id) {
+  return /*html*/ `<sqm-rewards-table-date-column id="${id}"></sqm-rewards-table-date-column>`;
+}
+function newElement(id) {
+  return /*html*/ `<sqm-big-stat id="${id}"></sqm-big-stat>`;
+}
+function newPlopTarget(id) {
+  return /*html*/ `<raisins-plop-target id="${id}"></raisins-plop-target>`;
+}
+function newPageFunctions(page) {
+  return {
+    expectElement: async (selector) => { var _a; 
+    // convert to string because jest pretty printing the object causes errors
+    return expect((_a = (await page.find(selector))) === null || _a === void 0 ? void 0 : _a.id).not.toBeUndefined(); },
+    dontExpectElement: async (selector) => { var _a; return expect((_a = (await page.find(selector))) === null || _a === void 0 ? void 0 : _a.id).toBeUndefined(); },
+  };
+}
+async function createDemoPage(html) {
+  // @ts-ignore
+  window.widgetIdent = { env: "demo" };
+  const page = await newE2EPage();
+  await page.setContent(html);
+  const { expectElement, dontExpectElement } = newPageFunctions(page);
+  return { page, expectElement, dontExpectElement };
+}
+describe("sqm-rewards-table", () => {
+  test("Default table", async () => {
+    const html = /*html*/ `
+    <sqm-rewards-table>
+      ${newColumn("column-A")}
+      ${newElement("plop-A")}
+      ${newColumn("column-B")}
+    </sqm-rewards-table>
+    `;
+    const { page, expectElement } = await createDemoPage(html);
+    await expectElement("sqm-rewards-table");
+    await expectElement("#column-A");
+    await expectElement("#column-B");
+    page.close();
+  });
+  // test("Adding a plop target", async () => {
+  //   const html = /*html*/ `
+  //   <sqm-rewards-table>
+  //     ${newColumn("column-A")}
+  //     ${newPlopTarget("plop-A")}
+  //     ${newColumn("column-B")}
+  //   </sqm-rewards-table>
+  //   `;
+  //   const { page, expectElement } = await createDemoPage(html);
+  //   await expectElement("#column-A");
+  //   await expectElement("#plop-A");
+  //   await expectElement("#column-B");
+  //   page.close();
+  // });
+  // test("Removing a plop target", async () => {
+  //   const html = /*html*/ `
+  //   <sqm-rewards-table>
+  //     ${newColumn("column-A")}
+  //     ${newPlopTarget("plop-A")}
+  //     ${newColumn("column-B")}
+  //   </sqm-rewards-table>
+  //   `;
+  //   const { page, expectElement, dontExpectElement } = await createDemoPage(
+  //     html
+  //   );
+  //   await expectElement("#column-A");
+  //   await expectElement("#plop-A");
+  //   await expectElement("#column-B");
+  //   const noPlop = /*html*/ `
+  //   <sqm-rewards-table>
+  //     ${newColumn("column-A")}
+  //     ${newColumn("column-B")}
+  //   </sqm-rewards-table>
+  //   `;
+  //   await page.setContent(noPlop);
+  //   await dontExpectElement("#plop-A");
+  //   page.close();
+  // });
+  // TODO: Don't actually have all of the functions available to test these properly
+  //   test("Adding and then removing plop target", async () => {
+  //     const html = /*html*/ `
+  //     <sqm-rewards-table>
+  //       ${newColumn("column-A")}
+  //       ${newColumn("column-B")}
+  //     </sqm-rewards-table>
+  //     `;
+  //     const { page, expectElement } = await createDemoPage(html);
+  //     page.close();
+  //   });
+  //   test("Adding non-table column plop target", async () => {
+  //     const html = /*html*/ `
+  //     <sqm-rewards-table>
+  //       ${newColumn("column-A")}
+  //       ${newColumn("column-B")}
+  //     </sqm-rewards-table>
+  //     `;
+  //     const { page, expectElement } = await createDemoPage(html);
+  //     page.close();
+  //   });
+  //   test("Adding non-table column plop target and cancelling, then add column", async () => {
+  //     const html = /*html*/ `
+  //     <sqm-rewards-table>
+  //       ${newColumn("column-A")}
+  //       ${newColumn("column-B")}
+  //     </sqm-rewards-table>
+  //     `;
+  //     const { page, expectElement } = await createDemoPage(html);
+  //     page.close();
+  //   });
+});
+// nice debugging tool
+//   console.log(await page.evaluate(()=>document.body.innerHTML))