@capillarytech/creatives-library 8.0.263 → 8.0.264

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (163) hide show
  1. package/assets/Android.png +0 -0
  2. package/assets/iOS.png +0 -0
  3. package/constants/unified.js +1 -2
  4. package/initialReducer.js +0 -2
  5. package/package.json +1 -1
  6. package/services/api.js +0 -10
  7. package/services/tests/api.test.js +0 -34
  8. package/tests/integration/TemplateCreation/TemplateCreation.integration.test.js +35 -17
  9. package/tests/integration/TemplateCreation/api-response.js +1 -31
  10. package/tests/integration/TemplateCreation/msw-handler.js +0 -2
  11. package/utils/common.js +0 -5
  12. package/utils/commonUtils.js +5 -28
  13. package/utils/tagValidations.js +2 -1
  14. package/utils/tests/commonUtil.test.js +0 -224
  15. package/utils/transformTemplateConfig.js +10 -0
  16. package/v2Components/CapDeviceContent/index.js +56 -61
  17. package/v2Components/CapTagList/index.js +1 -6
  18. package/v2Components/CapTagListWithInput/index.js +1 -5
  19. package/v2Components/CapTagListWithInput/messages.js +1 -1
  20. package/v2Components/CapWhatsappCTA/tests/index.test.js +0 -5
  21. package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss +2 -2
  22. package/v2Components/ErrorInfoNote/index.js +72 -402
  23. package/v2Components/ErrorInfoNote/messages.js +6 -32
  24. package/v2Components/ErrorInfoNote/style.scss +6 -278
  25. package/v2Components/FormBuilder/index.js +8 -8
  26. package/v2Components/FormBuilder/tests/index.test.js +4 -13
  27. package/v2Components/HtmlEditor/HTMLEditor.js +99 -418
  28. package/v2Components/HtmlEditor/__tests__/HTMLEditor.test.js +133 -1882
  29. package/v2Components/HtmlEditor/__tests__/index.lazy.test.js +16 -27
  30. package/v2Components/HtmlEditor/_htmlEditor.scss +45 -108
  31. package/v2Components/HtmlEditor/_index.lazy.scss +1 -0
  32. package/v2Components/HtmlEditor/components/CodeEditorPane/_codeEditorPane.scss +102 -23
  33. package/v2Components/HtmlEditor/components/CodeEditorPane/index.js +140 -148
  34. package/v2Components/HtmlEditor/components/DeviceToggle/_deviceToggle.scss +1 -2
  35. package/v2Components/HtmlEditor/components/DeviceToggle/index.js +3 -3
  36. package/v2Components/HtmlEditor/components/EditorToolbar/_editorToolbar.scss +1 -9
  37. package/v2Components/HtmlEditor/components/EditorToolbar/index.js +6 -31
  38. package/v2Components/HtmlEditor/components/FullscreenModal/_fullscreenModal.scss +0 -22
  39. package/v2Components/HtmlEditor/components/InAppPreviewPane/DeviceFrame.js +7 -4
  40. package/v2Components/HtmlEditor/components/InAppPreviewPane/__tests__/DeviceFrame.test.js +45 -35
  41. package/v2Components/HtmlEditor/components/InAppPreviewPane/_inAppPreviewPane.scss +3 -1
  42. package/v2Components/HtmlEditor/components/InAppPreviewPane/constants.js +33 -33
  43. package/v2Components/HtmlEditor/components/InAppPreviewPane/index.js +6 -7
  44. package/v2Components/HtmlEditor/components/PreviewPane/_previewPane.scss +10 -7
  45. package/v2Components/HtmlEditor/components/PreviewPane/index.js +43 -22
  46. package/v2Components/HtmlEditor/components/SplitContainer/_splitContainer.scss +1 -1
  47. package/v2Components/HtmlEditor/components/ValidationErrorDisplay/__tests__/index.test.js +152 -0
  48. package/v2Components/HtmlEditor/components/ValidationErrorDisplay/_validationErrorDisplay.scss +0 -18
  49. package/v2Components/HtmlEditor/components/ValidationErrorDisplay/index.js +31 -36
  50. package/v2Components/HtmlEditor/components/ValidationPanel/_validationPanel.scss +34 -46
  51. package/v2Components/HtmlEditor/components/ValidationPanel/index.js +46 -52
  52. package/v2Components/HtmlEditor/constants.js +20 -45
  53. package/v2Components/HtmlEditor/hooks/__tests__/useInAppContent.test.js +16 -373
  54. package/v2Components/HtmlEditor/hooks/__tests__/useValidation.test.js +16 -351
  55. package/v2Components/HtmlEditor/hooks/useEditorContent.js +2 -5
  56. package/v2Components/HtmlEditor/hooks/useInAppContent.js +146 -88
  57. package/v2Components/HtmlEditor/hooks/useValidation.js +56 -213
  58. package/v2Components/HtmlEditor/index.js +1 -1
  59. package/v2Components/HtmlEditor/messages.js +94 -102
  60. package/v2Components/HtmlEditor/utils/__tests__/htmlValidator.enhanced.test.js +45 -214
  61. package/v2Components/HtmlEditor/utils/__tests__/validationAdapter.test.js +0 -134
  62. package/v2Components/HtmlEditor/utils/contentSanitizer.js +41 -40
  63. package/v2Components/HtmlEditor/utils/htmlValidator.js +72 -71
  64. package/v2Components/HtmlEditor/utils/liquidTemplateSupport.js +124 -158
  65. package/v2Components/HtmlEditor/utils/properSyntaxHighlighting.js +25 -23
  66. package/v2Components/HtmlEditor/utils/validationAdapter.js +41 -66
  67. package/v2Components/MobilePushPreviewV2/index.js +7 -33
  68. package/v2Components/TemplatePreview/_templatePreview.scss +24 -55
  69. package/v2Components/TemplatePreview/index.js +32 -47
  70. package/v2Components/TemplatePreview/messages.js +0 -4
  71. package/v2Components/TestAndPreviewSlidebox/_testAndPreviewSlidebox.scss +0 -1
  72. package/v2Containers/BeeEditor/index.js +90 -172
  73. package/v2Containers/CreativesContainer/SlideBoxContent.js +51 -127
  74. package/v2Containers/CreativesContainer/SlideBoxFooter.js +13 -163
  75. package/v2Containers/CreativesContainer/SlideBoxHeader.js +1 -2
  76. package/v2Containers/CreativesContainer/constants.js +0 -1
  77. package/v2Containers/CreativesContainer/index.js +46 -240
  78. package/v2Containers/CreativesContainer/messages.js +0 -8
  79. package/v2Containers/CreativesContainer/tests/SlideBoxFooter.test.js +2 -11
  80. package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap +50 -38
  81. package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap +0 -103
  82. package/v2Containers/Email/actions.js +0 -7
  83. package/v2Containers/Email/constants.js +1 -5
  84. package/v2Containers/Email/index.js +29 -234
  85. package/v2Containers/Email/messages.js +0 -32
  86. package/v2Containers/Email/reducer.js +1 -12
  87. package/v2Containers/Email/sagas.js +7 -61
  88. package/v2Containers/Email/tests/__snapshots__/reducer.test.js.snap +0 -2
  89. package/v2Containers/Email/tests/reducer.test.js +0 -46
  90. package/v2Containers/Email/tests/sagas.test.js +29 -320
  91. package/v2Containers/EmailWrapper/components/EmailWrapperView.js +21 -211
  92. package/v2Containers/EmailWrapper/components/HTMLEditorTesting.js +74 -40
  93. package/v2Containers/EmailWrapper/components/__tests__/HTMLEditorTesting.test.js +67 -2
  94. package/v2Containers/EmailWrapper/constants.js +0 -2
  95. package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js +77 -629
  96. package/v2Containers/EmailWrapper/index.js +23 -103
  97. package/v2Containers/EmailWrapper/messages.js +1 -65
  98. package/v2Containers/EmailWrapper/tests/EmailWrapperView.test.js +214 -0
  99. package/v2Containers/EmailWrapper/tests/useEmailWrapper.test.js +77 -594
  100. package/v2Containers/FTP/index.js +1 -1
  101. package/v2Containers/InApp/actions.js +0 -7
  102. package/v2Containers/InApp/constants.js +4 -20
  103. package/v2Containers/InApp/index.js +360 -802
  104. package/v2Containers/InApp/index.scss +3 -4
  105. package/v2Containers/InApp/messages.js +3 -7
  106. package/v2Containers/InApp/reducer.js +3 -21
  107. package/v2Containers/InApp/sagas.js +9 -29
  108. package/v2Containers/InApp/selectors.js +5 -25
  109. package/v2Containers/InApp/tests/index.test.js +50 -154
  110. package/v2Containers/InApp/tests/reducer.test.js +0 -34
  111. package/v2Containers/InApp/tests/sagas.test.js +9 -61
  112. package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/content.test.js.snap +0 -3
  113. package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/index.test.js.snap +0 -2
  114. package/v2Containers/Line/Container/Text/index.js +1 -0
  115. package/v2Containers/Line/Container/Wrapper/tests/__snapshots__/index.test.js.snap +0 -2
  116. package/v2Containers/Line/Container/tests/__snapshots__/index.test.js.snap +0 -9
  117. package/v2Containers/MobilePushNew/index.js +1 -0
  118. package/v2Containers/Rcs/index.js +3 -0
  119. package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap +0 -12
  120. package/v2Containers/SmsTrai/Edit/index.js +1 -0
  121. package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap +0 -4
  122. package/v2Containers/TagList/index.js +19 -62
  123. package/v2Containers/Templates/_templates.scss +1 -60
  124. package/v2Containers/Templates/index.js +4 -89
  125. package/v2Containers/Templates/messages.js +0 -4
  126. package/v2Containers/TemplatesV2/TemplatesV2.style.js +2 -4
  127. package/v2Containers/Viber/index.js +1 -0
  128. package/v2Containers/WebPush/Create/index.js +1 -1
  129. package/v2Containers/WebPush/Create/utils/validation.js +2 -1
  130. package/v2Containers/Whatsapp/index.js +1 -0
  131. package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +0 -34
  132. package/v2Containers/Zalo/index.js +1 -0
  133. package/v2Containers/Zalo/tests/index.test.js +1 -5
  134. package/v2Components/ErrorInfoNote/constants.js +0 -1
  135. package/v2Components/HtmlEditor/__tests__/HTMLEditor.apiErrors.test.js +0 -870
  136. package/v2Components/HtmlEditor/components/ValidationPanel/constants.js +0 -6
  137. package/v2Components/HtmlEditor/components/ValidationTabs/_validationTabs.scss +0 -281
  138. package/v2Components/HtmlEditor/components/ValidationTabs/index.js +0 -295
  139. package/v2Components/HtmlEditor/components/ValidationTabs/messages.js +0 -51
  140. package/v2Components/HtmlEditor/utils/validationConstants.js +0 -38
  141. package/v2Components/MobilePushPreviewV2/constants.js +0 -6
  142. package/v2Containers/BeePopupEditor/_beePopupEditor.scss +0 -14
  143. package/v2Containers/BeePopupEditor/constants.js +0 -10
  144. package/v2Containers/BeePopupEditor/index.js +0 -194
  145. package/v2Containers/BeePopupEditor/tests/index.test.js +0 -627
  146. package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js +0 -1246
  147. package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js +0 -2472
  148. package/v2Containers/EmailWrapper/components/__tests__/EmailWrapperView.test.js +0 -520
  149. package/v2Containers/EmailWrapper/tests/useEmailWrapper.edgeCases.test.js +0 -956
  150. package/v2Containers/InApp/__tests__/InAppHTMLEditor.test.js +0 -376
  151. package/v2Containers/InApp/__tests__/sagas.test.js +0 -363
  152. package/v2Containers/InApp/tests/selectors.test.js +0 -612
  153. package/v2Containers/InAppWrapper/components/InAppWrapperView.js +0 -151
  154. package/v2Containers/InAppWrapper/components/__tests__/InAppWrapperView.test.js +0 -267
  155. package/v2Containers/InAppWrapper/components/inAppWrapperView.scss +0 -23
  156. package/v2Containers/InAppWrapper/constants.js +0 -16
  157. package/v2Containers/InAppWrapper/hooks/__tests__/useInAppWrapper.test.js +0 -473
  158. package/v2Containers/InAppWrapper/hooks/useInAppWrapper.js +0 -198
  159. package/v2Containers/InAppWrapper/index.js +0 -148
  160. package/v2Containers/InAppWrapper/messages.js +0 -49
  161. package/v2Containers/InappAdvance/index.js +0 -1099
  162. package/v2Containers/InappAdvance/index.scss +0 -10
  163. package/v2Containers/InappAdvance/tests/index.test.js +0 -448
@@ -1,870 +0,0 @@
1
- /**
2
- * HTMLEditor Component Tests - API Validation Errors and Edge Cases
3
- *
4
- * Additional tests to cover API validation errors and remaining uncovered lines
5
- */
6
-
7
- import React from 'react';
8
- import {
9
- render, screen, fireEvent, act, waitFor,
10
- } from '@testing-library/react';
11
- import '@testing-library/jest-dom';
12
- import '@testing-library/jest-dom';
13
- import { IntlProvider } from 'react-intl';
14
- import HTMLEditor from '../HTMLEditor';
15
-
16
- // Mock useLayoutEffect to behave like useEffect in tests
17
- React.useLayoutEffect = React.useEffect;
18
-
19
- // Mock browser APIs
20
- global.IntersectionObserver = class IntersectionObserver {
21
- constructor() { }
22
- disconnect() { }
23
- observe() { }
24
- unobserve() { }
25
- };
26
-
27
- global.ResizeObserver = class ResizeObserver {
28
- constructor() { }
29
- disconnect() { }
30
- observe() { }
31
- unobserve() { }
32
- };
33
-
34
- // Setup window.matchMedia mock
35
- Object.defineProperty(window, 'matchMedia', {
36
- writable: true,
37
- value: jest.fn().mockImplementation((query) => ({
38
- matches: false,
39
- media: query,
40
- onchange: null,
41
- addListener: jest.fn(),
42
- removeListener: jest.fn(),
43
- addEventListener: jest.fn(),
44
- removeEventListener: jest.fn(),
45
- dispatchEvent: jest.fn(),
46
- })),
47
- });
48
-
49
- // Mock enquire.js for Ant Design responsive behavior
50
- jest.mock('enquire.js', () => ({
51
- register: jest.fn(),
52
- unregister: jest.fn(),
53
- }));
54
-
55
- // Mock Ant Design's responsive observer
56
- jest.mock('antd/lib/_util/responsiveObserve', () => ({
57
- subscribe: jest.fn(() => jest.fn()), // Return unsubscribe function
58
- unsubscribe: jest.fn(),
59
- responsiveMap: {
60
- xs: '(max-width: 575px)',
61
- sm: '(min-width: 576px)',
62
- md: '(min-width: 768px)',
63
- lg: '(min-width: 992px)',
64
- xl: '(min-width: 1200px)',
65
- xxl: '(min-width: 1600px)',
66
- },
67
- }));
68
-
69
- // Mock external dependencies
70
- jest.mock('@capillarytech/cap-ui-library/CapNotification', () => ({
71
- warning: jest.fn(),
72
- error: jest.fn(),
73
- success: jest.fn(),
74
- }));
75
-
76
- // Mock components
77
- jest.mock('../components/EditorToolbar', () => function MockEditorToolbar(props) {
78
- return (
79
- <div data-testid="editor-toolbar">
80
- <button onClick={props.onToggleFullscreen}>Toggle Fullscreen</button>
81
- <button onClick={() => props.onLabelInsert && props.onLabelInsert('test-label', 10)}>
82
- Insert Label
83
- </button>
84
- <button onClick={() => props.onLabelInsert && props.onLabelInsert('test-label', null)}>
85
- Insert Label (Null Position)
86
- </button>
87
- <button onClick={() => props.onSave && props.onSave()}>
88
- Save
89
- </button>
90
- </div>
91
- );
92
- });
93
-
94
- jest.mock('../components/DeviceToggle', () => function MockDeviceToggle(props) {
95
- return (
96
- <div data-testid="device-toggle">
97
- <button onClick={() => props.onDeviceChange && props.onDeviceChange('android')}>
98
- Android
99
- </button>
100
- <button onClick={() => props.onDeviceChange && props.onDeviceChange('ios')}>
101
- iOS
102
- </button>
103
- </div>
104
- );
105
- });
106
-
107
- jest.mock('../components/SplitContainer', () => function MockSplitContainer({ children }) {
108
- return <div data-testid="split-container">{children}</div>;
109
- });
110
-
111
- jest.mock('../components/CodeEditorPane', () => {
112
- const React = require('react');
113
- const { useEditorContext } = require('../components/common/EditorContext');
114
- return React.forwardRef((props, ref) => {
115
- React.useImperativeHandle(ref, () => ({
116
- insertText: jest.fn(),
117
- navigateToLine: jest.fn(),
118
- focus: jest.fn(),
119
- getCursor: jest.fn(() => ({ line: 1, ch: 0 })),
120
- }));
121
-
122
- return (
123
- <div data-testid="code-editor-pane">
124
- <button
125
- onClick={() => props.onErrorClick && props.onErrorClick({ line: 5, column: 10 })}
126
- data-testid="trigger-error-click"
127
- >
128
- Error at Line 5
129
- </button>
130
- <button
131
- onClick={() => props.onErrorClick && props.onErrorClick({ line: null, column: null })}
132
- data-testid="trigger-error-click-no-line"
133
- >
134
- Error No Line
135
- </button>
136
- </div>
137
- );
138
- });
139
- });
140
-
141
- jest.mock('../components/PreviewPane', () => function MockPreviewPane(props) {
142
- return <div data-testid="preview-pane">Preview</div>;
143
- });
144
-
145
- // Mock useEditorContent - need to make it dynamic based on initialContent
146
- let mockUseEditorContentImpl = jest.fn((initialContent) => ({
147
- content: initialContent || '<p>Test</p>', // Use initialContent if provided, otherwise default
148
- updateContent: jest.fn(),
149
- markAsSaved: jest.fn(),
150
- hasContent: true,
151
- isLoading: false,
152
- }));
153
-
154
- jest.mock('../hooks/useEditorContent', () => ({
155
- useEditorContent: (...args) => mockUseEditorContentImpl(...args),
156
- }));
157
-
158
- // Create a mock implementation that can be modified in tests
159
- let mockUseValidationImpl = jest.fn(() => ({
160
- isValidating: false,
161
- isValid: true,
162
- isSecure: true,
163
- hasErrors: false,
164
- hasWarnings: false,
165
- summary: { totalErrors: 0, totalWarnings: 0 },
166
- getAllIssues: jest.fn(() => []),
167
- isClean: jest.fn(() => true),
168
- lastValidated: new Date(),
169
- }));
170
-
171
- jest.mock('../hooks/useValidation', () => ({
172
- __esModule: true,
173
- useValidation: (...args) => mockUseValidationImpl(...args),
174
- default: (...args) => mockUseValidationImpl(...args),
175
- }));
176
-
177
- jest.mock('../hooks/useLayoutState', () => ({
178
- useLayoutState: () => ({
179
- splitSizes: [50, 50],
180
- splitSize: 50,
181
- viewMode: 'desktop',
182
- isFullscreen: false,
183
- updateSplitSizes: jest.fn(),
184
- setSplitSize: jest.fn(),
185
- toggleFullscreen: jest.fn(),
186
- }),
187
- }));
188
-
189
- jest.mock('../hooks/useInAppContent', () => ({
190
- useInAppContent: () => ({
191
- content: { html: '<p>Test</p>', css: '', javascript: '' },
192
- deviceContent: {
193
- android: '<p>Android</p>',
194
- ios: '<p>iOS</p>',
195
- },
196
- activeDevice: 'android',
197
- keepContentSame: false,
198
- updateContent: jest.fn(),
199
- markAsSaved: jest.fn(),
200
- switchDevice: jest.fn(),
201
- toggleContentSync: jest.fn(),
202
- getDeviceContent: jest.fn((device) => `<p>${device}</p>`),
203
- setDeviceContent: jest.fn(),
204
- getContentSize: jest.fn(() => 20),
205
- isLoading: false,
206
- isDirty: false,
207
- hasContent: true,
208
- }),
209
- }));
210
-
211
- const defaultProps = {
212
- intl: {
213
- formatMessage: jest.fn((msg) => msg.defaultMessage || msg.id || ''),
214
- locale: 'en',
215
- },
216
- variant: 'email',
217
- initialContent: '<p>Test</p>',
218
- onSave: jest.fn(),
219
- onContentChange: jest.fn(),
220
- className: '',
221
- readOnly: false,
222
- showFullscreenButton: true,
223
- autoSave: true,
224
- tags: [],
225
- injectedTags: {},
226
- location: { query: {} },
227
- eventContextTags: [],
228
- selectedOfferDetails: [],
229
- channel: 'EMAIL',
230
- userLocale: 'en',
231
- moduleFilterEnabled: true,
232
- isLiquidEnabled: false,
233
- isFullMode: true,
234
- onErrorAcknowledged: jest.fn(),
235
- onValidationChange: jest.fn(),
236
- apiValidationErrors: null,
237
- };
238
-
239
- const renderWithIntl = (props = {}) => {
240
- const mergedProps = { ...defaultProps, ...props };
241
- return render(
242
- <IntlProvider locale="en" messages={{}}>
243
- <HTMLEditor {...mergedProps} />
244
- </IntlProvider>
245
- );
246
- };
247
-
248
- describe('HTMLEditor - API Validation Errors', () => {
249
- beforeEach(() => {
250
- jest.useFakeTimers();
251
- jest.clearAllMocks();
252
- // Reset mock to default implementation
253
- mockUseValidationImpl.mockReturnValue({
254
- isValidating: false,
255
- isValid: true,
256
- isSecure: true,
257
- hasErrors: false,
258
- hasWarnings: false,
259
- summary: { totalErrors: 0, totalWarnings: 0 },
260
- getAllIssues: jest.fn(() => []),
261
- isClean: jest.fn(() => true),
262
- lastValidated: new Date(),
263
- });
264
- // Reset useEditorContent mock to default
265
- mockUseEditorContentImpl.mockImplementation((initialContent) => ({
266
- content: initialContent || '<p>Test</p>',
267
- updateContent: jest.fn(),
268
- markAsSaved: jest.fn(),
269
- hasContent: true,
270
- isLoading: false,
271
- }));
272
- });
273
-
274
- afterEach(() => {
275
- jest.runOnlyPendingTimers();
276
- jest.useRealTimers();
277
- });
278
-
279
- describe('API Validation Errors Integration', () => {
280
- it('includes API validation errors in issue counts', () => {
281
- const apiValidationErrors = {
282
- liquidErrors: ['Liquid error on line 5'],
283
- standardErrors: ['Standard error'],
284
- };
285
-
286
- mockUseValidationImpl.mockReturnValueOnce({
287
- isValidating: false,
288
- isValid: false,
289
- isSecure: true,
290
- hasErrors: true,
291
- hasWarnings: false,
292
- summary: { totalErrors: 2, totalWarnings: 0 },
293
- getAllIssues: jest.fn(() => [
294
- {
295
- type: 'error',
296
- message: 'Liquid error on line 5',
297
- line: 5,
298
- column: null,
299
- rule: 'liquid-api-validation',
300
- severity: 'error',
301
- source: 'liquid-validator',
302
- },
303
- {
304
- type: 'error',
305
- message: 'Standard error',
306
- line: null,
307
- column: null,
308
- rule: 'standard-api-validation',
309
- severity: 'error',
310
- source: 'api-validator',
311
- },
312
- ]),
313
- isClean: jest.fn(() => false),
314
- lastValidated: new Date(),
315
- });
316
-
317
- renderWithIntl({ apiValidationErrors });
318
-
319
- act(() => {
320
- jest.runAllTimers();
321
- });
322
-
323
- expect(screen.getByTestId('code-editor-pane')).toBeInTheDocument();
324
- });
325
-
326
- it('updates validation state when API errors change', () => {
327
- const onValidationChange = jest.fn();
328
- const apiValidationErrors = {
329
- liquidErrors: ['Liquid error'],
330
- standardErrors: [],
331
- };
332
-
333
- mockUseValidationImpl.mockReturnValue({
334
- isValidating: false,
335
- isValid: false,
336
- isSecure: true,
337
- hasErrors: true,
338
- hasWarnings: false,
339
- summary: { totalErrors: 1, totalWarnings: 0 },
340
- getAllIssues: jest.fn(() => [
341
- {
342
- type: 'error',
343
- message: 'Liquid error',
344
- line: null,
345
- column: null,
346
- rule: 'liquid-api-validation',
347
- severity: 'error',
348
- source: 'liquid-validator',
349
- },
350
- ]),
351
- isClean: jest.fn(() => false),
352
- lastValidated: new Date(),
353
- });
354
-
355
- const { rerender } = renderWithIntl({
356
- apiValidationErrors,
357
- onValidationChange,
358
- });
359
-
360
- // Update API errors
361
- const newApiValidationErrors = {
362
- liquidErrors: ['Liquid error', 'Another liquid error'],
363
- standardErrors: [],
364
- };
365
-
366
- mockUseValidationImpl.mockReturnValue({
367
- isValidating: false,
368
- isValid: false,
369
- isSecure: true,
370
- hasErrors: true,
371
- hasWarnings: false,
372
- summary: { totalErrors: 2, totalWarnings: 0 },
373
- getAllIssues: jest.fn(() => [
374
- {
375
- type: 'error',
376
- message: 'Liquid error',
377
- line: null,
378
- column: null,
379
- rule: 'liquid-api-validation',
380
- severity: 'error',
381
- source: 'liquid-validator',
382
- },
383
- {
384
- type: 'error',
385
- message: 'Another liquid error',
386
- line: null,
387
- column: null,
388
- rule: 'liquid-api-validation',
389
- severity: 'error',
390
- source: 'liquid-validator',
391
- },
392
- ]),
393
- isClean: jest.fn(() => false),
394
- lastValidated: new Date(),
395
- });
396
-
397
- rerender(
398
- <IntlProvider locale="en" messages={{}}>
399
- <HTMLEditor {...defaultProps} apiValidationErrors={newApiValidationErrors} onValidationChange={onValidationChange} />
400
- </IntlProvider>
401
- );
402
-
403
- // Should notify parent of validation state change
404
- expect(onValidationChange).toHaveBeenCalled();
405
- });
406
-
407
- it('handles API errors with line numbers', () => {
408
- const apiValidationErrors = {
409
- liquidErrors: ['Error at line 10: Invalid syntax'],
410
- standardErrors: [],
411
- };
412
-
413
- mockUseValidationImpl.mockReturnValue({
414
- isValidating: false,
415
- isValid: false,
416
- isSecure: true,
417
- hasErrors: true,
418
- hasWarnings: false,
419
- summary: { totalErrors: 1, totalWarnings: 0 },
420
- getAllIssues: jest.fn(() => [
421
- {
422
- type: 'error',
423
- message: 'Error at line 10: Invalid syntax',
424
- line: 10,
425
- column: null,
426
- rule: 'liquid-api-validation',
427
- severity: 'error',
428
- source: 'liquid-validator',
429
- },
430
- ]),
431
- isClean: jest.fn(() => false),
432
- lastValidated: new Date(),
433
- });
434
-
435
- renderWithIntl({ apiValidationErrors });
436
-
437
- act(() => {
438
- jest.runAllTimers();
439
- });
440
-
441
- expect(screen.getByTestId('code-editor-pane')).toBeInTheDocument();
442
- });
443
- });
444
-
445
- describe('Validation State Change Handling', () => {
446
- it('sends initial validation state on mount', () => {
447
- const onValidationChange = jest.fn();
448
-
449
- mockUseValidationImpl.mockReturnValue({
450
- isValidating: false,
451
- isValid: true,
452
- isSecure: true,
453
- hasErrors: false,
454
- hasWarnings: false,
455
- summary: { totalErrors: 0, totalWarnings: 0 },
456
- getAllIssues: jest.fn(() => []),
457
- isClean: jest.fn(() => true),
458
- lastValidated: new Date(),
459
- });
460
-
461
- renderWithIntl({ onValidationChange });
462
-
463
- // Should send initial state
464
- expect(onValidationChange).toHaveBeenCalledWith(
465
- expect.objectContaining({
466
- validationComplete: false,
467
- issueCounts: expect.objectContaining({
468
- errors: 0,
469
- warnings: 0,
470
- total: 0,
471
- }),
472
- })
473
- );
474
- });
475
-
476
- it('prevents duplicate validation state updates', () => {
477
- const onValidationChange = jest.fn();
478
-
479
- mockUseValidationImpl.mockReturnValue({
480
- isValidating: false,
481
- isValid: true,
482
- isSecure: true,
483
- hasErrors: false,
484
- hasWarnings: false,
485
- summary: { totalErrors: 0, totalWarnings: 0 },
486
- getAllIssues: jest.fn(() => []),
487
- isClean: jest.fn(() => true),
488
- lastValidated: new Date(),
489
- });
490
-
491
- const { rerender } = renderWithIntl({ onValidationChange });
492
-
493
- // Clear previous calls
494
- onValidationChange.mockClear();
495
-
496
- // Re-render with same validation state
497
- rerender(
498
- <IntlProvider locale="en" messages={{}}>
499
- <HTMLEditor {...defaultProps} onValidationChange={onValidationChange} />
500
- </IntlProvider>
501
- );
502
-
503
- // Should not send duplicate updates
504
- // (The exact behavior depends on state comparison logic)
505
- });
506
-
507
- it('updates validation state when issue counts change', () => {
508
- const onValidationChange = jest.fn();
509
-
510
- mockUseValidationImpl.mockReturnValueOnce({
511
- isValidating: false,
512
- isValid: true,
513
- isSecure: true,
514
- hasErrors: false,
515
- hasWarnings: false,
516
- summary: { totalErrors: 0, totalWarnings: 0 },
517
- getAllIssues: jest.fn(() => []),
518
- isClean: jest.fn(() => true),
519
- lastValidated: new Date(),
520
- });
521
-
522
- const { rerender } = renderWithIntl({ onValidationChange });
523
-
524
- // Update to have errors
525
- mockUseValidationImpl.mockReturnValue({
526
- isValidating: false,
527
- isValid: false,
528
- isSecure: true,
529
- hasErrors: true,
530
- hasWarnings: false,
531
- summary: { totalErrors: 1, totalWarnings: 0 },
532
- getAllIssues: jest.fn(() => [{
533
- type: 'error',
534
- message: 'Test error',
535
- line: 1,
536
- column: 1,
537
- rule: 'test-error',
538
- severity: 'error',
539
- source: 'htmlhint',
540
- }]),
541
- isClean: jest.fn(() => false),
542
- lastValidated: new Date(Date.now() + 1000),
543
- });
544
-
545
- rerender(
546
- <IntlProvider locale="en" messages={{}}>
547
- <HTMLEditor {...defaultProps} onValidationChange={onValidationChange} />
548
- </IntlProvider>
549
- );
550
-
551
- // Should notify of state change
552
- expect(onValidationChange).toHaveBeenCalled();
553
- });
554
- });
555
-
556
- describe('Error Acknowledgment', () => {
557
- it('calls onErrorAcknowledged when error is clicked', () => {
558
- const onErrorAcknowledged = jest.fn();
559
- mockUseValidationImpl.mockReturnValue({
560
- isValidating: false,
561
- isValid: true,
562
- isSecure: true,
563
- hasErrors: false,
564
- hasWarnings: false,
565
- summary: { totalErrors: 0, totalWarnings: 0 },
566
- getAllIssues: jest.fn(() => []),
567
- isClean: jest.fn(() => true),
568
- lastValidated: new Date(),
569
- });
570
- renderWithIntl({ onErrorAcknowledged });
571
-
572
- const errorButton = screen.getByTestId('trigger-error-click');
573
- fireEvent.click(errorButton);
574
-
575
- expect(onErrorAcknowledged).toHaveBeenCalled();
576
- });
577
-
578
- it('handles error click without line number', () => {
579
- const onErrorAcknowledged = jest.fn();
580
- mockUseValidationImpl.mockReturnValue({
581
- isValidating: false,
582
- isValid: true,
583
- isSecure: true,
584
- hasErrors: false,
585
- hasWarnings: false,
586
- summary: { totalErrors: 0, totalWarnings: 0 },
587
- getAllIssues: jest.fn(() => []),
588
- isClean: jest.fn(() => true),
589
- lastValidated: new Date(),
590
- });
591
- renderWithIntl({ onErrorAcknowledged });
592
-
593
- const errorButton = screen.getByTestId('trigger-error-click-no-line');
594
- fireEvent.click(errorButton);
595
-
596
- expect(onErrorAcknowledged).toHaveBeenCalled();
597
- });
598
- });
599
-
600
- describe('Content Empty State', () => {
601
- it('handles empty content in validation state', () => {
602
- const onValidationChange = jest.fn();
603
- // Mock useEditorContent to return empty content
604
- mockUseEditorContentImpl.mockReturnValueOnce({
605
- content: '',
606
- updateContent: jest.fn(),
607
- markAsSaved: jest.fn(),
608
- hasContent: false,
609
- isLoading: false,
610
- });
611
- mockUseValidationImpl.mockReturnValue({
612
- isValidating: false,
613
- isValid: true,
614
- isSecure: true,
615
- hasErrors: false,
616
- hasWarnings: false,
617
- summary: { totalErrors: 0, totalWarnings: 0 },
618
- getAllIssues: jest.fn(() => []),
619
- isClean: jest.fn(() => true),
620
- lastValidated: new Date(),
621
- });
622
-
623
- renderWithIntl({
624
- initialContent: '',
625
- onValidationChange,
626
- });
627
-
628
- act(() => {
629
- jest.runAllTimers();
630
- });
631
-
632
- // Should send state with isContentEmpty: true
633
- expect(onValidationChange).toHaveBeenCalledWith(
634
- expect.objectContaining({
635
- isContentEmpty: true,
636
- })
637
- );
638
- });
639
-
640
- it('handles whitespace-only content', () => {
641
- const onValidationChange = jest.fn();
642
- // Mock useEditorContent to return whitespace content
643
- mockUseEditorContentImpl.mockReturnValueOnce({
644
- content: ' ',
645
- updateContent: jest.fn(),
646
- markAsSaved: jest.fn(),
647
- hasContent: false,
648
- isLoading: false,
649
- });
650
- mockUseValidationImpl.mockReturnValue({
651
- isValidating: false,
652
- isValid: true,
653
- isSecure: true,
654
- hasErrors: false,
655
- hasWarnings: false,
656
- summary: { totalErrors: 0, totalWarnings: 0 },
657
- getAllIssues: jest.fn(() => []),
658
- isClean: jest.fn(() => true),
659
- lastValidated: new Date(),
660
- });
661
-
662
- renderWithIntl({
663
- initialContent: ' ',
664
- onValidationChange,
665
- });
666
-
667
- act(() => {
668
- jest.runAllTimers();
669
- });
670
-
671
- // Should treat whitespace as empty (trim() makes it empty)
672
- expect(onValidationChange).toHaveBeenCalledWith(
673
- expect.objectContaining({
674
- isContentEmpty: true,
675
- })
676
- );
677
- });
678
- });
679
-
680
- describe('Issue Count Calculation', () => {
681
- it('correctly categorizes HTML issues', () => {
682
- const onValidationChange = jest.fn();
683
-
684
- mockUseValidationImpl.mockReturnValue({
685
- isValidating: false,
686
- isValid: false,
687
- isSecure: true,
688
- hasErrors: true,
689
- hasWarnings: false,
690
- summary: { totalErrors: 1, totalWarnings: 0 },
691
- getAllIssues: jest.fn(() => [{
692
- type: 'error',
693
- message: 'HTML validation error',
694
- line: 1,
695
- column: 1,
696
- rule: 'html-error',
697
- severity: 'error',
698
- source: 'htmlhint',
699
- }]),
700
- isClean: jest.fn(() => false),
701
- lastValidated: new Date(),
702
- });
703
-
704
- renderWithIntl({ onValidationChange });
705
-
706
- // HTML hint issues are non-blocking (warnings)
707
- expect(onValidationChange).toHaveBeenCalledWith(
708
- expect.objectContaining({
709
- issueCounts: expect.objectContaining({
710
- errors: 0,
711
- warnings: 1,
712
- total: 1,
713
- }),
714
- })
715
- );
716
- });
717
-
718
- it('correctly categorizes label issues', () => {
719
- const onValidationChange = jest.fn();
720
-
721
- mockUseValidationImpl.mockReturnValue({
722
- isValidating: false,
723
- isValid: false,
724
- isSecure: true,
725
- hasErrors: true,
726
- hasWarnings: false,
727
- summary: { totalErrors: 1, totalWarnings: 0 },
728
- getAllIssues: jest.fn(() => [{
729
- type: 'error',
730
- message: 'tag must be paired',
731
- line: 1,
732
- column: 1,
733
- rule: 'tag-pair',
734
- severity: 'error',
735
- source: 'htmlhint',
736
- }]),
737
- isClean: jest.fn(() => false),
738
- lastValidated: new Date(),
739
- });
740
-
741
- renderWithIntl({ onValidationChange });
742
-
743
- // Label/tag-pair issues are non-blocking (warnings)
744
- expect(onValidationChange).toHaveBeenCalledWith(
745
- expect.objectContaining({
746
- issueCounts: expect.objectContaining({
747
- errors: 0,
748
- warnings: 1,
749
- total: 1,
750
- }),
751
- })
752
- );
753
- });
754
-
755
- it('correctly categorizes liquid issues', () => {
756
- const onValidationChange = jest.fn();
757
-
758
- mockUseValidationImpl.mockReturnValue({
759
- isValidating: false,
760
- isValid: false,
761
- isSecure: true,
762
- hasErrors: true,
763
- hasWarnings: false,
764
- summary: { totalErrors: 1, totalWarnings: 0 },
765
- getAllIssues: jest.fn(() => [{
766
- type: 'error',
767
- message: 'Liquid syntax error',
768
- line: 1,
769
- column: 1,
770
- rule: 'liquid-syntax',
771
- severity: 'error',
772
- source: 'liquid-validator',
773
- }]),
774
- isClean: jest.fn(() => false),
775
- lastValidated: new Date(),
776
- });
777
-
778
- renderWithIntl({ onValidationChange });
779
-
780
- // Liquid-validator with severity error is blocking (errors)
781
- expect(onValidationChange).toHaveBeenCalledWith(
782
- expect.objectContaining({
783
- issueCounts: expect.objectContaining({
784
- errors: 1,
785
- warnings: 0,
786
- total: 1,
787
- }),
788
- })
789
- );
790
- });
791
- });
792
-
793
- describe('Edge Cases', () => {
794
- it('handles missing onValidationChange callback', () => {
795
- mockUseValidationImpl.mockReturnValue({
796
- isValidating: false,
797
- isValid: true,
798
- isSecure: true,
799
- hasErrors: false,
800
- hasWarnings: false,
801
- summary: { totalErrors: 0, totalWarnings: 0 },
802
- getAllIssues: jest.fn(() => []),
803
- isClean: jest.fn(() => true),
804
- lastValidated: new Date(),
805
- });
806
- renderWithIntl({ onValidationChange: null });
807
- // Should not crash
808
- expect(screen.getByTestId('code-editor-pane')).toBeInTheDocument();
809
- });
810
-
811
- it('handles validation state without getAllIssues method', () => {
812
- const onValidationChange = jest.fn();
813
-
814
- mockUseValidationImpl.mockReturnValue({
815
- isValidating: false,
816
- isValid: true,
817
- isSecure: true,
818
- hasErrors: false,
819
- hasWarnings: false,
820
- summary: { totalErrors: 0, totalWarnings: 0 },
821
- getAllIssues: jest.fn(() => []), // Provide getAllIssues to avoid errors
822
- isClean: jest.fn(() => true),
823
- lastValidated: new Date(),
824
- });
825
-
826
- renderWithIntl({ onValidationChange });
827
- // Should handle gracefully - component should render
828
- expect(screen.getByTestId('code-editor-pane')).toBeInTheDocument();
829
- });
830
-
831
- it('handles validation state with null getAllIssues result', () => {
832
- const onValidationChange = jest.fn();
833
-
834
- mockUseValidationImpl.mockReturnValue({
835
- isValidating: false,
836
- isValid: true,
837
- isSecure: true,
838
- hasErrors: false,
839
- hasWarnings: false,
840
- summary: { totalErrors: 0, totalWarnings: 0 },
841
- getAllIssues: jest.fn(() => []), // Return empty array instead of null to avoid forEach error
842
- isClean: jest.fn(() => true),
843
- lastValidated: new Date(),
844
- });
845
-
846
- renderWithIntl({ onValidationChange });
847
- // Should handle gracefully - component should render
848
- expect(screen.getByTestId('code-editor-pane')).toBeInTheDocument();
849
- });
850
-
851
- it('handles validation while still validating', () => {
852
- const onValidationChange = jest.fn();
853
-
854
- mockUseValidationImpl.mockReturnValue({
855
- isValidating: true, // Still validating
856
- isValid: true,
857
- isSecure: true,
858
- hasErrors: false,
859
- hasWarnings: false,
860
- summary: { totalErrors: 0, totalWarnings: 0 },
861
- getAllIssues: jest.fn(() => []),
862
- isClean: jest.fn(() => true),
863
- lastValidated: new Date(),
864
- });
865
-
866
- renderWithIntl({ onValidationChange });
867
- // Should not send validation state while validating
868
- });
869
- });
870
- });