Запуск теста Karma с отключенным плагином браузера

Question

Я пытаюсь протестировать часть компонента, которая не будет отображаться, если в браузере нет плагина Flash. Компонент обнаруживает флеш-плагин с помощью swfObject и логикой, упомянутой ниже.

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)); 
    }); 
    }); 
}); 

Проблема this.state.isMobile установлена ​​в ложь, как карма запускает хром и флэш-плагин обнаружен. Как вы можете себе представить, тест также не может работать, если он требует ручного отключения флеш-плагина Chrome.

Answer 1

Проверка правильности работы swfObject - это не то, о чем идет речь.

Наилучшим способом было бы обратить внимание на зависимость, перемещающую ответственность за проверку, когда клиент мобилен за пределами MyComponent и просто передает его в качестве опоры. Это называется Dependency inversion principle.

Для теста вы можете запустить тест с опорой, установленной в true, а другой с настройкой на false.

Итак, у вас будет <MyComponent isMobile={true} /> и вызовите swfObject в вызывающем коде.