test(ui): add new tests for TerminalDialog

Author: luizhf42

ui/src/components/Terminal/TerminalDialog.vue

@@ -412,7 +412,7 @@ onBeforeUnmount(() => {
   window.removeEventListener("keyup", handleEscKey);
 });
 
-defineExpose({ open, showTerminal, showLoginForm, encodeURLParams, connect, privateKey, xterm, fitAddon, ws, close });
+defineExpose({ open, showTerminal, showLoginForm, encodeURLParams, submitForm, connect, privateKey, xterm, fitAddon, ws, close });
 </script>
 
 <style lang="scss" scoped>

ui/tests/components/Terminal/TerminalDialog.spec.ts

@@ -68,6 +68,37 @@ describe("Terminal Dialog", async () => {
     expect(wrapper.vm.showLoginForm).toBe(true);
   });
 
+  it("shows X button when terminal is open", async () => {
+    const dialog = new DOMWrapper(document.body);
+    const connectBtn = wrapper.find('[data-test="connect-btn"]');
+    await connectBtn.trigger("click");
+
+    wrapper.vm.showLoginForm = false;
+
+    await flushPromises();
+
+    const closeBtn = dialog.find('[data-test="close-terminal-btn"]');
+    expect(closeBtn.exists()).toBe(true);
+  });
+
+  it("submits form when Enter is pressed", async () => {
+    const submitFormSpy = vi.spyOn(wrapper.vm, "submitForm").mockImplementation(vi.fn());
+    const dialog = new DOMWrapper(document.body);
+    const connectBtn = wrapper.find('[data-test="connect-btn"]');
+
+    await connectBtn.trigger("click");
+
+    const usernameField = dialog.find('[data-test="username-field"] input');
+    const passwordField = dialog.find('[data-test="password-field"] input');
+
+    await usernameField.setValue("testuser");
+    await passwordField.setValue("testpass");
+
+    passwordField.trigger("keydown.enter.prevent");
+    await nextTick();
+    expect(submitFormSpy).toBeTruthy();
+  });
+
   it("encodes URL params correctly", () => {
     const params = { key1: "value1", key2: "value2" };
     const encodedParams = wrapper.vm.encodeURLParams(params);

ui/tests/components/Terminal/__snapshots__/TerminalDialog.spec.ts.snap

@@ -1,8 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Terminal Dialog > Renders the component 1`] = `
-"<div data-v-abcb598c="">
-  <!--v-if-->
+"<div data-v-abcb598c=""><button data-v-abcb598c="" type="button" class="v-btn v-theme--light text-success v-btn--density-comfortable v-btn--size-default v-btn--variant-outlined" data-test="connect-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator="">Connect</span>
+    <!---->
+    <!---->
+  </button>
   <!---->
   <!---->
 </div>"