Workshop: Composing Simple Components

See related slides for this part: http://omniscientjs.github.io/workshop-slides/#14

← Previous task Next task →

// ---
// Assignment: Make a a WelcomeBox component which uses an
// User component which takes  input properties.
// Render it to the DOM.
// ---

// make an React Class named User
// the component should show <strong>John Smith</strong> if no name is given on props,
// otherwise it should show <strong>«Passed Name»</strong>,
var User;

// make an React Class named WelcomeBox
// the component should show a div with a h1 with the text "Hello, USER!",
// You can also show a welcome message beneeth the h1.
var WelcomeBox;

// render the WelcomeBox class to the `el` element
// with a prop name set to "The Doctor"

/*  Tests are below here, for guiding you  */

describe('workshop part 1', function () {

it('should have class named User and WelcomeBox', function () {
    expect(React.isValidClass(User)).to.equal(true,
      'User must be a valid React class');
    expect(React.isValidClass(WelcomeBox)).to.equal(true,
      'WelcomeBox must be a valid React class');
  });

it('should have WelcomeBox component taking a name as props', function () {
    var output = React.renderComponentToString(WelcomeBox({ name: 'Foobar'}));
    expect(output).to.contain('<div', 'must be wrapped in a div');
    expect(output).to.contain('<strong', 'name should be wrapped in strong');
    expect(output).to.contain('Foobar', 'must render passed name');
    expect(output).to.contain('<h1', 'title should be h1');
  });

it('should have User component taking name as props', function () {
    var output = React.renderComponentToString(User({ name: 'Foobar' }));
    expect(output).to.contain('Foobar', 'name should be overridable');
    expect(output).to.contain('<strong');
  });

it('should have User component with default name John Smith', function () {
    var output = React.renderComponentToString(User());
    expect(output).to.contain('John Smith');
  });

it('should have rendered components to DOM', function () {
    var html = el.innerText;
    expect(html).to.contain('Hello, The Doctor!');
  });
});

Tasks

← Previous task Next task →

Available globals/variables

Use el to get to an element you can render to with your Omniscient components!

React: React instance
omniscient/component: Omniscient instance
immstruct: Immstruct instance
Immutable: Immutable.js instance
Cursor: Cursor (Immutable.js contrib)
redux: redux instance
reduxThunk: reduxThunk instance
reactRedux: reactRedux instance

Testing

describe: new test suite (mocha)
it: new test (mocha)
xit: pending test (mocha)
xdescribe: pending scenario (mocha)
before/after: run code before or after all tests (mocha)
beforeEach/afterEach: run code before or after each tests (mocha)
chai: chai.js assertion library