이전까지 작성한 골조들(Broadcasting 등)에 간단한 스타일이나 액션, 기능들을 붙여서 앱을 거진 완성했습니다. 이제 처음에 기획했던대로 앱이 동작하는지 확인해보려 합니다.
테스트를 자동화하는 것까지는 개인 프로젝트 치고 너무 규모가 커지는 것 같아서 손수 테스트해주기로 했습니다. 테스트 방식은 아래와 같이 작성했습니다.
먼저 프로젝트를 시작할 때 작성했던 요구사항입니다.
따라서 작성해볼 케이스들은 다음과 같습니다.
테스트는 Lorem Ipsum 페이지에서 진행했습니다.
자세히보기 페이지는 명세를 작성할 땐 자세히 작성하지 않았지만(미리보기가 있다고만 명시되어있고 반대인 자세히보기 페이지가 존재한다는 언급이 없었음) 테스트에는 내용을 넣었습니다.
테스트 준비
크롬 브라우저를 켜고 chrome://extensions 에서 작성한 앱을 로드했습니다.
앱을 켜면 처음엔 복사본이 없기 때문에 리스트가 비어있는 것을 확인할 수 있습니다.
내용 복사 테스트
Ctrl + C
텍스트를 선택하고 Ctrl + C를 해보겠습니다.
텍스트 복사본이 추가되었습니다.
텍스트 contextmenu
텍스트를 선택하고 우클릭하면 'store to Copy Stack' 메뉴가 추가된 것을 볼 수 있습니다.
메뉴를 클릭하면
텍스트 복사본이 추가되었습니다.
이미지 contextmenu
이미지에서 우클릭을 한 경우도 마찬가지로 'store to Copy Stack' 메뉴가 보이고 클릭하면
이미지 복사본이 생성되고 이미지를 확인할 수 있습니다.
껐다 켜보기
생성한 복사본을 껐다 켜도 복사본이 유지되는 것을 확인합니다.
이건 이미지로 남길 수 없어서 테스트에 성공했음만 기록합니다.
복사본 미리보기
복사본의 상단에 복사본을 생성한 주소가 노출된다
복사본 카드의 첫 부분에 주소가 보입니다.
텍스트 복사본의 경우 일부분이 보인다
텍스트의 부분이 보이고 끝에서 ...으로 잘리는 것을 볼 수 있습니다.
이미지 복사본의 경우 이미지가 보인다
이미지의 미리보기가 보입니다. 모서리가 둥글게 처리된 것을 볼 수 있습니다.
다른 고양이 이미지(세로로 길쭉한)도 추가해봤습니다.
복사본을 생성한 날짜가 보인다
복사본을 생성한 날짜가 복사본을 생성한 소스 아래에 표시되는 것을 볼 수 있습니다.
날짜 표현은 Intl을 사용해 포멧을 만들어줬습니다.
복사본 가져오기
텍스트 복사본의 Copy 버튼을 클릭해 클립보드에 텍스트가 복사됨을 확인한다
Copy를 클릭한 뒤 노션에 붙여넣기를 해보았습니다.
텍스트 원문이 잘 복사된 것을 확인할 수 있었습니다.
이미지 복사본의 Copy 버튼을 클릭해 클립보드에 PNG가 복사됨을 확인한다
이미지 또한 잘 복사됩니다.
복사본 지우기
Delete 버튼을 클릭하면 복사본이 지워진다
앱을 껐다 켜서 복사본이 지워진 것이 유지되는 것을 확인한다
이 부분도 확인 되었습니다.
복사본 필터링
복사본을 종류(이미지/텍스트) 별로 모아볼 수 있다
상단의 chip을 클릭해 필터를 토글해보았습니다.
복사본 정렬
복사본은 생성된 순서대로 나타난다
8:43 -> 8:42 -> 8:33 순서대로 복사본이 보이는 것을 확인할 수 있습니다.
복사본 자세히보기
show detail 버튼을 클릭하면 자세히 보기 페이지로 이동한다
show detail 버튼을 클릭하면 자세히보기 페이지로 이동합니다.
자세히보기 페이지에서 텍스트 복사본의 경우 복사된 텍스트 전문과 생성 일자, 글자 수, 소스 링크가 나타난다
자세히보기 페이지에는 날짜, 글자 수, 원본 링크가 보이는 것을 볼 수 있습니다.
이미지 복사본의 경우 복사된 이미지와 생성 일자, 이미지 크기 (KB), 소스 링크가 나타난다
이미지의 경우 날짜, 이미지 크기 (KB), 원본 링크가 나타납니다.
발견된 에러
구현 사항은 전부 잘 동작했지만 한가지 예상하지 못했던 에러를 만날 수 있었습니다.
앱을 켜놓은 상태에서 시간이 조금 지나면 서비스 워커(백그라운드)가 비활성화되는 문제가 있었습니다. 서비스 워커가 비활성화되면 delete등 DB를 접근하는 액션들이 동작하지 않는 문제가 있었는데요. 이 부분을 해결하는 내용은 다음 글에서 다루겠습니다.
