Vue 앱에 키보드 단축키 추가 ⌨️

최근에 작업 중인 Vue 응용 프로그램에서 전역 키 단축키에 대한 지원을 추가해야 했습니다. Vue는 입력 요소에 있을 때 키 수신을 기본적으로 지원합니다. 직접 지원되지 않는 것은 전역 바로 가기입니다. 예를 들어 Gmail에서 이메일을 보고 있는 경우 '''를 눌러 해당 이메일에 응답할 수 있습니다.

Vue에서 이를 수행하려면 저수준 JavaScript 이벤트 리스너 또는 vue-shortkey 과 같은 플러그인을 사용해야 합니다. vue-shortkey는 당연히 이벤트 리스너를 래핑하기 때문에 접근 방식은 실제로 다르지 않습니다. 구성 요소에 고유한 이벤트 리스너를 작성하는 것은 간단하므로 플러그인을 사용하는 데 큰 가치를 보지는 못했습니다. few blog posts covering event listeners in Vue already 가 있지만 구성 요소를 테스트하는 방법을 포함하여 여기에서 더 완전한 예를 보여 드리겠습니다.

구현

이스케이프 키를 누를 때마다 메시지를 표시하는 구성 요소를 만들고 싶다고 가정해 봅시다.

템플릿 블록:

<div>{{ message }}</div>

스크립트 블록(Typescript):

import Vue from "vue";

export default Vue.component("Demo", {
  created() {
    window.addEventListener("keydown", this.escapeListener);
  },
  // make sure you remove the listener when the component is no longer visible
  destroyed() {
    window.removeEventListener("keydown", this.escapeListener);
  },
  data: function() {
    return {
      message: ""
    };
  },
  methods: {
    escapeListener(event: KeyboardEvent) {
      if (event.key === "Escape") {
        this.message = "Escape has been pressed";
      }
    }
  }
});

클래스 구문을 사용하려면 스크립트 블록을 다음과 같이 변경하십시오.

export default class Demo extends Vue {
  private message = "";

  private created() {
    window.addEventListener("keydown", this.escapeListener);
  }

  private destroyed() {
    window.removeEventListener("keydown", this.escapeListener);
  }

  private escapeListener(event: KeyboardEvent) {
    if (event.key === "Escape") {
      this.message = "Escape has been pressed";
    }
  }
}

테스트

이것은 모두 훌륭하지만 이 동작을 테스트하는 방법이 즉시 명확하지 않습니다. 몇 번의 잘못된 시작 후에 나는 Github issue thread with the solution 을 발견했습니다.

내가 놓친 마술은 테스트 중인 구성 요소를 장착하거나 얕은 장착할 때 Vue 테스트 유틸리티attachToDocument 옵션을 사용하는 것이었습니다. 구성 요소를 문서에 첨부하면 wrapper.trigger를 사용하여 키 누르기를 시뮬레이션할 수 있습니다.

describe("Demo.vue", function() {
  it("Displays a message when escape is pressed", function() {
    const wrapper = shallowMount(Demo, { attachToDocument: true });

    // the browser will add 'key' to the event,
    // but when testing we need to add it manually
    wrapper.trigger("keydown.esc", { key: "Escape" });

    expect(wrapper.text()).to.include("Escape has been pressed");

    // always make sure to destroy when using attachToDocument
    wrapper.destroy();
  });
});

그것이 바로 우리가 구성 요소에 추가할 때 전역 바로 가기를 테스트 구동하는 간단한 방법입니다.