mirror of
https://github.com/wassname/generator-react-webpack.git
synced 2026-09-09 11:22:44 +08:00
Added ability to create stateless components
Cleaned up unittests
This commit is contained in:
Chris
@@ -7,285 +7,175 @@ describe('react-webpack:component', () => {
|
||||
|
||||
let generatorComponent = path.join(__dirname, '../../../generators/component');
|
||||
|
||||
// List of available style types. Please add a line that says
|
||||
// testComponentWithStyle(styleTypes.KEY); to the bottom of the file
|
||||
// to run all unit tests for this filetype.
|
||||
const styleTypes = {
|
||||
css: {
|
||||
type: 'css',
|
||||
fileName: 'src/styles/Mycomponent.css',
|
||||
expandedFileName: 'src/styles/my/littleSpecial/Test.css',
|
||||
assertions: {
|
||||
componentImport: 'require(\'styles//Mycomponent.css\');',
|
||||
styleContent: '.mycomponent-component'
|
||||
}
|
||||
},
|
||||
sass: {
|
||||
type: 'sass',
|
||||
fileName: 'src/styles/Mycomponent.sass',
|
||||
expandedFileName: 'src/styles/my/littleSpecial/Test.sass',
|
||||
assertions: {
|
||||
componentImport: 'require(\'styles//Mycomponent.sass\');',
|
||||
styleContent: '.mycomponent-component'
|
||||
}
|
||||
},
|
||||
scss: {
|
||||
type: 'scss',
|
||||
fileName: 'src/styles/Mycomponent.scss',
|
||||
expandedFileName: 'src/styles/my/littleSpecial/Test.scss',
|
||||
assertions: {
|
||||
componentImport: 'require(\'styles//Mycomponent.scss\');',
|
||||
styleContent: '.mycomponent-component'
|
||||
}
|
||||
},
|
||||
less: {
|
||||
type: 'less',
|
||||
fileName: 'src/styles/Mycomponent.less',
|
||||
expandedFileName: 'src/styles/my/littleSpecial/Test.less',
|
||||
assertions: {
|
||||
componentImport: 'require(\'styles//Mycomponent.less\');',
|
||||
styleContent: '.mycomponent-component'
|
||||
}
|
||||
},
|
||||
stylus: {
|
||||
type: 'stylus',
|
||||
fileName: 'src/styles/Mycomponent.styl',
|
||||
expandedFileName: 'src/styles/my/littleSpecial/Test.styl',
|
||||
assertions: {
|
||||
componentImport: 'require(\'styles//Mycomponent.styl\');',
|
||||
styleContent: '.mycomponent-component'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Return a newly generated component with given name and style
|
||||
* @param {String} name
|
||||
* @param {String} styleType
|
||||
* @param {Function} callback
|
||||
* @param {String} name Name of the component
|
||||
* @param {String} styleType Styling language to use
|
||||
* @param {Object} options Options to use for the generator
|
||||
* @param {Function} callback Test callback to run
|
||||
*/
|
||||
function createGeneratedComponent(name, styleType, callback) {
|
||||
function createGeneratedComponent(name, styleType, options, callback) {
|
||||
helpers.run(generatorComponent)
|
||||
.withArguments([name])
|
||||
.withOptions(options)
|
||||
.on('ready', (instance) => {
|
||||
instance.config.set('style', styleType);
|
||||
})
|
||||
.on('end', callback);
|
||||
}
|
||||
|
||||
describe('When using style type "css"', () => {
|
||||
/**
|
||||
* Test a component with styling applied
|
||||
* @param {Object} style The style to apply (see styleTypes above)
|
||||
* @param {Object} options Options to use [optional]
|
||||
*/
|
||||
function testComponentWithStyle(style, options) {
|
||||
|
||||
describe('Setup', () => {
|
||||
// Make sure we always have options
|
||||
if(!options) {
|
||||
options = {};
|
||||
}
|
||||
|
||||
it('should create the react component, its stylesheet and test file', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'css', () => {
|
||||
describe(`When using style type "${style.type}"`, () => {
|
||||
|
||||
assert.file([
|
||||
'src/components/MycomponentComponent.js',
|
||||
'src/styles/Mycomponent.css',
|
||||
'test/components/MycomponentComponentTest.js'
|
||||
]);
|
||||
done();
|
||||
describe('When writing is called', () => {
|
||||
|
||||
it(`should create the react component, its ${style.type}-stylesheet and test file`, (done) => {
|
||||
createGeneratedComponent('mycomponent', style.type, options, () => {
|
||||
|
||||
assert.file([
|
||||
'src/components/MycomponentComponent.js',
|
||||
style.fileName,
|
||||
'test/components/MycomponentComponentTest.js'
|
||||
]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('When creating a component', () => {
|
||||
|
||||
it('should always import REACT', (done) => {
|
||||
createGeneratedComponent('mycomponent', style.type, options, () => {
|
||||
assert.fileContent('src/components/MycomponentComponent.js', `import React from 'react';`);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it(`should require the created ${style.type} file`, (done) => {
|
||||
createGeneratedComponent('mycomponent', style.type, options, () => {
|
||||
assert.fileContent('src/components/MycomponentComponent.js', style.assertions.componentImport);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should have its displayName set per default', (done) => {
|
||||
createGeneratedComponent('mycomponent', style.type, options, () => {
|
||||
assert.fileContent('src/components/MycomponentComponent.js', `displayName = 'MycomponentComponent';`);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should export the created component', (done) => {
|
||||
createGeneratedComponent('mycomponent', style.type, options, () => {
|
||||
assert.fileContent('src/components/MycomponentComponent.js', `export default MycomponentComponent`);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it(`should be possible to create components in a subfolder`, (done) => {
|
||||
createGeneratedComponent('my/little !special/test', style.type, options, () => {
|
||||
|
||||
assert.file([
|
||||
'src/components/my/littleSpecial/TestComponent.js',
|
||||
style.expandedFileName,
|
||||
'test/components/my/littleSpecial/TestComponentTest.js'
|
||||
]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Style', () => {
|
||||
|
||||
it(`should add the components ${style.type} class to the stylesheet`, (done) => {
|
||||
createGeneratedComponent('mycomponent', style.type, options, () => {
|
||||
assert.fileContent(style.fileName, style.assertions.styleContent);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Test', () => {
|
||||
|
||||
it('should import the react component', (done) => {
|
||||
createGeneratedComponent('mycomponent', style.type, options, () => {
|
||||
assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
describe('Component', () => {
|
||||
|
||||
it('should require the created css file', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'css', () => {
|
||||
assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.css\');');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should have its displayName set per default', (done) => {
|
||||
|
||||
createGeneratedComponent('mycomponent', 'css', () => {
|
||||
assert.fileContent('src/components/MycomponentComponent.js', `displayName = 'MycomponentComponent';`);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Style', () => {
|
||||
|
||||
it('should add the components css class to the stylesheet', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'css', () => {
|
||||
assert.fileContent('src/styles/Mycomponent.css', '.mycomponent-component');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Test', () => {
|
||||
|
||||
it('should import the react component', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'css', () => {
|
||||
assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
}); // End css
|
||||
|
||||
describe('When creating a component in a subfolder', () => {
|
||||
|
||||
describe('Setup', () => {
|
||||
|
||||
it('should create the react component, its stylesheet and test file', (done) => {
|
||||
createGeneratedComponent('my/little !special/test', 'css', () => {
|
||||
|
||||
assert.file([
|
||||
'src/components/my/littleSpecial/TestComponent.js',
|
||||
'src/styles/my/littleSpecial/Test.css',
|
||||
'test/components/my/littleSpecial/TestComponentTest.js'
|
||||
]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
}); // End css (subfolder)
|
||||
|
||||
describe('When using style type "sass"', () => {
|
||||
|
||||
describe('Setup', () => {
|
||||
|
||||
it('should create the react component, its stylesheet and test file', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'sass', () => {
|
||||
|
||||
assert.file([
|
||||
'src/components/MycomponentComponent.js',
|
||||
'src/styles/Mycomponent.sass',
|
||||
'test/components/MycomponentComponentTest.js'
|
||||
]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Component', () => {
|
||||
|
||||
it('should require the created sass file', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'sass', () => {
|
||||
assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.sass\');');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Style', () => {
|
||||
|
||||
it('should add the components sass class to the stylesheet', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'sass', () => {
|
||||
assert.fileContent('src/styles/Mycomponent.sass', '.mycomponent-component');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Test', () => {
|
||||
|
||||
it('should import the react component', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'sass', () => {
|
||||
assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
}); // End sass
|
||||
|
||||
describe('When using style type "scss"', () => {
|
||||
|
||||
describe('Setup', () => {
|
||||
|
||||
it('should create the react component, its stylesheet and test file', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'scss', () => {
|
||||
|
||||
assert.file([
|
||||
'src/components/MycomponentComponent.js',
|
||||
'src/styles/Mycomponent.scss',
|
||||
'test/components/MycomponentComponentTest.js'
|
||||
]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Component', () => {
|
||||
|
||||
it('should require the created scss file', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'scss', () => {
|
||||
assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.scss\');');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Style', () => {
|
||||
|
||||
it('should add the components scss class to the stylesheet', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'scss', () => {
|
||||
assert.fileContent('src/styles/Mycomponent.scss', '.mycomponent-component');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Test', () => {
|
||||
|
||||
it('should import the react component', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'scss', () => {
|
||||
assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
}); // End scss
|
||||
|
||||
describe('When using style type "less"', () => {
|
||||
|
||||
describe('Setup', () => {
|
||||
|
||||
it('should create the react component, its stylesheet and test file', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'less', () => {
|
||||
|
||||
assert.file([
|
||||
'src/components/MycomponentComponent.js',
|
||||
'src/styles/Mycomponent.less',
|
||||
'test/components/MycomponentComponentTest.js'
|
||||
]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Component', () => {
|
||||
|
||||
it('should require the created less file', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'less', () => {
|
||||
assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.less\');');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Style', () => {
|
||||
|
||||
it('should add the components less class to the stylesheet', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'less', () => {
|
||||
assert.fileContent('src/styles/Mycomponent.less', '.mycomponent-component');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Test', () => {
|
||||
|
||||
it('should import the react component', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'less', () => {
|
||||
assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
}); // End less
|
||||
|
||||
describe('When using style type "stylus"', () => {
|
||||
|
||||
describe('Setup', () => {
|
||||
|
||||
it('should create the react component, its stylesheet and test file', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'stylus', () => {
|
||||
|
||||
assert.file([
|
||||
'src/components/MycomponentComponent.js',
|
||||
'src/styles/Mycomponent.styl',
|
||||
'test/components/MycomponentComponentTest.js'
|
||||
]);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Component', () => {
|
||||
|
||||
it('should require the created stylus file', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'stylus', () => {
|
||||
assert.fileContent('src/components/MycomponentComponent.js', 'require(\'styles//Mycomponent.styl\');');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Style', () => {
|
||||
|
||||
it('should add the components stylus class to the stylesheet', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'stylus', () => {
|
||||
assert.fileContent('src/styles/Mycomponent.styl', '.mycomponent-component');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Test', () => {
|
||||
|
||||
it('should import the react component', (done) => {
|
||||
createGeneratedComponent('mycomponent', 'less', () => {
|
||||
assert.fileContent('test/components/MycomponentComponentTest.js', 'import MycomponentComponent from \'components//MycomponentComponent.js\';');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
}); // End stylus
|
||||
// Run all tests for all available style types.
|
||||
testComponentWithStyle(styleTypes.css);
|
||||
testComponentWithStyle(styleTypes.sass);
|
||||
testComponentWithStyle(styleTypes.scss);
|
||||
testComponentWithStyle(styleTypes.less);
|
||||
testComponentWithStyle(styleTypes.stylus);
|
||||
|
||||
// Test stateless components (should be enough when testing with defaults)
|
||||
testComponentWithStyle(styleTypes.css, { stateless: true });
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user