coulomb/testdrive-jsui
2
0
Fork 0
generated from coulomb/repo-seed
Code Issues Pull Requests Actions Projects Releases Wiki Activity

init: seeding the project repo

Browse Source
This commit is contained in:
Bernd Worsch
2025-11-03 20:28:51 +01:00
parent 5d56e62051
commit 63a59377b8
9 changed files with 129 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -174,3 +174,6 @@ cython_debug/
# PyPI configuration file
.pypirc
node_modules/
dist/
.vite/

17
README.md
View File

@@ -1,3 +1,16 @@
# repo-seed
# 🧪 TestDrive UI
A git repository template to bootstrap coulomb projects from.
Baseline scaffold for test-driven browser UI component development with **Lit**, **Mocha**, and **jsdom**.
### Commands
| Command | Description |
|----------|-------------|
| `npm install` | Install dependencies |
| `npm test` | Run all Mocha tests headlessly |
| `npm run dev` | Start Vite dev server and preview components |
### Folder layout
- `src/components/` — individual components (each with .js, .test.js, .stories.js)
- `test/setup.js` — shared JSDOM environment
- `vite.config.js` — dev preview config

16
package.json Normal file
View File

@@ -0,0 +1,16 @@
{
"name": "testdrive-ui",
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"test": "mocha --require test/setup.js \"src/**/*.test.js\""
},
"devDependencies": {
"chai": "^5.1.0",
"jsdom": "^24.0.0",
"lit": "^3.1.0",
"mocha": "^11.0.0",
"vite": "^6.0.0"
}
}

32
src/components/ui-edit-button/ui-edit-button.js Normal file
View File

@@ -0,0 +1,32 @@
import { LitElement, html, css } from "lit";
export class UiEditButton extends LitElement {
static styles = css`
button {
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
background: #007acc;
color: white;
border: none;
border-radius: 8px;
padding: 10px 16px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
button:hover {
background: #005fa3;
}
`;
render() {
return html`<button @click=${this._onClick}>✎ Edit</button>`;
}
_onClick() {
alert("Edit button clicked!");
}
}
customElements.define("ui-edit-button", UiEditButton);

7
src/components/ui-edit-button/ui-edit-button.stories.js Normal file
View File

@@ -0,0 +1,7 @@
import "./ui-edit-button.js";
export default {
title: "UI/Edit Button",
};
export const Default = () => `<ui-edit-button></ui-edit-button>`;

24
src/components/ui-edit-button/ui-edit-button.test.js Normal file
View File

@@ -0,0 +1,24 @@
import "../ui-edit-button/ui-edit-button.js";
describe("<ui-edit-button>", () => {
it("renders a button element", () => {
const el = document.createElement("ui-edit-button");
document.body.appendChild(el);
const button = el.shadowRoot.querySelector("button");
expect(button).to.exist;
expect(button.textContent).to.include("Edit");
});
it("triggers a click handler", () => {
const el = document.createElement("ui-edit-button");
document.body.appendChild(el);
let clicked = false;
el._onClick = () => (clicked = true);
const button = el.shadowRoot.querySelector("button");
button.click();
expect(clicked).to.be.true;
});
});

12
src/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>TestDrive UI</title>
<script type="module" src="./components/ui-edit-button/ui-edit-button.js"></script>
</head>
<body>
<h1>Hello TestDrive UI</h1>
<ui-edit-button></ui-edit-button>
</body>
</html>

12
test/setup.js Normal file
View File

@@ -0,0 +1,12 @@
import { JSDOM } from "jsdom";
import { expect } from "chai";
const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`, {
url: "http://localhost"
});
global.window = dom.window;
global.document = dom.window.document;
global.customElements = dom.window.customElements;
global.HTMLElement = dom.window.HTMLElement;
global.expect = expect;

8
vite.config.js Normal file
View File

@@ -0,0 +1,8 @@
import { defineConfig } from "vite";
export default defineConfig({
root: "src",
server: {
open: true
}
});