Merge pull request #1 from rbonestell/feat/add-and-automate-unit-tests

feat: Unit tests + compatibility enhancements
rbonestell · Feb 15, 2025 · 920ae69 · 920ae69
2 parents f327b7f + e6d1b0c
commit 920ae69
Show file tree

Hide file tree

Showing 9 changed files with 6,508 additions and 136 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,23 @@
+name: Test 🧪
+on:
+  workflow_dispatch:
+  pull_request:
+  push:
+    branches:
+    - main
+    paths:
+      - 'src/**'
+      - '.github/workflows/test.yml'
+      - 'package.json'
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22.x'
+          cache: 'npm'
+      - run: npm install
+      - name: Run Unit Tests 🧪
+        run: npm run test
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "jest.runMode": "on-demand"
+}
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
-# Retroify.js   ![NPM Version](https://img.shields.io/npm/v/retroify.js) ![License](https://img.shields.io/github/license/rbonestell/retroify.js)
+# Retroify.js   [![NPM Version](https://img.shields.io/npm/v/retroify.js?logo=npm&logoColor=white)](https://www.npmjs.com/package/retroify.js) [![License](https://img.shields.io/github/license/rbonestell/retroify.js)](https://github.com/rbonestell/retroify.js/blob/main/LICENSE) [![GitHub Copilot](https://img.shields.io/badge/GitHub-Copilot-000?logo=githubcopilot&logoSize=auto)](#)
+
 
 Add instant retro 8-bit styling to any website with a single line of JavaScript. Retroify.js transforms your modern web elements into a nostalgic, pixelelated interface inspired by classic video games.
 

diff --git a/demo/index.html b/demo/index.html
@@ -10,18 +10,23 @@
     <style>
         .container { padding: 2rem; }
         .demo-section { margin: 2rem 0; padding: 1rem; border: 1px solid #ddd; }
-        .btn.github { background: #333333; color: #ffffff; }
+        .btn.github { background: #333333; color: #ffffff; white-space: nowrap; }
         .btn.github:hover { background: #222222; color: #ffffff; }
         .btn.github:active { background: #111111; color: #ffffff; }
     </style>
 </head>
 <body>
     <div class="container">
         <div style="display: flex; justify-content: space-between; align-items: center">
-            <h1>Retroify.js Demo</h1>
-            <span><a href="https://github.com/rbonestell/retroify.js" class="btn github">View on GitHub <i class="fab fa-github"></i></a></span>
+            <div>
+                <h1>Retroify.js Demo</h1>
+                <p>This demo shows how Retroify.js works with various HTML elements and Bootstrap components.</p>
+            </div>
+            <div>
+                <a href="https://github.com/rbonestell/retroify.js" class="btn github">View on GitHub <i class="fab fa-github"></i></a>
+            </div>
         </div>
-        <p>This demo shows how Retroify.js works with various HTML elements and Bootstrap components.</p>
+
         <button onclick="retroify.toggle()" class="btn btn-primary" aria-pressed="false">Toggle Retroification</button>
         <button onclick="retroify.toggleScanlines()" class="btn btn-secondary" aria-pressed="false">Toggle Scanlines</button>
 
@@ -61,7 +66,7 @@ <h2>Bootstrap Cards</h2>
                 <div class="col-md-4">
                     <div class="card">
                         <div class="card-body">
-                            <h5 class="card-title">Card Title</h5>
+                            <h4 class="card-title">Card Title</h4>
                             <p class="card-text">Some quick example text for the card.</p>
                             <button class="btn btn-primary">Go somewhere</button>
                         </div>
@@ -70,6 +75,18 @@ <h5 class="card-title">Card Title</h5>
             </div>
         </div>
 
+        <div class="demo-section">
+            <h2>Dynamic Controls</h2>
+            <p>This section demonstrates how Retroify.js handles dynamically added and removed elements.</p>
+            <div class="mb-3">
+                <button class="btn btn-success" onclick="addElement()">Add Element</button>
+                <button class="btn btn-danger" onclick="removeElement()">Remove Last Element</button>
+            </div>
+            <div id="dynamic-elements" class="mt-3">
+                <!-- Dynamic elements will be added here -->
+            </div>
+        </div>
+
         <div class="demo-section">
             <h2>Tables</h2>
             <table class="table">
@@ -115,6 +132,47 @@ <h2>Links</h2>
             </p>
             <p>Try hovering over these links to see the 8-bit hover effect!</p>
         </div>
+
+        <div class="demo-section">
+            <h2>Font Awesome Icons</h2>
+            <p>This section demonstrates how Retroify.js works with Font Awesome icons in various contexts.</p>
+
+            <div class="mb-3">
+                <button class="btn btn-primary">
+                    <i class="fas fa-save"></i> Save Changes
+                </button>
+                <button class="btn btn-danger">
+                    <i class="fas fa-trash"></i> Delete Item
+                </button>
+            </div>
+
+            <div class="mb-3">
+                <label class="form-label">
+                    <i class="fas fa-user"></i> Username
+                </label>
+                <div class="input-group">
+                    <span class="input-group-text">
+                        <i class="fas fa-at"></i>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Enter username">
+                </div>
+            </div>
+
+            <div class="alert alert-info">
+                <i class="fas fa-info-circle"></i>
+                This is an informational message with an icon
+            </div>
+
+            <div class="mb-3">
+                <span class="badge bg-success">
+                    <i class="fas fa-check"></i> Complete
+                </span>
+                <span class="badge bg-warning text-dark">
+                    <i class="fas fa-clock"></i> Pending
+                </span>
+            </div>
+        </div>
+
     </div>
     <script>
         // Event listeners
@@ -124,6 +182,34 @@ <h2>Links</h2>
                 console.log(`Retroify.js ${event} to:`, e.detail.target);
             });
         });
+
+        // Dynamic element handlers
+        let elementCounter = 0;
+
+        function addElement() {
+            const container = document.getElementById('dynamic-elements');
+            const element = document.createElement('div');
+            element.className = 'mb-2';
+            elementCounter++;
+            element.innerHTML = `
+                <div class="card">
+                    <div class="card-body">
+                        <h4 class="card-title">Dynamic Element ${elementCounter}</h4>
+                        <p class="card-text">This element was added dynamically.</p>
+                        <button class="btn btn-primary">Dynamic Button</button>
+                    </div>
+                </div>
+            `;
+            container.appendChild(element);
+        }
+
+        function removeElement() {
+            const container = document.getElementById('dynamic-elements');
+            if (container.lastChild) {
+                container.removeChild(container.lastChild);
+                elementCounter--;
+            }
+        }
     </script>
 </body>
 </html>