2
\$\begingroup\$

I recently got a take-home project for a company hiring for front-end developers. The task can be found here.

I was given two hours to complete it, and did, but was told they wouldn't be moving forward. I actually thought I did a pretty good job given the two hour limit.

Since companies don't give out any information as to why they aren't moving forward, I thought I would come here to ask what should have been done differently. Here is my submitted code (which meets all requirements on the page):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Tests</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="main"></div>

    <script type="text/babel">

        class Tests extends React.Component {
            constructor(props) {
                super(props);

                this.possibleStatuses =  {
                    running: "Running",
                    passed: "Passed",
                    failed: "Failed"
                };

                this.state = {
                    runningState: '',
                    numPassed: 0,
                    numFailed: 0,
                    numRunning: 0,
                    tests : [
                      { description: "commas are rotated properly",          run: this._generateDummyTest(), status: 'Not Started Yet' },
                      { description: "exclamation points stand up straight", run: this._generateDummyTest(), status: 'Not Started Yet' },
                      { description: "run-on sentences don't run forever",   run: this._generateDummyTest(), status: 'Not Started Yet' },
                      { description: "question marks curl down, not up",     run: this._generateDummyTest(), status: 'Not Started Yet' },
                      { description: "semicolons are adequately waterproof", run: this._generateDummyTest(), status: 'Not Started Yet' },
                      { description: "capital letters can do yoga",          run: this._generateDummyTest(), status: 'Not Started Yet' }
                    ]
                }
            }

            render() {
                return (
                    <div>
                        <h1>Tests {this.state.runningState}</h1>
                        <button id="run-button" onClick={this._startTests}>Start Tests</button>
                        <div id="statuses">
                            <span id="num-of-passed">{this.state.numPassed} Passed</span> | 
                            <span id="num-of-failed"> {this.state.numFailed} Failed</span> |
                            <span id="num-of-running"> {this.state.numRunning} {this.possibleStatuses.running}</span>
                        </div>
                        <ol id="tests">
                            {
                                this.state.tests.map((test, i) => {
                                    return <li key={i}>{test.description} - {test.status}</li>
                                })
                                .sort(this._sortTests)
                            }
                        </ol>
                    </div>
                );
            }

            _generateDummyTest = () => {
                var delay = 7000 + Math.random() * 7000;
                var testPassed = Math.random() > 0.5;

                return function(callback) {
                    setTimeout(function() {
                        callback(testPassed);
                    }, delay);
                };
            }

            _startTests = () => {
                let tests = [];

                this.state.tests.forEach((test, i) => {
                    let runningTest = $.extend({}, test, {status: this.possibleStatuses.running});
                    tests.push(runningTest);

                    var runTest = test.run;
                    runTest((testPassed) => {
                        let finishedTests = $.extend({}, test, {status: testPassed ? this.possibleStatuses.passed : this.possibleStatuses.failed}),
                            updatedTests = this.state.tests.splice(0);

                        updatedTests[i] = finishedTests;

                        let numPassed = testPassed ? this.state.numPassed + 1 : this.state.numPassed,
                            numFailed = !testPassed ? this.state.numFailed + 1 : this.state.numFailed,
                            numRunning = this.state.numRunning - 1,
                            runningState = numRunning > 0 ? 'Running...' : 'FINISHED!'

                        this.setState({
                            tests: updatedTests,
                            numRunning: this.state.numRunning - 1,
                            runningState,
                            numPassed,
                            numFailed
                        })
                    });
                });

                this.setState({
                    runningState: 'Running...',
                    numRunning: 6,
                    numPassed: 0,
                    numFailed: 0,
                    tests
                });
            }

            _sortTests = (a, b) => {
                a = a.props.children[2];
                b = b.props.children[2];
                console.log(a, b);
                if (a == this.possibleStatuses.failed && b == this.possibleStatuses.running)
                    return 1;
                else if (a == this.possibleStatuses.failed && b == this.possibleStatuses.passed)
                    return 1;
                else if (a == this.possibleStatuses.passed && b == this.possibleStatuses.running)
                    return 1;
                else
                    return -1;
            }

        }

        ReactDOM.render(
            <Tests />,
            document.getElementById('main')
        );

    </script>
  </body>
</html>
\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

The instructions said:

Use these exact tests as the inputs to your test runner.

You changed the tests. You not only added the starting state into the test, you also hard coded these tests into your component, rather than passing as input.

You have now heavily coupled your tests with your test runner component, which I am guessing is the top thing that someone reviewing this code would be concerned with.

So, you didn't really solve the problem (or at least the spirit of the problem).


You put your javascript smack dab in the middle of your HTML view and in global scope. It probably should have, at a minimum, been in a document ready ready block or IIFE, ideally in a separate file to demonstrate that you know how to decouple view from logic.

In a real world application you would likely have components of this sort defined at a framework level, decoupled from page view.


You attempted to use components, but didn't really use a componentized approach. You probably could have had a single component defined to render the test element and the state of each and a separate component defined to deal with the tests at a suite level which would handle triggering tests, updating test ordering, and display of suite-level information.


Your style is inconsistent. For example, in JS, sometimes you are ending lines with semicolons, other times not.

\$\endgroup\$
2
  • \$\begingroup\$ "You attempted to use components, but didn't really use a componentized approach. You probably could have had a single component defined to render the test element and the state of each and a separate component defined to deal with the tests at a suite level which would handle triggering tests, updating test ordering, and display of suite-level information." Could you expound on this? \$\endgroup\$ Feb 4, 2017 at 18:07
  • \$\begingroup\$ @JakeFoster I mean that you could have had one component defined which represents the logic and view for each individual test and another test suite level component within which the test components are nested. \$\endgroup\$
    – Mike Brant
    Feb 5, 2017 at 4:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.