test_accessible_learnMoreLink.html (3237B)
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 LearnMoreLink parses and renders correctly text with learn more links. 8 --> 9 <head> 10 <meta charset="utf-8"> 11 <title>LearnMoreLink 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 { gDevTools } = require("devtools/client/framework/devtools"); 26 const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom"); 27 const { createFactory } = browserRequire("devtools/client/shared/vendor/react"); 28 const { Simulate } = 29 browserRequire("devtools/client/shared/vendor/react-dom-test-utils"); 30 const LearnMoreLink = createFactory( 31 browserRequire("devtools/client/accessibility/components/LearnMoreLink")); 32 33 class MockL10N { 34 constructor(bundle) { 35 this.bundle = bundle; 36 } 37 38 getStr(name) { 39 return this.bundle[name]; 40 } 41 42 getFormatStr(name, ...args) { 43 let index = 0; 44 return this.bundle[name].replace("%S", () => args[index++]); 45 } 46 } 47 48 function testLinkClicked(link, expectedUrl) { 49 const browserWindow = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType); 50 const defaultOpenWebLinkIn = browserWindow.openWebLinkIn; 51 52 const checker = Symbol(); 53 let onClickUrl = checker; 54 browserWindow.openWebLinkIn = url => { 55 onClickUrl = url; 56 }; 57 58 Simulate.click(link); 59 60 ok(onClickUrl !== checker, "Link was clicked"); 61 is(onClickUrl, expectedUrl, "Correct URL is opened"); 62 63 browserWindow.openWebLinkIn = defaultOpenWebLinkIn; 64 } 65 66 const href = "http://example.com/"; 67 const className = "test-class"; 68 const l10n = new MockL10N({ 69 message: "This is a message that contains a link. %S", 70 link: "Learn more", 71 }); 72 const learnMoreLink = LearnMoreLink( 73 { href, className, l10n, learnMoreStringKey: "link", messageStringKey: "message" }); 74 ok(LearnMoreLink, "Should be able to create LearnMoreLink instances"); 75 76 ReactDOM.render(learnMoreLink, document.body); 77 const p = document.querySelector("p"); 78 is(p.textContent, "This is a message that contains a link. Learn more", 79 "Text content for the whole paragraph is correct"); 80 81 is(p.className, className, "Class name is set correctly."); 82 83 const link = p.querySelector(".link"); 84 ok(link, "Link was rendered"); 85 is(link.textContent, "Learn more", "Text content for link is correct"); 86 87 testLinkClicked(link, href); 88 } catch (e) { 89 ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); 90 } finally { 91 SimpleTest.finish(); 92 } 93 }; 94 </script> 95 </pre> 96 </body> 97 </html>