test_accessible_relations.html (3939B)
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public 2 - License, v. 2.0. If a copy of the MPL was not distributed with this 3 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 4 <!DOCTYPE HTML> 5 <html> 6 <!-- 7 Test that openLink function is called if accessible object property is rendered as a link. 8 --> 9 <head> 10 <meta charset="utf-8"> 11 <title>Accessible component test</title> 12 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 13 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 14 <link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css"> 15 </head> 16 <body> 17 <pre id="test"> 18 <script src="head.js" type="application/javascript"></script> 19 <script type="application/javascript"> 20 21 "use strict"; 22 23 window.onload = async function() { 24 try { 25 const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom"); 26 const { createFactory, createElement } = 27 browserRequire("devtools/client/shared/vendor/react"); 28 const { Provider } = require("devtools/client/shared/vendor/react-redux"); 29 const createStore = require("devtools/client/shared/redux/create-store"); 30 const { Simulate } = 31 browserRequire("devtools/client/shared/vendor/react-dom-test-utils"); 32 const Accessible = createFactory( 33 browserRequire("devtools/client/accessibility/components/Accessible")); 34 35 const a = Accessible({ labelledby: "Test Accessible" }); 36 ok(a, "Should be able to create Accessible instances"); 37 38 const mockState = { 39 details: { 40 DOMNode: {}, 41 accessible: { 42 on: () => {}, 43 off: () => {}, 44 // This accessible mock has no actorID and should be treated as 45 // destroyed. 46 isDestroyed: () => true, 47 }, 48 }, 49 ui: { supports: {} } 50 }; 51 52 const mockStore = createStore((state, action) => 53 action ? { ...state, ...action } : state, { initialState: mockState }); 54 const provider = createElement(Provider, { store: mockStore }, a); 55 const accessible = ReactDOM.render(provider, window.document.body); 56 ok(accessible, "Should be able to mount Accessible instances"); 57 let relationsNode = document.getElementById("/relations"); 58 ok(relationsNode, "Relations are rendered when supported."); 59 let arrow = relationsNode.querySelector(".theme-twisty"); 60 is(arrow.style.visibility, "hidden", "Relations are empty."); 61 62 info("Render accessible object with relations."); 63 const state = { 64 details: { 65 ...mockState.details, 66 relations: { 67 "containing document": { 68 actorID: "server1.conn2.child1/accessible29", 69 typeName: "accessible", 70 name: "New Tab", 71 role: "document", 72 }, 73 }, 74 }, 75 }; 76 await mockStore.dispatch({ type: "update", ...state }); 77 relationsNode = document.getElementById("/relations"); 78 ok(relationsNode, "Relations are rendered when supported."); 79 arrow = relationsNode.querySelector(".theme-twisty"); 80 ok(!arrow.style.visibility, 81 "There is at least one relation for the current accessible object."); 82 83 Simulate.click(arrow, null); 84 const relationNode = document.getElementById("/relations/containing document"); 85 ok(relationNode, "Relation node is rendered."); 86 ok(relationNode.textContent.includes( 87 state.details.relations["containing document"].name), 88 "Relation target's name is rendered"); 89 ok(relationNode.textContent.includes( 90 state.details.relations["containing document"].role), 91 "Relation target's name is rendered"); 92 ok(relationNode.querySelector(".open-accessibility-inspector"), 93 "Select accessible button is rendered."); 94 } catch (e) { 95 ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); 96 } finally { 97 SimpleTest.finish(); 98 } 99 }; 100 </script> 101 </pre> 102 </body> 103 </html>