From 5ed9250dcd509457d1a16dd03fb4844abbb36d71 Mon Sep 17 00:00:00 2001 From: Tobias Kloht Date: Mon, 2 Apr 2018 14:57:28 +0200 Subject: [PATCH 1/3] use new component scripts, use react16 for examples --- package.json | 7 +++---- setupTests.js | 25 +++++++++++++++++++++++++ 2 files changed, 28 insertions(+), 4 deletions(-) create mode 100644 setupTests.js diff --git a/package.json b/package.json index b2ae7e1..844614c 100644 --- a/package.json +++ b/package.json @@ -37,12 +37,11 @@ "react": "^0.14.0 || ^15.0.0" }, "devDependencies": { - "@tkloht/react-component-scripts": "~1.7.0", + "@tkloht/react-component-scripts": "~2.1.0", "classnames": "~2.2.5", "prop-types": "~15.5.10", - "react": "~15.6.0", - "react-addons-test-utils": "~15.6.0", - "react-dom": "~15.6.0", + "react": "~16.3.0", + "react-dom": "~16.3.0", "react-router-dom": "4.1.1", "react-simple-resize": "^2.1.0" } diff --git a/setupTests.js b/setupTests.js new file mode 100644 index 0000000..50da3a4 --- /dev/null +++ b/setupTests.js @@ -0,0 +1,25 @@ +import Enzyme from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; +import {JSDOM} from 'jsdom'; + +Enzyme.configure({ adapter: new Adapter() }); + +const jsdom = new JSDOM(''); +const {window} = jsdom; + +function copyProps(src, target) { + const props = Object.getOwnPropertyNames(src) + .filter(prop => typeof target[prop] === 'undefined') + .reduce((result, prop) => ({ + ...result, + [prop]: Object.getOwnPropertyDescriptor(src, prop), + }), {}); + Object.defineProperties(target, props); +} + +global.window = window; +global.document = window.document; +global.navigator = { + userAgent: 'node.js', +}; +copyProps(window, global); From b9ea4f3bf139f7dc9f9e42243eda82647e721cd9 Mon Sep 17 00:00:00 2001 From: Tobias Kloht Date: Mon, 2 Apr 2018 14:57:41 +0200 Subject: [PATCH 2/3] adjust test setup after component scripts update: now using jest instead of enzyme -> required file-structure changes, some updates to the test mostly because now using jest expect instead of chai assertions. test which require mocked useragent are not working currently, this should be fixed but i couldn't figure out how to do it in jest yet. --- .babelrc | 6 + __mocks__/fileMock.js | 1 + __mocks__/react-intl.js | 18 + __mocks__/styleMock.js | 1 + lib/__tests__/.eslintrc | 5 + lib/__tests__/VideoCover.spec.js | 137 + lib/__tests__/VideoCoverFallback.spec.js | 206 + package.json | 21 +- tests/VideoCover.spec.js | 50 +- tests/VideoCoverFallback.spec.js | 94 +- yarn.lock | 7738 ++++++++++++++++++++++ 11 files changed, 8200 insertions(+), 77 deletions(-) create mode 100644 .babelrc create mode 100644 __mocks__/fileMock.js create mode 100644 __mocks__/react-intl.js create mode 100644 __mocks__/styleMock.js create mode 100644 lib/__tests__/.eslintrc create mode 100644 lib/__tests__/VideoCover.spec.js create mode 100644 lib/__tests__/VideoCoverFallback.spec.js create mode 100644 yarn.lock diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..8d8f3db --- /dev/null +++ b/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": ["stage-0", "es2015", "react"], + "plugins": [ + ["transform-class-properties"], + ], +} diff --git a/__mocks__/fileMock.js b/__mocks__/fileMock.js new file mode 100644 index 0000000..86059f3 --- /dev/null +++ b/__mocks__/fileMock.js @@ -0,0 +1 @@ +module.exports = 'test-file-stub'; diff --git a/__mocks__/react-intl.js b/__mocks__/react-intl.js new file mode 100644 index 0000000..b37b98e --- /dev/null +++ b/__mocks__/react-intl.js @@ -0,0 +1,18 @@ +import React from 'react'; + +const Intl = require.requireActual('react-intl'); + +// Here goes intl context injected into component, feel free to extend +const intl = { + formatMessage: ({defaultMessage}) => defaultMessage +}; + +Intl.injectIntl = (Node) => { + const renderWrapped = props => ; + renderWrapped.displayName = Node.displayName + || Node.name + || 'Component'; + return renderWrapped; +}; + +module.exports = Intl; diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js new file mode 100644 index 0000000..f053ebf --- /dev/null +++ b/__mocks__/styleMock.js @@ -0,0 +1 @@ +module.exports = {}; diff --git a/lib/__tests__/.eslintrc b/lib/__tests__/.eslintrc new file mode 100644 index 0000000..d37312a --- /dev/null +++ b/lib/__tests__/.eslintrc @@ -0,0 +1,5 @@ +{ + "rules": { + "max-len": 0, + }, +} diff --git a/lib/__tests__/VideoCover.spec.js b/lib/__tests__/VideoCover.spec.js new file mode 100644 index 0000000..8430c5d --- /dev/null +++ b/lib/__tests__/VideoCover.spec.js @@ -0,0 +1,137 @@ +/* eslint-env mocha*/ +import VideoCover from '../index'; +import VideoCoverFallback from '../VideoCoverFallback'; + +import React from 'react'; +import { shallow } from 'enzyme'; + +function setUserAgent(userAgent) { + const originalNavigator = window.navigator; + /* eslint-disable no-native-reassign, no-proto, no-underscore-dangle */ + navigator = {}; + navigator.__proto__ = originalNavigator; + navigator.__defineGetter__('userAgent', () => userAgent); + /* eslint-enable no-native-reassign, no-proto, no-underscore-dangle */ +} + +describe('VideoCover', () => { + it('should render a video tag', () => { + const wrapper = shallow(); + const video = wrapper.find('video'); + expect(video).toExist(); + }); + + it('should not render Fallback component by default', () => { + const wrapper = shallow(); + expect(wrapper.find(VideoCoverFallback)).not.toExist(); + }); + + it('should set classname of