Week 5

package.json

@@ -29,10 +29,10 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.21.0",
     "@babel/runtime": "^7.21.0",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
     "@types/jest": "^29.4.0",
     "@types/node": "^16.18.13",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
     "babel-jest": "^29.4.3",
     "babel-loader": "^9.1.2",
     "css-loader": "^6.7.3",
@@ -55,5 +55,8 @@
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
+  },
+  "dependencies": {
+    "@vkid/sdk": "^1.1.0"
   }
 }

projects/cookie/cookie.html

@@ -0,0 +1,55 @@
+<style>
+    #app input {
+        border-radius: 5px;
+        border: 1px solid #ccc;
+        padding: 5px;
+        margin: 5px 0;
+    }
+
+    #app table {
+        width: 100%;
+    }
+
+    #app table td,
+    #app table th {
+        padding: 5px;
+        text-align: left;
+    }
+
+    #app table td.value {
+        word-break: break-word;
+    }
+
+    #app tbody tr:nth-child(odd) {
+        background: #ddd;
+    }
+</style>
+
+<div id="app">
+    <div id="filter-block">
+        Поиск cookie: <input id="filter-name-input" placeholder="имя cookie" type="text">
+    </div>
+    <hr>
+    <div id="add-block">
+        Добавить cookie:<br>
+        <input id="add-name-input" placeholder="имя cookie" type="text"><br>
+        <input id="add-value-input" placeholder="значение cookie" type="text"><br>
+        <button id="add-button">добавить cookie</button>
+    </div>
+    <hr>
+    <div id="list-block">
+        Доступные cookie:
+        <table id="list-table">
+            <thead>
+            <tr>
+                <th>имя</th>
+                <th>значение</th>
+                <th>удалить</th>
+            </tr>
+            </thead>
+            <tbody>
+            <!-- tr добавлять сюда -->
+            </tbody>
+        </table>
+    </div>
+</div>

projects/cookie/cookie.spec.js

@@ -0,0 +1,250 @@
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+function getCookies() {
+  return document.cookie
+    .split('; ')
+    .filter(Boolean)
+    .map((cookie) => cookie.match(/^([^=]+)=(.+)/))
+    .reduce((obj, [, name, value]) => {
+      obj[name] = value;
+
+      return obj;
+    }, {});
+}
+
+describe('ДЗ 7.2 - Cookie editor', () => {
+  require('./index');
+
+  const app = document.querySelector('#app');
+  let filterNameInput;
+  let addNameInput;
+  let addValueInput;
+  let addButton;
+  let listTable;
+
+  describe('Интеграционное тестирование', () => {
+    beforeEach(() => {
+      const oldCookies = getCookies();
+
+      Object.keys(oldCookies).forEach(
+        (cookie) => (document.cookie = `${cookie}=;expires=${new Date(0)}`)
+      );
+
+      if (listTable) {
+        listTable.innerHTML = '';
+      }
+    });
+
+    it('на старнице должны быть элементы с нужными id', () => {
+      filterNameInput = app.querySelector('#filter-name-input');
+      addNameInput = app.querySelector('#add-name-input');
+      addValueInput = app.querySelector('#add-value-input');
+      addButton = app.querySelector('#add-button');
+      listTable = app.querySelector('#list-table tbody');
+
+      expect(filterNameInput).toBeInstanceOf(Element);
+      expect(addNameInput).toBeInstanceOf(Element);
+      expect(addValueInput).toBeInstanceOf(Element);
+      expect(addButton).toBeInstanceOf(Element);
+      expect(listTable).toBeInstanceOf(Element);
+    });
+
+    it('cookie должны добавляться при нажатии на "добавить"', () => {
+      let cookies;
+
+      addNameInput.value = 'test-cookie-name-1';
+      addValueInput.value = 'test-cookie-value-1';
+      addButton.click();
+
+      cookies = getCookies();
+      expect(hasOwnProperty.call(cookies, addNameInput.value));
+      expect(cookies[addNameInput.value]).toBe(addValueInput.value);
+      expect(listTable.children.length).toBe(1);
+
+      addNameInput.value = 'test-cookie-name-2';
+      addValueInput.value = 'test-cookie-value-2';
+      addButton.click();
+
+      cookies = getCookies();
+      expect(hasOwnProperty.call(cookies, addNameInput.value));
+      expect(cookies[addNameInput.value]).toBe(addValueInput.value);
+      expect(listTable.children.length).toBe(2);
+    });
+
+    it('если при добавлении указано имя существующей cookie, то в таблице не должно быть дублей', () => {
+      addNameInput.value = 'test-cookie-name-1';
+      addValueInput.value = 'test-cookie-value-1';
+      addButton.click();
+
+      addNameInput.value = 'test-cookie-name-2';
+      addValueInput.value = 'test-cookie-value-2';
+      addButton.click();
+
+      addNameInput.value = 'test-cookie-name-2';
+      addValueInput.value = 'test-cookie-value-2';
+      addButton.click();
+
+      const cookies = getCookies();
+      expect(hasOwnProperty.call(cookies, addNameInput.value));
+      expect(cookies[addNameInput.value]).toBe(addValueInput.value);
+      expect(listTable.children.length).toBe(2);
+    });
+
+    it('если при добавлении указано имя существующей cookie, то в таблице должно быть изменено ее значение', () => {
+      addNameInput.value = 'test-cookie-name-1';
+      addValueInput.value = 'test-cookie-value-1';
+      addButton.click();
+
+      addNameInput.value = 'test-cookie-name-2';
+      addValueInput.value = 'test-cookie-value-2';
+      addButton.click();
+
+      addNameInput.value = 'test-cookie-name-2';
+      addValueInput.value = 'other-test-cookie-value-2';
+      addButton.click();
+
+      const rows = [...listTable.children];
+      const changedRow = rows.filter(
+        (row) => row.children[1].textContent.trim() === 'other-test-cookie-value-2'
+      );
+      expect(changedRow.length).toBe(1);
+    });
+
+    it('cookie должны удаляться при нажатии на "удалить"', () => {
+      let cookies;
+      let deleteButton;
+
+      addNameInput.value = 'test-cookie-name-1';
+      addValueInput.value = 'test-cookie-value-1';
+      addButton.click();
+
+      addNameInput.value = 'test-cookie-name-2';
+      addValueInput.value = 'test-cookie-value-2';
+      addButton.click();
+
+      deleteButton = listTable.querySelector('button');
+
+      deleteButton.click();
+      cookies = getCookies();
+      expect(Object.keys(cookies).length).toBe(1);
+      expect(listTable.children.length).toBe(1);
+
+      deleteButton = listTable.querySelector('button');
+      deleteButton.click();
+      cookies = getCookies();
+      expect(Object.keys(cookies).length).toBe(0);
+      expect(listTable.children.length).toBe(0);
+    });
+
+    describe('Фильтрация', () => {
+      it('выводить список cookie, имя или значение которых соответствует фильтру', () => {
+        addNameInput.value = 'test-cookie-name-1';
+        addValueInput.value = 'test-cookie-value-1';
+        addButton.click();
+
+        addNameInput.value = 'test-cookie-name-2';
+        addValueInput.value = 'test-cookie-value-2';
+        addButton.click();
+
+        filterNameInput.value = 'test-cookie';
+        filterNameInput.dispatchEvent(new KeyboardEvent('input'));
+        expect(listTable.children.length).toBe(2);
+
+        filterNameInput.value = 'name-1';
+        filterNameInput.dispatchEvent(new KeyboardEvent('input'));
+        expect(listTable.children.length).toBe(1);
+
+        filterNameInput.value = 'name-2';
+        filterNameInput.dispatchEvent(new KeyboardEvent('input'));
+        expect(listTable.children.length).toBe(1);
+      });
+
+      it('добавлять cookie в таблицу, только если значение cookie соответствует фильтру', () => {
+        addNameInput.value = 'test-cookie-name-1';
+        addValueInput.value = 'test-cookie-value-1';
+        addButton.click();
+
+        addNameInput.value = 'test-cookie-name-2';
+        addValueInput.value = 'test-cookie-value-2';
+        addButton.click();
+
+        filterNameInput.value = 'value-2';
+        filterNameInput.dispatchEvent(new KeyboardEvent('input'));
+        expect(listTable.children.length).toBe(1);
+
+        addNameInput.value = 'test-cookie-name-3';
+        addValueInput.value = 'test-cookie-more-value-2';
+        addButton.click();
+
+        const cookies = getCookies();
+        expect(hasOwnProperty.call(cookies, addNameInput.value));
+        expect(cookies[addNameInput.value]).toBe(addValueInput.value);
+        expect(listTable.children.length).toBe(2);
+      });
+
+      it('не добавлять cookie в таблицу, если значение cookie не соответствует фильтру', () => {
+        addNameInput.value = 'test-cookie-name-1';
+        addValueInput.value = 'test-cookie-value-1';
+        addButton.click();
+
+        addNameInput.value = 'test-cookie-name-2';
+        addValueInput.value = 'test-cookie-value-2';
+        addButton.click();
+
+        filterNameInput.value = 'value-2';
+        filterNameInput.dispatchEvent(new KeyboardEvent('input'));
+        expect(listTable.children.length).toBe(2);
+
+        addNameInput.value = 'test-cookie-name-3';
+        addValueInput.value = 'test-cookie-value-3';
+        addButton.click();
+
+        const cookies = getCookies();
+        expect(hasOwnProperty.call(cookies, addNameInput.value));
+        expect(cookies[addNameInput.value]).toBe(addValueInput.value);
+        expect(listTable.children.length).toBe(1);
+      });
+
+      it('удалить cookie из табилицы, если ее значение перестало соответствовать фильтр', () => {
+        addNameInput.value = 'test-cookie-name-1';
+        addValueInput.value = 'test-cookie-value-1';
+        addButton.click();
+
+        addNameInput.value = 'test-cookie-name-2';
+        addValueInput.value = 'test-cookie-value-2';
+        addButton.click();
+
+        addNameInput.value = 'test-cookie-name-3';
+        addValueInput.value = 'test-cookie-value-2';
+        addButton.click();
+
+        filterNameInput.value = 'value-2';
+        filterNameInput.dispatchEvent(new KeyboardEvent('input'));
+        expect(listTable.children.length).toBe(2);
+
+        addNameInput.value = 'test-cookie-name-3';
+        addValueInput.value = 'test-cookie-value-3';
+        addButton.click();
+
+        const cookies = getCookies();
+        expect(hasOwnProperty.call(cookies, addNameInput.value));
+        expect(cookies[addNameInput.value]).toBe(addValueInput.value);
+        expect(listTable.children.length).toBe(1);
+      });
+
+      it('выводить все cookie, если фильтр не задан', () => {
+        addNameInput.value = 'test-cookie-name-1';
+        addValueInput.value = 'test-cookie-value-1';
+        addButton.click();
+
+        addNameInput.value = 'test-cookie-name-2';
+        addValueInput.value = 'test-cookie-value-2';
+        addButton.click();
+
+        filterNameInput.value = '';
+        filterNameInput.dispatchEvent(new KeyboardEvent('input'));
+        expect(listTable.children.length).toBe(3);
+      });
+    });
+  });
+});