diff --git a/README.md b/README.md index c81ff8c..b19d9e8 100644 --- a/README.md +++ b/README.md @@ -2,61 +2,88 @@ - [Экзамен: правила, рекомендации и порядок проведения](https://hexly.notion.site/d9289c18871c44508bc7c7f05a51d94f) -## Запуск и сборка приложения -Для запуска сервера и сборки приложения используйте команду: - -```bash -make run -``` +## Задание -Если вы хотите только запустить сборку, то используйте: +Ваша задача написать логику для валидации предоставленной формы и отправки данных на сервер. Шаги могут быть выполнены в любом порядке, кроме первого шага, который обязательно должен быть выполнен первым. -```bash -make start-server -``` +## Запуск и сборка приложения -Для запуска только сервера используйте команду: +Для запуска приложения используйте команду: ```bash -make start-server +make run # запускается сервер и сборка ``` -## Задание - -Дана готовая разметка. Ваша задача написать функции для валидации предоставленной формы и функцию, отвечающую за работу всего приложения в файле **src/application.js**. - ## Задача 1 -Напишите и экспортируйте по умолчанию функцию `app()`, отвечающую за работу веб-приложения. -При старте приложения должна рендериться форма внутри родительского элемента с классом `.form-container`. -Форма выглядит следующим образом. Для скорости работы, вы можете добавить ее через `innerHTML`. +В файле **src/index.js** напишите и экспортируйте по умолчанию функцию, которая добавляет форму регистрации в **index.html**. Форма должна быть добавлена как дочерний элемент по отношению к элементу с классом `form-container`. + +### Форма ```html -
-
+ +
-
-
+
+
-
- - +
+ + ``` ## Задача 2 -Форма, данная в файле **index.html**, имеет кнопку `submit` c текстом `'зарегистрироваться'`. Ваша задача состоит в том, чтобы реализовать для этой кнопки статус `disabled`, когда хотя бы одно из полей невалидно. Иначе кнопка не должна иметь атрибут `disabled`. +Добавьте в приложение логику, которая отправляет запрос на сервер и, в случае успешной отправки, выводит оповещение. + +### Условия + +- При клике на кнопку Submit, должен совершаться POST запрос, по адресу /users +- В случае успешного ответа содержимое `document.body` нужно заменить на: + +```html +

User successfully registered

`. +``` ## Задача 3 -Внутри функции `app()` напишите код, который реализует контролируемый input для каждого поля формы. Инпут должны иметь класс `is-valid`, если его содержимое валидно. Иначе input должен иметь класс `is-invalid`. +Добавьте в функцию логику, которая изменяет статус инпутов, добавляя к ним соответствующие классы. -## Задача 4 +Задача реализуется в 2 этапа: -При нажатии кнопки `зарегистрироваться` должен отправляться запрос на сервер с данными формы и в случае успешного ответа содержимое `document.body` нужно заменить на текст ответа сервера, завернутый в теги `

` таким образом: +Во-первых, необходимо написать саму логику валидации для полей *name* и *email*. Валидным именем считается любая строка с длиной больше 0, исключая пробелы. Валидной почтой считается любая строка с символом @ посередине, с любой длиной символов, исключая пробелы, до и после нее. -```html - `

Ответ сервера

`. +Во-вторых, реализовать добавление нужных стилей, при вводе данных в соответствующее поле. + +### Условия + +- Если содержимое инпута валидно, то он имеет класс `is-valid` +- Если содержимое инпута невалидно, то он имеет класс `is-invalid` +- Если в инпут еще ничего не ввели, то никаких статусов нет + +### Примеры валидных и невалидных значений: + +```javascript +/* names */ +'example' // valid +''; // invalid +' '; // invalid + +/* emails */ +'example@gmail.com' // valid +'@gmail.com' // invalid +'g@ и' // invalid +'g@s'; // valid +'gs'; // invalid ``` + +## Задача 4 + +Добавьте в функцию логику, которая валидирует инпуты и меняет статус у кнопки `Submit`. + +### Условия изменения статуса кнопки + +- Если хотя бы одно из полей невалидно, кнопка имеет статус `disabled`. +- Если все поля валидны, кнопка не имеет статус `disabled`. diff --git a/__tests__/index.test.js b/__tests__/index.test.js index abbf476..4ebfec5 100644 --- a/__tests__/index.test.js +++ b/__tests__/index.test.js @@ -33,47 +33,6 @@ test('step1', async () => { }); test('step2', async () => { - await userEvent.type(elements.nameInput, 'Petya'); - await userEvent.type(elements.emailInput, 'wrong-email'); - expect(elements.submit).toBeDisabled(); - - await userEvent.clear(elements.nameInput); - await userEvent.clear(elements.emailInput); - await userEvent.type(elements.nameInput, ' '); - await userEvent.type(elements.emailInput, 'email@right'); - expect(elements.submit).toBeDisabled(); - - await userEvent.clear(elements.nameInput); - await userEvent.clear(elements.emailInput); - await userEvent.type(elements.nameInput, 'Petya'); - await userEvent.type(elements.emailInput, 'w@s'); - expect(elements.submit).not.toBeDisabled(); -}); - -test('step3', async () => { - await userEvent.clear(elements.nameInput); - await userEvent.clear(elements.emailInput); - await userEvent.type(elements.nameInput, 'Petya'); - await userEvent.type(elements.emailInput, 'wrong-email'); - expect(elements.nameInput).toHaveClass('is-valid'); - expect(elements.emailInput).toHaveClass('is-invalid'); - expect(elements.nameInput).not.toHaveClass('is-invalid'); - expect(elements.emailInput).not.toHaveClass('is-valid'); - - await userEvent.clear(elements.nameInput); - await userEvent.clear(elements.emailInput); - await userEvent.type(elements.nameInput, ' '); - await userEvent.type(elements.emailInput, 'email@s'); - expect(elements.nameInput).toHaveClass('is-invalid'); - expect(elements.emailInput).toHaveClass('is-valid'); - - await userEvent.clear(elements.nameInput); - await userEvent.type(elements.nameInput, 's '); - expect(elements.nameInput).toHaveClass('is-valid'); -}); - - -test('step4', async () => { let scope = nock('http://localhost') .post('/users') .reply(200, { @@ -124,5 +83,48 @@ test('step4', async () => { scope.done(); }); +test('step3', async () => { + await userEvent.type(elements.nameInput, 'Petya'); + await userEvent.type(elements.emailInput, 'wrong-email'); + expect(elements.submit).toBeDisabled(); + + await userEvent.clear(elements.nameInput); + await userEvent.clear(elements.emailInput); + await userEvent.type(elements.nameInput, ' '); + await userEvent.type(elements.emailInput, 'email@right'); + expect(elements.submit).toBeDisabled(); + + await userEvent.clear(elements.nameInput); + await userEvent.clear(elements.emailInput); + await userEvent.type(elements.nameInput, 'Petya'); + await userEvent.type(elements.emailInput, 'w@s'); + expect(elements.submit).not.toBeDisabled(); +}); + +test('step4', async () => { + await userEvent.clear(elements.nameInput); + await userEvent.clear(elements.emailInput); + await userEvent.type(elements.nameInput, 'Petya'); + await userEvent.type(elements.emailInput, 'wrong-email'); + expect(elements.nameInput).toHaveClass('is-valid'); + expect(elements.emailInput).toHaveClass('is-invalid'); + expect(elements.nameInput).not.toHaveClass('is-invalid'); + expect(elements.emailInput).not.toHaveClass('is-valid'); + + await userEvent.clear(elements.nameInput); + await userEvent.clear(elements.emailInput); + await userEvent.type(elements.nameInput, ' '); + await userEvent.type(elements.emailInput, 'email@s'); + expect(elements.nameInput).toHaveClass('is-invalid'); + expect(elements.emailInput).toHaveClass('is-valid'); + + await userEvent.clear(elements.nameInput); + await userEvent.type(elements.nameInput, 's '); + expect(elements.nameInput).toHaveClass('is-valid'); +}); + + + +