Workshop: Hello Omniscient JSX

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

← Previous task Next task →

// ---
// Assignment:  Recreate the Hello component using jsx.
// ---

// make local component creator that defaults
// to jsx by using omniscient.withDefaults().
var component = omniscient.withDefaults({ jsx: true });

// make an omniscient component named Hello
// the component should show "Hello, World!" if no name is given on props,
// otherwise it should show "Hello, «Name»!",
// where name is the name passed as prop
var Hello;

// render the Hello component to the `el` element
// with a prop name set to "React"
React.render(<div></div>, el);

// Tests should turn green
it('should have class named Hello', function () {
  expect(React.isValidClass(Hello)).to.equal(true,
    'Hello must be a valid React class');
});

it('should have component Hello with name from props', function () {
  var output = React.renderComponentToString(Hello({ name: 'Foo'}));
  expect(output).to.contain('Hello,');
  expect(output).to.contain('Foo');
  expect(output).to.contain('<h1');
});

it('should have component Hello with default name World', function () {
  var output = React.renderComponentToString(Hello());
  expect(output).to.contain('Hello,');
  expect(output).to.contain('World');
  expect(output).to.contain('<h1');
});

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

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