|
| 1 | +[](http://it-shark.pro/) |
| 2 | +#Brest IT Shark School |
| 3 | +## Javascript Assignments [](https://travis-ci.org/it-shark-pro/js-assignments) |
| 4 | + |
| 5 | +Yet another javascript assignments. There are a lot of interactive javascript resources for beginners, but most of them are online and do not cover the modern programming workflow. There are some excellent training resources on github (https://github.com/rmurphey/js-assessment, https://github.com/mrdavidlaing/javascript-koans, https://github.com/vasanthk/js-bits etc) but they are not exactly simulate the everyday programming process. So the motivation of this project is to show TDD process in the wild to the beginners. Assingment tests are implemented in various ways to feel a difference and gain the experience what manner is good, what is bad and what is ugly. |
| 6 | + |
| 7 | +Another idea is to prepare assignment to cover all standard javascript functions, to drilling and mastering skills. Some tasks are practical, but some tasks are rather synthetic. |
| 8 | + |
| 9 | +And the last idea is to inure trainees to work using unit test and feel uncomfortable when programming without tests. |
| 10 | + |
| 11 | +To start javascript assignments please follow the next steps: |
| 12 | +* [Fork this repo](#user-content-how-to-fork-this-repo) |
| 13 | +* [Setup travis-ci to test the commits](#user-content-how-to-setup-travis-ci) |
| 14 | +* [Setup the work environment](#user-content-how-to-setup-work-environment) |
| 15 | +* [Implement assignments using TDD fashion](#user-content-how-to-implement-assignments-using-tdd-fashion) |
| 16 | +* [How to debug tasks](#how-to-debug-tasks) |
| 17 | + |
| 18 | +### How to fork this repo |
| 19 | +* Click the **Fork** button at the top-right corner of this page and the repository will be copied to your own account. |
| 20 | +* Run `git clone https://github.com/<your-account>/js-assignments.git` from command line to download the repo. |
| 21 | + |
| 22 | +### How to setup travis-ci |
| 23 | +* Open [https://travis-ci.org/](https://travis-ci.org/) and sign in with your github account. |
| 24 | +* Activate your forked repo **js-assignments**. |
| 25 | +* Edit local README.md file and update all links (just replace all occurrences of `'it-shark-pro'` with your account name). |
| 26 | +* Commit and push updated README.md to github: |
| 27 | +```bash |
| 28 | + git add README.md |
| 29 | + git commit -m "Update the links" |
| 30 | + git push origin master |
| 31 | +``` |
| 32 | +* Open https://github.com/it-shark-pro/js-assignments and test the build icon. Now it will run all tests and update status once you push changes to github. Keep this icon green! |
| 33 | + |
| 34 | + |
| 35 | +### How to setup work environment |
| 36 | +* Download and install the latest [Nodejs](https://nodejs.org/en/download/stable/). |
| 37 | +* Run `npm install` from you repository folder to download the required modules. All dependent modules will be located in the *node_modules* folder. |
| 38 | +* Open your favorite editor and complete tasks. |
| 39 | +* Open your terminal and use `npm test` command to run all tests. You can run single file by passing it as argument `npm test ./test/01-strings-tests.js`. |
| 40 | +* The local repo folder has the following structure: <pre> |
| 41 | + node_modules - app dependences restored by `npm install` command, you can delete this folder and restore later again. |
| 42 | + task - folder with tasks modules, it's your main folder. |
| 43 | + test - folder with tests modules to verify the tasks completion. |
| 44 | +</pre> |
| 45 | + |
| 46 | +### How to implement assignments using TDD fashion |
| 47 | +Now you are ready to implement assignments. Tasks modules are located in the **task** folder. Each module consists of several tasks for specified topic. Each task is usually a regular function: |
| 48 | +```javascript |
| 49 | + /** |
| 50 | + * Returns the result of concatenation of two strings. |
| 51 | + * |
| 52 | + * @param {string} value1 |
| 53 | + * @param {string} value2 |
| 54 | + * @return {string} |
| 55 | + * |
| 56 | + * @example |
| 57 | + * 'aa', 'bb' => 'aabb' |
| 58 | + * 'aa','' => 'aa' |
| 59 | + * '', 'bb' => 'bb' |
| 60 | + */ |
| 61 | + function concatenateStrings(value1, value2) { |
| 62 | + throw new Error('Not implemented'); |
| 63 | + } |
| 64 | +``` |
| 65 | +Resolve this task using the following [TDD steps](https://en.wikipedia.org/wiki/Test-driven_development#Test-driven_development_cycle): |
| 66 | +* Run unit tests and make sure that everything is OK and there are no failing tests. |
| 67 | +* Read the task description in the comment above the function. Try to understand the idea. If you got it you are to write unit test first, but unit tests are already prepared :) Skip step with writing unit tests. |
| 68 | +* Remove the throwing error line from function body |
| 69 | +```javascript |
| 70 | + throw new Error('Not implemented'); |
| 71 | +``` |
| 72 | +and run the unit tests again. Find one test failed (red). Now it's time to fix it! |
| 73 | +* Implement the function by any way and verify your solution by running tests until the failed test become passed (green). |
| 74 | +* Your solution work, but now time to refactor it. Try to make your code as pretty and simple as possible keeping up the test green. |
| 75 | +* Once you can't improve your code and tests are passed you can commit your solution. |
| 76 | +* Push your updates to github server and check if tests passed on [travis-ci](https://travis-ci.org/it-shark-pro/js-assignments/builds). |
| 77 | +* If everything is OK you can try to resolve the next task. |
| 78 | + |
| 79 | +### How to debug tasks |
| 80 | +To debug tests you can use **Node inspector**. To install it just run `npm install -g node-inspector` in your terminal. Then follow next steps: |
| 81 | +* Add `debugger;` to the first line of your task. |
| 82 | +* Run your test file with `npm run test-debug ./test/01-strings-tests.js`. |
| 83 | +* In another terminal run `node-inspector` and copy link from the output. |
| 84 | +* Open the link in your favorite browser. You should see Chrome Developers Tools like interface where you can debug your tasks. |
| 85 | +* When you found and fix your issue, close the browser's tab with the debug tools, stop the node-inspector by pressing Ctrl-C, stop the test runner by pressing Ctrl-C, remove the `debugger;` from your task. |
| 86 | + |
| 87 | +### How to debug (beginner's way) |
| 88 | +There is an easier way to debug for beginners with free Visual Studio Code: |
| 89 | +* Install VSC from https://code.visualstudio.com/ |
| 90 | +* Open project folder in VSC and follow the instruction from https://code.visualstudio.com/docs/runtimes/nodejs#_debugging-your-node-application to create a default `launch.json` |
| 91 | +* Modify the `launch.json` in the IDE, set the properties "program" and "args" (empty "args" value run all tests, to run particular test specify this test file in "args"): |
| 92 | +``` |
| 93 | +{ |
| 94 | + "version": "0.2.0", |
| 95 | + "configurations": [ |
| 96 | + { |
| 97 | + ... |
| 98 | + "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha", |
| 99 | + ... |
| 100 | + "args": ["./test/01-strings-tests.js"], |
| 101 | + ... |
| 102 | + }, |
| 103 | + ... |
| 104 | + ] |
| 105 | +} |
| 106 | +``` |
| 107 | +* Click in the gutter to the left of the line number to set the breakpoint. Press `F5` to run debug. |
| 108 | +* NOTE: The `launch.json` is stored in the `.vscode` project folder. |
| 109 | + |
| 110 | + |
| 111 | +##Contribution |
| 112 | +Feel free to contribute into this project. New tasks and katas are welcome. |
| 113 | + |
0 commit comments