{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"type":"text","text":"Unit Testing"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Though we've yet to address testing in this book, "},{"type":"text","marks":[{"type":"bold"}],"text":"the importance of testing in front end web development can't be stressed enough"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Testing can help reveal bugs before they appear, instill confidence in your web application, and make it easy to onboard new developers on an existing codebase. As an upfront investment, testing often pays dividends over the lifetime of a system."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"The development community often specify "},{"type":"text","marks":[{"type":"italic"}],"text":"test-driven"},{"type":"text","text":" development (i.e. writing tests first then building the implementation) as the appropriate way to handle testing. Whether we employ test-driven development or build tests to validate code that has already been written, focusing on building "},{"type":"text","marks":[{"type":"italic"}],"text":"testable"},{"type":"text","text":" code is the vital aspect to always remember."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Testing individual pieces of code that are likely to change can double or triple the amount of work it takes to keep them up. In contrast, building applications in small components and keeping large amounts of functionality broken into several methods allows us to test the functionality of a part of the larger picture. This type of code is what we mean when we say "},{"type":"text","marks":[{"type":"italic"}],"text":"testable"},{"type":"text","text":" code."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"The decision of what to test will always be up to you and your team. We'll focus on "},{"type":"text","marks":[{"type":"italic"}],"text":"how"},{"type":"text","text":" to test your Vue applications in this chapter."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"End-to-end vs. Unit Testing"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Application testing is often broken down into two main buckets: "},{"type":"text","marks":[{"type":"italic"}],"text":"end-to-end testing"},{"type":"text","text":" or "},{"type":"text","marks":[{"type":"italic"}],"text":"unit testing"},{"type":"text","text":"."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"End-to-End Testing"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"End-to-end testing"},{"type":"text","text":" is a top-down approach where tests are written to determine whether an application has been built appropriately from start to finish. We write end-to-end tests as though we are a user's movement through our application."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Though different suites can be used, "},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://nightwatchjs.org/"}}],"text":"Nightwatch"},{"type":"text","text":" is an end-to-end testing suite that is often used with Vue applications. "},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://nightwatchjs.org/"}}],"text":"Nightwatch"},{"type":"text","text":" is Node.js based and allows us to write tests that mimic how a user interacts with an application."}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"End-to-end tests are often labeled as integration tests since multiple modules or parts of a software system are often tested together."}]}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Unit Testing"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Unit testing"},{"type":"text","text":" is a confined approach that involves isolating each part of an application and testing it in isolation. Tests are provided a given input and an output is often evaluated to make sure it matches expectations."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"In this chapter, we'll be focusing solely on unit testing."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Testing tools"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Though numerous unit test environments/suites exist, we'll primarily use two popular tools: "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://mochajs.org/"}}],"text":"Mocha"},{"type":"text","text":" and "},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://chaijs.com/"}}],"text":"Chai"},{"type":"text","text":"."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Mocha and Chai"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Mocha is a framework for writing JavaScript tests. It allows us to specify our test suites with "},{"type":"text","marks":[{"type":"code"}],"text":"describe"},{"type":"text","text":" and "},{"type":"text","marks":[{"type":"code"}],"text":"it"},{"type":"text","text":" blocks. We use the "},{"type":"text","marks":[{"type":"code"}],"text":"describe"},{"type":"text","text":" function to segment each logical "},{"type":"text","marks":[{"type":"italic"}],"text":"unit"},{"type":"text","text":" of tests and inside that we can use the "},{"type":"text","marks":[{"type":"code"}],"text":"it"},{"type":"text","text":" function for each expectation we'd want to assert."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"For instance, let's assume we wanted to test two methods, "},{"type":"text","marks":[{"type":"code"}],"text":"sum()"},{"type":"text","text":" and "},{"type":"text","marks":[{"type":"code"}],"text":"subtract()"},{"type":"text","text":", in a "},{"type":"text","marks":[{"type":"code"}],"text":"Calculator"},{"type":"text","text":" object. With Mocha, we'll set it up like this:"}]},{"type":"codeMirror","attrs":{"mode":"text/javascript","uniqueId":"pNip-SQqdu42eF0GSeSxJ","locality":0,"loading":false,"url":null,"displayName":"","startLine":null,"endLine":null,"codeQuery":null,"readOnly":false,"highlightLines":[]},"content":[{"type":"text","text":"describe(\"Calculator\", () => {\n it(\"sums 1 and 1 to 2\", () => {\n // assertion for the sum() method\n });\n\n it(\"subtracts 5 and 3 to 2\", () => {\n // assertion for the subtract() method\n });\n});"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Though Mocha creates the scaffold for us to write tests, it doesn't have a built-in assertion library. For writing assertions, we'll use the Chai library."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Chai is an assertion library that can be paired with any JavaScript testing framework. Chai provides three interfaces for creating assertions:"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"should"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"expect"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"assert"}]}]}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"should"},{"type":"text","text":" and "},{"type":"text","marks":[{"type":"code"}],"text":"expect"},{"type":"text","text":" assertions follow a more "},{"type":"text","marks":[{"type":"bold"}],"text":"behavioural"},{"type":"text","text":" aspect to testing by allowing us to chain together assertions."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Since we'll be employing a behaviour-driven approach to writing tests, we'll use the "},{"type":"text","marks":[{"type":"code"}],"text":"expect"},{"type":"text","text":" interface in this chapter."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Let's see how a Chai "},{"type":"text","marks":[{"type":"code"}],"text":"expect"},{"type":"text","text":" assertion works. In the example given above, an "},{"type":"text","marks":[{"type":"code"}],"text":"expect"},{"type":"text","text":" assertion for the "},{"type":"text","marks":[{"type":"code"}],"text":"sum()"},{"type":"text","text":" method of the "},{"type":"text","marks":[{"type":"code"}],"text":"Calculator"},{"type":"text","text":" object can look like this:"}]},{"type":"codeMirror","attrs":{"mode":"text/javascript","uniqueId":"vFP8gGo3p-lUHVs_kFABd","locality":0,"loading":false,"url":null,"displayName":"","startLine":null,"endLine":null,"codeQuery":null,"readOnly":false,"highlightLines":[]},"content":[{"type":"text","text":"describe(\"Calculator\", () => {\n it(\"sums 1 and 1 to 2\", () => {\n var calc = new Calculator();\n expect(calc.sum(1, 1)).to.equal(2);\n });\n\n // ...\n});"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"In the test, we're "},{"type":"text","marks":[{"type":"italic"}],"text":"expecting"},{"type":"text","text":" that "},{"type":"text","marks":[{"type":"code"}],"text":"sum(1,1)"},{"type":"text","text":" will return a value of "},{"type":"text","marks":[{"type":"code"}],"text":"2"},{"type":"text","text":". Similarly, we can test that the "},{"type":"text","marks":[{"type":"code"}],"text":"subtract()"},{"type":"text","text":" method does as intended as well:"}]},{"type":"codeMirror","attrs":{"mode":"text/javascript","uniqueId":"8yZ2xrYYiwkpk6eyXCh36","locality":0,"loading":false,"url":null,"displayName":"","startLine":null,"endLine":null,"codeQuery":null,"readOnly":false,"highlightLines":[]},"content":[{"type":"text","text":"describe(\"Calculator\", () => {\n it(\"sums 1 and 1 to 2\", () => {\n var calc = new Calculator();\n expect(calc.sum(1, 1)).to.equal(2);\n });\n\n it(\"subtracts 5 and 3 to 2\", () => {\n var calc = new Calculator();\n expect(calc.subtract(5, 3)).to.equal(2);\n });\n});"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Specifying a new "},{"type":"text","marks":[{"type":"code"}],"text":"it"},{"type":"text","text":" block for every expectation we want to assert isn't a hard rule. On occasion, we'll write an "},{"type":"text","marks":[{"type":"code"}],"text":"it"},{"type":"text","text":" block to contain several expectations."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Our "},{"type":"text","marks":[{"type":"code"}],"text":"Calculator"},{"type":"text","text":" object is simple enough for us to use one "},{"type":"text","marks":[{"type":"code"}],"text":"describe"},{"type":"text","text":" block for the whole class and one "},{"type":"text","marks":[{"type":"code"}],"text":"it"},{"type":"text","text":" block for each method. With more complex methods that produce different outcomes, it's often suitable to have nested "},{"type":"text","marks":[{"type":"code"}],"text":"describe"},{"type":"text","text":" functions: one for the object and one for each method. For example:"}]},{"type":"codeMirror","attrs":{"mode":"text/javascript","uniqueId":"sZ8A_aZ3ZAy25xzXORUd9","locality":0,"loading":false,"url":null,"displayName":"","startLine":null,"endLine":null,"codeQuery":null,"readOnly":false,"highlightLines":[]},"content":[{"type":"text","text":"describe('Calculator', () => {\n describe('#sum', () => {\n it('sums 1 and 1 to 2', () => {\n ...\n });\n\n it('called at least twice', () => {\n ...\n });\n }\n\n describe('#subtract', () => {\n it('subtracts 5 and 3 to 2', () => {\n ...\n });\n\n it('called only once', () => {\n ...\n });\n }\n});"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"We'll be looking at a lot of "},{"type":"text","marks":[{"type":"code"}],"text":"describe"},{"type":"text","text":" and "},{"type":"text","marks":[{"type":"code"}],"text":"it"},{"type":"text","text":" blocks throughout this chapter which might help clear up any confusion with this setup."}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"For more information, be sure to check out the documentation pages for "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://mochajs.org/#getting-started"}}],"text":"Mocha"},{"type":"text","text":" and "},{"type":"text","marks":[{"type":"link","attrs":{"href":"http://chaijs.com/guide/styles/#expect"}}],"text":"Chai"},{"type":"text","text":"."}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Testing a basic Vue component"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"To understand how units tests can be made in Vue, we're going to start by testing a basic single-file Vue component."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Setup"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"The example code for this entire chapter is in the "},{"type":"text","marks":[{"type":"code"}],"text":"testing/"},{"type":"text","text":" folder in the code download. Within "},{"type":"text","marks":[{"type":"code"}],"text":"testing/"},{"type":"text","text":", there exists a "},{"type":"text","marks":[{"type":"code"}],"text":"basics/"},{"type":"text","text":" folder that we'll be looking at first. "},{"type":"text","marks":[{"type":"code"}],"text":"basics/"},{"type":"text","text":" is a Webpack configured Vue app created with the "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://cli.vuejs.org/"}}],"text":"Vue CLI"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"Let's "},{"type":"text","marks":[{"type":"code"}],"text":"cd"},{"type":"text","text":" into "},{"type":"text","marks":[{"type":"code"}],"text":"testing/basics"},{"type":"text","text":":"}]},{"type":"codeMirror","attrs":{"mode":"text/x-sh","uniqueId":"ZPkyDekRubQ6Pr9eUKmhh","locality":0,"loading":false,"url":null,"displayName":"","startLine":null,"endLine":null,"codeQuery":null,"readOnly":false,"highlightLines":[]},"content":[{"type":"text","text":"$ cd testing/basics"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"And install the necessary packages:"}]},{"type":"codeMirror","attrs":{"mode":"text/x-sh","uniqueId":"4YZ-sjnY4lugbBFF1PmU-","locality":0,"loading":false,"url":null,"displayName":"","startLine":null,"endLine":null,"codeQuery":null,"readOnly":false,"highlightLines":[]},"content":[{"type":"text","text":"$ npm i"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"If we take a look at the project directory, we'll notice the project structure mimics the Webpack configured Vue applications we’ve built throughout the book with the exception of a newly introduced "},{"type":"text","marks":[{"type":"code"}],"text":"tests/"},{"type":"text","text":" folder:"}]},{"type":"codeMirror","attrs":{"mode":"text/x-sh","uniqueId":"Gtm7op-as8MTunyn6a4UX","locality":0,"loading":false,"url":null,"displayName":"","startLine":null,"endLine":null,"codeQuery":null,"readOnly":false,"highlightLines":[]},"content":[{"type":"text","text":"$ ls\nREADME.md\nbabel.config.js\nnode_modules/\npackage.json\npublic/\nsrc/\ntests/"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"We'll be focusing entirely in the "},{"type":"text","marks":[{"type":"code"}],"text":"src/"},{"type":"text","text":" and "},{"type":"text","marks":[{"type":"code"}],"text":"tests/"},{"type":"text","text":" directories. Let's first take a look at the files within the "},{"type":"text","marks":[{"type":"code"}],"text":"src/"},{"type":"text","text":" directory:"}]},{"type":"codeMirror","attrs":{"mode":"text/x-sh","uniqueId":"lWn8k-FS3TmauTMVZV2Qb","locality":0,"loading":false,"url":null,"displayName":"","startLine":null,"endLine":null,"codeQuery":null,"readOnly":false,"highlightLines":[]},"content":[{"type":"text","text":"$ ls src/\nApp.vue\nmain.js"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"We have a single component, "},{"type":"text","marks":[{"type":"code"}],"text":"App.vue"},{"type":"text","text":", and a "},{"type":"text","marks":[{"type":"code"}],"text":"main.js"},{"type":"text","text":" file. The "},{"type":"text","marks":[{"type":"code"}],"text":"App.vue"},{"type":"text","text":" file is the component we'll be testing. Since the component is already in it's completed state, we won't be making any edits or changes to it."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","marks":[{"type":"code"}],"text":"App.vue"}]},{"type":"paragraph","attrs":{"align":null,"inline":false,"id":null,"indent":0,"lineSpacing":null},"content":[{"type":"text","text":"When we open "},{"type":"text","marks":[{"type":"code"}],"text":"App.vue"},{"type":"text","text":", we'll see a fairly straightforward single-file component. We'll first take a look at the "},{"type":"text","marks":[{"type":"code"}],"text":"

Items
{{ item }}
\n \n \n \n \n \n Remove all\n \n