Skip to content

Commit ff6f2cc

Browse files
authored
Merge pull request #199 from lararojasmr/master
Add dark theme support and new configuration options
2 parents d2597b0 + 90b43b0 commit ff6f2cc

File tree

6 files changed

+291
-8
lines changed

6 files changed

+291
-8
lines changed

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ or via adding a key to `package.json` named "jest-html-reporter":
9292
| **`customScriptPath`** | `string` | `null` | Path to an external script file injected into the report. |
9393
| **`dateFormat`** | `string` | `yyyy-mm-dd HH:MM:ss` | Date format for timestamps. See [documentation](https://github.com/Hargne/jest-html-reporter/wiki/Date-Format) for available formats. |
9494
| **`executionTimeWarningThreshold`** | `number` | `5` | Warn if a test suite exceeds this execution time (in seconds). |
95+
| **`hideConsoleLogOrigin`** | `boolean` | `true` | Hide `console.log` origin (stack trace) in the report (**requires** `--verbose=false`). |
9596
| **`includeConsoleLog`** | `boolean` | `false` | Include `console.log` outputs in the report (**requires** `--verbose=false`). |
9697
| **`includeFailureMsg`** | `boolean` | `false` | Show detailed error messages for failed tests. |
9798
| **`includeStackTrace`** | `boolean` | `true` | Show stack traces for failed tests. |
@@ -104,6 +105,7 @@ or via adding a key to `package.json` named "jest-html-reporter":
104105
| **`statusIgnoreFilter`** | `string` | `null` | **Comma-separated** list of statuses to exclude: `"passed"`, `"pending"`, `"failed"`. |
105106
| **`styleOverridePath`** | `string` | `null` | Path to a CSS file to override default styles. |
106107
| **`useCssFile`** | `boolean` | `false` | Link to the CSS file instead of inlining styles. |
108+
| **`theme`** | `string` | `defaultTheme` | Theme that you are able to set to report (defaultTheme or darkTheme) |
107109

108110
## Continuous Integration
109111

src/extractConfiguration.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const defaultValues: JestHTMLReporterConfiguration = {
1818
dateFormat: "yyyy-mm-dd HH:MM:ss",
1919
executionTimeWarningThreshold: 5,
2020
includeConsoleLog: false,
21+
hideConsoleLogOrigin: false,
2122
includeFailureMsg: false,
2223
includeStackTrace: true,
2324
includeSuiteFailure: false,
@@ -66,6 +67,7 @@ const typeParsers: {
6667
dateFormat: parseString,
6768
executionTimeWarningThreshold: parseNumber,
6869
includeConsoleLog: parseBoolean,
70+
hideConsoleLogOrigin: parseBoolean,
6971
includeFailureMsg: parseBoolean,
7072
includeStackTrace: parseBoolean,
7173
includeSuiteFailure: parseBoolean,

src/htmlreporter.test.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ describe("HTMLReporter", () => {
6666
await renderReportToDOM({
6767
options: {
6868
styleOverridePath: "path/to/style.css",
69+
useCssFile: true,
6970
},
7071
});
7172

src/htmlreporter.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,7 @@ class HTMLReporter {
9696
stylesheetFilePath = this.getConfigValue("styleOverridePath") as string;
9797
}
9898
// Decide whether to inline the CSS or not
99-
const inlineCSS: boolean =
100-
!this.getConfigValue("useCssFile") &&
101-
!this.getConfigValue("styleOverridePath");
99+
const inlineCSS = !this.getConfigValue("useCssFile");
102100

103101
if (inlineCSS) {
104102
const stylesheetContent = fs.readFileSync(stylesheetFilePath, "utf8");
@@ -459,11 +457,13 @@ class HTMLReporter {
459457
const logElement = consoleLogContainer.ele("div", {
460458
class: "suite-consolelog-item",
461459
});
462-
logElement.ele(
463-
"pre",
464-
{ class: "suite-consolelog-item-origin" },
465-
utils.sanitizeOutput(log.origin)
466-
);
460+
if (!this.getConfigValue("hideConsoleLogOrigin")) {
461+
logElement.ele(
462+
"pre",
463+
{ class: "suite-consolelog-item-origin" },
464+
utils.sanitizeOutput(log.origin)
465+
);
466+
}
467467
logElement.ele(
468468
"pre",
469469
{ class: "suite-consolelog-item-message" },

src/types/index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export interface JestHTMLReporterConfiguration {
2121
dateFormat: string;
2222
executionTimeWarningThreshold: number;
2323
includeConsoleLog: boolean;
24+
hideConsoleLogOrigin: boolean;
2425
includeFailureMsg: boolean;
2526
includeStackTrace: boolean;
2627
includeSuiteFailure: boolean;

style/darkTheme.css

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
:root {
2+
--text-primary: #eee;
3+
--text-secondary: #aaa;
4+
--success: #2ecc71;
5+
--success-bright: #1e3d2a;
6+
--danger: #e74c3c;
7+
--danger-bright: #3d1e1e;
8+
--warning: #f39c12;
9+
--warning-bright: #3d2c1e;
10+
--panel: #1f1f1f;
11+
--border: #444;
12+
--disabled: #666;
13+
background-color: #121212;
14+
}
15+
16+
html,
17+
body {
18+
font-family: Arial, Helvetica, sans-serif;
19+
font-size: 16px;
20+
margin: 0;
21+
padding: 0;
22+
color: var(--text-primary);
23+
}
24+
body {
25+
padding: 2rem 1rem;
26+
}
27+
.jesthtml-content {
28+
margin: 0 auto;
29+
max-width: 70rem;
30+
}
31+
header {
32+
display: flex;
33+
align-items: center;
34+
}
35+
#title {
36+
margin: 0;
37+
flex-grow: 1;
38+
}
39+
#logo {
40+
height: 4rem;
41+
}
42+
#timestamp {
43+
color: var(--text-secondary);
44+
margin-top: 0.5rem;
45+
}
46+
47+
#metadata-container {
48+
display: flex;
49+
flex-direction: column;
50+
gap: 2rem;
51+
margin-bottom: 2rem;
52+
}
53+
54+
.additional-information-container {
55+
display: flex;
56+
flex-direction: column;
57+
gap: 0.5rem;
58+
color: var(--text-secondary);
59+
}
60+
61+
/** SUMMARY */
62+
#summary {
63+
color: var(--text-primary);
64+
display: flex;
65+
font-family: monospace;
66+
font-size: 1rem;
67+
}
68+
#summary > div {
69+
margin-right: 0.5rem;
70+
background: var(--panel);
71+
padding: 1rem;
72+
min-width: 15rem;
73+
}
74+
#summary > div:last-child {
75+
margin-right: 0;
76+
}
77+
@media only screen and (max-width: 720px) {
78+
#summary {
79+
flex-direction: column;
80+
}
81+
#summary > div {
82+
margin-right: 0;
83+
margin-top: 1rem;
84+
}
85+
#summary > div:first-child {
86+
margin-top: 0;
87+
}
88+
}
89+
90+
.summary-total {
91+
font-weight: bold;
92+
margin-bottom: 0.5rem;
93+
}
94+
.summary-passed {
95+
color: var(--success);
96+
border-left: 0.4rem solid var(--success);
97+
padding-left: 0.5rem;
98+
margin-bottom: 0.15rem;
99+
}
100+
.summary-failed,
101+
.summary-obsolete-snapshots {
102+
color: var(--danger);
103+
border-left: 0.4rem solid var(--danger);
104+
padding-left: 0.5rem;
105+
margin-bottom: 0.15rem;
106+
}
107+
.summary-pending {
108+
color: var(--warning);
109+
border-left: 0.4rem solid var(--warning);
110+
padding-left: 0.5rem;
111+
margin-bottom: 0.15rem;
112+
}
113+
.summary-empty {
114+
color: var(--disabled);
115+
border-left: 0.4rem solid var(--disabled);
116+
margin-bottom: 0.15rem;
117+
}
118+
119+
.test-result {
120+
padding: 1rem;
121+
margin-bottom: 0.25rem;
122+
}
123+
.test-result:last-child {
124+
border: 0;
125+
}
126+
.test-result.passed {
127+
background-color: var(--success-bright);
128+
color: var(--success);
129+
}
130+
.test-result.failed {
131+
background-color: var(--danger-bright);
132+
color: var(--danger);
133+
}
134+
.test-result.pending {
135+
background-color: var(--warning-bright);
136+
color: var(--warning);
137+
}
138+
139+
.test-info {
140+
display: flex;
141+
justify-content: space-between;
142+
}
143+
.test-suitename {
144+
width: 20%;
145+
text-align: left;
146+
font-weight: bold;
147+
word-break: break-word;
148+
}
149+
.test-title {
150+
width: 40%;
151+
text-align: left;
152+
font-style: italic;
153+
}
154+
.test-status {
155+
width: 20%;
156+
text-align: right;
157+
}
158+
.test-duration {
159+
width: 10%;
160+
text-align: right;
161+
font-size: 0.85rem;
162+
}
163+
164+
.failureMessages {
165+
padding: 0 1rem;
166+
margin-top: 1rem;
167+
border-top: 1px dashed var(--danger);
168+
}
169+
.failureMessages.suiteFailure {
170+
border-top: none;
171+
}
172+
.failureMsg {
173+
white-space: pre-wrap;
174+
white-space: -moz-pre-wrap;
175+
white-space: -pre-wrap;
176+
white-space: -o-pre-wrap;
177+
word-wrap: break-word;
178+
}
179+
180+
.suite-container {
181+
margin-bottom: 1rem;
182+
}
183+
.suite-info {
184+
padding: 1rem;
185+
background-color: var(--panel);
186+
color: var(--text-secondary);
187+
border: 0.15rem solid;
188+
border-color: var(--panel);
189+
display: flex;
190+
align-items: center;
191+
margin-bottom: 0.25rem;
192+
}
193+
.suite-info:hover {
194+
border-color: var(--border);
195+
cursor: pointer;
196+
}
197+
.suite-info .suite-path {
198+
word-break: break-all;
199+
flex-grow: 1;
200+
font-family: monospace;
201+
font-size: 1rem;
202+
}
203+
.suite-info .suite-time {
204+
margin-left: 1rem;
205+
padding: 0.2rem 0.3rem;
206+
font-size: 0.85rem;
207+
}
208+
.suite-info .suite-time.warn {
209+
background-color: var(--danger);
210+
color: #fff;
211+
}
212+
.suite-info:before {
213+
content: "\2303";
214+
display: inline-block;
215+
margin-right: 1rem;
216+
transform: rotate(180deg) translateY(0.15rem);
217+
}
218+
.suite-container[open] .suite-info:before {
219+
transform: rotate(0deg) translateY(0.15rem);
220+
}
221+
222+
/* CONSOLE LOGS */
223+
.suite-consolelog {
224+
margin-bottom: 0.25rem;
225+
padding: 1rem;
226+
background-color: var(--panel);
227+
}
228+
.suite-consolelog-header {
229+
font-weight: bold;
230+
}
231+
.suite-consolelog-item {
232+
padding: 0.5rem;
233+
}
234+
.suite-consolelog-item pre {
235+
margin: 0.5rem 0;
236+
white-space: pre-wrap;
237+
white-space: -moz-pre-wrap;
238+
white-space: -pre-wrap;
239+
white-space: -o-pre-wrap;
240+
word-wrap: break-word;
241+
}
242+
.suite-consolelog-item-origin {
243+
color: var(--text-secondary);
244+
font-weight: bold;
245+
}
246+
.suite-consolelog-item-message {
247+
color: var(--text-primary);
248+
font-size: 1rem;
249+
padding: 0 0.5rem;
250+
}
251+
252+
/* OBSOLETE SNAPSHOTS */
253+
.suite-obsolete-snapshots {
254+
margin-bottom: 0.25rem;
255+
padding: 1rem;
256+
background-color: var(--danger-bright);
257+
color: var(--danger);
258+
}
259+
.suite-obsolete-snapshots-header {
260+
font-weight: bold;
261+
}
262+
.suite-obsolete-snapshots-item {
263+
padding: 0.5rem;
264+
}
265+
.suite-obsolete-snapshots-item pre {
266+
margin: 0.5rem 0;
267+
white-space: pre-wrap;
268+
white-space: -moz-pre-wrap;
269+
white-space: -pre-wrap;
270+
white-space: -o-pre-wrap;
271+
word-wrap: break-word;
272+
}
273+
.suite-obsolete-snapshots-item-message {
274+
color: var(--text-primary);
275+
font-size: 1rem;
276+
padding: 0 0.5rem;
277+
}

0 commit comments

Comments
 (0)