@capillarytech/creatives-library 8.0.246-alpha.0 → 8.0.246

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 (133) 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 -18
  8. package/utils/common.js +0 -5
  9. package/utils/commonUtils.js +5 -28
  10. package/utils/tests/commonUtil.test.js +0 -224
  11. package/utils/transformTemplateConfig.js +10 -0
  12. package/v2Components/CapDeviceContent/index.js +56 -61
  13. package/v2Components/CapTagList/index.js +1 -6
  14. package/v2Components/CapTagListWithInput/index.js +1 -5
  15. package/v2Components/CapTagListWithInput/messages.js +1 -1
  16. package/v2Components/CapWhatsappCTA/tests/index.test.js +0 -5
  17. package/v2Components/ErrorInfoNote/index.js +72 -447
  18. package/v2Components/ErrorInfoNote/messages.js +0 -22
  19. package/v2Components/ErrorInfoNote/style.scss +4 -280
  20. package/v2Components/FormBuilder/tests/index.test.js +4 -13
  21. package/v2Components/HtmlEditor/HTMLEditor.js +94 -642
  22. package/v2Components/HtmlEditor/__tests__/HTMLEditor.test.js +133 -1135
  23. package/v2Components/HtmlEditor/__tests__/index.lazy.test.js +16 -27
  24. package/v2Components/HtmlEditor/_htmlEditor.scss +45 -108
  25. package/v2Components/HtmlEditor/_index.lazy.scss +1 -1
  26. package/v2Components/HtmlEditor/components/CodeEditorPane/_codeEditorPane.scss +101 -13
  27. package/v2Components/HtmlEditor/components/CodeEditorPane/index.js +139 -148
  28. package/v2Components/HtmlEditor/components/DeviceToggle/_deviceToggle.scss +1 -2
  29. package/v2Components/HtmlEditor/components/DeviceToggle/index.js +3 -3
  30. package/v2Components/HtmlEditor/components/EditorToolbar/_editorToolbar.scss +0 -9
  31. package/v2Components/HtmlEditor/components/EditorToolbar/index.js +1 -1
  32. package/v2Components/HtmlEditor/components/FullscreenModal/_fullscreenModal.scss +0 -22
  33. package/v2Components/HtmlEditor/components/InAppPreviewPane/DeviceFrame.js +7 -4
  34. package/v2Components/HtmlEditor/components/InAppPreviewPane/__tests__/DeviceFrame.test.js +45 -35
  35. package/v2Components/HtmlEditor/components/InAppPreviewPane/_inAppPreviewPane.scss +3 -1
  36. package/v2Components/HtmlEditor/components/InAppPreviewPane/constants.js +33 -33
  37. package/v2Components/HtmlEditor/components/InAppPreviewPane/index.js +6 -7
  38. package/v2Components/HtmlEditor/components/PreviewPane/_previewPane.scss +6 -3
  39. package/v2Components/HtmlEditor/components/PreviewPane/index.js +13 -11
  40. package/v2Components/HtmlEditor/components/SplitContainer/_splitContainer.scss +1 -1
  41. package/v2Components/HtmlEditor/components/ValidationErrorDisplay/__tests__/index.test.js +152 -0
  42. package/v2Components/HtmlEditor/components/ValidationErrorDisplay/index.js +31 -49
  43. package/v2Components/HtmlEditor/constants.js +20 -29
  44. package/v2Components/HtmlEditor/hooks/__tests__/useInAppContent.test.js +16 -373
  45. package/v2Components/HtmlEditor/hooks/useEditorContent.js +2 -5
  46. package/v2Components/HtmlEditor/hooks/useInAppContent.js +146 -88
  47. package/v2Components/HtmlEditor/hooks/useValidation.js +45 -150
  48. package/v2Components/HtmlEditor/index.js +1 -1
  49. package/v2Components/HtmlEditor/messages.js +85 -95
  50. package/v2Components/HtmlEditor/utils/liquidTemplateSupport.js +102 -134
  51. package/v2Components/HtmlEditor/utils/properSyntaxHighlighting.js +25 -23
  52. package/v2Components/HtmlEditor/utils/validationAdapter.js +41 -66
  53. package/v2Components/MobilePushPreviewV2/index.js +7 -32
  54. package/v2Components/TemplatePreview/_templatePreview.scss +24 -44
  55. package/v2Components/TemplatePreview/index.js +32 -47
  56. package/v2Components/TemplatePreview/messages.js +0 -4
  57. package/v2Components/TestAndPreviewSlidebox/_testAndPreviewSlidebox.scss +0 -1
  58. package/v2Components/TestAndPreviewSlidebox/index.js +25 -31
  59. package/v2Containers/BeeEditor/index.js +90 -172
  60. package/v2Containers/CreativesContainer/SlideBoxContent.js +51 -128
  61. package/v2Containers/CreativesContainer/SlideBoxFooter.js +12 -113
  62. package/v2Containers/CreativesContainer/SlideBoxHeader.js +1 -2
  63. package/v2Containers/CreativesContainer/constants.js +0 -1
  64. package/v2Containers/CreativesContainer/index.js +46 -238
  65. package/v2Containers/CreativesContainer/messages.js +0 -8
  66. package/v2Containers/CreativesContainer/tests/SlideBoxFooter.test.js +2 -11
  67. package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap +50 -38
  68. package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap +0 -91
  69. package/v2Containers/Email/actions.js +0 -7
  70. package/v2Containers/Email/constants.js +1 -5
  71. package/v2Containers/Email/index.js +30 -229
  72. package/v2Containers/Email/messages.js +0 -32
  73. package/v2Containers/Email/reducer.js +1 -12
  74. package/v2Containers/Email/sagas.js +7 -61
  75. package/v2Containers/Email/tests/__snapshots__/reducer.test.js.snap +0 -2
  76. package/v2Containers/Email/tests/sagas.test.js +1 -1
  77. package/v2Containers/EmailWrapper/components/EmailWrapperView.js +15 -210
  78. package/v2Containers/EmailWrapper/components/HTMLEditorTesting.js +74 -40
  79. package/v2Containers/EmailWrapper/components/__tests__/HTMLEditorTesting.test.js +67 -2
  80. package/v2Containers/EmailWrapper/constants.js +0 -2
  81. package/v2Containers/EmailWrapper/hooks/useEmailWrapper.js +77 -629
  82. package/v2Containers/EmailWrapper/index.js +23 -103
  83. package/v2Containers/EmailWrapper/messages.js +1 -61
  84. package/v2Containers/EmailWrapper/tests/EmailWrapperView.test.js +214 -0
  85. package/v2Containers/EmailWrapper/tests/useEmailWrapper.test.js +77 -509
  86. package/v2Containers/InApp/actions.js +0 -7
  87. package/v2Containers/InApp/constants.js +4 -20
  88. package/v2Containers/InApp/index.js +357 -801
  89. package/v2Containers/InApp/index.scss +3 -4
  90. package/v2Containers/InApp/messages.js +3 -7
  91. package/v2Containers/InApp/reducer.js +3 -21
  92. package/v2Containers/InApp/sagas.js +9 -29
  93. package/v2Containers/InApp/selectors.js +5 -25
  94. package/v2Containers/InApp/tests/index.test.js +50 -154
  95. package/v2Containers/InApp/tests/reducer.test.js +0 -34
  96. package/v2Containers/InApp/tests/sagas.test.js +9 -61
  97. package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/content.test.js.snap +0 -3
  98. package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/index.test.js.snap +0 -2
  99. package/v2Containers/Line/Container/Wrapper/tests/__snapshots__/index.test.js.snap +0 -2
  100. package/v2Containers/Line/Container/tests/__snapshots__/index.test.js.snap +0 -9
  101. package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap +0 -12
  102. package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap +0 -4
  103. package/v2Containers/TagList/index.js +19 -62
  104. package/v2Containers/Templates/_templates.scss +1 -60
  105. package/v2Containers/Templates/index.js +4 -89
  106. package/v2Containers/Templates/messages.js +0 -4
  107. package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap +0 -35
  108. package/v2Components/HtmlEditor/__tests__/HTMLEditor.apiErrors.test.js +0 -874
  109. package/v2Components/HtmlEditor/components/ValidationTabs/_validationTabs.scss +0 -254
  110. package/v2Components/HtmlEditor/components/ValidationTabs/index.js +0 -363
  111. package/v2Components/HtmlEditor/components/ValidationTabs/messages.js +0 -51
  112. package/v2Components/HtmlEditor/hooks/__tests__/useValidation.apiErrors.test.js +0 -630
  113. package/v2Containers/BeePopupEditor/constants.js +0 -10
  114. package/v2Containers/BeePopupEditor/index.js +0 -193
  115. package/v2Containers/BeePopupEditor/tests/index.test.js +0 -627
  116. package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js +0 -1317
  117. package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js +0 -1605
  118. package/v2Containers/EmailWrapper/components/__tests__/EmailWrapperView.test.js +0 -520
  119. package/v2Containers/EmailWrapper/tests/useEmailWrapper.edgeCases.test.js +0 -643
  120. package/v2Containers/InApp/__tests__/InAppHTMLEditor.test.js +0 -376
  121. package/v2Containers/InApp/__tests__/sagas.test.js +0 -363
  122. package/v2Containers/InApp/tests/selectors.test.js +0 -612
  123. package/v2Containers/InAppWrapper/components/InAppWrapperView.js +0 -162
  124. package/v2Containers/InAppWrapper/components/__tests__/InAppWrapperView.test.js +0 -267
  125. package/v2Containers/InAppWrapper/components/inAppWrapperView.scss +0 -9
  126. package/v2Containers/InAppWrapper/constants.js +0 -16
  127. package/v2Containers/InAppWrapper/hooks/__tests__/useInAppWrapper.test.js +0 -473
  128. package/v2Containers/InAppWrapper/hooks/useInAppWrapper.js +0 -198
  129. package/v2Containers/InAppWrapper/index.js +0 -148
  130. package/v2Containers/InAppWrapper/messages.js +0 -49
  131. package/v2Containers/InappAdvance/index.js +0 -1099
  132. package/v2Containers/InappAdvance/index.scss +0 -10
  133. package/v2Containers/InappAdvance/tests/index.test.js +0 -448
@@ -1,874 +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
- html: 0,
469
- label: 0,
470
- liquid: 0,
471
- total: 0,
472
- }),
473
- })
474
- );
475
- });
476
-
477
- it('prevents duplicate validation state updates', () => {
478
- const onValidationChange = jest.fn();
479
-
480
- mockUseValidationImpl.mockReturnValue({
481
- isValidating: false,
482
- isValid: true,
483
- isSecure: true,
484
- hasErrors: false,
485
- hasWarnings: false,
486
- summary: { totalErrors: 0, totalWarnings: 0 },
487
- getAllIssues: jest.fn(() => []),
488
- isClean: jest.fn(() => true),
489
- lastValidated: new Date(),
490
- });
491
-
492
- const { rerender } = renderWithIntl({ onValidationChange });
493
-
494
- // Clear previous calls
495
- onValidationChange.mockClear();
496
-
497
- // Re-render with same validation state
498
- rerender(
499
- <IntlProvider locale="en" messages={{}}>
500
- <HTMLEditor {...defaultProps} onValidationChange={onValidationChange} />
501
- </IntlProvider>
502
- );
503
-
504
- // Should not send duplicate updates
505
- // (The exact behavior depends on state comparison logic)
506
- });
507
-
508
- it('updates validation state when issue counts change', () => {
509
- const onValidationChange = jest.fn();
510
-
511
- mockUseValidationImpl.mockReturnValueOnce({
512
- isValidating: false,
513
- isValid: true,
514
- isSecure: true,
515
- hasErrors: false,
516
- hasWarnings: false,
517
- summary: { totalErrors: 0, totalWarnings: 0 },
518
- getAllIssues: jest.fn(() => []),
519
- isClean: jest.fn(() => true),
520
- lastValidated: new Date(),
521
- });
522
-
523
- const { rerender } = renderWithIntl({ onValidationChange });
524
-
525
- // Update to have errors
526
- mockUseValidationImpl.mockReturnValue({
527
- isValidating: false,
528
- isValid: false,
529
- isSecure: true,
530
- hasErrors: true,
531
- hasWarnings: false,
532
- summary: { totalErrors: 1, totalWarnings: 0 },
533
- getAllIssues: jest.fn(() => [{
534
- type: 'error',
535
- message: 'Test error',
536
- line: 1,
537
- column: 1,
538
- rule: 'test-error',
539
- severity: 'error',
540
- source: 'htmlhint',
541
- }]),
542
- isClean: jest.fn(() => false),
543
- lastValidated: new Date(Date.now() + 1000),
544
- });
545
-
546
- rerender(
547
- <IntlProvider locale="en" messages={{}}>
548
- <HTMLEditor {...defaultProps} onValidationChange={onValidationChange} />
549
- </IntlProvider>
550
- );
551
-
552
- // Should notify of state change
553
- expect(onValidationChange).toHaveBeenCalled();
554
- });
555
- });
556
-
557
- describe('Error Acknowledgment', () => {
558
- it('calls onErrorAcknowledged when error is clicked', () => {
559
- const onErrorAcknowledged = jest.fn();
560
- mockUseValidationImpl.mockReturnValue({
561
- isValidating: false,
562
- isValid: true,
563
- isSecure: true,
564
- hasErrors: false,
565
- hasWarnings: false,
566
- summary: { totalErrors: 0, totalWarnings: 0 },
567
- getAllIssues: jest.fn(() => []),
568
- isClean: jest.fn(() => true),
569
- lastValidated: new Date(),
570
- });
571
- renderWithIntl({ onErrorAcknowledged });
572
-
573
- const errorButton = screen.getByTestId('trigger-error-click');
574
- fireEvent.click(errorButton);
575
-
576
- expect(onErrorAcknowledged).toHaveBeenCalled();
577
- });
578
-
579
- it('handles error click without line number', () => {
580
- const onErrorAcknowledged = jest.fn();
581
- mockUseValidationImpl.mockReturnValue({
582
- isValidating: false,
583
- isValid: true,
584
- isSecure: true,
585
- hasErrors: false,
586
- hasWarnings: false,
587
- summary: { totalErrors: 0, totalWarnings: 0 },
588
- getAllIssues: jest.fn(() => []),
589
- isClean: jest.fn(() => true),
590
- lastValidated: new Date(),
591
- });
592
- renderWithIntl({ onErrorAcknowledged });
593
-
594
- const errorButton = screen.getByTestId('trigger-error-click-no-line');
595
- fireEvent.click(errorButton);
596
-
597
- expect(onErrorAcknowledged).toHaveBeenCalled();
598
- });
599
- });
600
-
601
- describe('Content Empty State', () => {
602
- it('handles empty content in validation state', () => {
603
- const onValidationChange = jest.fn();
604
- // Mock useEditorContent to return empty content
605
- mockUseEditorContentImpl.mockReturnValueOnce({
606
- content: '',
607
- updateContent: jest.fn(),
608
- markAsSaved: jest.fn(),
609
- hasContent: false,
610
- isLoading: false,
611
- });
612
- mockUseValidationImpl.mockReturnValue({
613
- isValidating: false,
614
- isValid: true,
615
- isSecure: true,
616
- hasErrors: false,
617
- hasWarnings: false,
618
- summary: { totalErrors: 0, totalWarnings: 0 },
619
- getAllIssues: jest.fn(() => []),
620
- isClean: jest.fn(() => true),
621
- lastValidated: new Date(),
622
- });
623
-
624
- renderWithIntl({
625
- initialContent: '',
626
- onValidationChange,
627
- });
628
-
629
- act(() => {
630
- jest.runAllTimers();
631
- });
632
-
633
- // Should send state with isContentEmpty: true
634
- expect(onValidationChange).toHaveBeenCalledWith(
635
- expect.objectContaining({
636
- isContentEmpty: true,
637
- })
638
- );
639
- });
640
-
641
- it('handles whitespace-only content', () => {
642
- const onValidationChange = jest.fn();
643
- // Mock useEditorContent to return whitespace content
644
- mockUseEditorContentImpl.mockReturnValueOnce({
645
- content: ' ',
646
- updateContent: jest.fn(),
647
- markAsSaved: jest.fn(),
648
- hasContent: false,
649
- isLoading: false,
650
- });
651
- mockUseValidationImpl.mockReturnValue({
652
- isValidating: false,
653
- isValid: true,
654
- isSecure: true,
655
- hasErrors: false,
656
- hasWarnings: false,
657
- summary: { totalErrors: 0, totalWarnings: 0 },
658
- getAllIssues: jest.fn(() => []),
659
- isClean: jest.fn(() => true),
660
- lastValidated: new Date(),
661
- });
662
-
663
- renderWithIntl({
664
- initialContent: ' ',
665
- onValidationChange,
666
- });
667
-
668
- act(() => {
669
- jest.runAllTimers();
670
- });
671
-
672
- // Should treat whitespace as empty (trim() makes it empty)
673
- expect(onValidationChange).toHaveBeenCalledWith(
674
- expect.objectContaining({
675
- isContentEmpty: true,
676
- })
677
- );
678
- });
679
- });
680
-
681
- describe('Issue Count Calculation', () => {
682
- it('correctly categorizes HTML issues', () => {
683
- const onValidationChange = jest.fn();
684
-
685
- mockUseValidationImpl.mockReturnValue({
686
- isValidating: false,
687
- isValid: false,
688
- isSecure: true,
689
- hasErrors: true,
690
- hasWarnings: false,
691
- summary: { totalErrors: 1, totalWarnings: 0 },
692
- getAllIssues: jest.fn(() => [{
693
- type: 'error',
694
- message: 'HTML validation error',
695
- line: 1,
696
- column: 1,
697
- rule: 'html-error',
698
- severity: 'error',
699
- source: 'htmlhint',
700
- }]),
701
- isClean: jest.fn(() => false),
702
- lastValidated: new Date(),
703
- });
704
-
705
- renderWithIntl({ onValidationChange });
706
-
707
- // Should categorize as HTML issue
708
- expect(onValidationChange).toHaveBeenCalledWith(
709
- expect.objectContaining({
710
- issueCounts: expect.objectContaining({
711
- html: 1,
712
- label: 0,
713
- liquid: 0,
714
- total: 1,
715
- }),
716
- })
717
- );
718
- });
719
-
720
- it('correctly categorizes label issues', () => {
721
- const onValidationChange = jest.fn();
722
-
723
- mockUseValidationImpl.mockReturnValue({
724
- isValidating: false,
725
- isValid: false,
726
- isSecure: true,
727
- hasErrors: true,
728
- hasWarnings: false,
729
- summary: { totalErrors: 1, totalWarnings: 0 },
730
- getAllIssues: jest.fn(() => [{
731
- type: 'error',
732
- message: 'tag must be paired',
733
- line: 1,
734
- column: 1,
735
- rule: 'tag-pair',
736
- severity: 'error',
737
- source: 'htmlhint',
738
- }]),
739
- isClean: jest.fn(() => false),
740
- lastValidated: new Date(),
741
- });
742
-
743
- renderWithIntl({ onValidationChange });
744
-
745
- // Should categorize as label issue
746
- expect(onValidationChange).toHaveBeenCalledWith(
747
- expect.objectContaining({
748
- issueCounts: expect.objectContaining({
749
- html: 0,
750
- label: 1,
751
- liquid: 0,
752
- total: 1,
753
- }),
754
- })
755
- );
756
- });
757
-
758
- it('correctly categorizes liquid issues', () => {
759
- const onValidationChange = jest.fn();
760
-
761
- mockUseValidationImpl.mockReturnValue({
762
- isValidating: false,
763
- isValid: false,
764
- isSecure: true,
765
- hasErrors: true,
766
- hasWarnings: false,
767
- summary: { totalErrors: 1, totalWarnings: 0 },
768
- getAllIssues: jest.fn(() => [{
769
- type: 'error',
770
- message: 'Liquid syntax error',
771
- line: 1,
772
- column: 1,
773
- rule: 'liquid-syntax',
774
- severity: 'error',
775
- source: 'liquid-validator',
776
- }]),
777
- isClean: jest.fn(() => false),
778
- lastValidated: new Date(),
779
- });
780
-
781
- renderWithIntl({ onValidationChange });
782
-
783
- // Should categorize as liquid issue
784
- expect(onValidationChange).toHaveBeenCalledWith(
785
- expect.objectContaining({
786
- issueCounts: expect.objectContaining({
787
- html: 0,
788
- label: 0,
789
- liquid: 1,
790
- total: 1,
791
- }),
792
- })
793
- );
794
- });
795
- });
796
-
797
- describe('Edge Cases', () => {
798
- it('handles missing onValidationChange callback', () => {
799
- mockUseValidationImpl.mockReturnValue({
800
- isValidating: false,
801
- isValid: true,
802
- isSecure: true,
803
- hasErrors: false,
804
- hasWarnings: false,
805
- summary: { totalErrors: 0, totalWarnings: 0 },
806
- getAllIssues: jest.fn(() => []),
807
- isClean: jest.fn(() => true),
808
- lastValidated: new Date(),
809
- });
810
- renderWithIntl({ onValidationChange: null });
811
- // Should not crash
812
- expect(screen.getByTestId('code-editor-pane')).toBeInTheDocument();
813
- });
814
-
815
- it('handles validation state without getAllIssues method', () => {
816
- const onValidationChange = jest.fn();
817
-
818
- mockUseValidationImpl.mockReturnValue({
819
- isValidating: false,
820
- isValid: true,
821
- isSecure: true,
822
- hasErrors: false,
823
- hasWarnings: false,
824
- summary: { totalErrors: 0, totalWarnings: 0 },
825
- getAllIssues: jest.fn(() => []), // Provide getAllIssues to avoid errors
826
- isClean: jest.fn(() => true),
827
- lastValidated: new Date(),
828
- });
829
-
830
- renderWithIntl({ onValidationChange });
831
- // Should handle gracefully - component should render
832
- expect(screen.getByTestId('code-editor-pane')).toBeInTheDocument();
833
- });
834
-
835
- it('handles validation state with null getAllIssues result', () => {
836
- const onValidationChange = jest.fn();
837
-
838
- mockUseValidationImpl.mockReturnValue({
839
- isValidating: false,
840
- isValid: true,
841
- isSecure: true,
842
- hasErrors: false,
843
- hasWarnings: false,
844
- summary: { totalErrors: 0, totalWarnings: 0 },
845
- getAllIssues: jest.fn(() => []), // Return empty array instead of null to avoid forEach error
846
- isClean: jest.fn(() => true),
847
- lastValidated: new Date(),
848
- });
849
-
850
- renderWithIntl({ onValidationChange });
851
- // Should handle gracefully - component should render
852
- expect(screen.getByTestId('code-editor-pane')).toBeInTheDocument();
853
- });
854
-
855
- it('handles validation while still validating', () => {
856
- const onValidationChange = jest.fn();
857
-
858
- mockUseValidationImpl.mockReturnValue({
859
- isValidating: true, // Still validating
860
- isValid: true,
861
- isSecure: true,
862
- hasErrors: false,
863
- hasWarnings: false,
864
- summary: { totalErrors: 0, totalWarnings: 0 },
865
- getAllIssues: jest.fn(() => []),
866
- isClean: jest.fn(() => true),
867
- lastValidated: new Date(),
868
- });
869
-
870
- renderWithIntl({ onValidationChange });
871
- // Should not send validation state while validating
872
- });
873
- });
874
- });