Tutorials: First page

Create a new page using TDD

Create the following files:

src/app/pages/NewsScreen/NewsScreen.jsx
src/app/pages/NewsScreen/NewsScreen.spec.jsx

Run tests

execute npm run test:dev or ./go test:dev => this will watch your tests and execute them as you make changes

NewsScreen.spec.jsx

import React from 'react';
import { shallow } from 'enzyme';
import { NewsScreenComponent, NewsScreenButtons } from './NewsScreen';
import ButtonAction from '../../../framework/util/ButtonAction';

jest.mock('../../../framework/util/ButtonAction');

describe('<NewsScreenComponent />', () => {
  let componentWrapper;

  beforeEach(() => {
    componentWrapper = shallow(<NewsScreenComponent />);
    jest.spyOn(ButtonAction, 'goToPage');
  });

  it('should display the article publish date', () => {
    expect(componentWrapper.find('#publish-date')).toHaveText('Publish date: 23/05/1823');
  });

  it('should display (my first news article) by default', () => {
    expect(componentWrapper).toIncludeText('My first news article');
  });

  describe('NewsScreenButtons', () => {
    test('it should have a LEFT button config of going to Home Page', () => {
      NewsScreenButtons.LEFT();
      expect(ButtonAction.goToPage).toHaveBeenCalledWith('/');
    });

    test('it should have a RIGHT button config of going to contactList page', () => {
      NewsScreenButtons.RIGHT();
      expect(ButtonAction.goToPage).toHaveBeenCalledWith('/contacts');
    });

    test('it should have a TOP button config of going to contactList page', () => {
      NewsScreenButtons.TOP();
      expect(ButtonAction.scrollUp).toHaveBeenCalled();
    });

    test('it should have a BOTTOM button config of going to contactList page', () => {
      NewsScreenButtons.BOTTOM();
      expect(ButtonAction.scrollDown).toHaveBeenCalled();
    });
  });
});

NewsScreen.jsx

import React from 'react';
import WithButtonConfigs from '../../../framework/containers/WithButtonConfigs';
import ButtonAction from '../../../framework/util/ButtonAction';

export const NewsScreenComponent = () => {
  return (
    <div id='news-page'>
      <div id='news-articles-container'>
        <div>
          <span id='publish-date'>Publish date: 23/05/1823</span>
          <p>My first news article </p>
        </div>
      </div>
    </div>
  );
};

export const NewsScreenButtons = {
  LEFT: () => ButtonAction.goToPage('/'),
  RIGHT: () => ButtonAction.goToPage('/contacts'),
  TOP: () => ButtonAction.scrollUp(),
  BOTTOM: () => ButtonAction.scrollDown(),
};

export default WithButtonConfigs(NewsScreenComponent, NewsScreenButtons);

Add your page to the watch

open src/index.js and add the following lines

import NewsScreen from './app/pages/NewsScreen/NewsScreen';
...

const pages = [
...
{ path: '/news', Component: NewsScreen },
]
...

Now you should be able to access the page by simply going to http://localhost:8000/news in the browser

Remember to always follow the TDD cycle: write a failing test -> pass failing test -> refactor code