Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding testing to the library #9

Merged
merged 3 commits into from
Jul 31, 2024
Merged

Adding testing to the library #9

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
568393f
Minor improvements to typing
Jul 19, 2024
63e2002
Setup Playwright
Jul 19, 2024
157f604
Add basic tests and foundations for future tests
Jul 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions tests/1-basic.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
});
});
5 changes: 5 additions & 0 deletions tests/2-config.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/*
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can add these files until we have actual tests there.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The idea to adding these is so if other people come in and help, they don't have to take the decision on how to approach testing, which could lead to different people having different approaches in mind and then having to do extra work with the consolidation of tests and maybe conflicts.

This way each person could potentially just work on a single file without stepping on anyone elses' toes and the standard architecture of the tests is already there.

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
*/
4 changes: 4 additions & 0 deletions tests/3-field.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/*
Field Options Testing
- Check if each of the field options can be correctly applied and each one works as expected
*/
4 changes: 4 additions & 0 deletions tests/4-methods.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/*
Public Methods Testing
- Check if each of the public methods can be called and work as expected
*/
4 changes: 4 additions & 0 deletions tests/5-rules.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/*
Rules Testing
- Check if each of the default rules can be correctly applied and each one works as expected
*/
4 changes: 4 additions & 0 deletions tests/6-error-handling.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
*/
93 changes: 93 additions & 0 deletions tests/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading