망원경의 버그 수정

소개

Telescope은 Seneca College에서 유지 관리하는 오픈 소스 프로젝트입니다. Telescope는 오픈 소스 웹 서비스이며 클라이언트 애플리케이션은 WordPress, Medium, Dev Community 등 다양한 플랫폼의 모든 블로그 게시물을 수집하고 타임라인으로 표시합니다.

문제

issue은 블로그 게시물 끝에 <p><br><p>가 여러 줄 포함된 블로그 게시물 중 하나입니다. 단락 태그로 감싸는 수많은 줄 바꿈 태그는 다른 블로그 게시물을 보는 것을 방해합니다.

고치다

문제를 해결하는 것은 매우 간단합니다. 에서

remove-empty-paragraphs.js
const cleanWhiteSpace = require('clean-whitespace');

module.exports = function (dom) {
  if (!(dom && dom.window && dom.window.document)) {
    return;
  }

  dom.window.document.querySelectorAll('p').forEach((p) => {
    p.innerHTML = cleanWhiteSpace(p.innerHTML);
    const paragraphInnerHTML = p.innerHTML;
    if(!paragraphInnerHTML.replace(/ /gm,'').trim()) {
      p.remove();
    }
  });
};

&nbsp 논브레이킹 스페이스에 대한 논리는 이미 만들어졌습니다. 따라서 || paragraphInnerHTML.trim() === '<br>'에 <p> 태그만 포함되어 있는 경우를 포착하는 조건<br>을 하나 더 추가하여
꼬리표.

도전

문제는 쉽게 해결될 것으로 예상됩니다. 그러나 내가 도전에 직면한 두 가지가 있습니다.

remove-empty-paragraph.js는

로 호출되지 않습니다.

(1) 챌린지가 존재하므로 내 논리가 맞는지 모르겠습니다.

remove-empty-paragraph.js가 호출되지 않는 이유는 실제로 함수가 호출되지 않기 때문입니다. 빈&nbsp은 엣지 케이스로 취급하므로 코드가 누락된 것 같습니다. 따라서 함수를 호출하는 코드를 만들었습니다.
두 번째 도전은 이 과정의 강사인 David의 조언으로 해결되었습니다. 그의 조언은 내 논리가 통과인지 실패인지 테스트하기 위한 단위 테스트 케이스를 만들라는 것입니다. 그러므로 내가 창조한

test('should remove <p><br></p> (line break)', () => {
    const htmlData = toDom('<div><p><br></p></div>');
    removeEmptyParagraphs(htmlData);
    const expectedHtml = '<div></div>';
    expect(htmlData.window.document.body.innerHTML).toEqual(expectedHtml);

출력은 통과입니다! 내 논리는 정확하지만 로컬에서 실행되는 망원경에는 어떤 변화도 보이지 않습니다. 내 변경 사항이 망원경에 반영되지 않는 이유를 모르겠습니다. 그래서 Telescope Slack 채널에 이 문제를 물어봤습니다. 고맙게도 Josue와 Duc Bui Manh가 이 문제를 해결하는 데 도움을 주었습니다. 그들은 나에게 이전redis-data을 삭제하고 블로그 게시물을 가져오기 위해 데이터베이스를 업데이트하는 애플리케이션을 다시 실행하라고 제안했습니다. elasticSearch가 모든 블로그 게시물을 크롤링하는 데 시간이 걸리지만 마침내 예상한 결과를 얻었습니다.

결론

Hacktoberfest 기간 동안 저는 4개의 작은 프로젝트에 기여했습니다. 대규모 오픈 소스 프로젝트인 Telescope에 기여하게 된 것은 정말 좋은 경험입니다.

링크

PR