CommonInlineEdit.spec.ts 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
  2. import { waitFor } from '@testing-library/vue'
  3. import { renderComponent } from '#tests/support/components/index.ts'
  4. import CommonInlineEdit, {
  5. type Props,
  6. } from '#desktop/components/CommonInlineEdit/CommonInlineEdit.vue'
  7. const renderInlineEdit = (props: Partial<Props> = {}) => {
  8. return renderComponent(CommonInlineEdit, {
  9. props: {
  10. name: 'inlineEditTest',
  11. value: 'test value',
  12. label: 'Inline Edit Label',
  13. submitLabel: 'Submit',
  14. cancelLabel: 'Cancel',
  15. ...props,
  16. },
  17. form: true,
  18. router: true,
  19. })
  20. }
  21. describe('CommonInlineEdit', async () => {
  22. it('shows by default non editable node', () => {
  23. const wrapper = renderInlineEdit()
  24. expect(wrapper.getByText('test value')).toBeInTheDocument()
  25. expect(wrapper.queryByDisplayValue('test value')).not.toBeInTheDocument()
  26. })
  27. it('supports placeholder on edit input', async () => {
  28. const wrapper = renderInlineEdit({ placeholder: 'test placeholder' })
  29. await wrapper.events.click(wrapper.getByRole('button'))
  30. expect(
  31. await wrapper.findByPlaceholderText('test placeholder'),
  32. ).toBeInTheDocument()
  33. })
  34. it('submits edit on button click and enter', async () => {
  35. const submitEditCallbackSpy = vi.fn()
  36. const wrapper = renderInlineEdit({
  37. onSubmitEdit: (newValue: string) => submitEditCallbackSpy(newValue),
  38. })
  39. await wrapper.events.click(wrapper.getByRole('button'))
  40. await wrapper.events.type(wrapper.getByRole('textbox'), ' update')
  41. await waitFor(() =>
  42. expect(
  43. wrapper.getByRole('textbox', { name: 'Inline Edit Label' }),
  44. ).toBeInTheDocument(),
  45. )
  46. await wrapper.events.click(wrapper.getByRole('button', { name: 'Submit' }))
  47. expect(submitEditCallbackSpy).toHaveBeenCalledWith('test value update')
  48. expect(
  49. wrapper.queryByRole('textbox', { name: 'Inline Edit Label' }),
  50. ).not.toBeInTheDocument()
  51. })
  52. it('submits edit on enter key', async () => {
  53. const submitEditCallbackSpy = vi.fn()
  54. const wrapper = renderInlineEdit({
  55. onSubmitEdit: (value: string) => submitEditCallbackSpy(value),
  56. })
  57. await wrapper.events.click(wrapper.getByRole('button'))
  58. await wrapper.events.type(wrapper.getByRole('textbox'), ' update 2')
  59. await waitFor(() =>
  60. expect(
  61. wrapper.getByRole('textbox', { name: 'Inline Edit Label' }),
  62. ).toBeInTheDocument(),
  63. )
  64. await wrapper.events.keyboard('{enter}')
  65. expect(submitEditCallbackSpy).toHaveBeenCalledWith('test value update 2')
  66. })
  67. it('do not stop edit mode when submit promise failed', async () => {
  68. const wrapper = renderInlineEdit({
  69. onSubmitEdit: (): Promise<void> => {
  70. return new Promise((resolve, reject) => {
  71. reject()
  72. })
  73. },
  74. })
  75. await wrapper.events.click(wrapper.getByRole('button'))
  76. await wrapper.events.type(wrapper.getByRole('textbox'), ' update')
  77. await waitFor(() =>
  78. expect(
  79. wrapper.getByRole('textbox', { name: 'Inline Edit Label' }),
  80. ).toBeInTheDocument(),
  81. )
  82. await wrapper.events.click(wrapper.getByRole('button', { name: 'Submit' }))
  83. expect(
  84. wrapper.getByRole('textbox', { name: 'Inline Edit Label' }),
  85. ).toBeInTheDocument()
  86. })
  87. it('focuses field on edit', async () => {
  88. const wrapper = renderInlineEdit()
  89. await wrapper.events.click(wrapper.getByRole('button'))
  90. await waitFor(() =>
  91. expect(
  92. wrapper.getByRole('textbox', { name: 'Inline Edit Label' }),
  93. ).toBeInTheDocument(),
  94. )
  95. expect(
  96. wrapper.getByRole('textbox', { name: 'Inline Edit Label' }),
  97. ).toHaveFocus()
  98. })
  99. it('cancels on button click', async () => {
  100. const wrapper = renderInlineEdit()
  101. await wrapper.events.click(wrapper.getByRole('button'))
  102. await wrapper.events.click(wrapper.getByRole('button', { name: 'Cancel' }))
  103. expect(
  104. wrapper.queryByRole('textbox', { name: 'Inline Edit Label' }),
  105. ).not.toBeInTheDocument()
  106. expect(wrapper.emitted()['cancel-edit']).toBeTruthy()
  107. })
  108. it('cancels on escape key', async () => {
  109. const wrapper = renderInlineEdit()
  110. await wrapper.events.click(wrapper.getByRole('button'))
  111. await waitFor(() =>
  112. expect(
  113. wrapper.getByRole('textbox', { name: 'Inline Edit Label' }),
  114. ).toBeInTheDocument(),
  115. )
  116. await wrapper.events.keyboard('{esc}')
  117. expect(wrapper.emitted()['cancel-edit']).toBeTruthy()
  118. })
  119. it('disables submit if input is incorrect and required is true', async () => {
  120. const wrapper = renderInlineEdit({ required: true })
  121. await wrapper.events.click(wrapper.getByRole('button'))
  122. await waitFor(() =>
  123. expect(
  124. wrapper.getByRole('textbox', { name: 'Inline Edit Label' }),
  125. ).toBeInTheDocument(),
  126. )
  127. await wrapper.events.clear(wrapper.getByRole('textbox'))
  128. expect(wrapper.emitted()['submit-edit']).toBeFalsy()
  129. expect(wrapper.getByRole('button', { name: 'Submit' })).toBeDisabled()
  130. expect(
  131. wrapper.getByRole('textbox', { name: 'Inline Edit Label' }),
  132. ).toBeInTheDocument()
  133. })
  134. it('supports adding attributes on label', () => {
  135. const wrapper = renderInlineEdit({
  136. labelAttrs: {
  137. role: 'heading',
  138. 'aria-level': '1',
  139. },
  140. })
  141. expect(wrapper.getByRole('heading', { level: 1 })).toBeInTheDocument()
  142. })
  143. it('allows inline edit to be take up full width if set to block', () => {
  144. const wrapper = renderInlineEdit({
  145. block: true,
  146. })
  147. expect(wrapper.getByRole('button')).toHaveClass('w-full')
  148. })
  149. it('disables input if disabled prop is true', async () => {
  150. const wrapper = renderInlineEdit({ disabled: true })
  151. expect(wrapper.getByText('test value')).toBeInTheDocument()
  152. await wrapper.events.click(wrapper.getByText('test value'))
  153. expect(wrapper.queryByRole('textbox')).not.toBeInTheDocument()
  154. })
  155. it('detects links if set to true and renders it as link only in label', async () => {
  156. const wrapper = renderInlineEdit({
  157. detectLinks: true,
  158. value: 'https://zammad.com/en',
  159. })
  160. expect(
  161. wrapper.getByRole('link', { name: 'https://zammad.com/en' }),
  162. ).toBeInTheDocument()
  163. })
  164. it('displays initial edit value if editing got activated', async () => {
  165. const wrapper = renderInlineEdit({
  166. initialEditValue: 'initial Value',
  167. value: 'default Value',
  168. })
  169. await wrapper.events.click(wrapper.getByText('default Value'))
  170. expect(wrapper.getByRole('textbox')).toHaveValue('initial Value')
  171. })
  172. it('supports adding alternative background color', async () => {
  173. const wrapper = renderInlineEdit({
  174. alternativeBackground: true,
  175. })
  176. await wrapper.events.click(wrapper.getByText('test value'))
  177. expect(wrapper.html()).toContain(
  178. 'before:bg-neutral-50 before:dark:bg-gray-500',
  179. )
  180. await wrapper.rerender({
  181. alternativeBackground: false,
  182. })
  183. expect(wrapper.html()).toContain(
  184. 'before:bg-blue-200 before:dark:bg-gray-700',
  185. )
  186. expect(wrapper.html()).not.toContain(
  187. 'before:bg-neutral-50 before:dark:bg-gray-500',
  188. )
  189. })
  190. })