From 790888525c376c6e24c95282786af475518c8360 Mon Sep 17 00:00:00 2001
From: klovaaxel <klovakarlsson@gmail.com>
Date: Sun, 4 Aug 2024 12:10:57 +0200
Subject: [PATCH 1/2] Fixes repo URL in package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fccb5f7..5932bb0 100644
--- a/package.json
+++ b/package.json
@@ -43,5 +43,5 @@
         "name": "Axel Karlsson",
         "aka": "klovaaxel"
     },
-    "repository": "https://github.com/klovaaxeel/cypress-webcomponents"
+    "repository": "https://github.com/klovaaxeel/cypress-html"
 }

From dd7b16fca83b033a21572cb1d39856589ba1dc3b Mon Sep 17 00:00:00 2001
From: klovaaxel <klovakarlsson@gmail.com>
Date: Sun, 4 Aug 2024 12:37:11 +0200
Subject: [PATCH 2/2] Adds functionality to mount raw html strings

---
 cypress/component/mount.cy.ts | 38 ++++++++++++++++++++++++++++++++++-
 package.json                  |  2 +-
 src/index.ts                  | 16 ++++++++++++++-
 3 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/cypress/component/mount.cy.ts b/cypress/component/mount.cy.ts
index 46522ff..37a811f 100644
--- 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
index 5932bb0..06bca2f 100644
--- 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": {
diff --git a/src/index.ts b/src/index.ts
index 24a14f6..ddba0cd 100644
--- 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;
         }