86 | 87 | 88 | ); 89 | } 90 | }; 91 | -------------------------------------------------------------------------------- /test/karma.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var webpackConfig = require('../webpack.config.js'); 4 | 5 | module.exports = function(karma) { 6 | karma.set({ 7 | 8 | // Base path that will be used to resolve all patterns (eg. files, exclude). 9 | basePath: '../', 10 | 11 | // Frameworks to use. 12 | frameworks: [ 'jasmine' ], 13 | 14 | // List of files/patterns to load in the browser. 15 | files: [ 16 | { pattern: 'test/specs/*.js', served: true, included: true, watched: true } 17 | ], 18 | 19 | // List of files to exclude. 20 | exclude: [], 21 | 22 | // Test results reporter to use. Possible values: 'dots', 'progress'. 23 | reporters: [ 'dots' ], 24 | 25 | // Preprocess matching files before serving them to the browser. 26 | preprocessors: { 27 | 'test/specs/*.js': [ 'webpack', 'sourcemap' ] 28 | }, 29 | 30 | // Start this browsers 31 | browsers: [ 'Chrome' ], 32 | 33 | /** 34 | * Level of logging. Possible values: 35 | * config.LOG_DISABLE 36 | * config.LOG_ERROR 37 | * config.LOG_WARN 38 | * config.LOG_INFO 39 | * config.LOG_DEBUG 40 | */ 41 | logLevel: karma.LOG_DISABLE, 42 | 43 | // Enable / disable colors in the output (reporters and logs). 44 | colors: true, 45 | 46 | // Web server port. 47 | port: 9876, 48 | 49 | webpack: { 50 | devtool: 'cheap-eval-source-map', 51 | module: webpackConfig.module, 52 | resolve: webpackConfig.resolve 53 | }, 54 | 55 | // Prevent webpack from logging stuff to the console. 56 | webpackServer: { 57 | noInfo: true 58 | }, 59 | 60 | /** 61 | * Continuous Integration mode. 62 | * If true, Karma captures browsers, runs the tests and exits. 63 | */ 64 | singleRun: true, 65 | 66 | // Enable/disable watching file and executing tests whenever any file changes. 67 | autoWatch: false, 68 | 69 | plugins: [ 70 | 'karma-jasmine', 71 | 'karma-webpack', 72 | 'karma-sourcemap-loader', 73 | 'karma-chrome-launcher' 74 | ] 75 | }); 76 | }; -------------------------------------------------------------------------------- /test/specs/responsive-fixed-data-table.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React from 'react'; 4 | import ReactDOM from 'react-dom'; 5 | import TestUtils from 'react-addons-test-utils'; 6 | import ResponsiveFixedDataTable from './../../src/responsive-fixed-data-table'; 7 | 8 | describe('responsive-fixed-data-table', function() { 9 | let table; 10 | const container = document.createElement('div'); 11 | container.style.width = '500px'; 12 | container.style.height = '500px'; 13 | 14 | beforeEach(function() { 15 | const props = { 16 | foo: 'bar', 17 | containerStyle: { width: '20%', position: 'absolute' }, 18 | rowHeight: 1, 19 | rowsCount: 1, 20 | headerHeight: 1 21 | }; 22 | table = ReactDOM.render(, container); 23 | }); 24 | 25 | afterEach(function() { 26 | ReactDOM.unmountComponentAtNode(container); 27 | table = null; 28 | }); 29 | 30 | // _____TESTS_________________________________________________________________ // 31 | it('should have 100% width and height', function() { 32 | const tableNode = ReactDOM.findDOMNode(table); 33 | expect(tableNode.style.width).toBe('100%'); 34 | expect(tableNode.style.height).toBe('100%'); 35 | }); 36 | 37 | it('should accept additional styles', function() { 38 | const tableNode = ReactDOM.findDOMNode(table); 39 | expect(tableNode.style.position).toBe('absolute'); 40 | }); 41 | 42 | it('should not update', function() { 43 | const newProps = { ...table.props }; 44 | const newState = { ...table.state }; 45 | expect(table.shouldComponentUpdate(newProps, newState)).toBe(false); 46 | }); 47 | 48 | it('should update', function() { 49 | const newProps = { ...table.props, headerHeight: 100 }; 50 | const newState = { ...table.state, gridWidth: 100 }; 51 | expect(table.shouldComponentUpdate(newProps, newState)).toBe(true); 52 | expect(table.shouldComponentUpdate(newProps, { ...table.state })).toBe(true); 53 | expect(table.shouldComponentUpdate({ ...table.props }, newState)).toBe(true); 54 | }); 55 | 56 | it('should transfer props and add width and height', function() { 57 | const tableState = table.state; 58 | const fixedDataTable = table.refs.table; 59 | expect(fixedDataTable.props.foo).toBe('bar'); 60 | expect(fixedDataTable.props.width).toBe(tableState.gridWidth); 61 | expect(fixedDataTable.props.height).toBe(tableState.gridHeight); 62 | }); 63 | }); -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var webpack = require('webpack'); 4 | var path = require('path'); 5 | 6 | var minify = process.env.NODE_ENV === 'production'; 7 | var plugins = [ 8 | new webpack.optimize.OccurenceOrderPlugin() 9 | ]; 10 | 11 | if (minify) { 12 | plugins.push( 13 | new webpack.optimize.UglifyJsPlugin({ 14 | comments: false, 15 | compress: { 16 | warnings: false, 17 | screw_ie8: true, 18 | dead_code: true, 19 | drop_debugger: true, 20 | drop_console: true 21 | } 22 | }) 23 | ); 24 | } 25 | 26 | module.exports = { 27 | context: __dirname, 28 | entry: path.resolve(__dirname, 'src', 'responsive-fixed-data-table.js'), 29 | output: { 30 | path: path.resolve(__dirname, 'lib'), 31 | filename: 'responsive-fixed-data-table' + (minify ? '.min.js' : '.js'), 32 | library: 'ResponsiveFixedDataTable', 33 | libraryTarget: 'umd' 34 | }, 35 | externals: { 36 | react: { 37 | root: 'React', 38 | commonjs2: 'react', 39 | commonjs: 'react', 40 | amd: 'react' 41 | }, 42 | 'react-dom': { 43 | root: 'ReactDOM', 44 | commonjs2: 'react-dom', 45 | commonjs: 'react-dom', 46 | amd: 'react-dom' 47 | }, 48 | 'fixed-data-table': { 49 | root: 'FixedDataTable', 50 | commonjs2: 'fixed-data-table', 51 | commonjs: 'fixed-data-table', 52 | amd: 'fixed-data-table' 53 | } 54 | }, 55 | resolve: { 56 | extensions: ['', '.js'] 57 | }, 58 | module: { 59 | loaders: [ 60 | { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel' } 61 | ] 62 | }, 63 | plugins: plugins 64 | } --------------------------------------------------------------------------------