|
Line 0
Link Here
|
|
|
1 |
import { |
| 2 |
edifactTestData, |
| 3 |
testDataUtils, |
| 4 |
} from "../../fixtures/edifact_test_data.js"; |
| 5 |
|
| 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(() => { |
| 24 |
cy.login(); |
| 25 |
cy.title().should("eq", "Koha staff interface"); |
| 26 |
cy.visit("/cgi-bin/koha/acqui/edifactmsgs.pl"); |
| 27 |
}); |
| 28 |
|
| 29 |
describe("Focus Options Support", () => { |
| 30 |
it("should support basketno focus parameter", () => { |
| 31 |
// Mock EDIFACT response with basketno data |
| 32 |
cy.intercept( |
| 33 |
"GET", |
| 34 |
"**/edimsg.pl*", |
| 35 |
testDataUtils.createMockResponse( |
| 36 |
testDataUtils.getFocusData("basketno", "12345") |
| 37 |
) |
| 38 |
).as("basketResponse"); |
| 39 |
|
| 40 |
// Create a button with basketno data |
| 41 |
cy.document().then(doc => { |
| 42 |
const button = doc.createElement("button"); |
| 43 |
button.className = "view_edifact_message test-button"; |
| 44 |
button.setAttribute("data-message-id", "1"); |
| 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 |
}); |
| 55 |
|
| 56 |
it("should support basketname focus parameter", () => { |
| 57 |
// Mock EDIFACT response with basketname data |
| 58 |
cy.intercept( |
| 59 |
"GET", |
| 60 |
"**/edimsg.pl*", |
| 61 |
testDataUtils.createMockResponse( |
| 62 |
testDataUtils.getFocusData("basketname", "TestBasket001") |
| 63 |
) |
| 64 |
).as("basketnameResponse"); |
| 65 |
|
| 66 |
// Create a button with basketname data |
| 67 |
cy.document().then(doc => { |
| 68 |
const button = doc.createElement("button"); |
| 69 |
button.className = "view_edifact_message test-button"; |
| 70 |
button.setAttribute("data-message-id", "1"); |
| 71 |
button.setAttribute("data-basketname", "TestBasket001"); |
| 72 |
button.textContent = "View"; |
| 73 |
doc.body.appendChild(button); |
| 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 |
}); |
| 81 |
|
| 82 |
it("should support invoicenumber focus parameter", () => { |
| 83 |
// Mock EDIFACT response with invoice data |
| 84 |
cy.intercept( |
| 85 |
"GET", |
| 86 |
"**/edimsg.pl*", |
| 87 |
testDataUtils.createMockResponse( |
| 88 |
testDataUtils.getFocusData( |
| 89 |
"invoicenumber", |
| 90 |
"TEST_INVOICE_001" |
| 91 |
) |
| 92 |
) |
| 93 |
).as("invoiceResponse"); |
| 94 |
|
| 95 |
// Create a button with invoice data |
| 96 |
cy.document().then(doc => { |
| 97 |
const button = doc.createElement("button"); |
| 98 |
button.className = "view_edifact_message test-button"; |
| 99 |
button.setAttribute("data-message-id", "1"); |
| 100 |
button.setAttribute("data-invoicenumber", "TEST_INVOICE_001"); |
| 101 |
button.textContent = "View"; |
| 102 |
doc.body.appendChild(button); |
| 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 |
}); |
| 110 |
}); |
| 111 |
|
| 112 |
describe("Message Focus and Highlighting", () => { |
| 113 |
beforeEach(() => { |
| 114 |
// Mock EDIFACT response with multiple messages |
| 115 |
cy.intercept( |
| 116 |
"GET", |
| 117 |
"**/edimsg.pl*", |
| 118 |
testDataUtils.createMockResponse(edifactTestData.focusTestData) |
| 119 |
).as("multiMessageResponse"); |
| 120 |
}); |
| 121 |
|
| 122 |
it("should highlight focused message with visual styling", () => { |
| 123 |
// Create a button with basketname focus |
| 124 |
cy.document().then(doc => { |
| 125 |
const button = doc.createElement("button"); |
| 126 |
button.className = "view_edifact_message test-button"; |
| 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"); |
| 140 |
cy.get("#EDI_modal .edi-focused-message").should("exist"); |
| 141 |
}); |
| 142 |
|
| 143 |
it("should scroll to focused message automatically", () => { |
| 144 |
// Create a button with basketname focus |
| 145 |
cy.document().then(doc => { |
| 146 |
const button = doc.createElement("button"); |
| 147 |
button.className = "view_edifact_message test-button"; |
| 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( |
| 164 |
"be.visible" |
| 165 |
); |
| 166 |
}); |
| 167 |
|
| 168 |
it("should expand focused message automatically", () => { |
| 169 |
// Create a button with basketname focus |
| 170 |
cy.document().then(doc => { |
| 171 |
const button = doc.createElement("button"); |
| 172 |
button.className = "view_edifact_message test-button"; |
| 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(() => { |
| 186 |
cy.get(".collapse").should("have.class", "show"); |
| 187 |
}); |
| 188 |
}); |
| 189 |
|
| 190 |
it("should handle focus fallback when no matching message found", () => { |
| 191 |
// Create a button with basketname that doesn't exist |
| 192 |
cy.document().then(doc => { |
| 193 |
const button = doc.createElement("button"); |
| 194 |
button.className = "view_edifact_message test-button"; |
| 195 |
button.setAttribute("data-message-id", "1"); |
| 196 |
button.setAttribute("data-basketname", "NonExistentBasket"); |
| 197 |
button.textContent = "View"; |
| 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"); |
| 208 |
}); |
| 209 |
}); |
| 210 |
|
| 211 |
describe("Focus Matching Logic", () => { |
| 212 |
beforeEach(() => { |
| 213 |
// Mock EDIFACT response with various segment types |
| 214 |
cy.intercept( |
| 215 |
"GET", |
| 216 |
"**/edimsg.pl*", |
| 217 |
testDataUtils.createMockResponse(edifactTestData.focusTestData) |
| 218 |
).as("variedSegmentResponse"); |
| 219 |
}); |
| 220 |
|
| 221 |
it("should match basketno in BGM segments", () => { |
| 222 |
// Create a button with basketno matching BGM element |
| 223 |
cy.document().then(doc => { |
| 224 |
const button = doc.createElement("button"); |
| 225 |
button.className = "view_edifact_message test-button"; |
| 226 |
button.setAttribute("data-message-id", "1"); |
| 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 |
}); |
| 243 |
|
| 244 |
it("should match basketname in RFF+ON segments", () => { |
| 245 |
// Create a button with basketname matching RFF+ON element |
| 246 |
cy.document().then(doc => { |
| 247 |
const button = doc.createElement("button"); |
| 248 |
button.className = "view_edifact_message test-button"; |
| 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"); |
| 260 |
}); |
| 261 |
|
| 262 |
it("should match invoicenumber in RFF+IV segments", () => { |
| 263 |
// Create a button with invoicenumber matching RFF+IV element |
| 264 |
cy.document().then(doc => { |
| 265 |
const button = doc.createElement("button"); |
| 266 |
button.className = "view_edifact_message test-button"; |
| 267 |
button.setAttribute("data-message-id", "1"); |
| 268 |
button.setAttribute("data-invoicenumber", "TEST_INVOICE_001"); |
| 269 |
button.textContent = "View"; |
| 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"); |
| 278 |
}); |
| 279 |
|
| 280 |
it("should match invoicenumber in RFF+VN segments", () => { |
| 281 |
// Create a button with invoicenumber matching RFF+VN element |
| 282 |
cy.document().then(doc => { |
| 283 |
const button = doc.createElement("button"); |
| 284 |
button.className = "view_edifact_message test-button"; |
| 285 |
button.setAttribute("data-message-id", "1"); |
| 286 |
button.setAttribute("data-invoicenumber", "TEST_INVOICE_001"); |
| 287 |
button.textContent = "View"; |
| 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"); |
| 296 |
}); |
| 297 |
|
| 298 |
it("should handle numeric basketno comparison correctly", () => { |
| 299 |
// Test with numeric basketno |
| 300 |
cy.document().then(doc => { |
| 301 |
const button = doc.createElement("button"); |
| 302 |
button.className = "view_edifact_message test-button-numeric"; |
| 303 |
button.setAttribute("data-message-id", "1"); |
| 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 |
}); |
| 324 |
|
| 325 |
it("should handle string basketname comparison correctly", () => { |
| 326 |
// Test with string basketname |
| 327 |
cy.document().then(doc => { |
| 328 |
const button = doc.createElement("button"); |
| 329 |
button.className = "view_edifact_message test-button-string"; |
| 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"); |
| 345 |
}); |
| 346 |
|
| 347 |
it("should handle non-numeric basketno without padding", () => { |
| 348 |
// Test with text basketno that should NOT be padded |
| 349 |
cy.document().then(doc => { |
| 350 |
const button = doc.createElement("button"); |
| 351 |
button.className = |
| 352 |
"view_edifact_message test-button-text-basketno"; |
| 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 |
}); |
| 374 |
|
| 375 |
it("should pad numeric basketno to 11 digits for matching", () => { |
| 376 |
// This test verifies that numeric basketno 67890 gets padded to 00000067890 |
| 377 |
// and matches the test data which has the padded version |
| 378 |
cy.document().then(doc => { |
| 379 |
const button = doc.createElement("button"); |
| 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"); |
| 404 |
}); |
| 405 |
}); |
| 406 |
|
| 407 |
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", () => { |
| 469 |
// Mock EDIFACT response with multiple matching elements |
| 470 |
cy.intercept( |
| 471 |
"GET", |
| 472 |
"**/edimsg.pl*", |
| 473 |
testDataUtils.createMockResponse(edifactTestData.focusTestData) |
| 474 |
).as("multiFocusResponse"); |
| 475 |
|
| 476 |
// Create a button with multiple focus parameters |
| 477 |
cy.document().then(doc => { |
| 478 |
const button = doc.createElement("button"); |
| 479 |
button.className = "view_edifact_message test-button"; |
| 480 |
button.setAttribute("data-message-id", "1"); |
| 481 |
button.setAttribute("data-basketno", "12345"); |
| 482 |
button.setAttribute("data-basketname", "TestBasket001"); |
| 483 |
button.textContent = "View"; |
| 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"); |
| 492 |
}); |
| 493 |
}); |
| 494 |
|
| 495 |
describe("Cross-View Focus Persistence", () => { |
| 496 |
beforeEach(() => { |
| 497 |
// Mock EDIFACT response with focus data |
| 498 |
cy.intercept( |
| 499 |
"GET", |
| 500 |
"**/edimsg.pl*", |
| 501 |
testDataUtils.createMockResponse(edifactTestData.focusTestData) |
| 502 |
).as("crossViewResponse"); |
| 503 |
}); |
| 504 |
|
| 505 |
it("should maintain focus highlighting when switching from Tree to Raw view", () => { |
| 506 |
// Create a button with basketname focus |
| 507 |
cy.document().then(doc => { |
| 508 |
const button = doc.createElement("button"); |
| 509 |
button.className = "view_edifact_message test-button"; |
| 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 |
|
| 520 |
// Verify focus highlighting exists in Tree view |
| 521 |
cy.get('#EDI_modal [data-view="tree"]').should( |
| 522 |
"have.class", |
| 523 |
"active" |
| 524 |
); |
| 525 |
cy.get("#EDI_modal .edi-focused-message").should("exist"); |
| 526 |
|
| 527 |
// Switch to Raw view |
| 528 |
cy.get('#EDI_modal [data-view="raw"]').click(); |
| 529 |
cy.get('#EDI_modal [data-view="raw"]').should( |
| 530 |
"have.class", |
| 531 |
"active" |
| 532 |
); |
| 533 |
|
| 534 |
// Verify focus highlighting exists in Raw view |
| 535 |
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 |
}); |
| 541 |
|
| 542 |
it("should maintain focus highlighting when switching from Raw to Tree view", () => { |
| 543 |
// Create a button with basketname focus |
| 544 |
cy.document().then(doc => { |
| 545 |
const button = doc.createElement("button"); |
| 546 |
button.className = "view_edifact_message test-button"; |
| 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 |
|
| 557 |
// Start in Tree view, then switch to Raw view |
| 558 |
cy.get('#EDI_modal [data-view="raw"]').click(); |
| 559 |
cy.get("#EDI_modal .edi-focused-segment-line").should("exist"); |
| 560 |
|
| 561 |
// Switch back to Tree view |
| 562 |
cy.get('#EDI_modal [data-view="tree"]').click(); |
| 563 |
cy.get('#EDI_modal [data-view="tree"]').should( |
| 564 |
"have.class", |
| 565 |
"active" |
| 566 |
); |
| 567 |
|
| 568 |
// Verify focus highlighting still exists in Tree view |
| 569 |
cy.get("#EDI_modal .edi-focused-message").should("exist"); |
| 570 |
cy.get('#EDI_modal [data-focus-message="true"]').should("exist"); |
| 571 |
}); |
| 572 |
|
| 573 |
it("should highlight correct message segments in Raw view", () => { |
| 574 |
// Create a button with basketname focus |
| 575 |
cy.document().then(doc => { |
| 576 |
const button = doc.createElement("button"); |
| 577 |
button.className = "view_edifact_message test-button"; |
| 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 |
|
| 588 |
// Switch to Raw view |
| 589 |
cy.get('#EDI_modal [data-view="raw"]').click(); |
| 590 |
|
| 591 |
// Verify that focused segment lines have the correct message index |
| 592 |
cy.get("#EDI_modal .edi-focused-segment-line").should("exist"); |
| 593 |
cy.get("#EDI_modal .edi-focused-segment-line") |
| 594 |
.first() |
| 595 |
.should("have.attr", "data-message-index"); |
| 596 |
|
| 597 |
// Verify visual styling is applied |
| 598 |
cy.get("#EDI_modal .edi-focused-segment-line").should( |
| 599 |
"have.css", |
| 600 |
"background-color" |
| 601 |
); |
| 602 |
cy.get("#EDI_modal .edi-focused-segment-line").should( |
| 603 |
"have.css", |
| 604 |
"border-left-color" |
| 605 |
); |
| 606 |
}); |
| 607 |
|
| 608 |
it("should scroll to focused content when switching views", () => { |
| 609 |
// Create a button with basketname focus |
| 610 |
cy.document().then(doc => { |
| 611 |
const button = doc.createElement("button"); |
| 612 |
button.className = "view_edifact_message test-button"; |
| 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 |
|
| 623 |
// Switch to Raw view and verify focused content is visible |
| 624 |
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") |
| 628 |
.first() |
| 629 |
.should("be.visible"); |
| 630 |
|
| 631 |
// Switch back to Tree view and verify focused content is visible |
| 632 |
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"); |
| 636 |
}); |
| 637 |
}); |
| 638 |
}); |