Add basic tests and foundations for future tests

ltvco · Jul 19, 2024 · 157f604 · 157f604
1 parent 63e2002
commit 157f604
Show file tree

Hide file tree

Showing 7 changed files with 194 additions and 0 deletions.
diff --git a/tests/1-basic.spec.ts b/tests/1-basic.spec.ts
@@ -0,0 +1,80 @@
+/*
+Basic configuration testing
+- Check if Validation can be initialized and correctly configured
+- No in-depth testing of Validation functionality
+*/
+
+import { test, expect } from '@playwright/test';
+import { Validation } from '../src/index'
+
+// Extend the window object to include the Validation class
+declare global {
+  interface Window {
+    Validation: typeof Validation;
+  }
+}
+
+test.describe('Form Validation Basic Tests', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('http://127.0.0.1:3000/tests');
+  });
+
+  // Validation class should be available and be able to be initialized
+  test('Validation can be initialized', async ({ page }) => {
+    const validationExists = await page.evaluate(() => {
+      return typeof window.Validation === 'function';
+    });
+    expect(validationExists).toBe(true);
+
+    const validationInstance = await page.evaluate(() => {
+      const validation = new window.Validation('#testForm');
+      return validation !== null && typeof validation === 'object';
+    });
+    expect(validationInstance).toBe(true);
+  });
+
+  // Basic functionality of the Validation class with a simple form
+  test('Validation basic functionality', async ({ page }) => {
+    const validationExists = await page.evaluate(() => {
+      return typeof window.Validation === 'function';
+    });
+    expect(validationExists).toBe(true);
+
+    const validationInstance = await page.evaluate(() => {
+      const validation = new window.Validation('#testForm', {
+        submitCallback: (formDataObj, form) => {
+          form?.classList.add('submitted');
+          console.log(formDataObj);
+        },
+        fields: {
+          name: {
+            rules: ['required'],
+          },
+          email: {
+            rules: ['required', 'validEmail'],
+          },
+        },
+      });
+      return validation !== null && typeof validation === 'object';
+    });
+    expect(validationInstance).toBe(true);
+
+    const submitButton = await page.$('button[type="submit"]');
+    await submitButton?.click();
+    expect(await page.isVisible('.error')).toBe(true);
+
+    const nameInput = await page.$('#name');
+    const emailInput = await page.$('#email');
+    const ageInput = await page.$('#age');
+
+    await nameInput?.fill('John Doe');
+    await emailInput?.fill('jhon.doe@some.com');
+    await ageInput?.fill('26');
+
+    expect(await page.isVisible('.error')).toBe(false);
+    expect(await page.isVisible('.valid')).toBe(true);
+
+    await submitButton?.click();
+    expect(await page.isVisible('.submitted')).toBe(true);
+  });
+});
diff --git a/tests/2-config.spec.ts b/tests/2-config.spec.ts
@@ -0,0 +1,5 @@
+/*
+Configuration options testing
+- Check if each of the configuration options can be correctly applied and each one works as expected
+- No in-depth testing of Field options here
+*/
diff --git a/tests/3-field.spec.ts b/tests/3-field.spec.ts
@@ -0,0 +1,4 @@
+/*
+Field Options Testing
+- Check if each of the field options can be correctly applied and each one works as expected
+*/
diff --git a/tests/4-methods.spec.ts b/tests/4-methods.spec.ts
@@ -0,0 +1,4 @@
+/*
+Public Methods Testing
+- Check if each of the public methods can be called and work as expected
+*/
diff --git a/tests/5-rules.spec.ts b/tests/5-rules.spec.ts
@@ -0,0 +1,4 @@
+/*
+Rules Testing
+- Check if each of the default rules can be correctly applied and each one works as expected
+*/
diff --git a/tests/6-error-handling.spec.ts b/tests/6-error-handling.spec.ts
@@ -0,0 +1,4 @@
+/*
+Error Handling Testing
+- Check if the library can handle errors gracefully, throw the correct errors, and provide the correct error messages
+*/
diff --git a/tests/index.html b/tests/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Form Validation Test</title>
+</head>
+<body>
+  <h1>Basic testing form</h1>
+  <form id="testForm">
+    <div>
+      <label for="name">Name:</label>
+      <input type="text" id="name" name="name">
+    </div>
+    <div>
+      <label for="email">Email:</label>
+      <input type="email" id="email" name="email" required>
+    </div>
+    <div>
+      <label for="age">Age:</label>
+      <input type="tel" id="age" name="age">
+    </div>
+    <button type="submit">
+      Submit
+    </button>
+  </form>
+</body>
+
+<script src="/dist/index.js"></script>
+<script>
+  // Expose Validation class globally
+  window.Validation = Validation;
+</script>
+
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+  }
+
+  h1 {
+    text-align: center;
+    margin-top: 50px;
+  }
+
+  form {
+    margin: 50px auto 0;
+    max-width: 400px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+  }
+
+  div {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 4fr;
+    align-items: center;
+    gap: 20px;
+  }
+
+  label {
+    margin-right: 10px;
+    width: 100%;
+    text-align: right;
+  }
+
+  input {
+    width: 100%;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+
+  button {
+    margin-top: 30px;
+    padding: 10px 30px;
+    border: none;
+    border-radius: 20px;
+    background-color: #007bff;
+    color: #fff;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 18px;
+  }
+
+  button:hover {
+    background-color: #0056b3;
+  }
+</style>
+</html>