From f827d6c82eda9fa4f11621b1326a06d29466518d Mon Sep 17 00:00:00 2001
From: javascriptru <67475495+jsru-1@users.noreply.github.com>
Date: Tue, 24 Dec 2024 11:10:52 +0300
Subject: [PATCH] =?UTF-8?q?Added=20task=20=D0=9E=D1=82=D0=BC=D0=B5=D1=87?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=BD=D1=8B=D0=B5=20Email-=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../40-marked-emails/MarkedEmailsApp.css      |  3 ++
 .../40-marked-emails/MarkedEmailsApp.js       | 52 +++++++++++++++++++
 02-basics-2/40-marked-emails/README.md        | 29 +++++++++++
 .../__tests__/marked-emails.test.ts           | 43 +++++++++++++++
 02-basics-2/40-marked-emails/index.html       | 16 ++++++
 02-basics-2/40-marked-emails/main.js          |  6 +++
 02-basics-2/40-marked-emails/tsconfig.json    | 11 ++++
 7 files changed, 160 insertions(+)
 create mode 100644 02-basics-2/40-marked-emails/MarkedEmailsApp.css
 create mode 100644 02-basics-2/40-marked-emails/MarkedEmailsApp.js
 create mode 100644 02-basics-2/40-marked-emails/README.md
 create mode 100644 02-basics-2/40-marked-emails/__tests__/marked-emails.test.ts
 create mode 100644 02-basics-2/40-marked-emails/index.html
 create mode 100644 02-basics-2/40-marked-emails/main.js
 create mode 100644 02-basics-2/40-marked-emails/tsconfig.json

diff --git a/02-basics-2/40-marked-emails/MarkedEmailsApp.css b/02-basics-2/40-marked-emails/MarkedEmailsApp.css
new file mode 100644
index 0000000..274a3fb
--- /dev/null
+++ b/02-basics-2/40-marked-emails/MarkedEmailsApp.css
@@ -0,0 +1,3 @@
+.marked {
+  color: #efc14e;
+}
diff --git a/02-basics-2/40-marked-emails/MarkedEmailsApp.js b/02-basics-2/40-marked-emails/MarkedEmailsApp.js
new file mode 100644
index 0000000..8de9625
--- /dev/null
+++ b/02-basics-2/40-marked-emails/MarkedEmailsApp.js
@@ -0,0 +1,52 @@
+import { computed, defineComponent, ref } from 'vue'
+
+// Значения взяты из https://jsonplaceholder.typicode.com/comments
+export const emails = [
+  'Eliseo@gardner.biz',
+  'Jayne_Kuhic@sydney.com',
+  'Nikita@garfield.biz',
+  'Lew@alysha.tv',
+  'Hayden@althea.biz',
+  'Presley.Mueller@myrl.com',
+  'Dallas@ole.me',
+  'Mallory_Kunze@marie.org',
+  'Meghan_Littel@rene.us',
+  'Carmen_Keeling@caroline.name',
+  'Veronica_Goodwin@timmothy.net',
+  'Oswald.Vandervort@leanne.org',
+  'Kariane@jadyn.tv',
+  'Nathan@solon.io',
+  'Maynard.Hodkiewicz@roberta.com',
+  'Christine@ayana.info',
+  'Preston_Hudson@blaise.tv',
+  'Vincenza_Klocko@albertha.name',
+  'Madelynn.Gorczany@darion.biz',
+  'Mariana_Orn@preston.org',
+  'Noemie@marques.me',
+  'Khalil@emile.co.uk',
+  'Sophia@arianna.co.uk',
+  'Jeffery@juwan.us',
+  'Isaias_Kuhic@jarrett.net',
+]
+
+export default defineComponent({
+  name: 'MarkedEmailsApp',
+
+  setup() {},
+
+  template: `
+    <div>
+      <div class="form-group">
+        <input type="search" aria-label="Search" />
+      </div>
+      <ul aria-label="Emails">
+        <li>
+          Eliseo@gardner.biz
+        </li>
+        <li class="marked">
+          Jayne_Kuhic@sydney.com
+        </li>
+      </ul>
+    </div>
+  `,
+})
diff --git a/02-basics-2/40-marked-emails/README.md b/02-basics-2/40-marked-emails/README.md
new file mode 100644
index 0000000..f276777
--- /dev/null
+++ b/02-basics-2/40-marked-emails/README.md
@@ -0,0 +1,29 @@
+# Отмеченные Email-ы
+
+👷🏻 _Задача нормальной сложности_\
+📚 _Закрепление материала_
+
+<!--start_statement-->
+
+Требуется создать Vue приложение, которое выводит список Email-ов из массива `emails` и позволяет выполнять поиск по
+этому списку. Адреса в списке, содержащие строку поиска, должны выделяться классом `.marked`.
+
+_**Примечание:** задачу можно решить, проверяя Email прямо в шаблоне. Но в этом случае решение получается менее декларативным, возможно, с перегруженным шаблоном. Попробуйте
+использовать **вычисляемое свойство** `computed` так, чтобы в шаблоне можно было сразу вывести Email и знать, требуется ли ему маркировка._
+
+### Результат
+
+<img src="https://i.imgur.com/DA8l8pP.gif" alt="Example">
+
+<!--end_statement-->
+
+---
+
+### Инструкция
+
+📝 Для решения задачи отредактируйте файл: `MarkedEmailsApp.js`.
+
+🚀 Команда запуска для ручного тестирования: `npm run dev`\
+Приложение будет доступно на [http://localhost:5173/02-basics-2/40-marked-emails/](http://localhost:5173/02-basics-2/40-marked-emails/).
+
+✅ Доступно автоматическое тестирование: `npm test marked-emails`
diff --git a/02-basics-2/40-marked-emails/__tests__/marked-emails.test.ts b/02-basics-2/40-marked-emails/__tests__/marked-emails.test.ts
new file mode 100644
index 0000000..7582fe0
--- /dev/null
+++ b/02-basics-2/40-marked-emails/__tests__/marked-emails.test.ts
@@ -0,0 +1,43 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { VueWrapper, DOMWrapper } from '@vue/test-utils'
+import MarkedEmailsApp, { emails } from '@/MarkedEmailsApp.js'
+
+describe('MarkedEmailsApp', () => {
+  let wrapper: VueWrapper
+  let input: DOMWrapper<HTMLInputElement>
+  let list: DOMWrapper<HTMLElement>[]
+
+  beforeEach(() => {
+    wrapper = mount(MarkedEmailsApp)
+    input = wrapper.find('input[aria-label="Search"]')
+    list = wrapper.findAll('ul[aria-label="Emails"] li')
+  })
+
+  it('должно рендерить поле поиска и список Email-ов', () => {
+    expect(wrapper.exists()).toBe(true)
+    expect(list).toHaveLength(emails.length)
+    for (let i = 0; i < emails.length; i++) {
+      expect(list[i].text()).toBe(emails[i])
+    }
+  })
+
+  it('не должно отмечать ни один email классом маркировки .marked, когда запрос поиска пустой', async () => {
+    expect(list.every(item => item.classes('marked'))).toBeFalsy()
+  })
+
+  it('должно отмечать Dallas@ole.me и Mallory_Kunze@marie.org классом маркировки .marked при поиске "all"', async () => {
+    await input.setValue('all')
+    expect(list).toHaveLength(emails.length)
+    for (let i = 0; i < emails.length; i++) {
+      const shouldMark = emails[i].includes('all')
+      expect(list[i].classes('marked')).toBe(shouldMark)
+    }
+  })
+
+  it('должно отметить все email-ы классом маркировки .marked, когда запрос поиска "@"', async () => {
+    await input.setValue('@')
+    expect(list).toHaveLength(emails.length)
+    expect(list.every(item => item.classes('marked'))).toBeTruthy()
+  })
+})
diff --git a/02-basics-2/40-marked-emails/index.html b/02-basics-2/40-marked-emails/index.html
new file mode 100644
index 0000000..2488c6e
--- /dev/null
+++ b/02-basics-2/40-marked-emails/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <title>marked-emails</title>
+  </head>
+  <body>
+    <div class="wrapper">
+      <div class="container">
+        <h1>Отмеченные Email-ы</h1>
+        <div id="app"></div>
+      </div>
+    </div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>
diff --git a/02-basics-2/40-marked-emails/main.js b/02-basics-2/40-marked-emails/main.js
new file mode 100644
index 0000000..cbf65ed
--- /dev/null
+++ b/02-basics-2/40-marked-emails/main.js
@@ -0,0 +1,6 @@
+import '@shgk/vue-course-ui/meetups/style.css'
+import { createApp } from 'vue'
+import MarkedEmailsApp from './MarkedEmailsApp.js'
+import './MarkedEmailsApp.css'
+
+createApp(MarkedEmailsApp).mount('#app')
diff --git a/02-basics-2/40-marked-emails/tsconfig.json b/02-basics-2/40-marked-emails/tsconfig.json
new file mode 100644
index 0000000..8a8b469
--- /dev/null
+++ b/02-basics-2/40-marked-emails/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@shgk/vue-course-taskbook/configs/tsconfig.json",
+  "include": ["**/*", "**/*.vue"],
+  "files": [],
+  "compilerOptions": {
+    "outDir": "dist",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}