View | Details | Raw Unified | Return to bug 40383
Collapse All | Expand All

(-)a/t/cypress/integration/Acquisitions/EdifactFocusHighlighting_spec.ts (-438 / +126 lines)
Lines 4-34 import { Link Here
4
} from "../../fixtures/edifact_test_data.js";
4
} from "../../fixtures/edifact_test_data.js";
5
5
6
describe("EDIFACT Focus and Highlighting Tests", () => {
6
describe("EDIFACT Focus and Highlighting Tests", () => {
7
    let edifact_test_data = null;
8
9
    before(() => {
10
        // Insert test EDIFACT messages into the database
11
        cy.task("insertSampleEdifactMessages").then(test_data => {
12
            edifact_test_data = test_data;
13
        });
14
    });
15
16
    after(() => {
17
        // Clean up test data
18
        if (edifact_test_data) {
19
            cy.task("deleteSampleEdifactMessages", edifact_test_data);
20
        }
21
    });
22
23
    beforeEach(() => {
7
    beforeEach(() => {
24
        cy.login();
8
        cy.login();
25
        cy.title().should("eq", "Koha staff interface");
9
        cy.title().should("eq", "Koha staff interface");
26
        cy.visit("/cgi-bin/koha/acqui/edifactmsgs.pl");
10
        cy.visit("/cgi-bin/koha/acqui/edifactmsgs.pl");
27
    });
11
    });
28
12
13
    // Injects a test button, clicks it, waits for the intercepted response, and
14
    // asserts the modal tree is visible. All tests use cy.intercept so no real
15
    // DB messages are needed for this file.
16
    const openEDIModal = (
17
        attrs: Record<string, string>,
18
        interceptAlias: string
19
    ) => {
20
        cy.document().then(doc => {
21
            const button = doc.createElement("button");
22
            button.className = "view_edifact_message";
23
            Object.entries(attrs).forEach(([k, v]) =>
24
                button.setAttribute(k, v)
25
            );
26
            button.textContent = "View";
27
            doc.body.appendChild(button);
28
        });
29
        cy.get(".view_edifact_message").last().click();
30
        cy.wait(`@${interceptAlias}`);
31
        cy.get("#EDI_modal .edi-tree").should("be.visible");
32
    };
33
29
    describe("Focus Options Support", () => {
34
    describe("Focus Options Support", () => {
30
        it("should support basketno focus parameter", () => {
35
        it("should support basketno focus parameter", () => {
31
            // Mock EDIFACT response with basketno data
32
            cy.intercept(
36
            cy.intercept(
33
                "GET",
37
                "GET",
34
                "**/edimsg.pl*",
38
                "**/edimsg.pl*",
Lines 37-60 describe("EDIFACT Focus and Highlighting Tests", () => { Link Here
37
                )
41
                )
38
            ).as("basketResponse");
42
            ).as("basketResponse");
39
43
40
            // Create a button with basketno data
44
            openEDIModal(
41
            cy.document().then(doc => {
45
                { "data-message-id": "1", "data-basketno": "12345" },
42
                const button = doc.createElement("button");
46
                "basketResponse"
43
                button.className = "view_edifact_message test-button";
47
            );
44
                button.setAttribute("data-message-id", "1");
48
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
45
                button.setAttribute("data-basketno", "12345");
46
                button.textContent = "View";
47
                doc.body.appendChild(button);
48
            });
49
50
            cy.get(".view_edifact_message").last().click();
51
52
            cy.wait("@basketResponse");
53
            cy.get("#EDI_modal .edi-tree").should("be.visible");
54
        });
49
        });
55
50
56
        it("should support basketname focus parameter", () => {
51
        it("should support basketname focus parameter", () => {
57
            // Mock EDIFACT response with basketname data
58
            cy.intercept(
52
            cy.intercept(
59
                "GET",
53
                "GET",
60
                "**/edimsg.pl*",
54
                "**/edimsg.pl*",
Lines 63-86 describe("EDIFACT Focus and Highlighting Tests", () => { Link Here
63
                )
57
                )
64
            ).as("basketnameResponse");
58
            ).as("basketnameResponse");
65
59
66
            // Create a button with basketname data
60
            openEDIModal(
67
            cy.document().then(doc => {
61
                {
68
                const button = doc.createElement("button");
62
                    "data-message-id": "1",
69
                button.className = "view_edifact_message test-button";
63
                    "data-basketname": "TestBasket001",
70
                button.setAttribute("data-message-id", "1");
64
                },
71
                button.setAttribute("data-basketname", "TestBasket001");
65
                "basketnameResponse"
72
                button.textContent = "View";
66
            );
73
                doc.body.appendChild(button);
67
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
74
            });
75
76
            cy.get(".view_edifact_message").last().click();
77
78
            cy.wait("@basketnameResponse");
79
            cy.get("#EDI_modal .edi-tree").should("be.visible");
80
        });
68
        });
81
69
82
        it("should support invoicenumber focus parameter", () => {
70
        it("should support invoicenumber focus parameter", () => {
83
            // Mock EDIFACT response with invoice data
84
            cy.intercept(
71
            cy.intercept(
85
                "GET",
72
                "GET",
86
                "**/edimsg.pl*",
73
                "**/edimsg.pl*",
Lines 92-117 describe("EDIFACT Focus and Highlighting Tests", () => { Link Here
92
                )
79
                )
93
            ).as("invoiceResponse");
80
            ).as("invoiceResponse");
94
81
95
            // Create a button with invoice data
82
            openEDIModal(
96
            cy.document().then(doc => {
83
                {
97
                const button = doc.createElement("button");
84
                    "data-message-id": "1",
98
                button.className = "view_edifact_message test-button";
85
                    "data-invoicenumber": "TEST_INVOICE_001",
99
                button.setAttribute("data-message-id", "1");
86
                },
100
                button.setAttribute("data-invoicenumber", "TEST_INVOICE_001");
87
                "invoiceResponse"
101
                button.textContent = "View";
88
            );
102
                doc.body.appendChild(button);
89
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
103
            });
104
105
            cy.get(".view_edifact_message").last().click();
106
107
            cy.wait("@invoiceResponse");
108
            cy.get("#EDI_modal .edi-tree").should("be.visible");
109
        });
90
        });
110
    });
91
    });
111
92
112
    describe("Message Focus and Highlighting", () => {
93
    describe("Message Focus and Highlighting", () => {
113
        beforeEach(() => {
94
        beforeEach(() => {
114
            // Mock EDIFACT response with multiple messages
115
            cy.intercept(
95
            cy.intercept(
116
                "GET",
96
                "GET",
117
                "**/edimsg.pl*",
97
                "**/edimsg.pl*",
Lines 120-216 describe("EDIFACT Focus and Highlighting Tests", () => { Link Here
120
        });
100
        });
121
101
122
        it("should highlight focused message with visual styling", () => {
102
        it("should highlight focused message with visual styling", () => {
123
            // Create a button with basketname focus
103
            openEDIModal(
124
            cy.document().then(doc => {
104
                { "data-message-id": "1", "data-basketname": "TestBasket001" },
125
                const button = doc.createElement("button");
105
                "multiMessageResponse"
126
                button.className = "view_edifact_message test-button";
106
            );
127
                button.setAttribute("data-message-id", "1");
128
                button.setAttribute("data-basketname", "TestBasket001");
129
                button.textContent = "View";
130
                doc.body.appendChild(button);
131
            });
132
133
            cy.get(".view_edifact_message").last().click();
134
135
            cy.wait("@multiMessageResponse");
136
            cy.get("#EDI_modal .edi-tree").should("be.visible");
137
138
            // Check that focused message has special styling
139
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
107
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
140
            cy.get("#EDI_modal .edi-focused-message").should("exist");
108
            cy.get("#EDI_modal .edi-focused-message").should("exist");
141
        });
109
        });
142
110
143
        it("should scroll to focused message automatically", () => {
111
        it("should scroll to focused message automatically", () => {
144
            // Create a button with basketname focus
112
            openEDIModal(
145
            cy.document().then(doc => {
113
                { "data-message-id": "1", "data-basketname": "TestBasket001" },
146
                const button = doc.createElement("button");
114
                "multiMessageResponse"
147
                button.className = "view_edifact_message test-button";
115
            );
148
                button.setAttribute("data-message-id", "1");
149
                button.setAttribute("data-basketname", "TestBasket001");
150
                button.textContent = "View";
151
                doc.body.appendChild(button);
152
            });
153
154
            cy.get(".view_edifact_message").last().click();
155
156
            cy.wait("@multiMessageResponse");
157
            cy.get("#EDI_modal .edi-tree").should("be.visible");
158
159
            // Wait for scroll animation to complete
160
            cy.wait(1000);
161
162
            // Check that focused message is visible in viewport
163
            cy.get('#EDI_modal [data-focus-message="true"]').should(
116
            cy.get('#EDI_modal [data-focus-message="true"]').should(
164
                "be.visible"
117
                "be.visible"
165
            );
118
            );
166
        });
119
        });
167
120
168
        it("should expand focused message automatically", () => {
121
        it("should expand focused message automatically", () => {
169
            // Create a button with basketname focus
122
            openEDIModal(
170
            cy.document().then(doc => {
123
                { "data-message-id": "1", "data-basketname": "TestBasket001" },
171
                const button = doc.createElement("button");
124
                "multiMessageResponse"
172
                button.className = "view_edifact_message test-button";
125
            );
173
                button.setAttribute("data-message-id", "1");
174
                button.setAttribute("data-basketname", "TestBasket001");
175
                button.textContent = "View";
176
                doc.body.appendChild(button);
177
            });
178
179
            cy.get(".view_edifact_message").last().click();
180
181
            cy.wait("@multiMessageResponse");
182
            cy.get("#EDI_modal .edi-tree").should("be.visible");
183
184
            // Check that focused message sections are expanded
185
            cy.get('#EDI_modal [data-focus-message="true"]').within(() => {
126
            cy.get('#EDI_modal [data-focus-message="true"]').within(() => {
186
                cy.get(".collapse").should("have.class", "show");
127
                cy.get(".collapse").should("have.class", "show");
187
            });
128
            });
188
        });
129
        });
189
130
190
        it("should handle focus fallback when no matching message found", () => {
131
        it("should handle focus fallback when no matching message found", () => {
191
            // Create a button with basketname that doesn't exist
132
            openEDIModal(
192
            cy.document().then(doc => {
133
                {
193
                const button = doc.createElement("button");
134
                    "data-message-id": "1",
194
                button.className = "view_edifact_message test-button";
135
                    "data-basketname": "NonExistentBasket",
195
                button.setAttribute("data-message-id", "1");
136
                },
196
                button.setAttribute("data-basketname", "NonExistentBasket");
137
                "multiMessageResponse"
197
                button.textContent = "View";
138
            );
198
                doc.body.appendChild(button);
199
            });
200
201
            cy.get(".view_edifact_message").last().click();
202
203
            cy.wait("@multiMessageResponse");
204
            cy.get("#EDI_modal .edi-tree").should("be.visible");
205
206
            // Should expand entire tree as fallback
207
            cy.get("#EDI_modal .collapse.show").should("exist");
139
            cy.get("#EDI_modal .collapse.show").should("exist");
208
        });
140
        });
209
    });
141
    });
210
142
211
    describe("Focus Matching Logic", () => {
143
    describe("Focus Matching Logic", () => {
212
        beforeEach(() => {
144
        beforeEach(() => {
213
            // Mock EDIFACT response with various segment types
214
            cy.intercept(
145
            cy.intercept(
215
                "GET",
146
                "GET",
216
                "**/edimsg.pl*",
147
                "**/edimsg.pl*",
Lines 219-500 describe("EDIFACT Focus and Highlighting Tests", () => { Link Here
219
        });
150
        });
220
151
221
        it("should match basketno in BGM segments", () => {
152
        it("should match basketno in BGM segments", () => {
222
            // Create a button with basketno matching BGM element
153
            openEDIModal(
223
            cy.document().then(doc => {
154
                { "data-message-id": "1", "data-basketno": "12345" },
224
                const button = doc.createElement("button");
155
                "variedSegmentResponse"
225
                button.className = "view_edifact_message test-button";
156
            );
226
                button.setAttribute("data-message-id", "1");
157
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
227
                button.setAttribute("data-basketno", "12345");
228
                button.textContent = "View";
229
                doc.body.appendChild(button);
230
            });
231
232
            cy.get(".view_edifact_message").last().click();
233
234
            cy.wait("@variedSegmentResponse");
235
            cy.get("#EDI_modal .edi-tree").should("be.visible");
236
237
            // Wait for focus application to complete - longer timeout for BGM matching
238
            cy.wait(1000);
239
            cy.get('#EDI_modal [data-focus-message="true"]', {
240
                timeout: 15000,
241
            }).should("exist");
242
        });
158
        });
243
159
244
        it("should match basketname in RFF+ON segments", () => {
160
        it("should match basketname in RFF+ON segments", () => {
245
            // Create a button with basketname matching RFF+ON element
161
            openEDIModal(
246
            cy.document().then(doc => {
162
                { "data-message-id": "1", "data-basketname": "TestBasket001" },
247
                const button = doc.createElement("button");
163
                "variedSegmentResponse"
248
                button.className = "view_edifact_message test-button";
164
            );
249
                button.setAttribute("data-message-id", "1");
250
                button.setAttribute("data-basketname", "TestBasket001");
251
                button.textContent = "View";
252
                doc.body.appendChild(button);
253
            });
254
255
            cy.get(".view_edifact_message").last().click();
256
257
            cy.wait("@variedSegmentResponse");
258
            cy.get("#EDI_modal .edi-tree").should("be.visible");
259
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
165
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
260
        });
166
        });
261
167
262
        it("should match invoicenumber in RFF+IV segments", () => {
168
        it("should match invoicenumber in RFF+IV segments", () => {
263
            // Create a button with invoicenumber matching RFF+IV element
169
            openEDIModal(
264
            cy.document().then(doc => {
170
                {
265
                const button = doc.createElement("button");
171
                    "data-message-id": "1",
266
                button.className = "view_edifact_message test-button";
172
                    "data-invoicenumber": "TEST_INVOICE_001",
267
                button.setAttribute("data-message-id", "1");
173
                },
268
                button.setAttribute("data-invoicenumber", "TEST_INVOICE_001");
174
                "variedSegmentResponse"
269
                button.textContent = "View";
175
            );
270
                doc.body.appendChild(button);
271
            });
272
273
            cy.get(".view_edifact_message").last().click();
274
275
            cy.wait("@variedSegmentResponse");
276
            cy.get("#EDI_modal .edi-tree").should("be.visible");
277
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
176
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
278
        });
177
        });
279
178
280
        it("should match invoicenumber in RFF+VN segments", () => {
179
        it("should match invoicenumber in RFF+VN segments", () => {
281
            // Create a button with invoicenumber matching RFF+VN element
180
            openEDIModal(
282
            cy.document().then(doc => {
181
                {
283
                const button = doc.createElement("button");
182
                    "data-message-id": "1",
284
                button.className = "view_edifact_message test-button";
183
                    "data-invoicenumber": "TEST_INVOICE_001",
285
                button.setAttribute("data-message-id", "1");
184
                },
286
                button.setAttribute("data-invoicenumber", "TEST_INVOICE_001");
185
                "variedSegmentResponse"
287
                button.textContent = "View";
186
            );
288
                doc.body.appendChild(button);
289
            });
290
291
            cy.get(".view_edifact_message").last().click();
292
293
            cy.wait("@variedSegmentResponse");
294
            cy.get("#EDI_modal .edi-tree").should("be.visible");
295
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
187
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
296
        });
188
        });
297
189
298
        it("should handle numeric basketno comparison correctly", () => {
190
        it("should handle numeric basketno comparison correctly", () => {
299
            // Test with numeric basketno
191
            openEDIModal(
300
            cy.document().then(doc => {
192
                { "data-message-id": "1", "data-basketno": "12345" },
301
                const button = doc.createElement("button");
193
                "variedSegmentResponse"
302
                button.className = "view_edifact_message test-button-numeric";
194
            );
303
                button.setAttribute("data-message-id", "1");
195
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
304
                button.setAttribute("data-basketno", "12345");
305
                button.textContent = "View Numeric";
306
                button.style.position = "fixed";
307
                button.style.top = "10px";
308
                button.style.left = "10px";
309
                button.style.zIndex = "9999";
310
                doc.body.appendChild(button);
311
            });
312
313
            cy.get(".test-button-numeric").click({ force: true });
314
315
            cy.wait("@variedSegmentResponse");
316
            cy.get("#EDI_modal .edi-tree").should("be.visible");
317
318
            // Wait for focus application and numeric comparison logic to complete
319
            cy.wait(1000);
320
            cy.get('#EDI_modal [data-focus-message="true"]', {
321
                timeout: 15000,
322
            }).should("exist");
323
        });
196
        });
324
197
325
        it("should handle string basketname comparison correctly", () => {
198
        it("should handle string basketname comparison correctly", () => {
326
            // Test with string basketname
199
            openEDIModal(
327
            cy.document().then(doc => {
200
                { "data-message-id": "1", "data-basketname": "TestBasket001" },
328
                const button = doc.createElement("button");
201
                "variedSegmentResponse"
329
                button.className = "view_edifact_message test-button-string";
202
            );
330
                button.setAttribute("data-message-id", "1");
331
                button.setAttribute("data-basketname", "TestBasket001");
332
                button.textContent = "View String";
333
                button.style.position = "fixed";
334
                button.style.top = "10px";
335
                button.style.left = "10px";
336
                button.style.zIndex = "9999";
337
                doc.body.appendChild(button);
338
            });
339
340
            cy.get(".test-button-string").click({ force: true });
341
342
            cy.wait("@variedSegmentResponse");
343
            cy.get("#EDI_modal .edi-tree").should("be.visible");
344
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
203
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
345
        });
204
        });
346
205
347
        it("should handle non-numeric basketno without padding", () => {
206
        it("should handle non-numeric basketno without padding", () => {
348
            // Test with text basketno that should NOT be padded
207
            openEDIModal(
349
            cy.document().then(doc => {
208
                { "data-message-id": "1", "data-basketno": "BASKET_TEXT_001" },
350
                const button = doc.createElement("button");
209
                "variedSegmentResponse"
351
                button.className =
210
            );
352
                    "view_edifact_message test-button-text-basketno";
211
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
353
                button.setAttribute("data-message-id", "1");
354
                button.setAttribute("data-basketno", "BASKET_TEXT_001");
355
                button.textContent = "View Text Basketno";
356
                button.style.position = "fixed";
357
                button.style.top = "10px";
358
                button.style.left = "10px";
359
                button.style.zIndex = "9999";
360
                doc.body.appendChild(button);
361
            });
362
363
            cy.get(".test-button-text-basketno").click({ force: true });
364
365
            cy.wait("@variedSegmentResponse");
366
            cy.get("#EDI_modal .edi-tree").should("be.visible");
367
368
            // Wait for focus application to complete
369
            cy.wait(1000);
370
            cy.get('#EDI_modal [data-focus-message="true"]', {
371
                timeout: 15000,
372
            }).should("exist");
373
        });
212
        });
374
213
375
        it("should pad numeric basketno to 11 digits for matching", () => {
214
        it("should pad numeric basketno to 11 digits for matching", () => {
376
            // This test verifies that numeric basketno 67890 gets padded to 00000067890
215
            openEDIModal(
377
            // and matches the test data which has the padded version
216
                { "data-message-id": "1", "data-basketno": "67890" },
378
            cy.document().then(doc => {
217
                "variedSegmentResponse"
379
                const button = doc.createElement("button");
218
            );
380
                button.className = "view_edifact_message test-button-padding";
381
                button.setAttribute("data-message-id", "1");
382
                button.setAttribute("data-basketno", "67890");
383
                button.textContent = "View Padded Basketno";
384
                button.style.position = "fixed";
385
                button.style.top = "10px";
386
                button.style.left = "10px";
387
                button.style.zIndex = "9999";
388
                doc.body.appendChild(button);
389
            });
390
391
            cy.get(".test-button-padding").click({ force: true });
392
393
            cy.wait("@variedSegmentResponse");
394
            cy.get("#EDI_modal .edi-tree").should("be.visible");
395
396
            // Wait for focus application and padding logic to complete
397
            cy.wait(1000);
398
            cy.get('#EDI_modal [data-focus-message="true"]', {
399
                timeout: 15000,
400
            }).should("exist");
401
402
            // Verify it's the correct message (should find focus highlighting)
403
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
219
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
404
        });
220
        });
405
    });
221
    });
406
222
407
    describe("Focus Cleanup", () => {
223
    describe("Focus Cleanup", () => {
408
        it("should remove focus highlighting when modal closes", () => {
409
            // Mock EDIFACT response with focus data
410
            cy.intercept(
411
                "GET",
412
                "**/edimsg.pl*",
413
                testDataUtils.createMockResponse(
414
                    testDataUtils.getFocusData("basketno", "12345")
415
                )
416
            ).as("focusResponse");
417
418
            // Create a button with focus
419
            cy.document().then(doc => {
420
                const button = doc.createElement("button");
421
                button.className = "view_edifact_message test-button-focus";
422
                button.setAttribute("data-message-id", "1");
423
                button.setAttribute("data-basketno", "12345");
424
                button.textContent = "View";
425
                button.style.position = "fixed";
426
                button.style.top = "10px";
427
                button.style.left = "10px";
428
                button.style.zIndex = "9999";
429
                doc.body.appendChild(button);
430
            });
431
432
            cy.get(".test-button-focus").click({ force: true });
433
434
            cy.wait("@focusResponse");
435
            cy.get("#EDI_modal .edi-tree").should("be.visible");
436
437
            // Wait for initial focus highlighting to be applied
438
            cy.wait(1000);
439
            cy.get("#EDI_modal .edi-focused-message", {
440
                timeout: 10000,
441
            }).should("exist");
442
443
            // Close modal
444
            cy.get("#EDI_modal .btn-close").click();
445
446
            // Wait for modal to be fully hidden and reset
447
            cy.get("#EDI_modal").should("not.be.visible");
448
            cy.wait(500); // Give modal time to fully reset
449
450
            // Reopen modal
451
            cy.get(".test-button-focus").click({ force: true });
452
453
            cy.wait("@focusResponse");
454
            cy.get("#EDI_modal", { timeout: 10000 }).should("be.visible");
455
            cy.get("#EDI_modal .edi-tree", { timeout: 10000 }).should(
456
                "be.visible"
457
            );
458
459
            // Wait for focus highlighting to be re-applied
460
            cy.wait(1000);
461
462
            // Focus highlighting should be clean on reopen
463
            cy.get("#EDI_modal .edi-focused-message", {
464
                timeout: 10000,
465
            }).should("exist");
466
        });
467
468
        it("should handle multiple focus parameters correctly", () => {
224
        it("should handle multiple focus parameters correctly", () => {
469
            // Mock EDIFACT response with multiple matching elements
470
            cy.intercept(
225
            cy.intercept(
471
                "GET",
226
                "GET",
472
                "**/edimsg.pl*",
227
                "**/edimsg.pl*",
473
                testDataUtils.createMockResponse(edifactTestData.focusTestData)
228
                testDataUtils.createMockResponse(edifactTestData.focusTestData)
474
            ).as("multiFocusResponse");
229
            ).as("multiFocusResponse");
475
230
476
            // Create a button with multiple focus parameters
231
            openEDIModal(
477
            cy.document().then(doc => {
232
                {
478
                const button = doc.createElement("button");
233
                    "data-message-id": "1",
479
                button.className = "view_edifact_message test-button";
234
                    "data-basketno": "12345",
480
                button.setAttribute("data-message-id", "1");
235
                    "data-basketname": "TestBasket001",
481
                button.setAttribute("data-basketno", "12345");
236
                },
482
                button.setAttribute("data-basketname", "TestBasket001");
237
                "multiFocusResponse"
483
                button.textContent = "View";
238
            );
484
                doc.body.appendChild(button);
485
            });
486
487
            cy.get(".view_edifact_message").last().click();
488
489
            cy.wait("@multiFocusResponse");
490
            cy.get("#EDI_modal .edi-tree").should("be.visible");
491
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
239
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
492
        });
240
        });
493
    });
241
    });
494
242
495
    describe("Cross-View Focus Persistence", () => {
243
    describe("Cross-View Focus Persistence", () => {
496
        beforeEach(() => {
244
        beforeEach(() => {
497
            // Mock EDIFACT response with focus data
498
            cy.intercept(
245
            cy.intercept(
499
                "GET",
246
                "GET",
500
                "**/edimsg.pl*",
247
                "**/edimsg.pl*",
Lines 503-600 describe("EDIFACT Focus and Highlighting Tests", () => { Link Here
503
        });
250
        });
504
251
505
        it("should maintain focus highlighting when switching from Tree to Raw view", () => {
252
        it("should maintain focus highlighting when switching from Tree to Raw view", () => {
506
            // Create a button with basketname focus
253
            openEDIModal(
507
            cy.document().then(doc => {
254
                { "data-message-id": "1", "data-basketname": "TestBasket001" },
508
                const button = doc.createElement("button");
255
                "crossViewResponse"
509
                button.className = "view_edifact_message test-button";
256
            );
510
                button.setAttribute("data-message-id", "1");
511
                button.setAttribute("data-basketname", "TestBasket001");
512
                button.textContent = "View";
513
                doc.body.appendChild(button);
514
            });
515
516
            cy.get(".view_edifact_message").last().click();
517
            cy.wait("@crossViewResponse");
518
            cy.get("#EDI_modal .edi-tree").should("be.visible");
519
257
520
            // Verify focus highlighting exists in Tree view
521
            cy.get('#EDI_modal [data-view="tree"]').should(
258
            cy.get('#EDI_modal [data-view="tree"]').should(
522
                "have.class",
259
                "have.class",
523
                "active"
260
                "active"
524
            );
261
            );
525
            cy.get("#EDI_modal .edi-focused-message").should("exist");
262
            cy.get("#EDI_modal .edi-focused-message").should("exist");
526
263
527
            // Switch to Raw view
528
            cy.get('#EDI_modal [data-view="raw"]').click();
264
            cy.get('#EDI_modal [data-view="raw"]').click();
529
            cy.get('#EDI_modal [data-view="raw"]').should(
265
            cy.get('#EDI_modal [data-view="raw"]').should(
530
                "have.class",
266
                "have.class",
531
                "active"
267
                "active"
532
            );
268
            );
533
534
            // Verify focus highlighting exists in Raw view
535
            cy.get("#EDI_modal .edi-focused-segment-line").should("exist");
269
            cy.get("#EDI_modal .edi-focused-segment-line").should("exist");
536
            cy.get("#EDI_modal .edi-focused-segment-line").should(
537
                "have.length.greaterThan",
538
                0
539
            );
540
        });
270
        });
541
271
542
        it("should maintain focus highlighting when switching from Raw to Tree view", () => {
272
        it("should maintain focus highlighting when switching from Raw to Tree view", () => {
543
            // Create a button with basketname focus
273
            openEDIModal(
544
            cy.document().then(doc => {
274
                { "data-message-id": "1", "data-basketname": "TestBasket001" },
545
                const button = doc.createElement("button");
275
                "crossViewResponse"
546
                button.className = "view_edifact_message test-button";
276
            );
547
                button.setAttribute("data-message-id", "1");
548
                button.setAttribute("data-basketname", "TestBasket001");
549
                button.textContent = "View";
550
                doc.body.appendChild(button);
551
            });
552
553
            cy.get(".view_edifact_message").last().click();
554
            cy.wait("@crossViewResponse");
555
            cy.get("#EDI_modal .edi-tree").should("be.visible");
556
277
557
            // Start in Tree view, then switch to Raw view
558
            cy.get('#EDI_modal [data-view="raw"]').click();
278
            cy.get('#EDI_modal [data-view="raw"]').click();
559
            cy.get("#EDI_modal .edi-focused-segment-line").should("exist");
279
            cy.get("#EDI_modal .edi-focused-segment-line").should("exist");
560
280
561
            // Switch back to Tree view
562
            cy.get('#EDI_modal [data-view="tree"]').click();
281
            cy.get('#EDI_modal [data-view="tree"]').click();
563
            cy.get('#EDI_modal [data-view="tree"]').should(
282
            cy.get('#EDI_modal [data-view="tree"]').should(
564
                "have.class",
283
                "have.class",
565
                "active"
284
                "active"
566
            );
285
            );
567
568
            // Verify focus highlighting still exists in Tree view
569
            cy.get("#EDI_modal .edi-focused-message").should("exist");
286
            cy.get("#EDI_modal .edi-focused-message").should("exist");
570
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
287
            cy.get('#EDI_modal [data-focus-message="true"]').should("exist");
571
        });
288
        });
572
289
573
        it("should highlight correct message segments in Raw view", () => {
290
        it("should highlight correct message segments in Raw view", () => {
574
            // Create a button with basketname focus
291
            openEDIModal(
575
            cy.document().then(doc => {
292
                { "data-message-id": "1", "data-basketname": "TestBasket001" },
576
                const button = doc.createElement("button");
293
                "crossViewResponse"
577
                button.className = "view_edifact_message test-button";
294
            );
578
                button.setAttribute("data-message-id", "1");
579
                button.setAttribute("data-basketname", "TestBasket001");
580
                button.textContent = "View";
581
                doc.body.appendChild(button);
582
            });
583
584
            cy.get(".view_edifact_message").last().click();
585
            cy.wait("@crossViewResponse");
586
            cy.get("#EDI_modal .edi-tree").should("be.visible");
587
295
588
            // Switch to Raw view
589
            cy.get('#EDI_modal [data-view="raw"]').click();
296
            cy.get('#EDI_modal [data-view="raw"]').click();
590
297
591
            // Verify that focused segment lines have the correct message index
592
            cy.get("#EDI_modal .edi-focused-segment-line").should("exist");
298
            cy.get("#EDI_modal .edi-focused-segment-line").should("exist");
593
            cy.get("#EDI_modal .edi-focused-segment-line")
299
            cy.get("#EDI_modal .edi-focused-segment-line")
594
                .first()
300
                .first()
595
                .should("have.attr", "data-message-index");
301
                .should("have.attr", "data-message-index");
596
597
            // Verify visual styling is applied
598
            cy.get("#EDI_modal .edi-focused-segment-line").should(
302
            cy.get("#EDI_modal .edi-focused-segment-line").should(
599
                "have.css",
303
                "have.css",
600
                "background-color"
304
                "background-color"
Lines 606-637 describe("EDIFACT Focus and Highlighting Tests", () => { Link Here
606
        });
310
        });
607
311
608
        it("should scroll to focused content when switching views", () => {
312
        it("should scroll to focused content when switching views", () => {
609
            // Create a button with basketname focus
313
            openEDIModal(
610
            cy.document().then(doc => {
314
                { "data-message-id": "1", "data-basketname": "TestBasket001" },
611
                const button = doc.createElement("button");
315
                "crossViewResponse"
612
                button.className = "view_edifact_message test-button";
316
            );
613
                button.setAttribute("data-message-id", "1");
614
                button.setAttribute("data-basketname", "TestBasket001");
615
                button.textContent = "View";
616
                doc.body.appendChild(button);
617
            });
618
619
            cy.get(".view_edifact_message").last().click();
620
            cy.wait("@crossViewResponse");
621
            cy.get("#EDI_modal .edi-tree").should("be.visible");
622
317
623
            // Switch to Raw view and verify focused content is visible
624
            cy.get('#EDI_modal [data-view="raw"]').click();
318
            cy.get('#EDI_modal [data-view="raw"]').click();
625
            cy.wait(200); // Wait for scroll animation
626
627
            cy.get("#EDI_modal .edi-focused-segment-line")
319
            cy.get("#EDI_modal .edi-focused-segment-line")
628
                .first()
320
                .first()
629
                .should("be.visible");
321
                .should("be.visible");
630
322
631
            // Switch back to Tree view and verify focused content is visible
632
            cy.get('#EDI_modal [data-view="tree"]').click();
323
            cy.get('#EDI_modal [data-view="tree"]').click();
633
            cy.wait(200); // Wait for scroll animation
634
635
            cy.get("#EDI_modal .edi-focused-message").should("be.visible");
324
            cy.get("#EDI_modal .edi-focused-message").should("be.visible");
636
        });
325
        });
637
    });
326
    });
638
- 

Return to bug 40383