styled-component, useState 사용해서 Tag 만들기를 가장한 testCase 삽질기

📌  Tag 란?

 

검색창에 "UI tags" 를 입력하면 볼 수 있는 이미지들

 

키워드 중심의 버튼버튼 아닙니다이라고 볼 수 있다. (정확히는 버튼은 아님. "버튼처럼" 동작할 뿐)

일반적인 버튼과의 차이가 있다면, 클릭했을 때 새로운 이벤트를 즉각적으로 실행하지 않는다. 버튼이 아니니까 당연한 이야기 ...

다만, 선택된 태그를 바탕으로 정보를 조합해 새로운 이벤트가 구성된다.

 

ex. 핀터레스트에 처음 들어갔을 때 관심사 태그들을 클릭하면 내 피드가 태그 관련 이미지들로 채워진다.

ex. 노션에서 노트를 작성하며 내가 원하는 태그들을 달아놓는다면, 나중에 해당 태그가 있는 노트들만 취합해 볼 수 있다.

 

 

📌  Tag를 구현해보자.

 

◾  Tag 상태만 추적할 때

 

export const Tag = () => {

  // dsfault 값은 넣어도 되고 안 넣어도 됨
  const initialTags = [];

  // 태그 목록 상태 관리
  const [tags, setTags] = useState(initialTags);

  // 태그를 지웠을 때 상태 업데이트
  const removeTags = (indexToRemove) => {
    setTags(tags.filter((_, idx) => { return idx !== indexToRemove}));
  };
  
  // 태그를 추가할 때 상태 업데이트
  const addTags = (event) => {

    const text = event.target.value;
	
    // 추가하려는 태그가 비어있지 않고 && 기존 태그 목록에 속하지 않은 새로운 태그일때만 추가
	if(text.length !== 0 && !tags.includes(text)){
      setTags([...tags, text]);
      event.target.value = '';
    }
    // 빈 태그거나 이미 있는 태그 일땐 input box 를 깔끔히 비워줬다
    else{
      event.target.value = '';
    }
    
  }

  return (
    <>
      <TagsInput>
        <ul id='tags'>
          {tags.map((tag, index) => (
            <li key={index} className='tag'>
              <span className='tag-title'>{tag}</span>
              <!--갑자기 궁금한점 -> 이벤트 헨들러는 전해주는 인자값이 상당히 다양하다 ?-->
              <!--이벤트 객체 내에 index 프로퍼티 값이 따로 있는거겠지 ???!!!-->
              <span className='tag-close-icon' onClick={() => {removeTags(index)}}>&times;</span>
            </li>
          ))}
        </ul>
        <input
          className='tag-input'
          type='text'
          // 키 값이 Enter일 때만 이벤트 객체를 넘겨주도록 구현
          onKeyUp={(e) => e.key === 'Enter' ? addTags(e) : null}
          placeholder='Press enter to add tags'
        />
      </TagsInput>
    </>
  );
};

 

 

◾  Tag 상태와 Input Value를 추적할 때

 

export const Tag = () => {

  // dsfault 값은 넣어도 되고 안 넣어도 됨
  const initialTags = [];

  // 태그 목록 상태 관리
  const [tags, setTags] = useState(initialTags);
  
  // 입력 문자 상태 관리
  const [text, setTexts] = useState('');

  // 문자가 입력되었을 때 상태 업데이트
  const addTexts = (event) => {
    setTexts(event.target.value);
  }

  // 태그를 지웠을 때 상태 업데이트
  const removeTags = (indexToRemove) => {
    setTags(tags.filter((_, idx) => { return idx !== indexToRemove}));
  };
  
  // 태그를 추가할 때 상태 업데이트
  const addTags = () => {
	
    // 추가하려는 태그가 비어있지 않고 && 기존 태그 목록에 속하지 않은 새로운 태그일때만 추가
	if(text.length !== 0 && !tags.includes(text)){
      setTags([...tags, text]);
      setText('');
    }
    // 빈 태그거나 이미 있는 태그 일땐 input box 를 깔끔히 비워줬다
    else{
      setText('');
    }
    
  }

  return (
    <>
      <TagsInput>
        <ul id='tags'>
          {tags.map((tag, index) => (
            <li key={index} className='tag'>
              <span className='tag-title'>{tag}</span>
              <span className='tag-close-icon' onClick={() => {removeTags(index)}}>&times;</span>
            </li>
          ))}
        </ul>
        <input
          className='tag-input'
          type='text'
          value={text}
          onChange={addTexts}
          // 키 값이 Enter일 때만 이벤트 객체를 넘겨주도록 구현
          onKeyUp={(e) => e.key === 'Enter' ? addTags : null}
          placeholder='Press enter to add tags'
        />
      </TagsInput>
    </>
  );
};

 

현재 구현한 상태는 입력창이 하나라 input 값의 상태를 따로 관리하는 게 비효율적이었다.

그래도 useState를 어떻게 써야하는 지 감을 잡을 수 있어 좋았다. :)

 

 

📌  이건 왜 테스트를 통과하고, 저건 왜 통과하지 못하는가 ????

 

 

✅  코드 요구 사항 : '중복된 값이 이미 존재하는 경우, Enter를 눌러도 태그가 추가되지 않아야 합니다.'

✅  두 경우 모두 Enter key가 클릭되었을 당시의 input value를 console로 찍어보았다.

 

😂  첫번째 경우  -> 입력값이 같은 태그를 입력했을 때 input value를 삭제하지 않는다.  ->  테스트 통과

 

 

😡  두번째 경우  ->  입력값이 같은 태그를 입력했을 때 input value를 삭제한다.  ->  테스트 미통과

 

 

둘 다 태그가 추가되지 않는 점은 동일하다.

다만 input box의 상태가 다를 뿐인데 .... 난 깔끔하게 한다고 input value를 예외처리로 비워줬는데 ....

 

이 테스트 케이스가 원하는 건 뭐였을까 ????  요구 사항을 충분히 구현했다고 생각했는데 통과가 안되니까 너무 속상했다.

이때부터였나요 제가 테스트케이스 문법을 파기 시작한 게 ...

 

 

✅  테스트 케이스를 살펴보자.

 

it('Enter키를 누르면 실제 태그가 추가되어야 합니다.', async () => {
    const { queryAllByRole, container } = render(<Tag />);
    const input = container.querySelector('input');

    expect(input).toBeTruthy();

    userEvent.type(input, 'kimcoding');
    fireEvent.keyUp(input, { key: 'Enter', code: 'Enter' });
    await waitFor(() => {
      expect(queryAllByRole('listitem').length).toBeGreaterThan(1);
    });

    await waitFor(() => {
      const tagLength = queryAllByRole('listitem').length;
      expect(
        queryAllByRole('listitem')[tagLength - 1].textContent.slice(0, 9)
      ).toBe(input.value);
    });
  });

  

✔  queryAllByRole 은 어떤 역할인가

 

"React Testing Library"

querySelector 와 같은 DOM API 가 아니었다 !! (충격)

찾아보니 테스트 케이스 작성을 위한 라이브러리가 따로 있더라. 그 중에 속한 하나의 함수였다.

 

✔  그럼 Role은 무엇인가

 

role-attribute 종류들

getElementById 는 HTML 태그의 id값을 기준으로 element를 가져오고,

getElementByClassName 은 HTML 태그의 class 이름을 기준으로 element를 가져온다.

뭔가 Role도 비슷하게 HTML 어트리뷰트인가 ? 해서 찾아봤지만 나오지 않았다.

알고보니 Role은 생각보다 아주 아주 넓고 포괄적인 개념을 가진 아이였다.

내가 알고있는 "HTML 어트리뷰트"들을 포용하고 있었다 !ㅁ!

 

✔  listitem은 li 속성의 모음이었다

 

 

role이라는게 attribute랑은 또 다르게 ... 테스트 케이스에만 쓰이는 건가 ?? 싶고. 일단 더 알아봐야겠다.

li 태그로 검색하고, 해당 배열의 마지막 인덱스를 검색했을 때 테스트케이스에 맞는 결과가 출력되었다.

 

✔  input의 value값이 비교 기준이었기 때문에 내 로직은 통과할 수 없었다.

 

listitem이 가진 배열의 마지막 인덱스 값의 textContent의 문자열 복사본은 'kimcoding'이었다.

첫번째 경우의 input value는 'kimcoding'이었고, 두번째 경우의 input value는 ' '이었다.

입력값이 기존 태그와 중복되었을 때 태그를 추가하지 않는 로직을 짰지만 의외의 변수에 걸렸다 ㅋㅋㅋ 

 

 

📍  느낀점 

 

✔  테스트케이스의 이름이 바뀌어야할것같다.  -->  혹시 테스트 케이스를 공부시키기 위한 큰그림이었나 ..?

✔  UX에 대해 다시 생각해볼 수 있었다.  -->  사용자 입장에서 태그가 중복되었다는 걸 어떻게 인지시키는 게 좋을까 ?

어쩌면 input 창이 비워지지 않게 하는 방법이 더 효율적이란 생각도 들었다. 나처럼 input 창이 비워지면 아 내가 입력 자체를 안했었나 ? 하면서 다시 입력해보는 side effect를 불러올 수도 있고 ㅋㅋ "태그 값이 중복되었습니다" 라는 문구를 띄우고 사라지게 하는 것도 괜찮은 방법같고, input창 자체를 흔들며 값을 거부하는 모션도 재밌을 것 같다 ㅎㅎㅎ *(머쓱) 

 

 

📌  Tag 구현 결과