network-event-message.test.js (5288B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 "use strict"; 4 5 // Test utils. 6 const expect = require("expect"); 7 const { render } = require("enzyme"); 8 9 // React 10 const { 11 createFactory, 12 } = require("resource://devtools/client/shared/vendor/react.mjs"); 13 14 // Components under test. 15 const NetworkEventMessage = createFactory( 16 require("resource://devtools/client/webconsole/components/Output/message-types/NetworkEventMessage.js") 17 ); 18 const { 19 INDENT_WIDTH, 20 } = require("resource://devtools/client/webconsole/components/Output/MessageIndent.js"); 21 22 // Test fakes. 23 const { 24 stubPreparedMessages, 25 } = require("resource://devtools/client/webconsole/test/node/fixtures/stubs/index.js"); 26 const serviceContainer = require("resource://devtools/client/webconsole/test/node/fixtures/serviceContainer.js"); 27 28 const EXPECTED_URL = "https://example.com/inexistent.html"; 29 const EXPECTED_STATUS = /\[HTTP\/\d\.\d \d+ [A-Za-z ]+ \d+ms\]/; 30 31 describe("NetworkEventMessage component:", () => { 32 describe("GET request", () => { 33 it("renders as expected", () => { 34 const message = stubPreparedMessages.get("GET request"); 35 const update = stubPreparedMessages.get("GET request update"); 36 const wrapper = render( 37 NetworkEventMessage({ 38 message, 39 serviceContainer, 40 timestampsVisible: true, 41 networkMessageUpdate: update, 42 }) 43 ); 44 const { 45 timestampString, 46 } = require("resource://devtools/client/webconsole/utils/l10n.js"); 47 48 expect(wrapper.find(".timestamp").text()).toBe( 49 timestampString(message.timeStamp) 50 ); 51 expect(wrapper.find(".message-body .method").text()).toBe("GET"); 52 expect(wrapper.find(".message-body .xhr").length).toBe(0); 53 expect(wrapper.find(".message-body .url").length).toBe(1); 54 expect(wrapper.find(".message-body .url").text()).toBe(EXPECTED_URL); 55 expect(wrapper.find(".message-body .status").length).toBe(1); 56 expect(wrapper.find(".message-body .status").text()).toMatch( 57 EXPECTED_STATUS 58 ); 59 }); 60 61 it("does not have a timestamp when timestampsVisible prop is falsy", () => { 62 const message = stubPreparedMessages.get("GET request update"); 63 const wrapper = render( 64 NetworkEventMessage({ 65 message, 66 serviceContainer, 67 timestampsVisible: false, 68 }) 69 ); 70 71 expect(wrapper.find(".timestamp").length).toBe(0); 72 }); 73 74 it("has the expected indent", () => { 75 const message = stubPreparedMessages.get("GET request"); 76 77 const indent = 10; 78 let wrapper = render( 79 NetworkEventMessage({ 80 message: Object.assign({}, message, { indent }), 81 serviceContainer, 82 }) 83 ); 84 expect(wrapper.prop("data-indent")).toBe(`${indent}`); 85 const indentEl = wrapper.find(".indent"); 86 expect(indentEl.prop("style").width).toBe(`${indent * INDENT_WIDTH}px`); 87 88 wrapper = render(NetworkEventMessage({ message, serviceContainer })); 89 expect(wrapper.prop("data-indent")).toBe(`0`); 90 // there's no indent element where the indent is 0 91 expect(wrapper.find(".indent").length).toBe(0); 92 }); 93 }); 94 95 describe("XHR GET request", () => { 96 it("renders as expected", () => { 97 const message = stubPreparedMessages.get("XHR GET request"); 98 const update = stubPreparedMessages.get("XHR GET request update"); 99 const wrapper = render( 100 NetworkEventMessage({ 101 message, 102 serviceContainer, 103 networkMessageUpdate: update, 104 }) 105 ); 106 107 expect(wrapper.find(".message-body .method").text()).toBe("GET"); 108 expect(wrapper.find(".message-body .xhr").length).toBe(1); 109 expect(wrapper.find(".message-body .xhr").text()).toBe("XHR"); 110 expect(wrapper.find(".message-body .url").text()).toBe(EXPECTED_URL); 111 expect(wrapper.find(".message-body .status").text()).toMatch( 112 EXPECTED_STATUS 113 ); 114 }); 115 }); 116 117 describe("XHR POST request", () => { 118 it("renders as expected", () => { 119 const message = stubPreparedMessages.get("XHR POST request"); 120 const update = stubPreparedMessages.get("XHR POST request update"); 121 const wrapper = render( 122 NetworkEventMessage({ 123 message, 124 serviceContainer, 125 networkMessageUpdate: update, 126 }) 127 ); 128 129 expect(wrapper.find(".message-body .method").text()).toBe("POST"); 130 expect(wrapper.find(".message-body .xhr").length).toBe(1); 131 expect(wrapper.find(".message-body .xhr").text()).toBe("XHR"); 132 expect(wrapper.find(".message-body .url").length).toBe(1); 133 expect(wrapper.find(".message-body .url").text()).toBe(EXPECTED_URL); 134 expect(wrapper.find(".message-body .status").length).toBe(1); 135 expect(wrapper.find(".message-body .status").text()).toMatch( 136 EXPECTED_STATUS 137 ); 138 }); 139 }); 140 141 describe("is expandable", () => { 142 it("renders as expected", () => { 143 const message = stubPreparedMessages.get("XHR POST request"); 144 const wrapper = render( 145 NetworkEventMessage({ 146 message, 147 serviceContainer, 148 }) 149 ); 150 151 expect(wrapper.find(".message .theme-twisty")).toExist(); 152 }); 153 }); 154 });