1 document.addEventListener('DOMContentLoaded', function() {2 document.getElementById('welcome-modal').classList.remove('hidden');3 makeSortable();4 });5 6 function closeWelcomeModal() {7 document.getElementById('welcome-modal').classList.add('hidden');8 }9 10 function showInsertMenu(button) {11 const menu = document.createElement('div');12 menu.classList.add('absolute', 'bg-white', 'shadow-md', 'rounded', 'mt-2', 'z-10');13 menu.innerHTML = `14 <ul class="space-y-2 p-2">15 <li><button type="button" onclick="insertVariable(this)" class="bg-blue-500 text-white px-4 py-2 rounded">+ Variable</button></li>16 <li><button type="button" onclick="insertRequest(this)" class="bg-blue-500 text-white px-4 py-2 rounded">+ Request</button></li>17 <li><button type="button" onclick="insertAssert(this)" class="bg-blue-500 text-white px-4 py-2 rounded">+ Assert</button></li>18 <li><button type="button" onclick="insertSleep(this)" class="bg-blue-500 text-white px-4 py-2 rounded">+ Sleep</button></li>19 </ul>20 `;21 button.parentElement.appendChild(menu);22 23 // Remove the menu when clicking outside24 document.addEventListener('click', function(event) {25 if (!menu.contains(event.target) && !button.contains(event.target)) {26 menu.remove();27 }28 }, { once: true });29 }30 31 function insertElement(button, elementFunction) {32 const container = button.closest('#elements-list');33 const buttonDiv = button.parentElement;34 const newElement = elementFunction();35 container.insertBefore(newElement, buttonDiv.nextSibling);36 button.parentElement.querySelector('.absolute').remove();37 addInsertButton(container, buttonDiv.nextSibling);38 }39 40 function insertVariable(button) {41 insertElement(button, createVariableElement);42 }43 44 function insertRequest(button) {45 insertElement(button, createRequestElement);46 }47 48 function insertAssert(button) {49 insertElement(button, createAssertElement);50 }51 52 function insertSleep(button) {53 insertElement(button, createSleepElement);54 }55 56 function createVariableElement() {57 const div = document.createElement('div');58 div.classList.add('element', 'bg-white', 'p-4', 'rounded-lg', 'shadow-md', 'flex', 'items-center', 'space-x-4');59 div.innerHTML = `60 <span class="text-gray-700">Variable</span>61 <input type="text" placeholder="Nombre" class="flex-1 p-2 border border-gray-300 rounded" />62 <input type="text" placeholder="Valor" class="flex-1 p-2 border border-gray-300 rounded" />63 <button type="button" onclick="removeElement(this)" class="text-red-500">x</button>64 <button type="button" onclick="duplicateElement(this)" class="text-blue-500">⧉</button>65 `;66 return div;67 }68 69 function createRequestElement() {70 const div = document.createElement('div');71 div.classList.add('element', 'bg-white', 'p-4', 'rounded-lg', 'shadow-md', 'flex', 'items-center', 'space-x-4');72 div.innerHTML = `73 <span class="text-gray-700">Request</span>74 <select class="flex-1 p-2 border border-gray-300 rounded">75 <option>GET</option>76 <option>POST</option>77 <option>PUT</option>78 <option>DELETE</option>79 </select>80 <input type="text" placeholder="URL" class="flex-1 p-2 border border-gray-300 rounded" />81 <textarea placeholder="Headers" class="flex-1 p-2 border border-gray-300 rounded"></textarea>82 <textarea placeholder="Body" class="flex-1 p-2 border border-gray-300 rounded"></textarea>83 <button type="button" onclick="removeElement(this)" class="text-red-500">x</button>84 <button type="button" onclick="duplicateElement(this)" class="text-blue-500">⧉</button>85 `;86 return div;87 }88 89 function createAssertElement() {90 const div = document.createElement('div');91 div.classList.add('element', 'bg-white', 'p-4', 'rounded-lg', 'shadow-md', 'space-y-4');92 div.innerHTML = `93 <span class="text-gray-700">Assert</span>94 <div class="flex items-center space-x-4">95 <input type="text" placeholder="Referencia" class="flex-1 p-2 border border-gray-300 rounded assert-reference" list="references-datalist"/>96 <datalist id="references-datalist">97 <option value="response.status">98 <option value="response.headers.Content-Type">99 <option value="response.body.user.name">100 <!-- Añadir más opciones dinámicamente -->101 </datalist>102 <select class="flex-1 p-2 border border-gray-300 rounded" onchange="updateAssertInput(this)">103 <option value="equals">Igual a</option>104 <option value="not_equals">Distinto a</option>105 <option value="in_list">En lista</option>106 <option value="not_in_list">No en lista</option>107 </select>108 <input type="text" placeholder="Valor" class="flex-1 p-2 border border-gray-300 rounded assert-value" />109 <button type="button" onclick="removeElement(this)" class="text-red-500">x</button>110 <button type="button" onclick="duplicateElement(this)" class="text-blue-500">⧉</button>111 </div>112 `;113 return div;114 }115 116 function createSleepElement() {117 const div = document.createElement('div');118 div.classList.add('element', 'bg-white', 'p-4', 'rounded-lg', 'shadow-md', 'flex', 'items-center', 'space-x-4');119 div.innerHTML = `120 <span class="text-gray-700">Sleep</span>121 <input type="number" placeholder="Segundos" class="flex-1 p-2 border border-gray-300 rounded" />122 <button type="button" onclick="removeElement(this)" class="text-red-500">x</button>123 <button type="button" onclick="duplicateElement(this)" class="text-blue-500">⧉</button>124 `;125 return div;126 }127 128 function addInsertButton(container, afterElement) {129 const buttonDiv = document.createElement('div');130 buttonDiv.classList.add('flex', 'justify-center', 'my-2');131 buttonDiv.innerHTML = `132 <button type="button" onclick="showInsertMenu(this)" class="bg-gray-200 text-gray-600 px-2 py-1 rounded">+</button>133 `;134 container.insertBefore(buttonDiv, afterElement);135 }136 137 function duplicateElement(button) {138 const container = button.closest('#elements-list');139 const element = button.parentElement.cloneNode(true);140 container.insertBefore(element, button.parentElement.nextSibling);141 addInsertButton(container, button.parentElement.nextSibling);142 }143 144 function removeElement(button) {145 const container = button.closest('#elements-list');146 button.parentElement.remove();147 // Ensure there is an insert button at the end148 if (!container.lastElementChild || !container.lastElementChild.querySelector('button')) {149 addInsertButton(container);150 }151 }152 153 function saveTest() {154 const elements = [];155 const listItems = document.getElementById('elements-list').children;156 for (let i = 0; i < listItems.length; i++) {157 const element = listItems[i];158 if (!element.querySelector('span')) continue; // Skip insert buttons159 const type = element.querySelector('span').textContent;160 if (type === 'Variable') {161 const name = element.children[1].value;162 const value = element.children[2].value;163 if (name && value) {164 elements.push({ type, name, value });165 } else {166 alert('Please fill out both name and value for all variables.');167 return;168 }169 } else if (type === 'Request') {170 const method = element.children[1].value;171 const url = element.children[2].value;172 const headers = element.children[3].value;173 const body = element.children[4].value;174 if (method && url) {175 elements.push({ type, method, url, headers, body });176 } else {177 alert('Please fill out method and URL for all requests.');178 return;179 }180 } else if (type === 'Assert') {181 const assertType = element.children[2].value;182 const reference = element.children[1].value;183 const value = element.children[3].value;184 if (reference && value) {185 elements.push({ type, assertType, reference, value });186 } else {187 alert('Please fill out reference and value for all asserts.');188 return;189 }190 } else if (type === 'Sleep') {191 const seconds = element.children[1].value;192 if (seconds) {193 elements.push({ type, seconds });194 } else {195 alert('Please fill out the number of seconds for all sleeps.');196 return;197 }198 }199 }200 console.log('Elements:', elements);201 alert('Test saved!');202 }203 204 function updateAssertInput(select) {205 const valueInput = select.parentElement.querySelector('.assert-value');206 if (select.value === 'in_list' || select.value === 'not_in_list') {207 valueInput.placeholder = 'Valores (separados por comas)';208 } else {209 valueInput.placeholder = 'Valor';210 }211 }212 213 function makeSortable() {214 const container = document.getElementById('elements-list');215 Sortable.create(container, {216 handle: '.element',217 animation: 150,218 onEnd: function (evt) {219 if (!container.lastElementChild || !container.lastElementChild.querySelector('button')) {220 addInsertButton(container);221 }222 },223 });224 }225 Enlace
El enlace para compartir es: