rewrite

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
-    <form id="registrationForm">
-      <div class="form-group">
+<form id="registrationForm">
+    <div class="form-group">
         <label for="inputName">Name</label>
         <input type="text" class="form-control" id="inputName" placeholder="Введите ваше имя" name="name" required>
-      </div>
-      <div class="form-group">
+    </div>
+    <div class="form-group">
         <label for="inputEmail">Email</label>
         <input type="text" class="form-control" id="inputEmail" placeholder="Введите email" name="email" required>
-      </div>
-      <input type="submit" value="Submit" class="btn btn-primary" disabled>
-    </form>
+    </div>
+    <input type="submit" value="Submit" class="btn btn-primary">
+</form>
 ```
 
 ## Задача 2
 
-Форма, данная в файле **index.html**, имеет кнопку `submit` c текстом `'зарегистрироваться'`. Ваша задача состоит в том, чтобы реализовать для этой кнопки статус `disabled`, когда хотя бы одно из полей невалидно. Иначе кнопка не должна иметь атрибут `disabled`.
+Добавьте в приложение логику, которая отправляет запрос на сервер и, в случае успешной отправки, выводит оповещение.
+
+### Условия
+
+- При клике на кнопку Submit, должен совершаться POST запрос, по адресу /users
+- В случае успешного ответа содержимое `document.body` нужно заменить на:
+
+```html
+<h3 class="mb-4">User successfully registered</h3>`.
+```
 
 ## Задача 3
 
-Внутри функции `app()` напишите код, который реализует контролируемый input для каждого поля формы. Инпут должны иметь класс `is-valid`, если его содержимое валидно. Иначе input должен иметь класс `is-invalid`.
+Добавьте в функцию логику, которая изменяет статус инпутов, добавляя к ним соответствующие классы.
 
-## Задача 4
+Задача реализуется в 2 этапа:
 
-При нажатии кнопки `зарегистрироваться` должен отправляться запрос на сервер с данными формы и в случае успешного ответа содержимое `document.body` нужно заменить на текст ответа сервера, завернутый в теги `<p></p>` таким образом:
+Во-первых, необходимо написать саму логику валидации для полей *name* и *email*. Валидным именем считается любая строка с длиной больше 0, исключая пробелы. Валидной почтой считается любая строка с символом @ посередине, с любой длиной символов, исключая пробелы, до и после нее.
 
-```html
- `<p>Ответ сервера</p>`.
+Во-вторых, реализовать добавление нужных стилей, при вводе данных в соответствующее поле.
+
+### Условия
+
+- Если содержимое инпута валидно, то он имеет класс `is-valid`
+- Если содержимое инпута невалидно, то он имеет класс `is-invalid`
+- Если в инпут еще ничего не ввели, то никаких статусов нет
+
+### Примеры валидных и невалидных значений:
+
+```javascript
+/* names */
+'example' // valid
+''; // invalid
+'    '; // invalid
+
+/* emails */
+'[email protected]' // valid
+'@gmail.com' // invalid
+'g@ и' // invalid
+'g@s'; // valid
+'gs'; // invalid
 ```
+
+## Задача 4
+
+Добавьте в функцию логику, которая валидирует инпуты и меняет статус у кнопки `Submit`.
+
+### Условия изменения статуса кнопки
+
+- Если хотя бы одно из полей невалидно, кнопка имеет статус `disabled`.
+- Если все поля валидны, кнопка не имеет статус `disabled`.

__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');
+});
+
+
+
+