generator-react-webpack/test/generators/component/indexTest.js

'use strict';
let path = require('path');
let assert = require('yeoman-generator').assert;
let helpers = require('yeoman-generator').test

describe('react-webpack:component', () => {

  let generatorComponent = path.join(__dirname, '../../../generators/component');

  /**
   * Return a newly generated component with given name and style
   * @param {String} name
   * @param {String} styleType
   * @param {Function} callback
   */
  function createGeneratedComponent(name, styleType, callback) {
    helpers.run(generatorComponent)
      .withArguments([name])
      .on('ready', (instance) => {
        instance.config.set('style', styleType);
      })
      .on('end', callback);
  }

  describe('When using style type "css"', () => {

    describe('Setup', () => {

      it('should create the react component, its stylesheet and test file', (done) => {
        createGeneratedComponent('mycomponent', 'css', () => {

          assert.file([
            'src/components/MycomponentComponent.js',
            'src/styles/Mycomponent.css',
            'test/components/MycomponentComponentTest.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();
        });
      });
    });

    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

});