test(ui): add RoleSelect tests and snapshot

Author: luizhf42

ui/tests/components/Team/RoleSelect/RoleSelect.spec.ts

@@ -0,0 +1,61 @@
+import { mount, VueWrapper } from "@vue/test-utils";
+import { createVuetify } from "vuetify";
+import { expect, describe, it, beforeEach } from "vitest";
+import RoleSelect from "@/components/Team/RoleSelect.vue";
+import { BasicRole } from "@/interfaces/INamespace";
+
+describe("RoleSelect", () => {
+  let wrapper: VueWrapper<InstanceType<typeof RoleSelect>>;
+  const vuetify = createVuetify();
+
+  beforeEach(async () => {
+    wrapper = mount(RoleSelect, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: {
+        modelValue: "administrator" as BasicRole,
+      },
+    });
+  });
+
+  it("Is a Vue instance", () => {
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("Renders the component", () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders the role select component", () => {
+    expect(wrapper.find('[data-test="role-select"]').exists()).toBe(true);
+  });
+
+  it("displays the initial model value", async () => {
+    const selectComponent = wrapper.findComponent({ name: "VSelect" });
+    expect(selectComponent.props("modelValue")).toBe("administrator");
+  });
+
+  it("has correct values for each role", () => {
+    const select = wrapper.findComponent({ name: "VSelect" });
+    const items = select.props("items");
+
+    expect(items[0]).toEqual({
+      title: "Administrator",
+      value: "administrator",
+      description: expect.stringContaining("Full access to the namespace"),
+    });
+
+    expect(items[1]).toEqual({
+      title: "Operator",
+      value: "operator",
+      description: expect.stringContaining("Can manage and operate devices"),
+    });
+
+    expect(items[2]).toEqual({
+      title: "Observer",
+      value: "observer",
+      description: expect.stringContaining("Can view device details"),
+    });
+  });
+});

ui/tests/components/Team/RoleSelect/__snapshots__/RoleSelect.spec.ts.snap

@@ -0,0 +1,56 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RoleSelect > Renders the component 1`] = `
+"<div data-v-444f7389="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected" data-test="role-select">
+  <!---->
+  <div class="v-input__control">
+    <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="v-menu-v-2">
+      <div class="v-field__overlay"></div>
+      <div class="v-field__loader">
+        <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+          <!---->
+          <div class="v-progress-linear__background"></div>
+          <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+          <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+            <div class="v-progress-linear__indeterminate">
+              <div class="v-progress-linear__indeterminate long"></div>
+              <div class="v-progress-linear__indeterminate short"></div>
+            </div>
+          </transition-stub>
+          <!---->
+        </div>
+      </div>
+      <!---->
+      <div class="v-field__field" data-no-activator=""><label class="v-label v-field-label v-field-label--floating" for="input-v-0" aria-hidden="false">
+          <!---->Role
+        </label><label class="v-label v-field-label" for="input-v-0">
+          <!---->Role
+        </label>
+        <!---->
+        <div class="v-field__input" data-no-activator="">
+          <!---->
+          <!---->
+          <div class="v-select__selection"><span class="v-select__selection-text">Administrator<!----></span></div><input size="1" type="text" id="input-v-0" aria-describedby="input-v-0-messages" inputmode="none" aria-label="Open" title="Open" required="" value="administrator">
+        </div>
+        <!---->
+      </div>
+      <!---->
+      <div class="v-field__append-inner">
+        <!----><i class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-select__menu-icon" aria-hidden="true"></i>
+        <!---->
+      </div>
+      <div class="v-field__outline">
+        <!---->
+        <!---->
+      </div>
+    </div>
+  </div>
+  <!---->
+  <div id="input-v-0-messages" class="v-input__details" role="alert" aria-live="polite">
+    <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages">
+      <!---->
+    </transition-group-stub>
+    <!---->
+  </div>
+</div>"
+`;