From c03bb7e8cb3959fe046bcf456bf1e92ce45ca139 Mon Sep 17 00:00:00 2001
From: Steve Kinney <hello@stevekinney.net>
Date: Mon, 30 Sep 2024 10:31:43 -0600
Subject: [PATCH] Add examples for button factory

---
 examples/button-factory/package.json          | 29 +++++++++++++++++++
 examples/button-factory/src/button.js         | 10 +++++++
 examples/button-factory/src/button.test.js    | 16 ++++++++++
 .../button-factory/src/local-storage.test.js  |  9 ++++++
 examples/button-factory/src/secret-input.js   | 29 +++++++++++++++++++
 .../button-factory/src/secret-input.test.js   |  6 ++++
 examples/button-factory/vitest.config.ts      |  7 +++++
 7 files changed, 106 insertions(+)
 create mode 100644 examples/button-factory/package.json
 create mode 100644 examples/button-factory/src/button.js
 create mode 100644 examples/button-factory/src/button.test.js
 create mode 100644 examples/button-factory/src/local-storage.test.js
 create mode 100644 examples/button-factory/src/secret-input.js
 create mode 100644 examples/button-factory/src/secret-input.test.js
 create mode 100644 examples/button-factory/vitest.config.ts

diff --git a/examples/button-factory/package.json b/examples/button-factory/package.json
new file mode 100644
index 0000000..8625505
--- /dev/null
+++ b/examples/button-factory/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "button-factory",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "start": "vitest --ui",
+    "test": "vitest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stevekinney/testing-javascript.git"
+  },
+  "author": "Steve Kinney <hello@stevekinney.net>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/stevekinney/testing-javascript/issues"
+  },
+  "homepage": "https://github.com/stevekinney/testing-javascript#readme",
+  "devDependencies": {
+    "@vitest/ui": "^2.1.1",
+    "vite": "^5.4.5",
+    "vitest": "^2.1.1"
+  },
+  "dependencies": {
+    "lit": "^3.2.0",
+    "uuid": "^10.0.0"
+  }
+}
diff --git a/examples/button-factory/src/button.js b/examples/button-factory/src/button.js
new file mode 100644
index 0000000..bb2d031
--- /dev/null
+++ b/examples/button-factory/src/button.js
@@ -0,0 +1,10 @@
+export function createButton() {
+  const button = document.createElement('button');
+  button.textContent = 'Click Me';
+
+  button.addEventListener('click', () => {
+    button.textContent = 'Clicked!';
+  });
+
+  return button;
+}
diff --git a/examples/button-factory/src/button.test.js b/examples/button-factory/src/button.test.js
new file mode 100644
index 0000000..be4af3c
--- /dev/null
+++ b/examples/button-factory/src/button.test.js
@@ -0,0 +1,16 @@
+import { it, expect, describe } from 'vitest';
+import { createButton } from './button.js';
+
+describe('createButton', () => {
+  it('should create a button element', () => {
+    const button = createButton();
+    expect(button.tagName).toBe('BUTTON');
+  });
+
+  it('should have the text "Click Me"', () => {
+    const button = createButton();
+    expect(button.textContent).toBe('Click Me');
+  });
+
+  it.todo('should change the text to "Clicked!" when clicked', async () => {});
+});
diff --git a/examples/button-factory/src/local-storage.test.js b/examples/button-factory/src/local-storage.test.js
new file mode 100644
index 0000000..8a5b8ca
--- /dev/null
+++ b/examples/button-factory/src/local-storage.test.js
@@ -0,0 +1,9 @@
+import { it, expect } from 'vitest';
+
+it('should properly assign to localStorage', () => {
+  const key = 'secret';
+  const message = "It's a secret to everybody.";
+
+  localStorage.setItem(key, message);
+  expect(localStorage.getItem(key)).toBe(message);
+});
diff --git a/examples/button-factory/src/secret-input.js b/examples/button-factory/src/secret-input.js
new file mode 100644
index 0000000..d561e12
--- /dev/null
+++ b/examples/button-factory/src/secret-input.js
@@ -0,0 +1,29 @@
+export function createSecretInput() {
+  const id = 'secret-input';
+
+  const container = document.createElement('div');
+  const input = document.createElement('input');
+  const label = document.createElement('label');
+  const button = document.createElement('button');
+
+  input.id = id;
+  input.type = 'password';
+  input.name = 'secret';
+  input.placeholder = 'Enter your secret…';
+
+  label.htmlFor = id;
+  label.textContent = 'Secret';
+
+  button.id = `${id}-button`;
+  button.textContent = 'Store Secret';
+  button.addEventListener('click', () => {
+    localStorage.setItem('secret', input.value);
+    input.value = '';
+  });
+
+  container.appendChild(label);
+  container.appendChild(input);
+  container.appendChild(button);
+
+  return container;
+}
diff --git a/examples/button-factory/src/secret-input.test.js b/examples/button-factory/src/secret-input.test.js
new file mode 100644
index 0000000..1d558b8
--- /dev/null
+++ b/examples/button-factory/src/secret-input.test.js
@@ -0,0 +1,6 @@
+import { describe, expect, it, beforeEach } from 'vitest';
+import { screen } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+import { createSecretInput } from './secret-input.js';
+
+describe.todo('createSecretInput', async () => {});
diff --git a/examples/button-factory/vitest.config.ts b/examples/button-factory/vitest.config.ts
new file mode 100644
index 0000000..a9f5456
--- /dev/null
+++ b/examples/button-factory/vitest.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'happy-dom',
+  },
+});