Add c-select tests for readonly/disabled

IntelliTect · Feb 17, 2023 · bdd9bea · bdd9bea
1 parent 5cac38b
commit bdd9bea
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 7 deletions.
diff --git a/src/coalesce-vue-vuetify3/src/components/input/c-select.spec.tsx b/src/coalesce-vue-vuetify3/src/components/input/c-select.spec.tsx
@@ -84,6 +84,8 @@ describe("CSelect", () => {
     // Assert: resting state of the component
     expect(wrapper.find("label").text()).toEqual(label);
     expect(wrapper.find(".v-messages").text()).toEqual(hint);
+    // Only automatically clearable when bound by a non-required navigation/fk, which is none of these test cases
+    expect(wrapper.find(".v-field__clearable").exists()).toBeFalsy();
     await nextTick();
 
     // Act/Assert: Open menu and ensure options from server are listed
@@ -100,11 +102,13 @@ describe("CSelect", () => {
           label="custom label"
           hint="custom hint"
           persistent-hint
+          clearable
         ></CSelect>
       ));
 
       expect(wrapper.find("label").text()).toEqual("custom label");
       expect(wrapper.find(".v-messages").text()).toEqual("custom hint");
+      expect(wrapper.find(".v-field__clearable").exists()).toBeTruthy();
     });
   });
 
@@ -345,6 +349,50 @@ describe("CSelect", () => {
       await mainInput.trigger("keydown.delete");
       expect(model.currentCourseId).toBeNull();
     });
+
+    describe.each(["disabled", "readonly"])("%s", (prop) => {
+      async function assertNonInteractive(
+        wrapper: VueWrapper<InstanceType<typeof CSelect>>
+      ) {
+        // Clearable is ignored when disabled/readonly
+        expect(wrapper.find(".v-field__clearable").exists()).toBeFalsy();
+        // Main input that grabs search query when focused is disabled/readonly
+        expect(wrapper.find("input").attributes()[prop]).not.toBeUndefined();
+
+        // Clicking the component doesn't open the menu
+        const menuContents = await openMenu(wrapper);
+        expect(menuContents.exists()).toBeFalsy();
+        expect(wrapper.vm.menuOpen).toBeFalsy();
+
+        // Can't open with keyboard inputs
+        await wrapper.find("input").trigger("keydown.enter");
+        expect(wrapper.vm.menuOpen).toBeFalsy();
+      }
+
+      test("noninteractive via VForm", async () => {
+        model.currentCourse = new Course({ courseId: 101 });
+        const wrapper = mountApp(() => (
+          <VForm {...{ [prop]: true }}>
+            <CSelect model={model} for="currentCourse" clearable></CSelect>
+          </VForm>
+        )).findComponent(CSelect);
+
+        assertNonInteractive(wrapper);
+      });
+      test("noninteractive via direct", () => {
+        model.currentCourse = new Course({ courseId: 101 });
+        const wrapper = mountApp(() => (
+          <CSelect
+            model={model}
+            for="currentCourse"
+            clearable
+            {...{ [prop]: true }}
+          ></CSelect>
+        )).findComponent(CSelect);
+
+        assertNonInteractive(wrapper);
+      });
+    });
   });
 
   test("preselect first", async () => {
@@ -382,6 +430,7 @@ describe("CSelect", () => {
         create={{
           getLabel(search: string) {
             if (search == "f") return "new thing";
+            else return false;
           },
           async getItem(search: string, label: string) {
             return new Course({ name: label });

diff --git a/src/coalesce-vue-vuetify3/src/components/input/c-select.vue b/src/coalesce-vue-vuetify3/src/components/input/c-select.vue
@@ -18,16 +18,16 @@
     #default="{ isDisabled, isReadonly, isValid }"
   >
     <v-field
-      :active="!!internalModelValue || focused || !!placeholder"
-      :dirty="!!internalModelValue"
-      :clearable="!isDisabled.value && !isReadonly.value && isClearable"
       persistent-clear
-      append-inner-icon="$dropdown"
       :error="isValid.value === false"
+      append-inner-icon="$dropdown"
       v-bind="inputBindAttrs"
+      :clearable="!isDisabled.value && !isReadonly.value && isClearable"
+      :active="!!internalModelValue || focused || !!placeholder"
+      :dirty="!!internalModelValue"
+      :focused="focused"
       @click:clear.stop.prevent="onInput(null, true)"
       @keydown="!isDisabled.value && !isReadonly.value && onInputKey($event)"
-      :focused="focused"
     >
       <div class="v-field__input">
         <slot

diff --git a/src/coalesce-vue-vuetify3/test/util.ts b/src/coalesce-vue-vuetify3/test/util.ts
@@ -1,5 +1,5 @@
 import { createCoalesceVuetify } from "@/install";
-import { mount, DOMWrapper } from "@vue/test-utils";
+import { mount, DOMWrapper, createWrapperError } from "@vue/test-utils";
 import { ArgumentsType } from "vitest";
 import { defineComponent, h, nextTick } from "vue";
 
@@ -65,7 +65,9 @@ const mountApp = function (
 } as typeof mount;
 
 export function getWrapper(selector = ".v-overlay-container") {
-  return new DOMWrapper(document.querySelector(selector)!);
+  const el = document.querySelector(selector);
+  if (el) return new DOMWrapper(el);
+  else return createWrapperError<DOMWrapper<Element>>("DOMWrapper");
 }
 
 export async function delay(ms: number) {