Chapter 2 / 순수함수 렌더링

.eslintrc.cjs

@@ -21,5 +21,7 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  rules: {},
+  rules: {
+    'import/extensions': 'off',
+  },
 };

02. 렌더링/02/getTodos.js

@@ -7,7 +7,7 @@ const createElement = () => ({
 
 const repeat = (elementFactory, number) => {
   const array = [];
-  for (let index = 0; index < number; index++) {
+  for (let index = 0; index < number; index += 1) {
     array.push(elementFactory());
   }
   return array;

02. 렌더링/02/index.js

@@ -1,5 +1,5 @@
-import getTodos from './getTodos';
-import appView from './view/app';
+import getTodos from './getTodos.js';
+import appView from './view/app.js';
 
 const state = {
   todos: getTodos(),

02. 렌더링/02/view/app.js

@@ -1,6 +1,6 @@
-import todosView from './todos';
-import counterView from './counter';
-import filtersView from './filters';
+import todosView from './todos.js';
+import counterView from './counter.js';
+import filtersView from './filters.js';
 
 export default (targetElement, state) => {
   const element = targetElement.cloneNode(true);

02. 렌더링/02/view/counter.js

@@ -0,0 +1,16 @@
+const getNotCompleteCount = (todos) => todos.filter((todo) => !todo.completed).length;
+const getNotCompleteTextContent = (todos) => {
+  const count = getNotCompleteCount(todos);
+  if (count === 0) return 'No item left';
+  if (count === 1) return '1 Item left';
+  return `${count} Items left`;
+};
+
+export default (targetElement, state) => {
+  const { todos } = state;
+
+  const newElement = targetElement.cloneNode(true);
+  newElement.textContent = getNotCompleteTextContent(todos);
+
+  return newElement;
+};

02. 렌더링/02/view/counter.test.js

@@ -44,4 +44,21 @@ describe('counterView', () => {
 
     expect(newCounter.textContent).toBe('1 Item left');
   });
+
+  test('전부 완료했을 때의 경우도 고려해야 한다.', () => {
+    const newCounter = counterView(targetElement, {
+      todos: [
+        {
+          text: 'First',
+          completed: true,
+        },
+        {
+          text: 'Third',
+          completed: true,
+        },
+      ],
+    });
+
+    expect(newCounter.textContent).toBe('No item left');
+  });
 });

02. 렌더링/02/view/filters.js

@@ -0,0 +1,20 @@
+const getAllListAnchorsFrom = (element) => [...element.querySelectorAll('li a')];
+const setSelectedClassNameToAnchors = (anchors, currentFilter) => {
+  anchors.forEach((anchor) => {
+    if (anchor.textContent === currentFilter) {
+      anchor.classList.add('selected');
+    } else {
+      anchor.classList.remove('selected');
+    }
+  });
+};
+
+export default (targetElement, state) => {
+  const { currentFilter } = state;
+
+  const newElement = targetElement.cloneNode(true);
+  const anchors = getAllListAnchorsFrom(newElement);
+  setSelectedClassNameToAnchors(anchors, currentFilter);
+
+  return newElement;
+};

02. 렌더링/02/view/todos.js

@@ -0,0 +1,44 @@
+import { createInnerHTML } from './utils.js';
+
+const getTodoItemElement = ({ text, completed }) => {
+  const toggle = createInnerHTML('input', {
+    attributes: {
+      class: 'toggle',
+      type: 'checkbox',
+      checked: completed,
+    },
+  });
+  const label = createInnerHTML('label', {
+    innerHTML: text,
+  });
+  const edit = createInnerHTML('input', {
+    attributes: {
+      class: 'edit',
+      value: text,
+    },
+  });
+  const viewBox = createInnerHTML('div', {
+    attributes: {
+      class: 'view',
+    },
+    innerHTML: toggle + label,
+  });
+
+  return createInnerHTML('li', {
+    attributes: {
+      class: completed ? 'completed' : '',
+    },
+    innerHTML: `${viewBox}${edit}`,
+  });
+};
+
+export default (targetElement, state) => {
+  const { todos } = state;
+
+  const innerHTML = todos.map((todo) => getTodoItemElement(todo)).join('');
+
+  const newElement = targetElement.cloneNode(true);
+  newElement.innerHTML = innerHTML;
+
+  return newElement;
+};

02. 렌더링/02/view/utils.js

@@ -0,0 +1,13 @@
+export const createInnerHTML = (tagName, { attributes = {}, innerHTML = '' } = {}) => {
+  const arrtibuteString = Object.entries(attributes)
+    .map(([name, value]) => {
+      if (typeof value === 'boolean') return value ? name : '';
+      return `${name}="${value}"`;
+    })
+    .join(' ');
+  const closeTagString = innerHTML !== '' ? `${innerHTML}</${tagName}>` : '';
+
+  return `<${tagName} ${arrtibuteString}>${closeTagString}`;
+};
+
+export default {};

02. 렌더링/02/view/utils.test.js

@@ -0,0 +1,67 @@
+import { createInnerHTML } from './utils';
+
+describe('유틸리티 함수 테스트', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+  });
+
+  test('createInnerHTML: 빈 태그를 잘 생성하는가?', () => {
+    const tagNames = ['div', 'input', 'span', 'a', 'ul', 'li'];
+
+    tagNames.forEach((tagName) => {
+      container.innerHTML = createInnerHTML(tagName);
+      const testTarget = container.querySelector(tagName);
+
+      expect(testTarget.tagName).toBe(tagName.toUpperCase());
+      expect(testTarget.innerHTML).toBe('');
+    });
+  });
+
+  test('createInnerHTML: 속성을 잘 할당하는가?', () => {
+    container.innerHTML = createInnerHTML('input', {
+      attributes: {
+        class: 'test-input',
+        type: 'checkbox',
+        checked: true,
+      },
+    });
+    const testTarget = container.querySelector('input');
+
+    expect(testTarget.className).toBe('test-input');
+    expect(testTarget.type).toBe('checkbox');
+    expect(testTarget.checked).toBe(true);
+  });
+
+  test('createInnerHTML: innerHTML을 잘 할당하는가?', () => {
+    const html = [
+      createInnerHTML('div', {
+        attributes: {
+          class: 'inner-div',
+        },
+        innerHTML: 'hello',
+      }),
+      createInnerHTML('input', {
+        attributes: {
+          class: 'inner-input',
+          type: 'number',
+          value: '1',
+        },
+      }),
+    ].join('');
+
+    container.innerHTML = createInnerHTML('div', {
+      attributes: {
+        class: 'test-container',
+      },
+      innerHTML: html,
+    });
+    const testTarget = container.querySelector('.test-container');
+    const innerDiv = testTarget.querySelector('.inner-div');
+    const innerInput = testTarget.querySelector('.inner-input');
+
+    expect(innerDiv.textContent).toBe('hello');
+    expect(innerInput.value).toBe('1');
+  });
+});