davidmason / esnext-quickstart Goto Github PK

See section "Code Completion" at http://www.jayway.com/2014/03/28/running-scripts-with-npm/

All the testing, linting, and building tools should only be needed during development.

The default provided test checks for the text "Hello" like this:

describe('Content', () => {
  it('Should render greetings', () => {
    const content = TestUtils.renderIntoDocument(<Content />);

    const h1 = TestUtils.findRenderedDOMComponentWithTag(content, 'h1');
    expect(h1).toBeDom();
    expect(h1).toHaveText('Hello');
  });
});

This passes, and changing to expect(h1).not.toHaveText('Hello'); fails, but if the text in the referenced component is changed to something other than "Hello", the original test still passes, and the inverse test still fails.

Possibilities:

• toHaveText() is not working and always returns true.
• There is something wrong code changes not being picked up properly. This does not explain some of the checks I have done with adding tests for strings that are not present.
• elements are not being passed to expect() in the right form. This is supported by some very unreadable output in the failure message - it prints out a whole object with many properties as the thing that should not have the text in it.

Running npm build does nothing, no directory is created, but copying the command out of package.json and running it manually on the command line shows:

[damason@hiddlins esnext-quickstart]$ rm -rf public && cp -pr src/static/ public && webpack
bash: webpack: command not found...

When the command is run this way, the public directory is created.

Something is preventing the public directory being created with npm build. webpack is a dev dependency so it may be available.

• Figure out what is preventing the command working.

The correct command to run is npm run build. This fails with an error message due to a syntax error in the webpack config. It also fails if npm install has not been run yet, with message "sh: webpack: command not found".

• Ensure that an appropriate error is shown to guide developers when the command does not work for this reason.

The appropriate error is shown for the webpack config syntax error.
A better error message could be shown when webpack is not found, instructing to run npm install or npm install -g webpack. FIled as #4

• Ensure that an error is shown when the command does not work for some other reason.

This is already true.

• Check if it is possible to tell users when they run npm build that it is not a valid command (or make it a valid command).

npm run build fails if npm install has not been run. The error message says that the command "webpack" is not found.

Better if it also instructed developers to run npm install or npm install -g webpack to fix the problem.

To reproduce

1. run npm start and open localhost:3000 in a browser. Open the javascript log pane of the browser.
2. add a paragraph tag with some text in Content component. The change should be reflected in the browser, and log messages indicate that hot update has occurred.
3. terminate the listen server, leaving the browser window open
4. run npm start again.
5. add another paragraph tag with some text in Content component.

The browser log shows that hot update has occurred, but the new paragraph is not shown in the browser window.

• The ideal behaviour is for hot swap to continue working despite server restart.
• The second-best behaviour, if the above option is not plausible, would be for the page to automatically refresh when it connects to a new instance of the server.
• The minimum acceptable behaviour would be for an error to display over the UI to inform the developer that hot-swap is no longer working or may not be working

Workaround

It appears that opening 0.0.0.0:3000 in the browser, rather than localhost:3000 allows the hot-swap to properly detect disconnection. With 0.0.0.0:3000 open, terminating the watch server causes the browser log to show "[WDS] Disconnected", and when the server is restarted the browser continues to show changes to the content.

• The start task should say Listening on http://0.0.0.0:3000 so that developers are prompted to open the URL with the better behaviour.
• Check whether there is a way for the listen server to detect when localhost is used and show a warning.