Merge pull request #1 from klovaaxel/plain-html

Add mounting of plain html strings
klovaaxel · Aug 4, 2024 · 550b510 · 550b510
2 parents c288aa8 + dd7b16f
commit 550b510
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 4 deletions.
diff --git a/cypress/component/mount.cy.ts b/cypress/component/mount.cy.ts
@@ -1,6 +1,7 @@
+import { mount } from "../../src";
 import "./elements/counter-component";
 
-describe("mount", () => {
+describe("mount element", () => {
     it("should mount element", () => {
         cy.mount(document.createElement("counter-component"));
         cy.get("counter-component").should("exist");
@@ -27,6 +28,41 @@ describe("mount", () => {
     });
 });
 
+describe("mount html string", () => {
+    it("should mount html string", () => {
+        const html = `
+            <counter-component></counter-component>
+        `;
+
+        cy.mount(html);
+        cy.get("counter-component").should("exist");
+        cy.get("counter-component").shadow().contains("Count is 0");
+    });
+
+    it("should return chainable reference to element", () => {
+        const html = `
+            <counter-component></counter-component>
+        `;
+        const counter = cy.mount<"counter-component">(html);
+        counter.shadow().contains("Count is 0");
+    });
+
+    it("should clean DOM if mount is called more than one time", () => {
+        const html1 = `
+            <div id="mount1"></div>
+        `;
+        const html2 = `
+            <div id="mount2"></div>
+        `;
+
+        cy.mount(html1);
+        cy.mount(html2);
+
+        cy.get("#mount1").should("not.exist");
+        cy.get("#mount2").should("exist");
+    });
+});
+
 describe("<counter-component .../>", () => {
     it("should mount", () => {
         cy.mount(document.createElement("counter-component"));

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "cypress-ct-html",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "Cypress Component Testing for plain HTML/CSS/JS and Web Components",
     "license": "MIT",
     "scripts": {
@@ -43,5 +43,5 @@
         "name": "Axel Karlsson",
         "aka": "klovaaxel"
     },
-    "repository": "https://github.com/klovaaxeel/cypress-webcomponents"
+    "repository": "https://github.com/klovaaxeel/cypress-html"
 }
diff --git a/src/index.ts b/src/index.ts
@@ -6,9 +6,21 @@ function cleanup() {
     dispose?.();
 }
 
-export function mount<T>(component: HTMLElement): Cypress.Chainable<JQuery<T>> {
+export function mount<T>(component: HTMLElement | string): Cypress.Chainable<JQuery<T>> {
     cleanup();
 
+    if (typeof component === "string") {
+        const template = document.createElement("template");
+        template.innerHTML = component;
+
+        if (template.content.children.length > 1)
+            throw new Error("The provided HTML string must have a single root element");
+
+        component = template.content.firstElementChild as HTMLElement;
+
+        if (!component) throw new Error("The provided HTML string was not able to be parsed into a valid HTML element");
+    }
+
     const root = getContainerEl();
     render(component, root);
 
@@ -46,6 +58,8 @@ declare global {
              * Mount your component into Cypress sandbox
              * @param component content (HTMLElement) to render
              * @type Name of the element to be mounted (as a string)
+             * @throws Error if the provided HTML string has more than one root element
+             * @throws Error if the provided HTML string is not able to be parsed into a valid HTML element
              */
             mount: typeof mount;
         }