feat(form): rewrite show-label and add tests (tusen-ai#858)

kev1nzh37 · Aug 14, 2021 · 69bc5d0 · 69bc5d0
1 parent fc60b38
commit 69bc5d0
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 10 deletions.
diff --git a/src/form/src/Form.tsx b/src/form/src/Form.tsx
@@ -50,8 +50,8 @@ const formProps = {
     default: (e: Event) => e.preventDefault()
   },
   showLabel: {
-    type: Boolean,
-    default: true
+    type: Boolean as PropType<boolean | undefined>,
+    default: undefined
   }
 } as const
 

diff --git a/src/form/src/FormItem.tsx b/src/form/src/FormItem.tsx
@@ -84,7 +84,11 @@ export const formItemProps = {
     default: false
   },
   validationStatus: String as PropType<'error' | 'warning' | 'success'>,
-  feedback: String
+  feedback: String,
+  showLabel: {
+    type: Boolean as PropType<boolean | undefined>,
+    default: undefined
+  }
 } as const
 
 export type FormItemSetupProps = ExtractPropTypes<typeof formItemProps>
@@ -171,7 +175,6 @@ export default defineComponent({
       return explainsRef.value.length
     })
     const mergedDisabledRef = NForm ? toRef(NForm, 'disabled') : ref(false)
-    const mergedShowLabelRef = NForm ? toRef(NForm, 'showLabel') : ref(true)
     const themeRef = useTheme(
       'Form',
       'FormItem',
@@ -352,7 +355,6 @@ export default defineComponent({
       ...formItemMiscRefs,
       ...formItemSizeRefs,
       ...exposedRef,
-      mergedShowLabel: mergedShowLabelRef,
       cssVars: computed(() => {
         const { value: size } = mergedSizeRef
         const { value: labelPlacement } = labelPlacementRef

diff --git a/src/form/src/utils.ts b/src/form/src/utils.ts
@@ -72,14 +72,21 @@ export function formItemMisc (props: FormItemSetupProps) {
     if (NForm?.showFeedback !== undefined) return NForm.showFeedback
     return true
   })
+  const mergedShowLabelRef = computed(() => {
+    const { showLabel } = props
+    if (showLabel !== undefined) return showLabel
+    if (NForm?.showLabel !== undefined) return NForm.showLabel
+    return true
+  })
   return {
     validationErrored: validationErroredRef,
     mergedLabelStyle: mergedLabelStyleRef,
     mergedLabelPlacement: mergedLabelPlacementRef,
     mergedLabelAlign: mergedLabelAlignRef,
     mergedShowRequireMark: mergedShowRequireMarkRef,
     mergedValidationStatus: mergedValidationStatusRef,
-    mergedShowFeedback: mergedShowFeedbackRef
+    mergedShowFeedback: mergedShowFeedbackRef,
+    mergedShowLabel: mergedShowLabelRef
   }
 }
 

diff --git a/src/form/tests/Form.spec.tsx b/src/form/tests/Form.spec.tsx
@@ -91,10 +91,7 @@ describe('n-form', () => {
   })
 
   it('should work with `show-label` prop', async () => {
-    const wrapper = mount(NForm, {
-      props: {
-        showLabel: false
-      },
+    let wrapper = mount(NForm, {
       slots: {
         default: () =>
           [1, 2, 3].map((num) => (
@@ -106,7 +103,78 @@ describe('n-form', () => {
           ))
       }
     })
+    // show-label default is true in component
+    expect(wrapper.findAll('.n-form-item-label').length).toBe(3)
+    expect(wrapper.findAll('.n-form-item--no-label').length).toBe(0)
+
+    await wrapper.setProps({ showLabel: true })
+    expect(wrapper.findAll('.n-form-item-label').length).toBe(3)
+    expect(wrapper.findAll('.n-form-item--no-label').length).toBe(0)
+
+    await wrapper.setProps({ showLabel: false })
     expect(wrapper.findAll('.n-form-item-label').length).toBe(0)
     expect(wrapper.findAll('.n-form-item--no-label').length).toBe(3)
+
+    // The NFormItem show-label has a higher weight than the NForm
+    wrapper = mount(NForm, {
+      props: { showLabel: true },
+      slots: {
+        default: () => (
+          <NFormItem label="label" show-label={false}>
+            {{
+              default: () => <NInput />
+            }}
+          </NFormItem>
+        )
+      }
+    })
+    expect(
+      wrapper.find('.n-form-item').classes().includes('n-form-item--no-label')
+    ).toBe(true)
+    expect(wrapper.findAll('.n-form-item-label').length).toBe(0)
+  })
+
+  it('should work with `label` prop in form item', async () => {
+    let wrapper = mount(NForm, {
+      slots: {
+        default: () => (
+          <NFormItem>
+            {{
+              default: () => <NInput />
+            }}
+          </NFormItem>
+        )
+      }
+    })
+    expect(wrapper.findAll('.n-form-item-label').length).toBe(0)
+    expect(wrapper.findAll('.n-form-item--no-label').length).toBe(0)
+
+    wrapper = mount(NForm, {
+      slots: {
+        default: () => (
+          <NFormItem label="label">
+            {{
+              default: () => <NInput />
+            }}
+          </NFormItem>
+        )
+      }
+    })
+    expect(wrapper.findAll('.n-form-item-label').length).toBe(1)
+    expect(wrapper.findAll('.n-form-item--no-label').length).toBe(0)
+
+    wrapper = mount(NForm, {
+      slots: {
+        default: () => (
+          <NFormItem label={false}>
+            {{
+              default: () => <NInput />
+            }}
+          </NFormItem>
+        )
+      }
+    })
+    expect(wrapper.findAll('.n-form-item-label').length).toBe(0)
+    expect(wrapper.findAll('.n-form-item--no-label').length).toBe(1)
   })
 })