From d4f0c7dc9e71c852728fcc2130bcf8610f30523c Mon Sep 17 00:00:00 2001 From: Dave Lockhart Date: Tue, 25 Jul 2023 13:20:27 -0400 Subject: [PATCH] feat: add support for dark theme --- src/browser/reset.js | 11 +++++++++ src/server/report/app.js | 3 +++ src/server/wtr-config.js | 3 +++ test/browser/fixture.test.js | 13 +++++++++++ test/browser/theme.vdiff.js | 44 ++++++++++++++++++++++++++++++++++++ 5 files changed, 74 insertions(+) create mode 100644 test/browser/theme.vdiff.js diff --git a/src/browser/reset.js b/src/browser/reset.js index 3566feb0..83d0d9f3 100644 --- a/src/browser/reset.js +++ b/src/browser/reset.js @@ -7,6 +7,7 @@ const DEFAULT_LANG = 'en', let currentLang = undefined, currentRtl = false, + currentTheme = undefined, currentViewportHeight = 0, currentViewportWidth = 0, shouldResetMouse = false; @@ -54,6 +55,16 @@ export async function reset(opts) { awaitNextFrame = true; } + if (opts.theme !== currentTheme) { + if (opts.theme === 'dark') { + document.body.setAttribute('data-theme', 'dark'); + } else { + document.body.removeAttribute('data-theme'); + } + currentTheme = opts.theme; + awaitNextFrame = true; + } + if (opts.viewport.height !== currentViewportHeight || opts.viewport.width !== currentViewportWidth) { await setViewport(opts.viewport).catch(() => {}); awaitNextFrame = true; diff --git a/src/server/report/app.js b/src/server/report/app.js index 8abb6896..1c5dc4b9 100644 --- a/src/server/report/app.js +++ b/src/server/report/app.js @@ -49,6 +49,7 @@ class App extends LitElement { border: 1px solid #cdd5dc; padding: 10px; text-align: center; + white-space: nowrap; } thead th { background-color: #f5f5f5; @@ -56,6 +57,8 @@ class App extends LitElement { tbody th { font-weight: normal; text-align: left; + width: 100%; + white-space: normal; } td.passed { background-color: #efffd9; diff --git a/src/server/wtr-config.js b/src/server/wtr-config.js index 1ae9bc17..4d926a7f 100644 --- a/src/server/wtr-config.js +++ b/src/server/wtr-config.js @@ -95,6 +95,9 @@ export class WTRConfig { line-height: 1.4rem; padding: 30px; } + body[data-theme="dark"] { + background-color: #000000; + } diff --git a/test/browser/fixture.test.js b/test/browser/fixture.test.js index a305f5b2..e31e5e38 100644 --- a/test/browser/fixture.test.js +++ b/test/browser/fixture.test.js @@ -157,6 +157,19 @@ describe('fixture', () => { expect(window.innerWidth).to.equal(800); }); + it('should use no theme by default', async() => { + await fixture(html`

hello

`); + expect(document.body.hasAttribute('data-theme')).to.be.false; + }); + + it('should reset theme', async() => { + const elem = html`

hello

`; + await fixture(elem, { theme: 'dark' }); + expect(document.body.getAttribute('data-theme')).to.equal('dark'); + await fixture(elem); + expect(document.body.hasAttribute('data-theme')).to.be.false; + }); + }); describe('waitForElem', () => { diff --git a/test/browser/theme.vdiff.js b/test/browser/theme.vdiff.js new file mode 100644 index 00000000..69cc462f --- /dev/null +++ b/test/browser/theme.vdiff.js @@ -0,0 +1,44 @@ +import { css, html, LitElement } from 'lit'; +import { defineCE, expect, fixture } from '../../src/browser/index.js'; + +const themeTag = defineCE( + class extends LitElement { + static get properties() { + return { + theme: { reflect: true, type: String } + }; + } + static get styles() { + return css` + :host { + border: 1px solid black; + display: inline-block; + text-align: center; + padding: 20px; + } + :host([theme="dark"]) { + border-color: white; + color: white; + } + `; + } + render() { + return html`Theme: ${this.theme}`; + } + } +); + +describe('theme', () => { + [ + 'normal', + 'dark' + ].forEach(name => { + it(name, async() => { + const elem = await fixture( + `<${themeTag} theme="${name}">`, + { theme: name === 'normal' ? undefined : name } + ); + await expect(elem).to.be.golden(); + }); + }); +});