Maintenance: Updated package dependencies.

zammad · May 13, 2022 · c85e786 · c85e786
1 parent a46b3d0
commit c85e786
Show file tree

Hide file tree

Showing 28 changed files with 852 additions and 807 deletions.
diff --git a/.eslint-plugin-zammad/package.json b/.eslint-plugin-zammad/package.json
@@ -17,10 +17,10 @@
     "requireindex": "^1.2.0"
   },
   "devDependencies": {
-    "eslint": "^8.6.0",
+    "eslint": "^8.15.0",
     "eslint-plugin-eslint-plugin": "^4.1.0",
     "eslint-plugin-node": "^11.1.0",
-    "mocha": "^9.1.3"
+    "mocha": "^10.0.0"
   },
   "engines": {
     "node": "12.x || 14.x || >= 16"

diff --git a/.eslint-plugin-zammad/yarn.lock b/.eslint-plugin-zammad/yarn.lock
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -17,6 +17,7 @@
     "function-calc-no-unspaced-operator": null,
     "function-comma-space-after": null,
     "hue-degree-notation": null,
+    "function-no-unknown": null,
     "keyframes-name-pattern": null,
     "max-empty-lines": null,
     "no-descending-specificity": null,

diff --git a/app/frontend/apps/mobile/form/theme/global/index.ts b/app/frontend/apps/mobile/form/theme/global/index.ts
@@ -33,7 +33,7 @@ const getCoreClasses: FormThemeExtension = (classes: FormThemeClasses) => {
     tel: addFloatingLabel(classes.tel),
     time: addFloatingLabel(classes.time),
     date: addDateLabel(classes.date),
-    datetimeLocal: addDateLabel(classes['datetime-local']),
+    datetime: addDateLabel(classes.datetime),
     textarea: addFloatingLabel(classes.textarea),
     password: addFloatingLabel(classes.password),
     select: addFloatingLabel({

diff --git a/app/frontend/apps/mobile/modules/login/views/Login.vue b/app/frontend/apps/mobile/modules/login/views/Login.vue
@@ -81,8 +81,8 @@ const application = useApplicationStore()
           </template>
           <Form
             ref="form"
-            :form-schema-id="FormSchemaId.FormSchemaFormMobileLogin"
             class="text-left"
+            :form-schema-id="FormSchemaId.FormSchemaFormMobileLogin"
             @submit="login"
           >
             <template #after-fields>

diff --git a/app/frontend/shared/components/CommonNotifications/__tests__/CommonNotifications.spec.ts b/app/frontend/shared/components/CommonNotifications/__tests__/CommonNotifications.spec.ts
@@ -6,7 +6,8 @@ import {
   type ExtendedRenderResult,
 } from '@tests/support/components'
 import { waitForTimeout } from '@tests/support/utils'
-import { useNotifications, NotificationTypes } from '..'
+import useNotifications from '../composable'
+import { NotificationTypes } from '../types'
 import CommonNotifications from '../CommonNotifications.vue'
 
 let wrapper: ExtendedRenderResult

diff --git a/app/frontend/shared/components/Form/Form.vue b/app/frontend/shared/components/Form/Form.vue
@@ -43,7 +43,7 @@ import FormLayout from './FormLayout.vue'
 // - Maybe some default buttons inside the components with loading cycle on submit?
 // (- Disabled form on submit? (i think it's the default of FormKit, but only when a promise will be returned from the submit handler))
 // - Reset/Clear form handling?
-// - ...
+// - Add usage of "clearErrors(true)"?
 
 export interface Props {
   schema?: FormSchemaNode[]
@@ -304,7 +304,7 @@ const buildStaticSchema = (schema: FormSchemaNode[]) => {
 }
 
 const localChangeFields = computed(() => {
-  if (props.formSchemaId) return coreWorkflowChanges.value
+  // if (props.formSchemaId) return coreWorkflowChanges.value
 
   return props.changeFields
 })

diff --git a/app/frontend/shared/components/Form/__tests__/useForm.spec.ts b/app/frontend/shared/components/Form/__tests__/useForm.spec.ts
@@ -59,8 +59,8 @@ describe('useForm', () => {
     }
 
     expect(isValid.value).toBe(true)
-    expect(isDirty.value).toBe(true)
-    expect(isComplete.value).toBe(true)
+    expect(isDirty.value).toBe(false)
+    expect(isComplete.value).toBe(false)
     expect(isSubmitted.value).toBe(false)
   })
 })
diff --git a/app/frontend/shared/components/Form/fields/FieldCheckbox/__tests__/FieldCheckbox.spec.ts b/app/frontend/shared/components/Form/fields/FieldCheckbox/__tests__/FieldCheckbox.spec.ts
@@ -68,9 +68,9 @@ describe('Form - Field - Checkbox (Formkit-BuildIn)', () => {
 
     await waitForTimeout()
 
-    expect(view.emitted().input).toBeTruthy()
+    expect(view.emitted().inputRaw).toBeTruthy()
 
-    const emittedInput = view.emitted().input as Array<Array<InputEvent>>
+    const emittedInput = view.emitted().inputRaw as Array<Array<InputEvent>>
 
     expect(emittedInput[0][0]).toBe(true)
   })
@@ -93,17 +93,17 @@ describe('Form - Field - Checkbox (Formkit-BuildIn)', () => {
 
     await waitForTimeout()
 
-    expect(view.emitted().input).toBeTruthy()
+    expect(view.emitted().inputRaw).toBeTruthy()
 
-    let emittedInput = view.emitted().input as Array<Array<InputEvent>>
+    let emittedInput = view.emitted().inputRaw as Array<Array<InputEvent>>
 
     expect(emittedInput[0][0]).toBe('yes')
 
     await view.events.click(checkbox)
 
     await waitForTimeout()
 
-    emittedInput = view.emitted().input as Array<Array<InputEvent>>
+    emittedInput = view.emitted().inputRaw as Array<Array<InputEvent>>
     expect(emittedInput[1][0]).toBe('no')
   })
 
@@ -190,9 +190,9 @@ describe('Form - Field - Checkbox (Formkit-BuildIn)', () => {
     await view.events.click(view.getByLabelText(/one/))
     await waitForTimeout()
 
-    expect(view.emitted().input).toBeTruthy()
+    expect(view.emitted().inputRaw).toBeTruthy()
 
-    const emittedInput = view.emitted().input as Array<Array<InputEvent>>
+    const emittedInput = view.emitted().inputRaw as Array<Array<InputEvent>>
 
     expect(emittedInput[0][0]).toStrictEqual(['one'])
 

diff --git a/app/frontend/shared/components/Form/fields/FieldDate/FieldDateTime.stories.ts b/app/frontend/shared/components/Form/fields/FieldDate/FieldDateTime.stories.ts
@@ -63,11 +63,11 @@ const Template: Story<FieldArgs> = (args: FieldArgs) => ({
   setup() {
     return { args }
   },
-  template: '<FormKit type="datetimeLocal" v-bind="args"/>',
+  template: '<FormKit type="datetime" v-bind="args"/>',
 })
 
 export const Default = Template.bind({})
 Default.args = {
-  label: 'Datetime (local)',
-  name: 'datetime-local',
+  label: 'Datetime',
+  name: 'datetime',
 }
diff --git a/app/frontend/shared/components/Form/fields/FieldDate/__tests__/FieldDateTime.spec.ts b/app/frontend/shared/components/Form/fields/FieldDate/__tests__/FieldDateTime.spec.ts
@@ -268,14 +268,14 @@ describe('Fields - FieldDate - visuals', () => {
   })
 })
 
-describe('Fields - FieldDate - type "datetimelocal"', () => {
+describe('Fields - FieldDate - type "datetime"', () => {
   afterAll(() => {
     i18n.setTranslationMap(new Map())
   })
 
   it('renders time inputs and allows to change it (24 hour)', async () => {
     const view = renderDateField({
-      type: 'datetime-local',
+      type: 'datetime',
     })
 
     const input = view.getByLabelText('Date')
@@ -302,7 +302,7 @@ describe('Fields - FieldDate - type "datetimelocal"', () => {
     i18n.setTranslationMap(new Map([['FORMAT_DATETIME', 'mm/dd/yyyy l:MM P']]))
 
     const view = renderDateField({
-      type: 'datetime-local',
+      type: 'datetime',
     })
 
     const hour = view.getByLabelText('Hour')

diff --git a/app/frontend/shared/components/Form/fields/FieldDate/index.ts b/app/frontend/shared/components/Form/fields/FieldDate/index.ts
@@ -23,7 +23,7 @@ export default [
     definition: dateFieldDefinition,
   },
   {
-    fieldType: 'datetimeLocal',
+    fieldType: 'datetime',
     definition: dateTimeFieldDefinition,
   },
 ]
diff --git a/app/frontend/shared/components/Form/fields/FieldInputs/__tests__/FieldInputs.spec.ts b/app/frontend/shared/components/Form/fields/FieldInputs/__tests__/FieldInputs.spec.ts
@@ -63,9 +63,9 @@ describe('Form - Field - Inputs (Text) (Formkit-BuildIn)', () => {
 
     await waitForTimeout()
 
-    expect(wrapper.emitted().input).toBeTruthy()
+    expect(wrapper.emitted().inputRaw).toBeTruthy()
 
-    const emittedInput = wrapper.emitted().input as Array<Array<InputEvent>>
+    const emittedInput = wrapper.emitted().inputRaw as Array<Array<InputEvent>>
 
     expect(emittedInput[6][0]).toBe('Example')
   })

diff --git a/app/frontend/shared/components/Form/fields/FieldPassword/__tests__/FieldPassword.spec.ts b/app/frontend/shared/components/Form/fields/FieldPassword/__tests__/FieldPassword.spec.ts
@@ -68,7 +68,7 @@ describe('Form - Field - Password (Formkit-BuildIn)', () => {
     await wrapper.events.type(input, 'Test1234!')
     await waitForTimeout()
 
-    const emittedInput = wrapper.emitted().input as Array<Array<InputEvent>>
+    const emittedInput = wrapper.emitted().inputRaw as Array<Array<InputEvent>>
 
     expect(emittedInput[8][0]).toBe('Test1234!')
   })

diff --git a/app/frontend/shared/components/Form/fields/FieldPassword/index.ts b/app/frontend/shared/components/Form/fields/FieldPassword/index.ts
@@ -10,6 +10,8 @@ const localPasswordDefinition = cloneDeep(passwordDefinition)
 const switchPasswordVisibility = (node: FormKitNode) => {
   const { props } = node
 
+  node.addProps(['passwordVisibilityIcon'])
+
   if (!props.definition) return
 
   const definition = cloneDeep(props.definition)
@@ -51,7 +53,6 @@ const switchPasswordVisibility = (node: FormKitNode) => {
 }
 
 initializeFieldDefinition(localPasswordDefinition, {
-  props: ['passwordVisibilityIcon'],
   features: [switchPasswordVisibility],
 })
 

diff --git a/app/frontend/shared/components/Form/fields/FieldSelect/__tests__/FieldSelect.spec.ts b/app/frontend/shared/components/Form/fields/FieldSelect/__tests__/FieldSelect.spec.ts
@@ -98,10 +98,10 @@ describe('Form - Field - Select - Dialog', () => {
     wrapper.events.click(wrapper.getAllByRole('option')[0])
 
     await waitFor(() => {
-      expect(wrapper.emitted().input).toBeTruthy()
+      expect(wrapper.emitted().inputRaw).toBeTruthy()
     })
 
-    const emittedInput = wrapper.emitted().input as Array<Array<InputEvent>>
+    const emittedInput = wrapper.emitted().inputRaw as Array<Array<InputEvent>>
 
     expect(emittedInput[0][0]).toBe(testOptions[0].value)
 
@@ -342,10 +342,10 @@ describe('Form - Field - Select - Features', () => {
     await wrapper.events.click(wrapper.getByRole('button'))
 
     await waitFor(() => {
-      expect(wrapper.emitted().input).toBeTruthy()
+      expect(wrapper.emitted().inputRaw).toBeTruthy()
     })
 
-    const emittedInput = wrapper.emitted().input as Array<Array<InputEvent>>
+    const emittedInput = wrapper.emitted().inputRaw as Array<Array<InputEvent>>
 
     expect(emittedInput[0][0]).toBe(undefined)
 
@@ -374,10 +374,10 @@ describe('Form - Field - Select - Features', () => {
     wrapper.events.click(selectOptions[0])
 
     await waitFor(() => {
-      expect(wrapper.emitted().input).toBeTruthy()
+      expect(wrapper.emitted().inputRaw).toBeTruthy()
     })
 
-    const emittedInput = wrapper.emitted().input as Array<Array<InputEvent>>
+    const emittedInput = wrapper.emitted().inputRaw as Array<Array<InputEvent>>
 
     expect(emittedInput[0][0]).toStrictEqual([testOptions[0].value])
     expect(wrapper.queryAllIconsByName('checked-no')).toHaveLength(2)
@@ -570,10 +570,10 @@ describe('Form - Field - Select - Features', () => {
     })
 
     await waitFor(() => {
-      expect(wrapper.emitted().input).toBeTruthy()
+      expect(wrapper.emitted().inputRaw).toBeTruthy()
     })
 
-    const emittedInput = wrapper.emitted().input as Array<Array<InputEvent>>
+    const emittedInput = wrapper.emitted().inputRaw as Array<Array<InputEvent>>
 
     expect(emittedInput[0][0]).toBe(1)
 
@@ -699,19 +699,17 @@ describe('Form - Field - Select - Accessibility', () => {
     wrapper.events.type(selectOptions[0], '{Space}')
 
     await waitFor(() => {
-      expect(wrapper.emitted().input).toBeTruthy()
+      expect(wrapper.emitted().inputRaw).toBeTruthy()
     })
 
-    const emittedInput = wrapper.emitted().input as Array<Array<InputEvent>>
+    const emittedInput = wrapper.emitted().inputRaw as Array<Array<InputEvent>>
 
     expect(emittedInput[0][0]).toBe(testOptions[0].value)
 
-    await waitForElementToBeRemoved(() => wrapper.queryByRole('dialog'))
-
     wrapper.events.type(wrapper.getByRole('button'), '{Space}')
 
     await waitFor(() => {
-      expect(emittedInput[0][1]).toBe(undefined)
+      expect(emittedInput[1][0]).toBe(undefined)
     })
   })
 })
@@ -783,10 +781,10 @@ describe('Form - Field - Select - Input Checklist', () => {
     wrapper.events.click(wrapper.getAllByRole('option')[1])
 
     await waitFor(() => {
-      expect(wrapper.emitted().input).toBeTruthy()
+      expect(wrapper.emitted().inputRaw).toBeTruthy()
     })
 
-    const emittedInput = wrapper.emitted().input as Array<Array<InputEvent>>
+    const emittedInput = wrapper.emitted().inputRaw as Array<Array<InputEvent>>
 
     expect(emittedInput[0][0]).toBe(testOptions[1].value)
   })

diff --git a/app/frontend/shared/components/Form/fields/FieldTextarea/__tests__/FieldTextarea.spec.ts b/app/frontend/shared/components/Form/fields/FieldTextarea/__tests__/FieldTextarea.spec.ts
@@ -73,7 +73,7 @@ describe('Form - Field - Textarea (Formkit-BuildIn)', () => {
 
     await waitForTimeout()
 
-    const emittedInput = wrapper.emitted().input as Array<Array<InputEvent>>
+    const emittedInput = wrapper.emitted().inputRaw as Array<Array<InputEvent>>
 
     expect(emittedInput[11][0]).toBe('example body')
   })
@@ -125,7 +125,11 @@ describe('Form - Field - Textarea (Formkit-BuildIn) - Translations', () => {
     expect(textarea).toHaveAttribute('placeholder', 'Gib deinen Text ein')
   })
 
-  it('can translate label with label placeholder', () => {
+  it('can translate label with label placeholder (simulate language switch)', async () => {
+    i18n.setTranslationMap(new Map([['Body %s %s', 'Text %s %s']]))
+
+    await nextTick()
+
     const wrapper = renderComponent(FormKit, {
       ...wrapperParameters,
       props: {
@@ -138,7 +142,49 @@ describe('Form - Field - Textarea (Formkit-BuildIn) - Translations', () => {
     })
 
     expect(
-      wrapper.getByLabelText('Body Example Placeholder'),
+      wrapper.getByLabelText('Text Example Placeholder'),
+    ).toBeInTheDocument()
+
+    i18n.setTranslationMap(new Map([['Body %s %s', 'Other Language %s %s']]))
+
+    await nextTick()
+
+    expect(
+      wrapper.getByLabelText('Other Language Example Placeholder'),
+    ).toBeInTheDocument()
+  })
+
+  it('can change translated label', async () => {
+    const map = new Map([
+      ['Body %s %s', 'Text %s %s'],
+      ['Other Body %s %s', 'Anderer Text %s %s'],
+    ])
+
+    i18n.setTranslationMap(map)
+
+    await nextTick()
+
+    const wrapper = renderComponent(FormKit, {
+      ...wrapperParameters,
+      props: {
+        label: 'Body %s %s',
+        labelPlaceholder: ['Example', 'Placeholder'],
+        name: 'textarea',
+        type: 'textarea',
+        id: 'textarea',
+      },
+    })
+
+    expect(
+      wrapper.getByLabelText('Text Example Placeholder'),
+    ).toBeInTheDocument()
+
+    await wrapper.rerender({
+      label: 'Other Body %s %s',
+    })
+
+    expect(
+      wrapper.getByLabelText('Anderer Text Example Placeholder'),
     ).toBeInTheDocument()
   })
 })