feat: Advanced Invoice Tests & Refactor

.github/workflows/playwright.yml

@@ -0,0 +1,46 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: npx playwright test
+
+      - name: Publish Test Report
+        uses: daun/playwright-report-summary@v3
+        if: always()
+        with:
+          report-file: test-results.json
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -58,5 +58,9 @@ node_modules/
 *~
 
 # Temporary files
-*.tmp
-*.temp
+*.temp
+
+# Playwright
+playwright-report/
+test-results/
+test-results.json

index.html

@@ -32,10 +32,10 @@
         href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E🧾%3C/text%3E%3C/svg%3E">
 
     <!-- Styles & Scripts -->
-    <link rel="stylesheet" href="styles.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
-    <script src="script.js" defer></script>
+    <link rel="stylesheet" href="src/css/main.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.9/pdfmake.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.9/vfs_fonts.min.js"></script>
+    <script type="module" src="src/js/main.js"></script>
 </head>
 
 <body>
@@ -204,6 +204,8 @@ <h3>Import / Export</h3>
                     <button type="button" class="primary" onclick="generateBill()">Generate Bill</button>
                     <button type="button" class="secondary" onclick="downloadPDF()" id="downloadBtn"
                         style="display:none;">Download PDF</button>
+                    <button type="button" class="secondary" onclick="shareInvoice()" id="shareBtn"
+                        style="display:none;">📤 Share</button>
                     <button type="button" class="ghost" id="resetDraftBtn">Reset Draft</button>
                 </div>
             </form>
@@ -258,13 +260,16 @@ <h3>BILL TO</h3>
             </table>
 
             <div class="invoice-totals">
-                <div class="subtotal">
-                    <p><strong>SUBTOTAL</strong> <span id="displaySubtotal"></span></p>
-                    <p id="taxRow"><strong>TAX</strong> <span id="displayTaxAmount"></span></p>
-                    <p id="discountRow"><strong>DISCOUNT</strong> <span id="displayDiscount"></span></p>
+                <div class="totals-breakdown" id="totalsBreakdown">
+                    <p id="subtotalRow"><span class="totals-label">Subtotal</span> <span id="displaySubtotal"></span>
+                    </p>
+                    <p id="taxRow"><span class="totals-label">Tax</span> <span id="displayTaxAmount"></span></p>
+                    <p id="discountRow"><span class="totals-label">Discount</span> <span id="displayDiscount"></span>
+                    </p>
                 </div>
-                <div class="balance-due">
-                    <h2>Balance Due <span id="displayBalanceDue"></span></h2>
+                <div class="total-row">
+                    <span class="total-label">Total</span>
+                    <span class="total-amount" id="displayBalanceDue"></span>
                 </div>
             </div>
 

package.json

@@ -0,0 +1,25 @@
+{
+    "name": "rebill",
+    "version": "1.0.0",
+    "description": "Open-source, privacy-first invoice generator",
+    "type": "module",
+    "scripts": {
+        "dev": "python3 -m http.server 8080",
+        "test": "playwright test",
+        "test:ui": "playwright test --ui",
+        "test:headed": "playwright test --headed",
+        "test:debug": "playwright test --debug"
+    },
+    "keywords": [
+        "invoice",
+        "generator",
+        "pdf",
+        "billing"
+    ],
+    "author": "Mahesh Rijal",
+    "license": "MIT",
+    "devDependencies": {
+        "@playwright/test": "^1.40.0",
+        "pdf-parse": "^1.1.1"
+    }
+}

playwright.config.js

@@ -0,0 +1,64 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Playwright configuration for Rebill tests
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+    testDir: './tests',
+
+    /* Run tests in parallel */
+    fullyParallel: true,
+
+    /* Fail the build on CI if you accidentally left test.only in the source code */
+    forbidOnly: !!process.env.CI,
+
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+
+    /* Opt out of parallel tests on CI */
+    workers: process.env.CI ? 1 : undefined,
+
+    /* Reporter to use */
+    reporter: [
+        ['html', { outputFolder: 'playwright-report' }],
+        ['list'],
+        ['json', { outputFile: 'test-results.json' }]
+    ],
+
+    /* Shared settings for all the projects */
+    use: {
+        /* Base URL to use in actions like `await page.goto('/')` */
+        baseURL: 'http://localhost:8080',
+
+        /* Collect trace when retrying the failed test */
+        trace: 'on-first-retry',
+
+        /* Take screenshot on failure */
+        screenshot: 'only-on-failure',
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+        {
+            name: 'firefox',
+            use: { ...devices['Desktop Firefox'] },
+        },
+        {
+            name: 'webkit',
+            use: { ...devices['Desktop Safari'] },
+        },
+    ],
+
+    /* Run your local dev server before starting the tests */
+    webServer: {
+        command: 'python3 -m http.server 8080',
+        url: 'http://localhost:8080',
+        reuseExistingServer: !process.env.CI,
+        timeout: 10000,
+    },
+});