Skip to content

Add dark theme support and new configuration options #199

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Hargne merged 17 commits into from
Jun 25, 2025
Merged

Add dark theme support and new configuration options #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7d9d07b
Add dark theme support and new configuration options
lararojasmr May 30, 2025
777bf68
Add "prepare" script to package.json
lararojasmr May 30, 2025
4337e7d
Update build and prepare scripts to skip tests
lararojasmr May 30, 2025
7a185f7
Remove yarn.lock file
lararojasmr May 30, 2025
211f9e5
Rollback: Remove yarn.lock file
lararojasmr Jun 18, 2025
82ed3a3
Rename `includeConsoleLogOrigin` to `hideConsoleLogOrigin` and update…
lararojasmr Jun 19, 2025
8c525d4
As request a Prettier with default configuration was applied to all c…
lararojasmr Jun 19, 2025
73a9ffa
Revert "As request a Prettier with default configuration was applied …
Hargne Jun 19, 2025
01e0e28
Fixed invalid formatting
Hargne Jun 19, 2025
27228f0
Add `useCssFile` option to HTML reporter tests
lararojasmr Jun 21, 2025
e478ee9
Merge remote-tracking branch 'origin/master'
lararojasmr Jun 21, 2025
a646daa
Merge pull request #202 from Hargne/dev
Hargne Jun 21, 2025
9bf24a7
Rename table column to `hideConsoleLogOrigin` and adjust README forma…
lararojasmr Jun 23, 2025
ebb1483
Merge branch 'master' into master
lararojasmr Jun 23, 2025
07fd067
Update README.md
Hargne Jun 23, 2025
aceae05
Update build script to include test step before bundling
lararojasmr Jun 24, 2025
90b43b0
Merge remote-tracking branch 'origin/master'
lararojasmr Jun 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ or via adding a key to `package.json` named "jest-html-reporter":
| **`customScriptPath`** | `string` | `null` | Path to an external script file injected into the report. |
| **`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. |
| **`executionTimeWarningThreshold`** | `number` | `5` | Warn if a test suite exceeds this execution time (in seconds). |
| **`hideConsoleLogOrigin`** | `boolean` | `true` | Hide `console.log` origin (stack trace) in the report (**requires** `--verbose=false`). |
| **`includeConsoleLog`** | `boolean` | `false` | Include `console.log` outputs in the report (**requires** `--verbose=false`). |
| **`includeFailureMsg`** | `boolean` | `false` | Show detailed error messages for failed tests. |
| **`includeStackTrace`** | `boolean` | `true` | Show stack traces for failed tests. |
Expand All @@ -104,6 +105,7 @@ or via adding a key to `package.json` named "jest-html-reporter":
| **`statusIgnoreFilter`** | `string` | `null` | **Comma-separated** list of statuses to exclude: `"passed"`, `"pending"`, `"failed"`. |
| **`styleOverridePath`** | `string` | `null` | Path to a CSS file to override default styles. |
| **`useCssFile`** | `boolean` | `false` | Link to the CSS file instead of inlining styles. |
| **`theme`** | `string` | `defaultTheme` | Theme that you are able to set to report (defaultTheme or darkTheme) |

## Continuous Integration

Expand Down
2 changes: 2 additions & 0 deletions src/extractConfiguration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const defaultValues: JestHTMLReporterConfiguration = {
dateFormat: "yyyy-mm-dd HH:MM:ss",
executionTimeWarningThreshold: 5,
includeConsoleLog: false,
hideConsoleLogOrigin: false,
includeFailureMsg: false,
includeStackTrace: true,
includeSuiteFailure: false,
Expand Down Expand Up @@ -66,6 +67,7 @@ const typeParsers: {
dateFormat: parseString,
executionTimeWarningThreshold: parseNumber,
includeConsoleLog: parseBoolean,
hideConsoleLogOrigin: parseBoolean,
includeFailureMsg: parseBoolean,
includeStackTrace: parseBoolean,
includeSuiteFailure: parseBoolean,
Expand Down
1 change: 1 addition & 0 deletions src/htmlreporter.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ describe("HTMLReporter", () => {
await renderReportToDOM({
options: {
styleOverridePath: "path/to/style.css",
useCssFile: true,
},
});

Expand Down
16 changes: 8 additions & 8 deletions src/htmlreporter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,9 +96,7 @@ class HTMLReporter {
stylesheetFilePath = this.getConfigValue("styleOverridePath") as string;
}
// Decide whether to inline the CSS or not
const inlineCSS: boolean =
!this.getConfigValue("useCssFile") &&
!this.getConfigValue("styleOverridePath");
const inlineCSS = !this.getConfigValue("useCssFile");

if (inlineCSS) {
const stylesheetContent = fs.readFileSync(stylesheetFilePath, "utf8");
Expand Down Expand Up @@ -459,11 +457,13 @@ class HTMLReporter {
const logElement = consoleLogContainer.ele("div", {
class: "suite-consolelog-item",
});
logElement.ele(
"pre",
{ class: "suite-consolelog-item-origin" },
utils.sanitizeOutput(log.origin)
);
if (!this.getConfigValue("hideConsoleLogOrigin")) {
logElement.ele(
"pre",
{ class: "suite-consolelog-item-origin" },
utils.sanitizeOutput(log.origin)
);
}
logElement.ele(
"pre",
{ class: "suite-consolelog-item-message" },
Expand Down
1 change: 1 addition & 0 deletions src/types/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export interface JestHTMLReporterConfiguration {
dateFormat: string;
executionTimeWarningThreshold: number;
includeConsoleLog: boolean;
hideConsoleLogOrigin: boolean;
includeFailureMsg: boolean;
includeStackTrace: boolean;
includeSuiteFailure: boolean;
Expand Down
277 changes: 277 additions & 0 deletions style/darkTheme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,277 @@
:root {
--text-primary: #eee;
--text-secondary: #aaa;
--success: #2ecc71;
--success-bright: #1e3d2a;
--danger: #e74c3c;
--danger-bright: #3d1e1e;
--warning: #f39c12;
--warning-bright: #3d2c1e;
--panel: #1f1f1f;
--border: #444;
--disabled: #666;
background-color: #121212;
}

html,
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
color: var(--text-primary);
}
body {
padding: 2rem 1rem;
}
.jesthtml-content {
margin: 0 auto;
max-width: 70rem;
}
header {
display: flex;
align-items: center;
}
#title {
margin: 0;
flex-grow: 1;
}
#logo {
height: 4rem;
}
#timestamp {
color: var(--text-secondary);
margin-top: 0.5rem;
}

#metadata-container {
display: flex;
flex-direction: column;
gap: 2rem;
margin-bottom: 2rem;
}

.additional-information-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
color: var(--text-secondary);
}

/** SUMMARY */
#summary {
color: var(--text-primary);
display: flex;
font-family: monospace;
font-size: 1rem;
}
#summary > div {
margin-right: 0.5rem;
background: var(--panel);
padding: 1rem;
min-width: 15rem;
}
#summary > div:last-child {
margin-right: 0;
}
@media only screen and (max-width: 720px) {
#summary {
flex-direction: column;
}
#summary > div {
margin-right: 0;
margin-top: 1rem;
}
#summary > div:first-child {
margin-top: 0;
}
}

.summary-total {
font-weight: bold;
margin-bottom: 0.5rem;
}
.summary-passed {
color: var(--success);
border-left: 0.4rem solid var(--success);
padding-left: 0.5rem;
margin-bottom: 0.15rem;
}
.summary-failed,
.summary-obsolete-snapshots {
color: var(--danger);
border-left: 0.4rem solid var(--danger);
padding-left: 0.5rem;
margin-bottom: 0.15rem;
}
.summary-pending {
color: var(--warning);
border-left: 0.4rem solid var(--warning);
padding-left: 0.5rem;
margin-bottom: 0.15rem;
}
.summary-empty {
color: var(--disabled);
border-left: 0.4rem solid var(--disabled);
margin-bottom: 0.15rem;
}

.test-result {
padding: 1rem;
margin-bottom: 0.25rem;
}
.test-result:last-child {
border: 0;
}
.test-result.passed {
background-color: var(--success-bright);
color: var(--success);
}
.test-result.failed {
background-color: var(--danger-bright);
color: var(--danger);
}
.test-result.pending {
background-color: var(--warning-bright);
color: var(--warning);
}

.test-info {
display: flex;
justify-content: space-between;
}
.test-suitename {
width: 20%;
text-align: left;
font-weight: bold;
word-break: break-word;
}
.test-title {
width: 40%;
text-align: left;
font-style: italic;
}
.test-status {
width: 20%;
text-align: right;
}
.test-duration {
width: 10%;
text-align: right;
font-size: 0.85rem;
}

.failureMessages {
padding: 0 1rem;
margin-top: 1rem;
border-top: 1px dashed var(--danger);
}
.failureMessages.suiteFailure {
border-top: none;
}
.failureMsg {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

.suite-container {
margin-bottom: 1rem;
}
.suite-info {
padding: 1rem;
background-color: var(--panel);
color: var(--text-secondary);
border: 0.15rem solid;
border-color: var(--panel);
display: flex;
align-items: center;
margin-bottom: 0.25rem;
}
.suite-info:hover {
border-color: var(--border);
cursor: pointer;
}
.suite-info .suite-path {
word-break: break-all;
flex-grow: 1;
font-family: monospace;
font-size: 1rem;
}
.suite-info .suite-time {
margin-left: 1rem;
padding: 0.2rem 0.3rem;
font-size: 0.85rem;
}
.suite-info .suite-time.warn {
background-color: var(--danger);
color: #fff;
}
.suite-info:before {
content: "\2303";
display: inline-block;
margin-right: 1rem;
transform: rotate(180deg) translateY(0.15rem);
}
.suite-container[open] .suite-info:before {
transform: rotate(0deg) translateY(0.15rem);
}

/* CONSOLE LOGS */
.suite-consolelog {
margin-bottom: 0.25rem;
padding: 1rem;
background-color: var(--panel);
}
.suite-consolelog-header {
font-weight: bold;
}
.suite-consolelog-item {
padding: 0.5rem;
}
.suite-consolelog-item pre {
margin: 0.5rem 0;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
.suite-consolelog-item-origin {
color: var(--text-secondary);
font-weight: bold;
}
.suite-consolelog-item-message {
color: var(--text-primary);
font-size: 1rem;
padding: 0 0.5rem;
}

/* OBSOLETE SNAPSHOTS */
.suite-obsolete-snapshots {
margin-bottom: 0.25rem;
padding: 1rem;
background-color: var(--danger-bright);
color: var(--danger);
}
.suite-obsolete-snapshots-header {
font-weight: bold;
}
.suite-obsolete-snapshots-item {
padding: 0.5rem;
}
.suite-obsolete-snapshots-item pre {
margin: 0.5rem 0;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
.suite-obsolete-snapshots-item-message {
color: var(--text-primary);
font-size: 1rem;
padding: 0 0.5rem;
}
⚡