변경 로그: 프런트엔드 버전

나는 지난주 트위터에 이 소식을 발표했고, 우리는 Preact X와 테스트 라이브러리로 옮겼다.

닉 테일러 (그/그)

우리는 현재prod에서 X(10.4.4 이전은 8.5.2)를 실행하고 있으며, 현재 그것을 사용하여 전단 테스트를 하고 있습니다.제 동료가 업그레이드에 도움을 주셔서 대단히 감사합니다.🥳 🔥
19:2020년 6월 18일 오후 57시
우리가 앞에서 한 모든 개선에 대해 깊이 있게 이해합시다.

프론트 X

DEV는 현재 Preact X를 실행하고 있습니다(본문을 작성할 때 현재 10.4.4).나는 official Preact X upgrade guide에 따라 우리를 8.5.2에서 10.4.4로 옮겼다.그렇다면 개발자로서 새로운 버전의 Preact는 우리에게 무엇을 주었습니까?당신은 Preact 사이트의 What’s new in Preact X
게시물에서 모든 새로운 것을 읽을 수 있습니다.요컨대, 이전에 React에서만 사용할 수 있었던 많은 기능들이 현재 Preact와 hooks,fragments,contextcomponentDidCatch에서 사용할 수 있다.

테스트 라이브러리

몇 가지 이유로 DEV는 preact-render-spy 및 preact-render-to-json 를 떠났습니다.가장 중요한 점은 이 두 도구 모두 Preact 업그레이드에 적용되지 않는다는 것이다.둘째, 공식 React 문서는 React 구성 요소를 사용할 때 가장 좋은 도구로 react-testing-library 및 Jest 를 권장합니다.이런 이유로 우리는 preact-testing-library 가족으로 이사했다. 이것도 Testing Library 가족의 일부분이다.
이 조치의 일부로서 우리는 스냅샷 테스트를 사용하는 것을 반대하지만, 설계된 시스템 구성 요소를 제외한다.나는 Testing Library에 대해 아직 상당히 낯설지만, 나는 그것이 상당히 직관적이고 접근 가능한 응용 프로그램을 구축하는 것을 장려하는 것을 발견했다.나도 debug() 함수의 충실한 팬이다.

가달성(a11y) 테스트

테스트 라이브러리는 접근 가능한 응용 프로그램을 구축하는 것을 장려하지만, 우리는 더 많이 할 수 있다.Nick Colley은Deque Systems에서 좋은 aXe 도구를 얻었고 이를 Jest와custom Jest matcher로 통합하여 jest-axe라고 부르며 접근성을 테스트하는 데 사용한다.
jest axe와preact 테스트 라이브러리를 결합하여 사용할 때, 우리는 1Y 오류에 대한 통지를 받아서 이 오류를 복구할 수 있습니다.개발 코드 라이브러리에서 예비 구성 요소와 관련된 모든 테스트는 a11y 오류를 테스트합니다.
구성 요소 테스트 파일의 전형적인 a11y 테스트는 다음과 같다.

  it('should have no a11y violations', async () => {
    const { container } = render(
      <MyComponent />,
    );
    const results = await axe(container);

    expect(results).toHaveNoViolations();
  });

이 테스트가 실패했을 때, a11y 문제를 복구하기 위해 읽을 수 있는 오류를 볼 수 있습니다.

expect(received).toHaveNoViolations(expected)

    Expected the HTML found at $('.crayons-btn--icon') to have no violations:

    <button class="crayons-btn crayons-btn--outlined crayons-btn--icon" type="button" data-testid="subscription-settings">

    Received:

    "Buttons must have discernible text (button-name)"

    Fix any of the following:
      Element does not have inner text that is visible to screen readers
      aria-label attribute does not exist or is empty
      aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      Element's default semantics were not overridden with role="presentation"
      Element's default semantics were not overridden with role="none"
      Element has no title attribute or the title attribute is empty

    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/3.5/button-name?application=axeAPI

추가 프런트엔드 업데이트!

스토리북 업데이트

5월에 나는 우리가 이야기책을 사용하는 것에 관한 업데이트를 한 편 썼다.

Changelog: DEV가 들려줬어요.

개발팀의 닉 테일러・ 20년 5월 22일・ 2분 읽기

#meta #html #css #javascript

그 이후로 우리는 이야기책을 사용하여 디자인 시스템 구성 요소와 관건적인 응용 프로그램 구성 요소를 계속 구축했다.서문 X로 넘어가면 우리는 마침내 더 강력한 이야기책 플러그인을 사용할 수 있다.나는 위에서 a11y테스트를 언급했는데 이 점을 보충하기 위해 Storybook a11y addon를 추가했다.

이 밖에도 저희가 지원하는 모든 주제를 정확하게 구축할 수 있도록 개발 주제를 변경할 수 있는 사용자 정의 Storybook decorator 가 있습니다.

DEV에서 진행 중인 작업 설명서here를 볼 수 있습니다.매번 이야기책 이야기와 관련된 주요 부분의 합병은 업데이트된 이야기책을 배치하기 때문에 당신이 보는 것은 항상 최신과 최고입니다.Netlify 배치 미리보기 덕분에 모든 홍보와 관련된 이야기책을 볼 수 있습니다!🔥

Jest의 개선 사항

우리의 Jest 설정은 큰 변화가 없고 단지 약간의 조정만 했을 뿐이다.우선, 우리가 전방에서 더 많은 테스트를 진행함에 따라, 우리의 코드 커버율은 줄곧 증가하고 있다.덮어쓰기가 증가함에 따라 덮어쓰기의 감소를 피하기 위해 Jest 설정에 덮어쓰기 한도값을 추가했습니다.

module.exports = {
  ...
  coverageThreshold: {
    global: {
      statements: 40,
      branches: 35,
      functions: 39,
      lines: 41,
    },
  },
...

또 다른 편리한 새로운 기능은 제스트 워치 모드다.이제 테스트 이름이나 파일 이름에 따라 필터링할 수 있습니다.


이게 다야?예.너는 틀림없이 농담을 하고 있는 것이다.😆

업데이트된 대들보 규칙

이전에 우리는 AirBnB Style Guide를 앞부분의 모든 밧줄의 기초로 사용했다.비록 이것은 매우 좋은 프로젝트이지만, 우리는 규칙이 좀 융통성이 없다는 것을 발견했다.우리는 ESLint recommended rule set 과 Preact recommended rule set 배합을 선택했다.
프로젝트에서 Prettier 를 사용했기 때문에 전단 파일의 모든 형식을 처리할 수 있음을 알립니다.
나의 동료가 나를 도와 모든 테스트를preact 테스트 라이브러리로 옮기는 것은 나에 대한 외침이다.👏 나는 우리가 앞장서서 한 모든 변화에 대해 매우 흥분하고 계속 개선하기를 기대하고 있다.만약 당신이 전방에서 프로젝트에 기여하고 싶다면 부끄러워하지 말고 DEV, 트위터나 어느 곳에서든 저에게 DM을 보내주세요.나는 없는 곳이 거의 없다.만약 이메일이 당신의 잼이라면 저에게 전화하세요.
얘들아, 지금 이 정도야!