測試定製A型架事件使用反應，AFRAME反應的

Question

在MathworldVR項目（https://github.com/michaltakac/mathworldvr）我使用aframe-super-hands-component它將觸發用戶點擊/葉VR手控制器實體時'hover-start'和'hover-end'事件時。一切都按預期工作。

但是我怎樣才能從測試內部調用這些事件？當A-Frame實體呈現爲Enzyme的shallow,react-test-renderer的renderer或Jest時，我不能模擬TestUtils的那些模型，因爲它只能模擬traditional React events。

CalcButton組件代碼：

import 'aframe' 
import 'super-hands' 
import React from 'react' 
import { Entity } from 'aframe-react' 

export default class CalcButton extends React.Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     depth: 0.02, 
     opacity: 1, 
    } 

    this.startIntersection = this.startIntersection.bind(this) 
    this.endIntersection = this.endIntersection.bind(this) 
    } 

    startIntersection() { 
    this.setState({ depth: 0, opacity: 0.2 }) 
    } 

    endIntersection() { 
    this.setState({ depth: 0.02, opacity: 1 }) 
    } 

    render() { 
    const { depth, opacity } = this.state 
    return (
     <Entity 
     className="interactive" 
     geometry={{ primitive: 'box', height: 1, width: 1, depth }} 
     material={{ shader: 'flat', side: 'double', color: 'green', opacity }} 
     scale={{ x: 0.5, y: 0.5, z: 0.5 }} 
     position={{ x: 0.5, y: 0.5, z: 0.5 }} 
     hoverable 
     events={{ 
      'hover-start': this.startIntersection, 
      'hover-end': this.endIntersection, 
     }} 
     > 
     <Entity text="Test button" /> 
     </Entity> 
    ) 
    } 
} 

建議CalcButton測試：

import React from 'react' 
import { shallow } from 'enzyme' 
import CalcButton from '.' 

jest.mock('react-dom') 

describe('CalcButton',() => { 
    it('simulates hover-start event',() => { 
    const wrapper = shallow(<CalcButton />) 
    // TODO: Somehow figure out how to simulate event and 
    // check if <a-entity> has a geometry.opacity equal to 0.2 
    }) 
}) 

Answer 1

對於實際的瀏覽器測試，我會用噶測試運行。查看AFrame-react的測試裝備：https://github.com/aframevr/aframe-react/tree/master/tests/browser。有測試React渲染和React級別的東西的React測試，以及測試哪些測試完全集成（包括事件）的瀏覽器。