educative.io

Learn Vue.js from Scratch: Building & Testing a Movie App (Thomas Lombart)


Testing with Jest and Vue Test Utils - Unit testing and Test Driven Development Testing. Many developers don't enjoy testing, however it's essential for every application. In this first testing lesson, we will see what is unit testing and what is test-driven development. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5768755258851328). Testing with Jest and Vue Test Utils - Testing a stack with TDD: part 1 You know how to write a test file. Why not writing our first real-word tests then? View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5636470266134528). Testing with Jest and Vue Test Utils - Testing a stack with TDD: part 2 In this lesson, we will finish to test our stack with test-driven development. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5654153720233984). Displaying our movies - Implementing the more button In this lesson, you will implement a button that allows the user to see more details about the movie. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/6323770260193280). Displaying our movies - No results found: solution We'll take a look at the solution of the exercise I gave you in the previous lesson. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5712453606309888). Styling our app - Finding the design First lesson of our CSS part: finding the design of our app. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5763418761986048). Deploying our app - Congratulations That's already the end. Congratulations and thank you! View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5750790484393984). Getting Started - Presentation of Vue.js What is Vue.js? How can it be useful to developers? Should I use Vue instead of React? Let's answer these questions. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5657382461898752). Vue.js basics - Building a to-do app: solution In this lesson, you will find the solution of the exercise I gave you previously. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5659118702428160). Vue.js basics - Declarative rendering and first directive : v-bind Let's start our Vue basics by rendering data to the DOM and binding your HTML elements' attributes. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5673385510043648). Vue.js basics - More directives: v-if & v-on You've seen the data object and how to use v-bind. Let's see more directives. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5738600293466112). Vue.js basics - Loops with v-for Last directive: v-for, useful when it comes to work with arrays or objects. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/4925503928532992). Vue.js basics - Components: props & custom events Let's see an important aspect of every Vue application: components. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5653164804014080). Getting Started - Join our Discord Server Want to learn with other developers? You misunderstood something? Don't worry, I got your back. Testing with Jest and Vue Test Utils - Testing our Search component: part 1 Congratulations! You've just learnt the essential tools to implement unit testing in our app. Let's begin with our Search component. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5711312218750976). Displaying our movies - Unknown images & computed properties Our app begins to take shape. But we have to handle some edge cases like unknown images. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5697070107197440). OMDb API : searching movies - Getting results from OMDb In this lesson, you'll learn how to make a request to OMDb using axios. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5206978905243648). Displaying our movies - No results found: exercise We have to handle another case: where the search results in nothing. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5681097123823616). Vue.js basics - Building a to-do app: exercise You might haven't realized it but we cover a lot of notions. Let's build the classic todo app to make sure all is clear. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5191954035900416). Styling our app - CSS Grid & movie list In this lesson, we will style our movie list using CSS Grid. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5740423507083264). OMDb API : searching movies - Summary In this section, we discovered APIs, made our first requests and created the Seach component. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5655608640405504). Displaying our movies - Summary In this section, we created more components and handled edge cases. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5746311907246080). Styling our app - Building a beautiful & simple movie card Last step of our design: building our movie card. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5647308616105984). Styling our app - Summary In this section, we learnt about styling. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5103363892969472). Testing with Jest and Vue Test Utils - Structure of a test file & matchers Now that we know what unit testing and test-driven development are, we're going to know how tests are structured and some basic matchers. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5180164350672896). Setting up our project - Setup with Vue CLI Vue.js basics? Done. Next task : build the app. And like any other projects, we're going to do some setup. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5693417237512192). Testing with Jest and Vue Test Utils - Testing the Search component: part 2 In this lesson, we will continue to test our Search component. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5635415851663360). Displaying our movies - Building our movies list In this lesson, we will implement our movie list. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5663741160980480). Testing with Jest and Vue Test Utils - Vue Test Utils In this lesson, we will take a look at Vue Test Utils, the unit testing library for Vue.js View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5678807906254848). Styling our app - Normalizing CSS and adding SCSS Let's implement the design for good. We will begin by resetting our CSS and by adding SCSS as a preprocessor. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5630721452408832). OMDb API : searching movies - Grabbing the API Key Now that we know what is an API, it's time to retrieve our API key in order to get our first results. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5730827476402176). Styling our app - Search and errors In the previous lesson, we set all the tools we needed to style our app. Let's begin with the Search component. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5707274949492736). Deploying our app - Now In this last lesson, you will learn how to deploy your app using an awesome tool: Now. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5640471028170752). Setting up our project - Thinking about the app You've seen the famous Hello World printing on your screen. Let's build the app right now! Or should we... View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5634387206995968). OMDb API : searching movies - Using async/await instead of promises In this lesson, we will see another new feature of JavaScript: async/await. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/6332878812086272). Setting up our project - What is this .vue file? You may have been surprised by App.vue, it's a bit different from what we've seen in Vue.js basics. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5700735861784576). Testing with Jest and Vue Test Utils - Mocking functions and packages Next step: learn mocks with Jest. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5703128158568448). Testing with Jest and Vue Test Utils - Testing the app component Last lesson of our testing section: testing our App component. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5671321778257920). OMDb API : searching movies - Storing the API Key Set up? Check. API Key? Check. In this lesson, we will learn how to store the API Key in our app. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5728116278296576). Testing with Jest and Vue Test Utils - Summary In this section, we discovered unit testing and wrote our first tests. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5651874166341632). Displaying our movies - Adding the movie list item As we done with our to-do app, we will create a list item to modularize our code. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5730192894984192). Styling our app - Implementing responsive design We're near the end. Our app is designed but still not looking good on some devices View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5725202142986240). Deploying our app - Contribute to Open Source Want to work in team? Contribute to Open Source? Seize your chance by improving this app. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5749781167079424). OMDb API : searching movies - Definition of an API In this lesson, you will learn what is an API. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5071437253574656). OMDb API : searching movies - Logging our results We have made progress on the Search component. In this lesson, we will improve our search function and transmit it the query. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5715426797420544). Vue.js basics - Summary In this section, we discovered Vue.js basics. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5721036024709120). Vue.js basics - Handling user input with v-model After conditional rendering and event listeners, let's see how to handle user input. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5718998062727168). Getting Started - Introduction Welcome on board! Let's start this course by showing you the app and what you'll learn. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5733935958982656). Setting up our project - Explaining the different files Wow! Vue CLI generated a lot of files for us. What is the purpose of all these files? View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5697982787747840). Setting up our project - Summary In this section, we cared about setting up our app. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5688737870643200). OMDb API : searching movies - Creating the Search component We now have all the tools to create our search component. Let's do it then. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/6224408339283968). OMDb API : searching movies - Catching search event & Vue developer tools Last step of our API integration: catching the search event emitted by Search. And while we are at it, we will talk about Vue developer tools: a very useful extension when developing with Vue. View the lesson [here](https://www.educative.io/collection/page/5024793980043264/5629499534213120/5641332169113600).
About the Learn Vue.js from Scratch: Building & Testing a Movie App (Thomas Lombart) category [Learn Vue.js from Scratch: Building & Testing a Movie App (Thomas Lombart)] (1)