1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test utils.
const expect = require("expect");
const { render, mount } = require("enzyme");
const sinon = require("sinon");
// React
const { createFactory } = require("devtools/client/shared/vendor/react");
const Provider = createFactory(require("react-redux").Provider);
const { setupStore } = require("devtools/client/webconsole/new-console-output/test/helpers");
// Components under test.
const PageError = require("devtools/client/webconsole/new-console-output/components/message-types/page-error");
const {
MESSAGE_OPEN,
MESSAGE_CLOSE,
} = require("devtools/client/webconsole/new-console-output/constants");
const { INDENT_WIDTH } = require("devtools/client/webconsole/new-console-output/components/message-indent");
// Test fakes.
const { stubPreparedMessages } = require("devtools/client/webconsole/new-console-output/test/fixtures/stubs/index");
const serviceContainer = require("devtools/client/webconsole/new-console-output/test/fixtures/serviceContainer");
describe("PageError component:", () => {
it("renders", () => {
const message = stubPreparedMessages.get("ReferenceError: asdf is not defined");
const wrapper = render(PageError({ message, serviceContainer }));
expect(wrapper.find(".message-body").text())
.toBe("ReferenceError: asdf is not defined[Learn More]");
// The stacktrace should be closed by default.
const frameLinks = wrapper.find(`.stack-trace`);
expect(frameLinks.length).toBe(0);
// There should be the location.
const locationLink = wrapper.find(`.message-location`);
expect(locationLink.length).toBe(1);
// @TODO Will likely change. See https://github.com/devtools-html/gecko-dev/issues/285
expect(locationLink.text()).toBe("test-tempfile.js:3:5");
});
it("displays a [Learn more] link", () => {
const store = setupStore([]);
const message = stubPreparedMessages.get("ReferenceError: asdf is not defined");
serviceContainer.openLink = sinon.spy();
const wrapper = mount(Provider({store},
PageError({message, serviceContainer})
));
// There should be a [Learn more] link.
const url =
"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_defined";
const learnMore = wrapper.find(".learn-more-link");
expect(learnMore.length).toBe(1);
expect(learnMore.prop("title")).toBe(url);
learnMore.simulate("click");
let call = serviceContainer.openLink.getCall(0);
expect(call.args[0]).toEqual(message.exceptionDocURL);
});
it("has a stacktrace which can be openned", () => {
const message = stubPreparedMessages.get("ReferenceError: asdf is not defined");
const wrapper = render(PageError({ message, serviceContainer, open: true }));
// There should be a collapse button.
expect(wrapper.find(".theme-twisty.open").length).toBe(1);
// There should be three stacktrace items.
const frameLinks = wrapper.find(`.stack-trace span.frame-link`);
expect(frameLinks.length).toBe(3);
});
it("toggle the stacktrace when the collapse button is clicked", () => {
const store = setupStore([]);
store.dispatch = sinon.spy();
const message = stubPreparedMessages.get("ReferenceError: asdf is not defined");
let wrapper = mount(Provider({store},
PageError({
message,
open: true,
dispatch: store.dispatch,
serviceContainer,
})
));
wrapper.find(".theme-twisty.open").simulate("click");
let call = store.dispatch.getCall(0);
expect(call.args[0]).toEqual({
id: message.id,
type: MESSAGE_CLOSE
});
wrapper = mount(Provider({store},
PageError({
message,
open: false,
dispatch: store.dispatch,
serviceContainer,
})
));
wrapper.find(".theme-twisty").simulate("click");
call = store.dispatch.getCall(1);
expect(call.args[0]).toEqual({
id: message.id,
type: MESSAGE_OPEN
});
});
it("has the expected indent", () => {
const message = stubPreparedMessages.get("ReferenceError: asdf is not defined");
const indent = 10;
let wrapper = render(PageError({ message, serviceContainer, indent}));
expect(wrapper.find(".indent").prop("style").width)
.toBe(`${indent * INDENT_WIDTH}px`);
wrapper = render(PageError({ message, serviceContainer}));
expect(wrapper.find(".indent").prop("style").width).toBe(`0`);
});
});
|
