javascript - 如何在 javaScript 中为 web 自定义组件上的 addEventListener 编写单元测试用例

问题描述

我有机会为 javaScript 客户端编写单元测试用例，以将代码覆盖率提高到 80%。我能够为方法和其他东西编写单元测试用例，但严重坚持为 addEventListener 编写测试用例。我试图在谷歌上找到解决方案，但到目前为止还没有运气。我对谷歌上的网络自定义组件没有太多了解，严重坚持这项任务。我正在拼命寻找解决方案。因此，我想在这个论坛上提出我的疑问。

任何建议或意见将不胜感激，对我有很大帮助！谢谢阅读。

用户卡.js

(() => {
    class UserCard extends HTMLElement {

        constructor() {
            super();

            this.attachShadow({ mode: 'open' });

            this.shadowRoot.innerHTML = `

                <div class="user-card">
                    <img />
                    <div>
                        <h3></h3>
                    </div>
                </div>
                <div id="reason">
                click here
                </div>
          `;
            this._title = "good work sajid 2";
            this.shadowRoot.querySelector('h3').innerText = this.getAttribute('name');
            this.shadowRoot.querySelector('img').src = this.getAttribute('avatar');
            this.reasonElem = this.shadowRoot.getElementById('reason');


            //how to write test cases for this click event ???
            this.reasonElem.addEventListener('click', this.clickFunction, false);

            this.clickFunction = () => {
                console.log("inside of clickFunctions")
            };

            //able to write test for keypress event
            this.setupEvents = () => {
                document.addEventListener('keypress', this.pressed.bind(this), false);
            };

            this.pressed = () => {
                // Called when keypress event is fired
                console.log("inside of pressed");
            }

        }
    }

    window.customElements.define('user-card', UserCard);
    module.exports = UserCard
})();

userCard.test.js

const userCard = require('./userCard');

describe('My Test', () => {
    let sut;
    let events = {};

    beforeEach(() => {
        sut = new userCard();

        // Empty our events before each test case
        events = {};

        // Define the addEventListener method with a Jest mock function
        document.addEventListener = jest.fn((event, callback) => {
            events[event] = callback;
        });

        document.removeEventListener = jest.fn((event, callback) => {
            delete events[event];
        });
    });

    test('Test Keypress fires callback', () => {
        // Watch the function that gets called when our event fires
        jest.spyOn(sut, 'pressed');

        // A method inside of our userCard that sets up event listeners
        sut.setupEvents();

        // Fire the keypress event
        events.keypress({ key: 'Enter' });


        // We fired an event, so this should have been called
        expect(sut.pressed).toHaveBeenCalled();
    });
});

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Components Example</title>
</head>
<body>
    <h3>Hello World</h3>

    <user-card name="John Doe" avatar="https://randomuser.me/api/portraits/men/1.jpg" value="100"></user-card>

    <script src="userCard.js"></script>
</body>
</html>

包.json

{
  "name": "jest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest --collectCoverage true"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^27.3.1"
  },
  "dependencies": {
    "global-jsdom": "^8.3.0",
    "jsdom": "^18.0.0"
  }
}

示例代码： https ://github.com/sajid983356/jest-web-component/tree/main

标签： javascriptunit-testingjestjscode-coverageweb-frontend

javascript - 如何在 javaScript 中为 web 自定义组件上的 addEventListener 编写单元测试用例

问题描述

解决方案

推荐阅读