CommonUserAvatar.spec.ts 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
  2. import { useDateFormat } from '@vueuse/shared'
  3. import { renderComponent } from '#tests/support/components/index.ts'
  4. import { convertToGraphQLId } from '#shared/graphql/utils.ts'
  5. import { initializeUserAvatarClasses } from '#shared/initializer/initializeUserAvatarClasses.ts'
  6. import { SYSTEM_USER_ID } from '#shared/utils/constants.ts'
  7. import CommonUserAvatar, { type Props } from '../CommonUserAvatar.vue'
  8. const USER_ID = convertToGraphQLId('User', '123')
  9. vi.hoisted(() => {
  10. vi.setSystemTime(new Date('2024-11-11T00:00:00Z'))
  11. })
  12. initializeUserAvatarClasses({
  13. backgroundColors: [
  14. 'bg-gray',
  15. 'bg-red-bright',
  16. 'bg-yellow',
  17. 'bg-blue',
  18. 'bg-green',
  19. 'bg-pink',
  20. 'bg-orange',
  21. ],
  22. })
  23. describe('CommonUserAvatar', () => {
  24. it('renders user avatar', async () => {
  25. const view = renderComponent(CommonUserAvatar, {
  26. props: <Props>{
  27. entity: {
  28. id: USER_ID,
  29. firstname: 'John',
  30. lastname: 'Doe',
  31. },
  32. },
  33. })
  34. const avatar = view.getByTestId('common-avatar')
  35. expect(avatar).toHaveTextContent('JD')
  36. expect(avatar).toHaveClass('bg-blue')
  37. await view.rerender(<Props>{
  38. entity: {
  39. id: USER_ID,
  40. image: '100.png',
  41. firstname: 'John',
  42. lastname: 'Doe',
  43. },
  44. })
  45. expect(avatar).toHaveStyle(
  46. 'background-image: url(/api/users/image/100.png)',
  47. )
  48. expect(avatar).not.toHaveTextContent('JD')
  49. })
  50. it('renders system user', () => {
  51. const view = renderComponent(CommonUserAvatar, {
  52. props: <Props>{
  53. entity: {
  54. id: SYSTEM_USER_ID,
  55. },
  56. },
  57. })
  58. const avatar = view.getByTestId('common-avatar')
  59. expect(avatar).toHaveStyle({
  60. backgroundImage:
  61. 'url(/app/frontend/shared/components/CommonUserAvatar/assets/logo.svg)',
  62. })
  63. })
  64. it('renders icon by source', async () => {
  65. const view = renderComponent(CommonUserAvatar, {
  66. props: <Props>{
  67. entity: {
  68. id: USER_ID,
  69. source: 'twitter',
  70. },
  71. },
  72. })
  73. expect(view.getByIconName('twitter')).toBeInTheDocument()
  74. await view.rerender(<Props>{
  75. entity: {
  76. id: USER_ID,
  77. source: 'facebook',
  78. },
  79. })
  80. expect(view.getByIconName('facebook')).toBeInTheDocument()
  81. await view.rerender(<Props>{
  82. entity: {
  83. id: USER_ID,
  84. source: 'some-unknown-source',
  85. },
  86. })
  87. expect(view.queryByIconName('some-unknown-source')).not.toBeInTheDocument()
  88. })
  89. it('renders active', async () => {
  90. const view = renderComponent(CommonUserAvatar, {
  91. props: <Props>{
  92. entity: {
  93. id: USER_ID,
  94. active: true,
  95. },
  96. },
  97. })
  98. const avatar = view.getByTestId('common-avatar')
  99. expect(avatar).not.toHaveClass('opacity-60')
  100. await view.rerender(<Props>{
  101. entity: {
  102. id: USER_ID,
  103. active: false,
  104. },
  105. })
  106. expect(avatar).toHaveClass('opacity-60')
  107. })
  108. it('renders crown for vip', async () => {
  109. const view = renderComponent(CommonUserAvatar, {
  110. props: <Props>{
  111. entity: {
  112. id: USER_ID,
  113. vip: true,
  114. },
  115. },
  116. })
  117. expect(view.getByIconName('crown')).toBeInTheDocument()
  118. await view.rerender(<Props>{
  119. entity: {
  120. id: USER_ID,
  121. vip: true,
  122. },
  123. personal: true,
  124. })
  125. expect(view.queryByIconName('crown')).not.toBeInTheDocument()
  126. })
  127. it('can render initials only', async () => {
  128. const view = renderComponent(CommonUserAvatar, {
  129. props: <Props>{
  130. entity: {
  131. id: USER_ID,
  132. image: '100.png',
  133. firstname: 'John',
  134. lastname: 'Doe',
  135. },
  136. initialsOnly: true,
  137. },
  138. })
  139. const avatar = view.getByTestId('common-avatar')
  140. expect(avatar).toHaveTextContent('JD')
  141. expect(avatar).toHaveClass('bg-blue')
  142. expect(avatar).not.toHaveStyle(
  143. 'background-image: url(/api/users/image/100.png)',
  144. )
  145. })
  146. describe('out of office state', () => {
  147. let today: string
  148. beforeAll(() => {
  149. today = useDateFormat(new Date(), 'YYYY-MM-DD').value
  150. })
  151. it('out of office date is in present', async () => {
  152. const view = renderComponent(CommonUserAvatar, {
  153. props: <Props>{
  154. entity: {
  155. id: USER_ID,
  156. active: true,
  157. },
  158. },
  159. })
  160. await view.rerender(<Props>{
  161. entity: {
  162. id: USER_ID,
  163. outOfOffice: true,
  164. outOfOfficeStartAt: '2024-10-11',
  165. outOfOfficeEndAt: '2024-12-11',
  166. },
  167. })
  168. const avatar = view.getByTestId('common-avatar')
  169. expect(avatar).toHaveClass('opacity-60')
  170. })
  171. it('out of office date is in past', async () => {
  172. const view = renderComponent(CommonUserAvatar, {
  173. props: <Props>{
  174. entity: {
  175. id: USER_ID,
  176. active: true,
  177. },
  178. },
  179. })
  180. const [year, month, day] = today.split('-')
  181. const outOfOfficeStartAt = `${year}-${(+month - 2).toString().padStart(2, '0')}-${day}`
  182. const outOfOfficeEndAt = `${year}-${(+month - 1).toString().padStart(2, '0')}-${day}`
  183. await view.rerender(<Props>{
  184. entity: {
  185. id: USER_ID,
  186. outOfOffice: true,
  187. outOfOfficeStartAt,
  188. outOfOfficeEndAt,
  189. },
  190. })
  191. const avatar = view.getByTestId('common-avatar')
  192. expect(avatar).not.toHaveClass('grayscale-[70%]')
  193. })
  194. it('out of office date is in future', async () => {
  195. const view = renderComponent(CommonUserAvatar, {
  196. props: <Props>{
  197. entity: {
  198. id: USER_ID,
  199. active: true,
  200. },
  201. },
  202. })
  203. await view.rerender(<Props>{
  204. entity: {
  205. id: USER_ID,
  206. outOfOffice: true,
  207. outOfOfficeStartAt: '2024-12-11',
  208. outOfOfficeEndAt: '2025-01-11',
  209. },
  210. })
  211. const avatar = view.getByTestId('common-avatar')
  212. expect(avatar).not.toHaveClass('grayscale-[70%]')
  213. })
  214. })
  215. })