|
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 |
- |
|
|