Mastering React test-driven development build simple and maintainable web apps with React, Redux and GraphQL
Test-driven development (TDD) is a programming workflow that helps you build your apps by specifying behavior as automated tests. The TDD workflow future-proofs apps so that they can be modified without fear of breaking existing functionality. Another benefit of TDD is that it helps software develop...
| Otros Autores: | , |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham, England ; Mumbai :
Packt
[2022]
|
| Edición: | Second edition |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009686278206719 |
Tabla de Contenidos:
- Cover
- Title Page
- Copyright and Credits
- Foreword
- Contributors
- About the reviewer
- Table of Contents
- Part 1 - Exploring the TDD Workflow
- Chapter 1: First Steps with Test-Driven Development
- Technical requirements
- Creating a new React project from scratch
- Installing NPM
- Creating a new Jest project
- Bringing in React and Babel
- Displaying data with your first test
- Writing a failing test
- Make it pass
- Making use of the act test helper
- Triangulating to remove hardcoding
- Backtracking on ourselves
- Refactoring your work
- Sharing setup code between tests
- Extracting methods
- Writing great tests
- Red, green, refactor
- Streamlining your testing process
- Summary
- Further reading
- Chapter 2: Rendering Lists and Detail Views
- Technical requirements
- Sketching a mock-up
- Creating the new component
- Specifying list item content
- Selecting data to view
- Initial selection of data
- Adding events to a functional component
- Manually testing our changes
- Adding an entry point
- Putting it all together with webpack
- Summary
- Exercises
- Further reading
- Chapter 3: Refactoring the Test Suite
- Technical requirements
- Pulling out reusable rendering logic
- Creating a Jest matcher using TDD
- Extracting DOM helpers
- Summary
- Exercises
- Further reading
- Chapter 4: Test-Driving Data Input
- Technical requirements
- Adding a form element
- Accepting text input
- Submitting a form
- Submitting without any changes
- Preventing the default submit action
- Submitting changed values
- Duplicating tests for multiple form fields
- Nesting describe blocks
- Generating parameterized tests
- Solving a batch of tests
- Modifying handleChange so that it works with multiple fields
- Testing it out
- Summary
- Exercises.
- Chapter 5: Adding Complex Form Interactions
- Technical requirements
- Choosing a value from a select box
- Providing select box options
- Preselecting a value
- Constructing a calendar view
- Adding the table
- Adding a header column
- Adding a header row
- Test-driving radio button groups
- Hiding input controls
- Selecting a radio button in a group
- Handling field changes through a component hierarchy
- Reducing effort when constructing components
- Extracting test data builders for time and date functions
- Extracting a test props object
- Summary
- Exercises
- Further reading
- Chapter 6: Exploring Test Doubles
- Technical requirements
- What is a test double?
- Learning to avoid fakes
- Submitting forms using spies
- Untangling AAA
- Making a reusable spy function
- Using a matcher to simplify spy expectations
- Spying on the fetch API
- Replacing global functions with spies
- Test-driving fetch argument values
- Reworking existing tests with the side-by-side implementation
- Improving spy expectations with helper functions
- Stubbing fetch responses
- Upgrading spies to stubs
- Acting on the fetch response
- Displaying errors to the user
- Grouping stub scenarios in nested describe contexts
- Migrating to Jest's built-in test double support
- Using Jest to spy and stub
- Migrating the test suite to use Jest's test double support
- Extracting fetch test functionality
- Summary
- Exercises
- Further reading
- Chapter 7: Testing useEffect and Mocking Components
- Technical requirements
- Mocking child components
- How to mock components, and why?
- Testing the initial component props
- Fetching data on mount with useEffect
- Understanding the useEffect hook
- Adding the renderAndWait helper
- Adding the useEffect hook
- Testing the useEffect dependency list.
- Building matchers for component mocks
- Variants of the jest.mock call
- Removing the spy function
- Rendering the children of mocked components
- Checking multiple instances of the rendered component
- Alternatives to module mocks
- Summary
- Exercises
- Further reading
- Chapter 8: Building an Application Component
- Technical requirements
- Formulating a plan
- Using state to control the active view
- Test-driving callback props
- Making use of callback values
- Summary
- Exercises
- Part 2 - Building Application Features
- Chapter 9: Form Validation
- Technical requirements
- Performing client-side validation
- Validating a required field
- Generalizing validation for multiple fields
- Submitting the form
- Extracting non-React functionality into a new module
- Handling server errors
- Indicating form submission status
- Testing state before promise completion
- Refactoring long methods
- Summary
- Exercises
- Further reading
- Chapter 10: Filtering and Searching Data
- Technical requirements
- Displaying tabular data fetched from an endpoint
- Paging through a large dataset
- Adding a button to move to the next page
- Adjusting the design
- Adding a button to move to the previous page
- Forcing design changes using tests
- Filtering data
- Refactoring to simplify the component design
- Performing actions with render props
- Testing render props in additional render contexts
- Summary
- Exercises
- Chapter 11: Test-Driving React Router
- Technical requirements
- Designing React Router applications from a test-first perspective
- A list of all the React Router pieces
- Splitting tests when the window location changes
- Up-front design for our new routes
- Testing components within a router
- The Router component and its test equivalent
- Using the Routes component to replace a switch statement.
- Using intermediate components to translate URL state
- Testing router links
- Checking the page for hyperlinks
- Mocking the Link component
- Testing programmatic navigation
- Summary
- Exercise
- Further reading
- Chapter 12: Test-Driving Redux
- Technical requirements
- Up-front design for a reducer and a saga
- Why Redux?
- Designing the store state and actions
- Test-driving a reducer
- Pulling out generator functions for reducer actions
- Setting up a store and an entry point
- Test-driving a saga
- Using expect-redux to write expectations
- Making asynchronous requests with sagas
- Switching component state for Redux state
- Submitting a React form by dispatching a Redux action
- Making use of store state within a component
- Navigating router history in a Redux saga
- Summary
- Exercise
- Further reading
- Chapter 13: Test-Driving GraphQL
- Technical requirements
- Compiling the schema before you begin
- Testing the Relay environment
- Building a performFetch function
- Test-driving the Environment object construction
- Test-driving a singleton instance of Environment
- Fetching GraphQL data from within a component
- Summary
- Exercises
- Further reading
- Part 3 - Interactivity
- Chapter 14: Building a Logo Interpreter
- Technical requirements
- Studying the Spec Logo user interface
- Undoing and redoing user actions in Redux
- Building the reducer
- Building buttons
- Saving to local storage via Redux middleware
- Building middleware
- Changing keyboard focus
- Writing the reducer
- Focusing the prompt
- Requesting focus in other components
- Summary
- Further reading
- Chapter 15: Adding Animation
- Technical requirements
- Designing animation
- Building an animated line component
- Animating with requestAnimationFrame
- Canceling animations with cancelAnimationFrame.
- Varying animation behavior
- Summary
- Exercises
- Chapter 16: Working with WebSockets
- Technical requirements
- Designing a WebSocket interaction
- The sharing workflow
- The new UI elements
- Splitting apart the saga
- Test-driving a WebSocket connection
- Streaming events with redux-saga
- Updating the app
- Summary
- Exercises
- Further reading
- Part 4 - Behavior-Driven Development with Cucumber
- Chapter 17: Writing Your First Cucumber Test
- Technical requirements
- Integrating Cucumber and Puppeteer into your code base
- Writing your first Cucumber test
- Using data tables to perform setup
- Summary
- Chapter 18: Adding Features Guided by Cucumber Tests
- Technical requirements
- Adding Cucumber tests for a dialog box
- Fixing Cucumber tests by test-driving production code
- Adding a dialog box
- Updating sagas to a reset or replay state
- Avoiding timeouts in test code
- Adding HTML classes to mark animation status
- Updating step definitions to use waitForSelector
- Summary
- Exercise
- Chapter 19: Understanding TDD in the Wider Testing Landscape
- Test-driven development as a testing technique
- Best practices for your unit tests
- Improving your technique
- Manual testing
- Demonstrating software
- Testing the whole product
- Exploratory testing
- Debugging in the browser
- Automated testing
- Integration tests
- System tests and end-to-end tests
- Acceptance tests
- Property-based and generative testing
- Snapshot testing
- Canary testing
- Not testing at all
- When quality doesn't matter
- Spiking and deleting code
- Summary
- Further reading
- Index
- Other Books You May Enjoy.
