lib-e2e-cypress-for-dummys-ts 0.1.0 → 0.2.0

package/README.md

@@ -273,6 +273,13 @@ cypress/          ← select this folder
 4. Interceptors are automatically wrapped in a `beforeEach()`
 5. Alternatively, click **✏️ Editar manualmente** to open a full diff editor with save support
 
+**Sidebar toolbar:**
+
+| Button | Action |
+|---|---|
+| **+ Nuevo archivo** | Creates a new `.cy.ts` file with a basic `describe/it` scaffold in `cypress/e2e/`. Type the name (no extension needed) and press Enter or click **Crear**. |
+| **↻ Actualizar** | Rescans the `cypress/e2e/` directory. Useful after a `git pull`, a drag-and-drop into the folder, or any external file change. |
+
 > The File System Access API is supported in Chromium-based browsers (Chrome, Edge, Opera). Firefox and Safari do not support it.
 
 ---

package/dist/index.cjs

@@ -666,7 +666,12 @@ var I18N_ES = {
     COPY_ICP_BTN: "\u{1F4CB} Copiar interceptores",
     INSERT_BTN: "\u{1F4BE} Insertar en archivo",
     EDIT_MANUAL_BTN: "\u270F\uFE0F Editar manualmente",
-    CLOSE_BTN: "\u2715 Cerrar"
+    CLOSE_BTN: "\u2715 Cerrar",
+    NEW_FILE_BTN: "+ Nuevo archivo",
+    REFRESH_BTN: "\u21BB Actualizar",
+    NEW_FILE_PLACEHOLDER: "nombre-del-test",
+    NEW_FILE_CONFIRM: "Crear",
+    NEW_FILE_CANCEL: "Cancelar"
   },
   FILE_PREVIEW: {
     NO_FILE: "Sin archivo",
@@ -823,7 +828,12 @@ var I18N_EN = {
     COPY_ICP_BTN: "\u{1F4CB} Copy interceptors",
     INSERT_BTN: "\u{1F4BE} Insert into file",
     EDIT_MANUAL_BTN: "\u270F\uFE0F Edit manually",
-    CLOSE_BTN: "\u2715 Close"
+    CLOSE_BTN: "\u2715 Close",
+    NEW_FILE_BTN: "+ New file",
+    REFRESH_BTN: "\u21BB Refresh",
+    NEW_FILE_PLACEHOLDER: "test-name",
+    NEW_FILE_CONFIRM: "Create",
+    NEW_FILE_CANCEL: "Cancel"
   },
   FILE_PREVIEW: {
     NO_FILE: "No file",
@@ -980,7 +990,12 @@ var I18N_FR = {
     COPY_ICP_BTN: "\u{1F4CB} Copier les intercepteurs",
     INSERT_BTN: "\u{1F4BE} Ins\xE9rer dans le fichier",
     EDIT_MANUAL_BTN: "\u270F\uFE0F \xC9diter manuellement",
-    CLOSE_BTN: "\u2715 Fermer"
+    CLOSE_BTN: "\u2715 Fermer",
+    NEW_FILE_BTN: "+ Nouveau fichier",
+    REFRESH_BTN: "\u21BB Actualiser",
+    NEW_FILE_PLACEHOLDER: "nom-du-test",
+    NEW_FILE_CONFIRM: "Cr\xE9er",
+    NEW_FILE_CANCEL: "Annuler"
   },
   FILE_PREVIEW: {
     NO_FILE: "Sans fichier",
@@ -1137,7 +1152,12 @@ var I18N_IT = {
     COPY_ICP_BTN: "\u{1F4CB} Copia interceptor",
     INSERT_BTN: "\u{1F4BE} Inserisci nel file",
     EDIT_MANUAL_BTN: "\u270F\uFE0F Modifica manualmente",
-    CLOSE_BTN: "\u2715 Chiudi"
+    CLOSE_BTN: "\u2715 Chiudi",
+    NEW_FILE_BTN: "+ Nuovo file",
+    REFRESH_BTN: "\u21BB Aggiorna",
+    NEW_FILE_PLACEHOLDER: "nome-del-test",
+    NEW_FILE_CONFIRM: "Crea",
+    NEW_FILE_CANCEL: "Annulla"
   },
   FILE_PREVIEW: {
     NO_FILE: "Nessun file",
@@ -1294,7 +1314,12 @@ var I18N_DE = {
     COPY_ICP_BTN: "\u{1F4CB} Interceptors kopieren",
     INSERT_BTN: "\u{1F4BE} In Datei einf\xFCgen",
     EDIT_MANUAL_BTN: "\u270F\uFE0F Manuell bearbeiten",
-    CLOSE_BTN: "\u2715 Schlie\xDFen"
+    CLOSE_BTN: "\u2715 Schlie\xDFen",
+    NEW_FILE_BTN: "+ Neue Datei",
+    REFRESH_BTN: "\u21BB Aktualisieren",
+    NEW_FILE_PLACEHOLDER: "test-name",
+    NEW_FILE_CONFIRM: "Erstellen",
+    NEW_FILE_CANCEL: "Abbrechen"
   },
   FILE_PREVIEW: {
     NO_FILE: "Keine Datei",
@@ -3434,26 +3459,38 @@ var ADVANCED_TEST_EDITOR_STYLES = `
   * { box-sizing: border-box; }
   .layout { display: flex; flex: 1; min-height: 0; }
   .sidebar {
-    width: 220px; border-right: 1px solid #21262d; overflow-y: auto;
-    padding: 8px; background: #0d1117; flex-shrink: 0;
+    border-right: none; display: flex; flex-direction: column;
+    background: #0d1117; flex-shrink: 0; min-width: 140px; max-width: 500px;
+  }
+  .tree-scroll {
+    flex: 1; overflow-y: auto; padding: 6px 4px;
     scrollbar-width: thin; scrollbar-color: #30363d transparent;
   }
-  .sidebar::-webkit-scrollbar { width: 4px; }
-  .sidebar::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }
-  .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #161b22; }
+  .tree-scroll::-webkit-scrollbar { width: 4px; }
+  .tree-scroll::-webkit-scrollbar-thumb { background: #30363d; border-radius: 2px; }
+  .resize-handle {
+    width: 4px; background: #21262d; cursor: col-resize; flex-shrink: 0;
+    transition: background 0.15s;
+  }
+  .resize-handle:hover, .resize-handle.dragging { background: #2f81f7; }
+  .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #161b22; min-width: 0; }
   .no-perm {
     padding: 28px; color: #484f58; font-size: 13px; text-align: center;
     display: flex; flex-direction: column; align-items: center; gap: 12px; line-height: 1.6;
   }
   .tree-item {
-    padding: 5px 8px; border-radius: 5px; cursor: pointer;
+    padding: 4px 6px; border-radius: 4px; cursor: pointer;
     font-size: 12px; color: #8b949e; white-space: nowrap;
     overflow: hidden; text-overflow: ellipsis;
     transition: background 0.12s, color 0.12s;
+    display: flex; align-items: center; gap: 4px; user-select: none;
   }
   .tree-item:hover { background: #161b22; color: #c9d1d9; }
   .tree-item.selected { background: rgba(47,129,247,0.12); color: #2f81f7; }
   .tree-item.dir { color: #e3b341; font-weight: 600; }
+  .tree-item.dir:hover { background: rgba(227,179,65,0.08); color: #f0c040; }
+  .dir-arrow { font-size: 8px; color: #484f58; width: 10px; flex-shrink: 0; line-height: 1; }
+  .tree-connector { display: block; width: 1px; background: #21262d; margin-left: 13px; height: 100%; }
   .content-area {
     flex: 1; padding: 12px 14px; overflow-y: auto;
     scrollbar-width: thin; scrollbar-color: #30363d transparent;
@@ -3491,6 +3528,34 @@ var ADVANCED_TEST_EDITOR_STYLES = `
     transition: background 0.12s, color 0.12s; white-space: nowrap; flex-shrink: 0;
   }
   .btn-copy:hover { background: #30363d; color: #e6edf3; }
+  .sidebar-toolbar {
+    display: flex; gap: 4px; padding: 6px 6px 4px;
+    border-bottom: 1px solid #21262d; flex-shrink: 0; background: #0d1117;
+  }
+  .btn-toolbar {
+    flex: 1; padding: 4px 6px; border: 1px solid #30363d; border-radius: 5px; cursor: pointer;
+    font-size: 10px; font-weight: 500; background: #161b22; color: #8b949e;
+    transition: background 0.12s, color 0.12s; white-space: nowrap; overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .btn-toolbar:hover { background: #30363d; color: #e6edf3; }
+  .btn-toolbar.btn-new { color: #3fb950; border-color: #238636; }
+  .btn-toolbar.btn-new:hover { background: #238636; color: #fff; }
+  .new-file-form {
+    padding: 6px; border-bottom: 1px solid #21262d; display: flex; flex-direction: column; gap: 4px;
+  }
+  .new-file-form input {
+    width: 100%; padding: 4px 7px; background: #0d1117; border: 1px solid #30363d;
+    border-radius: 5px; color: #e6edf3; font-size: 11px; font-family: monospace;
+    outline: none;
+  }
+  .new-file-form input:focus { border-color: #2f81f7; }
+  .new-file-form .ext { font-size: 9px; color: #484f58; padding: 0 2px; }
+  .new-file-actions { display: flex; gap: 4px; }
+  .btn-confirm { flex: 1; padding: 3px 6px; border: 1px solid #238636; border-radius: 5px; cursor: pointer; font-size: 10px; font-weight: 500; background: #238636; color: #fff; transition: background 0.12s; }
+  .btn-confirm:hover { background: #2ea043; }
+  .btn-cancel-form { flex: 1; padding: 3px 6px; border: 1px solid #30363d; border-radius: 5px; cursor: pointer; font-size: 10px; font-weight: 500; background: #21262d; color: #8b949e; transition: background 0.12s; }
+  .btn-cancel-form:hover { background: #30363d; color: #e6edf3; }
 `;
 
 // src/components/advanced-test-editor/advanced-test-editor.template.ts
@@ -3509,8 +3574,8 @@ function renderNoPermission(needsReauth, t) {
     </div>`;
 }
 function renderAdvancedEditor(state, t) {
-  const { e2eTree, selectedFile, selectedFileContent, testItBlock, interceptorsBlock, saveButtonEnabled } = state;
-  const treeHtml = e2eTree.length ? renderTree(e2eTree, selectedFile) : `<div class="tree-item" style="color:#6c7a99">${t("ADVANCED_EDITOR.NO_FILES")}</div>`;
+  const { e2eTree, selectedFile, selectedFileContent, testItBlock, interceptorsBlock, saveButtonEnabled, isCreatingFile, collapsedDirs, sidebarWidth } = state;
+  const treeHtml = e2eTree.length ? renderTree(e2eTree, selectedFile, collapsedDirs) : `<div class="tree-item" style="color:#6c7a99">${t("ADVANCED_EDITOR.NO_FILES")}</div>`;
   const contentHtml = selectedFileContent ? `<div class="file-name">\u{1F4C4} ${escHtml(selectedFile?.name ?? "")}</div>
        <pre>${escHtml(selectedFileContent.slice(0, 4e3))}${selectedFileContent.length > 4e3 ? "\n..." : ""}</pre>` : `<div class="placeholder">${t("ADVANCED_EDITOR.SELECT_FILE")}</div>`;
   const itHtml = testItBlock ? `<div style="margin-top:10px">
@@ -3527,9 +3592,27 @@ function renderAdvancedEditor(state, t) {
          </div>
          <pre style="max-height:120px;font-size:10.5px;color:#3fb950">${escHtml(interceptorsBlock.slice(0, 500))}</pre>
        </div>` : "";
+  const newFileForm = isCreatingFile ? `<div class="new-file-form">
+         <input id="input-new-file" type="text" placeholder="${escHtml(t("ADVANCED_EDITOR.NEW_FILE_PLACEHOLDER"))}" autocomplete="off" />
+         <span class="ext">.cy.ts</span>
+         <div class="new-file-actions">
+           <button id="btn-new-file-confirm" class="btn-confirm">${t("ADVANCED_EDITOR.NEW_FILE_CONFIRM")}</button>
+           <button id="btn-new-file-cancel" class="btn-cancel-form">${t("ADVANCED_EDITOR.NEW_FILE_CANCEL")}</button>
+         </div>
+       </div>` : "";
+  const toolbar = `
+    <div class="sidebar-toolbar">
+      <button id="btn-new-file" class="btn-toolbar btn-new">${t("ADVANCED_EDITOR.NEW_FILE_BTN")}</button>
+      <button id="btn-refresh" class="btn-toolbar">${t("ADVANCED_EDITOR.REFRESH_BTN")}</button>
+    </div>`;
   return `
     <div class="layout">
-      <div class="sidebar">${treeHtml}</div>
+      <div class="sidebar" style="width:${sidebarWidth}px">
+        ${toolbar}
+        ${newFileForm}
+        <div class="tree-scroll">${treeHtml}</div>
+      </div>
+      <div id="resize-handle" class="resize-handle"></div>
       <div class="main">
         <div class="content-area">${contentHtml}${itHtml}${interceptorsHtml}</div>
         <div class="footer">
@@ -3545,16 +3628,24 @@ function renderAdvancedEditor(state, t) {
       </div>
     </div>`;
 }
-function renderTree(nodes, selected, indent = 0) {
+function renderTree(nodes, selected, collapsedDirs, indent = 0, parentPath = "") {
   return nodes.map((n) => {
+    const currentPath = parentPath ? `${parentPath}/${n.name}` : n.name;
     const isFile = n.kind === "file";
-    const isSel = selected === n || selected?.name === n.name;
-    const cls = `tree-item${isFile ? "" : " dir"}${isSel ? " selected" : ""}`;
-    const pad = `padding-left:${8 + indent * 14}px`;
-    if (!isFile && n.children?.length) {
-      return `<div class="${cls}" style="${pad}">\u{1F4C1} ${escHtml(n.name)}</div>
-              ${renderTree(n.children, selected, indent + 1)}`;
+    const pad = `padding-left:${6 + indent * 14}px`;
+    if (!isFile) {
+      const dir = n;
+      const hasChildren = (dir.children?.length ?? 0) > 0;
+      const isCollapsed = collapsedDirs.has(currentPath);
+      const arrow = hasChildren ? isCollapsed ? "\u25B6" : "\u25BC" : "\xB7";
+      const dirHtml = `<div class="tree-item dir" style="${pad}" data-dir-path="${escAttr(currentPath)}">
+        <span class="dir-arrow">${arrow}</span>\u{1F4C1} ${escHtml(n.name)}
+      </div>`;
+      if (!hasChildren || isCollapsed) return dirHtml;
+      return dirHtml + renderTree(dir.children, selected, collapsedDirs, indent + 1, currentPath);
     }
+    const isSel = selected?.name === n.name;
+    const cls = `tree-item${isSel ? " selected" : ""}`;
     const data = JSON.stringify({ kind: n.kind, name: n.name }).replace(/"/g, "&quot;");
     return `<div class="${cls}" style="${pad}" data-file="${data}">\u{1F4C4} ${escHtml(n.name)}</div>`;
   }).join("");
@@ -3587,9 +3678,13 @@ var AdvancedTestEditorElement = class extends HTMLElement {
   isPreviewMode = false;
   previewFileName = null;
   previewFileContent = null;
+  isCreatingFile = false;
+  collapsedDirs = /* @__PURE__ */ new Set();
+  sidebarWidth = 220;
   hasPermission = false;
   needsReauth = false;
   _dirHandle = null;
+  _e2eHandle = null;
   constructor() {
     super();
     this.shadow = this.attachShadow({ mode: "open" });
@@ -3631,7 +3726,8 @@ var AdvancedTestEditorElement = class extends HTMLElement {
     try {
       for await (const entry of this._dirHandle.values()) {
         if (entry.kind === "directory" && entry.name === "e2e") {
-          const tree = await this.transformationService.scanDirectory(entry);
+          this._e2eHandle = entry;
+          const tree = await this.transformationService.scanDirectory(this._e2eHandle);
           this.e2eTree = tree.children ?? [];
           this.render();
           return;
@@ -3640,6 +3736,32 @@ var AdvancedTestEditorElement = class extends HTMLElement {
     } catch {
     }
   }
+  async createNewFile(rawName) {
+    if (!this._e2eHandle) return;
+    const name = rawName.trim().replace(/\.cy\.ts$/, "");
+    if (!name) return;
+    const fileName = `${name}.cy.ts`;
+    const template = `describe('${name}', () => {
+
+  it('should ', () => {
+
+  });
+
+});
+`;
+    try {
+      const fileHandle = await this._e2eHandle.getFileHandle(fileName, { create: true });
+      const writable = await fileHandle.createWritable();
+      await writable.write(template);
+      await writable.close();
+    } catch {
+    }
+    this.isCreatingFile = false;
+    await this.getFoldersData();
+  }
+  async refreshTree() {
+    await this.getFoldersData();
+  }
   async saveCommandsToFile() {
     if (!this.selectedFileHandle || !this.selectedFileContent || !this.testItBlock) return;
     let content = this.selectedFileContent;
@@ -3697,6 +3819,44 @@ var AdvancedTestEditorElement = class extends HTMLElement {
       composed: true
     }));
   }
+  toggleDir(path) {
+    if (this.collapsedDirs.has(path)) {
+      this.collapsedDirs.delete(path);
+    } else {
+      this.collapsedDirs.add(path);
+    }
+    this.render();
+  }
+  setupResizeHandle() {
+    const handle = this.shadow.getElementById("resize-handle");
+    const sidebar = this.shadow.querySelector(".sidebar");
+    if (!handle || !sidebar) return;
+    let startX = 0;
+    let startWidth = 0;
+    const onMouseMove = (e) => {
+      const delta = e.clientX - startX;
+      const newWidth = Math.max(140, Math.min(500, startWidth + delta));
+      this.sidebarWidth = newWidth;
+      sidebar.style.width = `${newWidth}px`;
+    };
+    const onMouseUp = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      handle.classList.remove("dragging");
+    };
+    handle.addEventListener("mousedown", (e) => {
+      startX = e.clientX;
+      startWidth = sidebar.offsetWidth;
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      handle.classList.add("dragging");
+      e.preventDefault();
+    });
+  }
   closePreview() {
     this.isPreviewMode = false;
     this.previewFileName = null;
@@ -3727,7 +3887,10 @@ var AdvancedTestEditorElement = class extends HTMLElement {
       selectedFileContent: this.selectedFileContent,
       testItBlock: this.testItBlock,
       interceptorsBlock: this.interceptorsBlock,
-      saveButtonEnabled: this.saveButtonEnabled
+      saveButtonEnabled: this.saveButtonEnabled,
+      isCreatingFile: this.isCreatingFile,
+      collapsedDirs: this.collapsedDirs,
+      sidebarWidth: this.sidebarWidth
     }, this.t.bind(this))}`;
     this.shadow.querySelectorAll("[data-file]").forEach((el) => {
       el.addEventListener("click", () => {
@@ -3735,11 +3898,41 @@ var AdvancedTestEditorElement = class extends HTMLElement {
         if (data) this.onFileClick(JSON.parse(data));
       });
     });
+    this.shadow.querySelectorAll("[data-dir-path]").forEach((el) => {
+      el.addEventListener("click", () => {
+        const path = el.dataset["dirPath"];
+        if (path) this.toggleDir(path);
+      });
+    });
+    this.setupResizeHandle();
     this.shadow.getElementById("btn-save")?.addEventListener("click", () => this.saveCommandsToFile());
     this.shadow.getElementById("btn-edit")?.addEventListener("click", () => this.openEditManually());
     this.shadow.getElementById("btn-copy-it")?.addEventListener("click", () => this.copyToClipboard(this.testItBlock));
     this.shadow.getElementById("btn-copy-interceptors")?.addEventListener("click", () => this.copyToClipboard(this.interceptorsBlock));
     this.shadow.getElementById("btn-close")?.addEventListener("click", () => this.closePreview());
+    this.shadow.getElementById("btn-new-file")?.addEventListener("click", () => {
+      this.isCreatingFile = !this.isCreatingFile;
+      this.render();
+      if (this.isCreatingFile) this.shadow.getElementById("input-new-file")?.focus();
+    });
+    this.shadow.getElementById("btn-refresh")?.addEventListener("click", () => this.refreshTree());
+    this.shadow.getElementById("btn-new-file-confirm")?.addEventListener("click", () => {
+      const input2 = this.shadow.getElementById("input-new-file");
+      this.createNewFile(input2?.value ?? "");
+    });
+    this.shadow.getElementById("btn-new-file-cancel")?.addEventListener("click", () => {
+      this.isCreatingFile = false;
+      this.render();
+    });
+    const input = this.shadow.getElementById("input-new-file");
+    input?.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        this.createNewFile(input.value);
+      } else if (e.key === "Escape") {
+        this.isCreatingFile = false;
+        this.render();
+      }
+    });
   }
 };
 if (!customElements.get("advanced-test-editor")) {
@@ -4247,6 +4440,7 @@ function renderRecorderWidget(rec, paused, t) {
 // src/components/lib-e2e-recorder/lib-e2e-recorder.ts
 var LibE2eRecorderElement = class extends HTMLElement {
   shadow;
+  _isDisabled = false;
   keydownHandler;
   recordingUnsub;
   commandsUnsub;
@@ -4274,6 +4468,10 @@ var LibE2eRecorderElement = class extends HTMLElement {
     this.shadow = this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
+    if ("Cypress" in window) {
+      this._isDisabled = true;
+      return;
+    }
     if (!this.getAttribute("data-cy")) {
       this.setAttribute("data-cy", "lib-e2e-cypress-for-dummys");
     }
@@ -4294,6 +4492,7 @@ var LibE2eRecorderElement = class extends HTMLElement {
     window.addEventListener("keydown", this.keydownHandler);
   }
   disconnectedCallback() {
+    if (this._isDisabled) return;
     window.removeEventListener("keydown", this.keydownHandler);
     this.recordingUnsub?.();
     this.commandsUnsub?.();
@@ -4674,7 +4873,7 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
     this.toggleModal("isAdvancedEditorDialogOpen", () => {
       import_sweetalert2.default.fire({
         title: this.translation.translate("MAIN_FRAME.SHOW_ADVANCED_EDITOR"),
-        html: '<div id="advanced-editor-modal-content" style="min-height:300px;padding:0"></div>',
+        html: '<div id="advanced-editor-modal-content" style="flex:1;min-height:0;display:flex;flex-direction:column;padding:0"></div>',
         showCloseButton: true,
         showConfirmButton: false,
         allowOutsideClick: false,
@@ -4683,6 +4882,20 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
         didOpen: () => {
           makeSwalDraggable();
           setSwal2DataCyAttribute();
+          const popup = import_sweetalert2.default.getPopup();
+          if (popup) {
+            popup.style.height = "600px";
+            const htmlContainer = popup.querySelector(".swal2-html-container");
+            if (htmlContainer) {
+              htmlContainer.style.flex = "1";
+              htmlContainer.style.minHeight = "0";
+              htmlContainer.style.overflow = "hidden";
+              htmlContainer.style.padding = "0";
+              htmlContainer.style.margin = "0";
+              htmlContainer.style.display = "flex";
+              htmlContainer.style.flexDirection = "column";
+            }
+          }
           const container = document.getElementById("advanced-editor-modal-content");
           if (!container) return;
           const child = document.createElement("advanced-test-editor");
@@ -4710,7 +4923,10 @@ cypress/         <span style="color:#484f58">${this.translation.translate("RECOR
           this.isAdvancedEditorDialogOpen = false;
         }
       });
-      this.resizePopup();
+      setTimeout(() => {
+        const popup = import_sweetalert2.default.getPopup();
+        if (popup) makeModalResizable(popup, { minWidth: 400, minHeight: 0 });
+      }, 0);
     });
   }
   showFileEditorDialog(handle, content, fileName, testId, itBlock = "", interceptorsBlock = "") {