@osimatic/helpers-js 1.5.2 → 1.5.4

package/tests/user.test.js

@@ -1,5 +1,23 @@
+/**
+ * @jest-environment jsdom
+ */
 const { Password } = require('../user');
 
+function setupFormGroup(initialValue = '') {
+	const formGroup = document.createElement('div');
+	formGroup.className = 'form-group';
+	const input = document.createElement('input');
+	input.type = 'password';
+	input.value = initialValue;
+	formGroup.appendChild(input);
+	document.body.appendChild(formGroup);
+	return { formGroup, input };
+}
+
+afterEach(() => {
+	document.body.innerHTML = '';
+});
+
 describe('Password', () => {
 	describe('getPasswordStrength', () => {
 		test('should return 0 for empty password', () => {
@@ -145,60 +163,151 @@ describe('Password', () => {
 	});
 
 	describe('displayPasswordStrength', () => {
-		let mockInput;
-		let mockFormGroup;
-		let mockDiv;
-
-		beforeEach(() => {
-			// Mock jQuery
-			mockDiv = {
-				find: jest.fn().mockReturnThis(),
-				removeClass: jest.fn().mockReturnThis(),
-				addClass: jest.fn().mockReturnThis(),
-				width: jest.fn().mockReturnThis(),
-				text: jest.fn().mockReturnThis(),
-				each: jest.fn(),
-			};
-
-			mockFormGroup = {
-				find: jest.fn((selector) => {
-					if (selector === '.password_strength_content') {
-						return {
-							remove: jest.fn(),
-						};
-					}
-					return mockDiv;
-				}),
-				append: jest.fn(),
-			};
-
-			mockInput = {
-				val: jest.fn(() => 'TestPassword1!'),
-				closest: jest.fn(() => mockFormGroup),
-				change: jest.fn(),
-				off: jest.fn().mockReturnThis(),
-				on: jest.fn(),
-			};
-
-			global.$ = jest.fn(() => mockInput);
-		});
-
-		afterEach(() => {
-			delete global.$;
-		});
-
-		test('should initialize jQuery if called', () => {
-			// This test just ensures the function can be called without throwing
-			// Actual DOM manipulation testing would require jsdom or similar
-			expect(() => {
-				// We can't fully test DOM manipulation without a proper jQuery setup
-				// Just verify the function exists and is callable
-				expect(typeof Password.displayPasswordStrength).toBe('function');
-			}).not.toThrow();
-		});
-
-		test('should be a static method', () => {
-			expect(typeof Password.displayPasswordStrength).toBe('function');
+		test('should inject .password_strength_content into form-group', () => {
+			const { input } = setupFormGroup('Test1234!');
+
+			Password.displayPasswordStrength(input);
+
+			expect(document.querySelector('.password_strength_content')).not.toBeNull();
+		});
+
+		test('should inject strength bar and text elements', () => {
+			const { input } = setupFormGroup('Test1234!');
+
+			Password.displayPasswordStrength(input);
+
+			expect(document.querySelector('.password_strength_bar')).not.toBeNull();
+			expect(document.querySelector('.password_strength_text')).not.toBeNull();
+		});
+
+		test('should inject condition list items with data-condition', () => {
+			const { input } = setupFormGroup('');
+
+			Password.displayPasswordStrength(input);
+
+			const conditions = ['length', 'uppercase', 'lowercase', 'number', 'special'];
+			conditions.forEach(cond => {
+				expect(document.querySelector(`li[data-condition="${cond}"]`)).not.toBeNull();
+			});
+		});
+
+		test('should show "Fort" and success color for strong password', () => {
+			const { input } = setupFormGroup('AbCdE12!');
+
+			Password.displayPasswordStrength(input);
+
+			const text = document.querySelector('.password_strength_text');
+			expect(text.textContent).toBe('Fort');
+			expect(text.classList.contains('text-bg-success')).toBe(true);
+		});
+
+		test('should show "Moyen" and warning color for medium password', () => {
+			const { input } = setupFormGroup('AbCd1234');
+
+			Password.displayPasswordStrength(input);
+
+			const text = document.querySelector('.password_strength_text');
+			expect(text.textContent).toBe('Moyen');
+			expect(text.classList.contains('text-bg-warning')).toBe(true);
+		});
+
+		test('should show "Faible" and danger color for weak password', () => {
+			const { input } = setupFormGroup('abcdefgh');
+
+			Password.displayPasswordStrength(input);
+
+			const text = document.querySelector('.password_strength_text');
+			expect(text.textContent).toBe('Faible');
+			expect(text.classList.contains('text-bg-danger')).toBe(true);
+		});
+
+		test('should hide strength text for empty password', () => {
+			const { input } = setupFormGroup('');
+
+			Password.displayPasswordStrength(input);
+
+			const text = document.querySelector('.password_strength_text');
+			expect(text.classList.contains('hide')).toBe(true);
+		});
+
+		test('should set strength bar width based on score', () => {
+			const { input } = setupFormGroup('AbCdE12!'); // score=5
+
+			Password.displayPasswordStrength(input);
+
+			const bar = document.querySelector('.password_strength_bar');
+			const expectedWidth = ((5 / 6) * 100) + '%';
+			expect(bar.style.width).toBe(expectedWidth);
+		});
+
+		test('should mark satisfied conditions as text-success', () => {
+			const { input } = setupFormGroup('abcdefgh'); // satisfies: length, lowercase
+
+			Password.displayPasswordStrength(input);
+
+			expect(document.querySelector('li[data-condition="length"]').classList.contains('text-success')).toBe(true);
+			expect(document.querySelector('li[data-condition="lowercase"]').classList.contains('text-success')).toBe(true);
+		});
+
+		test('should mark unsatisfied conditions as text-danger', () => {
+			const { input } = setupFormGroup('abcdefgh'); // missing: uppercase, number, special
+
+			Password.displayPasswordStrength(input);
+
+			expect(document.querySelector('li[data-condition="uppercase"]').classList.contains('text-danger')).toBe(true);
+			expect(document.querySelector('li[data-condition="number"]').classList.contains('text-danger')).toBe(true);
+			expect(document.querySelector('li[data-condition="special"]').classList.contains('text-danger')).toBe(true);
+		});
+
+		test('should update display on input event', () => {
+			const { input } = setupFormGroup('');
+
+			Password.displayPasswordStrength(input);
+
+			input.value = 'AbCdE12!';
+			input.dispatchEvent(new Event('input'));
+
+			const text = document.querySelector('.password_strength_text');
+			expect(text.textContent).toBe('Fort');
+		});
+
+		test('should update display on change event', () => {
+			const { input } = setupFormGroup('');
+
+			Password.displayPasswordStrength(input);
+
+			input.value = 'AbCdE12!';
+			input.dispatchEvent(new Event('change'));
+
+			const text = document.querySelector('.password_strength_text');
+			expect(text.textContent).toBe('Fort');
+		});
+
+		test('should replace existing .password_strength_content on re-init', () => {
+			const { input } = setupFormGroup('Test1234!');
+
+			Password.displayPasswordStrength(input);
+			Password.displayPasswordStrength(input);
+
+			expect(document.querySelectorAll('.password_strength_content').length).toBe(1);
+		});
+
+		test('should set bg-success on bar for strong password', () => {
+			const { input } = setupFormGroup('AbCdE12!');
+
+			Password.displayPasswordStrength(input);
+
+			const bar = document.querySelector('.password_strength_bar');
+			expect(bar.classList.contains('bg-success')).toBe(true);
+		});
+
+		test('should set bg-warning on bar for medium password', () => {
+			const { input } = setupFormGroup('AbCd1234');
+
+			Password.displayPasswordStrength(input);
+
+			const bar = document.querySelector('.password_strength_bar');
+			expect(bar.classList.contains('bg-warning')).toBe(true);
 		});
 	});
 });

package/user.js

@@ -15,13 +15,12 @@ class Password {
 
 	static displayPasswordStrength(input) {
 		function update(input) {
-			input = $(input);
-			const password = input.val();
-			const div = input.closest('.form-group').find('.password_strength_content');
+			const password = input.value;
+			const div = input.closest('.form-group').querySelector('.password_strength_content');
 			const score = Password.getPasswordStrength(password);
 
-			const strengthBar = div.find('.password_strength_bar');
-			const strengthText = div.find('.password_strength_text');
+			const strengthBar = div.querySelector('.password_strength_bar');
+			const strengthText = div.querySelector('.password_strength_text');
 
 			const conditions = {
 				length: password.length >= 8,
@@ -32,14 +31,10 @@ class Password {
 			};
 
 			// Mise à jour des conditions
-			div.find('.password_strength_conditions li').each(function () {
-				const cond = $(this).data('condition');
-				$(this).removeClass('text-success text-danger');
-				if (conditions[cond]) {
-					$(this).addClass('text-success');
-				} else {
-					$(this).addClass('text-danger');
-				}
+			div.querySelectorAll('.password_strength_conditions li').forEach(li => {
+				const cond = li.dataset.condition;
+				li.classList.remove('text-success', 'text-danger');
+				li.classList.add(conditions[cond] ? 'text-success' : 'text-danger');
 			});
 
 			let width = (score / 6) * 100;
@@ -50,35 +45,37 @@ class Password {
 			if (score >= 4) { color = 'warning'; text = 'Moyen'; }
 			if (score >= 5) { color = 'success'; text = 'Fort'; }
 
-			strengthBar.removeClass('bg-danger bg-warning bg-success').addClass('bg-'+color);
-			strengthText.removeClass('text-bg-danger text-bg-warning text-bg-success hide').addClass(password === '' ? 'hide' : 'text-bg-'+color);
-			strengthBar.width(width+'%');
-			strengthText.text(text);
+			strengthBar.classList.remove('bg-danger', 'bg-warning', 'bg-success');
+			strengthBar.classList.add('bg-' + color);
+			strengthText.classList.remove('text-bg-danger', 'text-bg-warning', 'text-bg-success', 'hide');
+			strengthText.classList.add(password === '' ? 'hide' : 'text-bg-' + color);
+			strengthBar.style.width = width + '%';
+			strengthText.textContent = text;
 		}
 
 		const formGroup = input.closest('.form-group');
-		formGroup.find('.password_strength_content').remove();
-		formGroup.append(''
-			+'<div class="password_strength_content mt-1">'
-			+'	<div class="progress" style="height: 6px;">'
-			+'		<div class="password_strength_bar progress-bar" role="progressbar"></div>'
-			+'	</div>'
-			+'	<div class="d-flex justify-content-between align-items-start mt-2">'
-			+'		<ul class="password_strength_conditions mb-0 ps-0" style="list-style: none;">'
-			+'			<li data-condition="length">✔ Au moins 8 caractères</li>'
-			+'			<li data-condition="uppercase">✔ Une majuscule</li>'
-			+'			<li data-condition="lowercase">✔ Une minuscule</li>'
-			+'			<li data-condition="number">✔ Un chiffre</li>'
-			+'			<li data-condition="special">✔ Un caractère spécial</li>'
-			+'		</ul>'
-			+'		<div class="ms-3 text-end">'
-			+'			<span class="badge password_strength_text" style="font-size: 10pt; font-weight: normal">New</span>'
-			+'		</div>'
-			+'	</div>'
-			+'</div>'
+		formGroup.querySelector('.password_strength_content')?.remove();
+		formGroup.insertAdjacentHTML('beforeend', ''
+			+ '<div class="password_strength_content mt-1">'
+			+ '	<div class="progress" style="height: 6px;">'
+			+ '		<div class="password_strength_bar progress-bar" role="progressbar"></div>'
+			+ '	</div>'
+			+ '	<div class="d-flex justify-content-between align-items-start mt-2">'
+			+ '		<ul class="password_strength_conditions mb-0 ps-0" style="list-style: none;">'
+			+ '			<li data-condition="length">✔ Au moins 8 caractères</li>'
+			+ '			<li data-condition="uppercase">✔ Une majuscule</li>'
+			+ '			<li data-condition="lowercase">✔ Une minuscule</li>'
+			+ '			<li data-condition="number">✔ Un chiffre</li>'
+			+ '			<li data-condition="special">✔ Un caractère spécial</li>'
+			+ '		</ul>'
+			+ '		<div class="ms-3 text-end">'
+			+ '			<span class="badge password_strength_text" style="font-size: 10pt; font-weight: normal">New</span>'
+			+ '		</div>'
+			+ '	</div>'
+			+ '</div>'
 		);
-		input.change(() => update(input));
-		input.off('input').on('input', () => update(input));
+		input.onchange = () => update(input);
+		input.oninput = () => update(input);
 		update(input);
 	}
 }