Изучение JavaScript-ориентированной разработки на примере

 <form class="test-form"> <input name="first-name" type="text" data-validation="alphabetical" /> <input name="age" type="text" data-validation="numeric" /> </form> 

Между каждым тестом мы создаем новый клон формы, чтобы устранить риск возможных побочных эффектов. Параметр true передаваемый cloneNode гарантирует, что дочерние узлы формы также будут клонированы:

 let form = document.querySelector('.test-form'); beforeEach(function () { form = form.cloneNode(true); }); 

Написание нашего первого теста

Пакет describe('the validateForm function', function () {}) будет использоваться для тестирования нашего API. Внутри внутренней функции напишите первый контрольный пример, который обеспечит, чтобы допустимые значения как для алфавитных, так и для числовых правил были признаны действительными:

 it('should validate a form with all of the possible validation types', function () { const name = form.querySelector('input[name="first-name"]'); const age = form.querySelector('input[name="age"]'); name.value = 'Bob'; age.value = '42'; const result = validateForm(form); expect(result.isValid).to.be.true; expect(result.errors.length).to.equal(0); }); 

После сохранения изменений в вашей ветке вы должны увидеть, что тест не пройден:

Теперь давайте сделаем этот тест зеленым! Помните, что мы должны постараться написать минимальное, разумное (без return true; ;!) Количество кода для выполнения теста, поэтому давайте пока не будем беспокоиться о сообщениях об ошибках.

Вот начальная реализация, которая перебирает input элементы нашей формы и проверяет значения каждого из них с помощью регулярных выражений:

 function validateForm(form) { const result = { errors: [] }; const inputs = Array.from(form.querySelectorAll('input')); let isValid = true; for (let input of inputs) { if (input.dataset.validation === 'alphabetical') { isValid = isValid && /^[az]+$/i.test(input.value); } else if (input.dataset.validation === 'numeric') { isValid = isValid && /^[0-9]+$/.test(input.value); } } result.isValid = isValid; return result; } 

Теперь вы должны увидеть, что наш тест проходит:

Обработка ошибок

Ниже нашего первого теста давайте напишем еще один, который проверяет, что массив Error возвращаемого объекта result содержит экземпляр Error с ожидаемым сообщением, когда алфавитное поле недопустимо:

 it('should return an error when a name is invalid', function () { const name = form.querySelector('input[name="first-name"]'); const age = form.querySelector('input[name="age"]'); name.value = '!!!'; age.value = '42'; const result = validateForm(form); expect(result.isValid).to.be.false; expect(result.errors[0]).to.be.instanceof(Error); expect(result.errors[0].message).to.equal('!!! is not a valid first-name value'); }); 

После сохранения вашей ветки CodePen вы должны увидеть новый неудачный тестовый пример в выводе. Давайте обновим нашу реализацию, чтобы удовлетворить оба теста:

 function validateForm(form) { const result = { get isValid() { return this.errors.length === 0; }, errors: [] }; const inputs = Array.from(form.querySelectorAll('input')); for (let input of inputs) { if (input.dataset.validation === 'alphabetical') { let isValid = /^[az]+$/i.test(input.value); if (!isValid) { result.errors.push(new Error(`${input.value} is not a valid ${input.name} value`)); } } else if (input.dataset.validation === 'numeric') { // TODO: we'll consume this in the next test let isValid = /^[0-9]+$/.test(input.value); } } return result; } 

Теперь давайте добавим тест, который утверждает, что ошибки числовой проверки корректно обрабатываются:

 it('should return an error when an age is invalid', function () { const name = form.querySelector('input[name="first-name"]'); const age = form.querySelector('input[name="age"]'); name.value = 'Greg'; age.value = 'a'; const result = validateForm(form); expect(result.isValid).to.be.false; expect(result.errors[0]).to.be.instanceof(Error); expect(result.errors[0].message).to.equal('a is not a valid age value'); }); 

Как только вы стали свидетелем неудачного теста, обновите функцию validateForm :

 } else if (input.dataset.validation === 'numeric') { let isValid = /^[0-9]+$/.test(input.value); if (!isValid) { result.errors.push(new Error(`${input.value} is not a valid ${input.name} value`)); } } 

Наконец, давайте добавим тест, чтобы убедиться, что несколько ошибок обрабатываются:

 it('should return multiple errors if more than one field is invalid', function () { const name = form.querySelector('input[name="first-name"]'); const age = form.querySelector('input[name="age"]'); name.value = '!!!'; age.value = 'a'; const result = validateForm(form); expect(result.isValid).to.be.false; expect(result.errors[0]).to.be.instanceof(Error); expect(result.errors[0].message).to.equal('!!! is not a valid first-name value'); expect(result.errors[1]).to.be.instanceof(Error); expect(result.errors[1].message).to.equal('a is not a valid age value'); }); 

 { name: 'first-name', type: 'alphabetical', value: 'Bob' } 

 describe('the createValidationQueries function', function () { it( 'should map input elements with a data-validation attribute to an array of validation objects', function () { const name = form.querySelector('input[name="first-name"]'); const age = form.querySelector('input[name="age"]'); name.value = 'Bob'; age.value = '42'; const validations = createValidationQueries([name, age]); expect(validations.length).to.equal(2); expect(validations[0].name).to.equal('first-name'); expect(validations[0].type).to.equal('alphabetical'); expect(validations[0].value).to.equal('Bob'); expect(validations[1].name).to.equal('age'); expect(validations[1].type).to.equal('numeric'); expect(validations[1].value).to.equal('42'); } ); }); 

 function createValidationQueries(inputs) { return Array.from(inputs).map(input => ({ name: input.name, type: input.dataset.validation, value: input.value })); } 

 for (let validation of createValidationQueries(form.querySelectorAll('input'))) { if (validation.type === 'alphabetical') { let isValid = /^[az]+$/i.test(validation.value); if (!isValid) { result.errors.push(new Error(`${validation.value} is not a valid ${validation.name} value`)); } } else if (validation.type === 'numeric') { let isValid = /^[0-9]+$/.test(validation.value); if (!isValid) { result.errors.push(new Error(`${validation.value} is not a valid ${validation.name} value`)); } } } 

 describe('the validateItem function', function () { const validationRules = new Map([ ['alphabetical', /^[az]+$/i] ]); it( 'should return true when the passed item is deemed valid against the supplied validation rules', function () { const validation = { type: 'alphabetical', value: 'Bob' }; const isValid = validateItem(validation, validationRules); expect(isValid).to.be.true; } ); }); 

 function validateItem(validation, validationRules) { return validationRules.get(validation.type).test(validation.value); } 

 it( 'should return false when the passed item is deemed invalid', function () { const validation = { type: 'alphabetical', value: '42' }; const isValid = validateItem(validation, validationRules); expect(isValid).to.be.false; } ); 

 it( 'should return false when the specified validation type is not found', function () { const validation = { type: 'foo', value: '42' }; const isValid = validateItem(validation, validationRules); expect(isValid).to.be.false; } ); 

 function validateItem(validation, validationRules) { if (!validationRules.has(validation.type)) { return false; } return validationRules.get(validation.type).test(validation.value); } 

 const validationRules = new Map([ ['alphabetical', /^[az]+$/i], ['numeric', /^[0-9]+$/] ]); 

 function validateForm(form) { const result = { get isValid() { return this.errors.length === 0; }, errors: [] }; for (let validation of createValidationQueries(form.querySelectorAll('input'))) { let isValid = validateItem(validation, validationRules); if (!isValid) { result.errors.push( new Error(`${validation.value} is not a valid ${validation.name} value`) ); } } return result; }