Question

让我们假设我们有一个基本的A-Frame组件：

AFRAME.registerComponent('scale-on-mouseenter', {
    schema: {
        to: {
            default: '2 2 2'
        }
    },
    init: function () {
        this.el.addEventListener('mouseneter', function () {
            this.setAttribute('scale', data.to);
        });
    }
});

我想通过QUnit进行测试。如何测试此组件是否创建scale属性？

我是否应该为此目的创建“测试A-Scene”并验证DOM？或者是否有更“单位”的方式来测试？

Answer 1

这里提出的问题分为两部分。

测试组件
测试EventListener

测试组件

ngokevin提供的链接提供了解决方案。更具体地说，查看现有测试表明我们需要创建测试a-scene https://github.com/aframevr/aframe/blob/master/tests/components/scale.test.js

这不是一个单一的测试，但是，嘿，我不想模仿所有的A-Frame库！

让我们从一个更基本的代码开始测试，而不是EventListener。

// Set a scale factor to 2 2 2
AFrame.registerComponent('big', {
    init: function () {
        this.el.setAttribute('scale', '2 2 2');
    }
});

相关测试需要创建测试a-scene。我们可以使用QUnit.module。

QUnit.module('Component testing', {
    before: function () {
        var scene = document.createElement('a-scene');
        document.querySelector('#qunit-fixture').appendChild(scene);
    },
    after: function () {
        var scene = document.querySelector('#qunit-fixture > a-scene'); 
        scene.parentNode.removeChild(scene);
    }
});

现在，我们可以通过创建a-entity来测试组件，并查看在将组件添加到标记时是否创建了属性。我们只需要等待加载组件。否则，断言是在加载组件之前进行的，最终会失败。

QUnit.test('Big add scale to 2 2 2', function (assert) {
    // Create the entity to test
    var entity = document.createElement('a-entity');
    entity.setAttribute('big', '');

    // Add it to the testing a-scene
    var scene = document.querySelector('#qunit-fixture > a-scene');
    scene.appendChild(entity);

    // Wait for the component to be loaded
    var done = assert.async()
    entity.addEventListener('loaded', function () {
        // Actual test
        assert.deepEqual(
            entity.getAttribute('scale'), 
            {'x': 2, 'y': 2, 'z': 2});
        done();
    });
});

测试EventListener

原始问题涉及EventListener。作为提醒目的，这是要测试的代码。

AFRAME.registerComponent('scale-on-mouseenter', {
    schema: {
        to: {
            default: '2 2 2'
        }
    },
    init: function () {
        this.el.addEventListener('mouseneter', function () {
            this.setAttribute('scale', data.to);
        });
    }
});

测试这需要另一个技巧。一种解决方案是创建一个命名函数，然后在EventListener here中将此函数添加为处理程序。测试将单独测试命名函数，但不测试addEventListener部分。

第二种解决方案是使用setTimeout技巧，如here所述。最终测试将使用先前的工作来测试组件，然后调度Event，然后使用assert内的setTimeout部分对测试进行排队。超时为0的效果非常好。

QUnit.test('scale-on-mouseenter add eventlistener', function (assert) {
    // Create the entity to test
    var entity = document.createElement('a-entity');
    entity.setAttribute('scale-on-mouseenter', '');

    // Add it to the testing a-scene
    var scene = document.querySelector('#qunit-fixture > a-scene');
    scene.appendChild(entity);

    // Wait for the component to be loaded
    var done = assert.async()
    entity.addEventListener('loaded', function () {
        // Dispatch the event
        entity.dispatchEvent(new Event("mouseenter"));
        // Queue the test with a timeout of 0
        setTimeout(function () {
            // Actual test
            assert.deepEqual(
                entity.getAttribute('scale'), 
                {'x': 2, 'y': 2, 'z': 2});
            done();
        });
    });
});

如何使用Qunit对A-Frame组件进行单元测试？

1 个答案:

测试组件

测试EventListener