Running Karma Test mit Browser-Flash-Plugin deaktiviert

Question

Ich versuche, einen Teil einer Komponente zu testen, die nicht angezeigt wird, wenn der Browser kein Flash-Plugin hat. Die Komponente erkennt das Flash-Plugin mit Hilfe von swfObject und der unten genannten Logik.

MyComponent.js

export default class MyComponent extends Component { 
    static propTypes = { 
    // props... 
    }; 

    static contextTypes = { 
    router: PropTypes.object.isRequired, 
    }; 

    constructor() { 
    super(); 
    this.state = { 
     isMobile: true 
    }; 
    } 

componentDidMount() { 
    const flashVersion = require('../../../client/utils/detectFlash')(); 
    if ((flashVersion && flashVersion.major !== 0)) { 
     /* eslint-disable */ 
     this.setState({isMobile: false}); 
     /* eslint-enable */ 
    } 
    } 
    //... 
    render() { 
    //... 
    return (
     //... 
     { !this.state.isMobile && (
      <div className="xyz"> 
      <p>XYZ: this content only shows up when flash has been detected</p> 
      </div>) 
     } 
    ); 
    } 
} 

MyComponent-test.js

import React from 'react'; 
import {mount} from 'enzyme'; 
import chai, {expect} from 'chai'; 
import chaiEnzyme from 'chai-enzyme'; 
import configureStore from 'redux-mock-store'; 
import { Provider } from 'react-redux'; 
import {MyComponent} from '../../common/components'; 

chai.use(chaiEnzyme()); 

describe('<MyComponent />',() => { 

    describe('mobile/flash disabled',() => { 

    const mockStore = configureStore({}); 
    const store = mockStore({}); 

    it('Does not render xyz',() => { 
     const wrapper = mount(
     <Provider store={store} key="provider"> 
      <MyComponent {...params}/> 
     </Provider> 
    ); 
     expect(wrapper.find('.xyz').to.have.length(0)); 
    }); 
    }); 
}); 

Das Problem ist this.state.isMobile auf false gesetzt als Karma erkannt Chrom und Flash-Plugin startet. Wie Sie sich vorstellen können, funktioniert der Test auch nicht, wenn Sie das Flash-Plugin von Chrome manuell deaktivieren müssen.

Answer 1

Testen, ob swfObject richtig funktioniert, ist nicht das, was dein Test ist.

Der beste Weg wäre, die Abhängigkeit zu invertieren, die die Verantwortung verschiebt, um zu überprüfen, wann immer der Kunde außerhalb von MyComponent mobil ist, und es einfach als Prop zu übergeben. Dies wird Dependency inversion principle genannt.

Für den Test können Sie dann einen Test mit der Requisite auf True und eine andere damit auf false gesetzt ausführen.

Sie hätten also <MyComponent isMobile={true} /> und rufen Sie das swfObject im aufrufenden Code.