Testing Vue. Js Applications

543 Pages·2018·6.82 MB·English

by  Edd Yerburgh

Copyright
For online information and ordering of this and other Manning books,
please visit www.manning.com. The publisher offers discounts on this
book when ordered in quantity. For more information, please contact
Special Sales Department
Manning Publications Co.
20 Baldwin Road
PO Box 761
Shelter Island, NY 11964
Email: [email protected]
©2019 by Manning Publications Co. All rights reserved.
No part of this publication may be reproduced, stored in a retrieval system,
or transmitted, in any form or by means electronic, mechanical,
photocopying, or otherwise, without prior written permission of the
publisher.
Many of the designations used by manufacturers and sellers to distinguish
their products are claimed as trademarks. Where those designations appear
in the book, and Manning Publications was aware of a trademark claim,
the designations have been printed in initial caps or all caps.
Recognizing the importance of preserving what has been written, it is
Manning’s policy to have the books we publish printed on acid-free paper,
and we exert our best efforts to that end. Recognizing also our
responsibility to conserve the resources of our planet, Manning books are
printed on paper that is at least 15 percent recycled and processed without
the use of elemental chlorine.
Manning Publications Co.
20 Baldwin Road
PO Box 761
Shelter Island, NY 11964
Development editor: Toni Arritola
Production editor: Tiffany Taylor
Copy editor: Pam Hunt
Proofreader: Keri Hales
Technical proofreader: Cody Sand
Typesetter and cover designer: Marija Tudor
ISBN 9781617295249
Printed in the United States of America
1 2 3 4 5 6 7 8 9 10 – SP – 23 22 21 20 19 18
Brief Table of Contents
Copyright
Brief Table of Contents
Table of Contents
The frontend testing pyramid
Preface
Acknowledgments
About this book
About the author
About the cover illustration
Chapter 1. Introduction to testing Vue applications
Chapter 2. Creating your first test
Chapter 3. Testing rendered component output
Chapter 4. Testing component methods
Chapter 5. Testing events
Chapter 6. Understanding Vuex
Chapter 7. Testing Vuex
Chapter 8. Organizing tests with factory functions
Chapter 9. Understanding Vue Router
Chapter 10. Testing Vue Router
Chapter 11. Testing mixins and filters
Chapter 12. Writing snapshot tests
Chapter 13. Testing server-side rendering
Chapter 14. Writing end-to-end tests
A. Setting up your environment
B. Running the production build
C. Exercise answers
Index
List of Figures
List of Tables
List of Listings
Table of Contents
Copyright
Brief Table of Contents
Table of Contents
The frontend testing pyramid
Preface
Acknowledgments
About this book
About the author
About the cover illustration
Chapter 1. Introduction to testing Vue applications
1.1. Defining testing
1.1.1. Manual testing
1.1.2. Automated testing
1.1.3. Testing pull requests on GitHub
1.2. Testing overview
1.2.1. Overview of end-to-end tests
1.2.2. Overview of unit tests
1.2.3. Snapshot testing
1.2.4. Combining test types effectively
1.2.5. Test-driven development
1.2.6. Learning when not to test
1.2.7. The fallacy of 100% code coverage
1.3. Writing a Hacker News application
1.4. Vue testing overview
1.4.1. The Vue instance
1.4.2. Templates and render functions
1.4.3. Understanding the Vue component system
1.4.4. Unit testing components
Summary
Chapter 2. Creating your first test
2.1. Understanding a Vue project structure
2.1.1. Understanding build tools
2.1.2. Using Vue CLI to generate a project
2.1.3. Understanding directory structure
2.1.4. Understanding npm
2.1.5. Understanding the package.json file
2.1.6. Linting files with ESLint
2.1.7. Writing a test script
2.1.8. Building the project
2.2. Introduction to Jest
2.2.1. Writing a sanity test
2.2.2. Understanding test assertions
2.2.3. Avoiding false positives
2.2.4. Organizing tests with the describe function
2.2.5. Unit testing a component
2.2.6. Compiling files with Jest
2.2.7. Mounting a component
2.3. Introduction to Vue Test Utils
2.3.1. Understanding the API
2.3.2. Using shallowMount
2.4. Debugging tests with Chrome Debugger
Summary
Exercises
Chapter 3. Testing rendered component output
3.1. Creating test specifications
3.1.1. High-level specifications
3.1.2. Creating component-level specifications
3.2. Testing rendered text
3.2.1. Passing props to a component
3.2.2. Testing the text content of a component
3.2.3. Using find
3.2.4. Testing the text content of an element
3.3. Testing DOM attributes
3.3.1. Avoiding Boolean assertions
3.4. Testing how many components are rendered
3.4.1. Using findAll
3.5. Testing props
3.5.1. Using the Vue Test Utils props method
3.5.2. Avoiding gotchas when testing props
3.6. Testing classes
3.6.1. Using the classes method
3.7. Testing style
3.7.1. Accessing a wrapper element
3.7.2. Adding style to an application
3.8. When to test rendered component output
Summary
Exercises