An Intro to Pushing Code to GitHub and Creating Pull Requests

[00:00 - 00:18] In the last couple of lessons, we wrote tests for both the login component and the home component. The home component was a component similar to a lot of components in our client in which its responsibility was to just simply query for information and have it displayed and some other minor functionality.

[00:19 - 00:27] So I just having the search inputs. The login component was a little different because the login component was primarily focused on having user action be conducted.

[00:28 - 00:40] So a user was able to authenticate with Google and they'll be navigated away. And when the user is navigated back, we fire the login mutation with the presence of a successful authentication code in the URL.

[00:41 - 00:50] And in the last lesson, I quickly summarized the fact that as you move from components to components, a lot of the thinking processes that we just did is going to be very similar. Right?

[00:51 - 00:59] We're simply going to think about how we're going to sort of structure our tests in such a way that makes sense. We're going to think about what we're going to try to test, we will use the libraries we've been using.

[01:00 - 01:13] And in my opinion, the only slightly trickier different parts you'll notice is how you can find the nodes you're looking for in the components you're working with and trigger the actions or events that you want. Other than that, the expectation is very similar.

[01:14 - 01:31] And you'll often find yourself going to the API documentation for React, testing, library, or just to get some hints on what you're trying to do. Lesson, we're going to talk about something a little different, but I thought it would be pretty helpful for people who might be new to this, who aren't familiar with the idea of pushing code.

[01:32 - 01:38] So you might have noticed that throughout the course, part one or part two, we didn't really talk about Git. We didn't talk about version management.

[01:39 - 01:46] We didn't mention how you push code. And as we moved from lesson to lesson or module to module, we just kept working and working.

[01:47 - 01:57] However, traditionally, if you're working in an actual app, that's slightly large. And if you're most likely working with other people or other developers, you would need to use some sort of version control system.

[01:58 - 02:03] You might be familiar with how Git or version control works. So I'm not going to spend too much time here.

[02:04 - 02:14] But here, for example, assume the entire repo here that I've been working with has been pushed into some repository that I've just set up right now called dummy test repo. Right?

[02:15 - 02:18] It has all the central files. I just pushed it all a few minutes ago.

[02:19 - 02:37] What I'm trying to convey in this particular lesson is how within real production settings or within real production apps, when you're working with a team of people, how I usually approach actually having code be pushed onto master. So in this instance, I only have a single branch in this repository, right?

[02:38 - 02:45] Master it. When a deployment pipeline is usually set up, oftentimes a deployment pipeline is set up for a certain branch.

[02:46 - 03:01] So with this continuous integration model that a lot of production applications do, the fact that certain people push code or merge code onto a certain branch, let's just say master, that particular code is automatically deployed. Right?

[03:02 - 03:17] So think of it this way. Assume that if I just simply push something right up and I changed text somewhere in one of my components and I automatically merged it to master within a few minutes is deployed to everyone or all the users that are using the app.

[03:18 - 03:27] Depending on how large an application you're working on, pushing code to master is a pretty, I guess, serious thing. Let's assume you're working on an app that has millions of users.

[03:28 - 03:44] You can't just directly push to branches like this, especially if these branches are the branches that automatically deploy code. And as often for this reason, branches like this are usually protected where people just can't push directly to the branch that serves as production.

[03:45 - 03:57] Now a quick tangential note. I'm not sure when you'll be watching this lesson, but at the time of recording, there's been some discussion around the tech community about bad terminology, such as master or, you know, whitelist or blacklist.

[03:58 - 04:07] I'm just referencing master here, which is the original term often used for the main branch that people usually would use for production settings. This branch can be named anything, right?

[04:08 - 04:09] It could be production. It could be main.

[04:10 - 04:18] Let's just assume in this context right now, this particular branch is protected and we're trying to get new code into this particular branch. So how would we go about doing this?

[04:19 - 04:32] If you go back to our code base, assume that everything in this particular repository exists, except for the login functionality. Let's assume right now I just finished working on creating this entire login component.

[04:33 - 04:38] I just finished working on creating the test for this component. I've, you know, introduced whatever assets are necessary.

[04:39 - 04:54] And I'm now interested in pushing all this code and having it in the main master branch of my repository. If I head to my terminal, I won't spend too much time talking about the git commands, but let's assume I can see git status to see the changes that have been currently untracked.

[04:55 - 05:02] I can see that locally I've made some changes in this login folder that can be added and move the long. I check on my branches right now.

[05:03 - 05:06] I am on the master branch. So I'm not going to directly push this code onto master.

[05:07 - 05:24] So what people would often tend to find themselves doing is they'll check out to a new branch, get checkout minus brie, and they'll name this branch along the lines of the work that they're conducting. So in this instance, I can say something like login functionality.

[05:25 - 05:31] So now I'm in a new branch called login functionality. With that being said, I can now add these changes.

[05:32 - 05:33] So I'm saying, you know what? I actually want to commit these changes up.

[05:34 - 05:45] So add them with these changes now added. I have the login components file, I have the test file and whatever assets I'm using, I'll make a useful commit message specifying the change I'm doing.

[05:46 - 05:56] So I'll say introducing login functionality. Now, there's a lot of discussion in the community about good commit messaging and appropriate ways to do so.

[05:57 - 06:04] I'm not going to go down that rabbit hole. Let's just say we're just going to use a brief message like introducing login functionality.

[06:05 - 06:22] Once that change has been introduced, I can now push these changes up to the remote version of the local branch I'm using. So I'll say, get push origin, login functionality.

[06:23 - 06:36] Once this has been pushed, I can now head back to my repository and it would automatically pick up the fact that I've actually created a new branch. So not only do I have master branch now, I have a new branch in my remote setting called login functionality.

[06:37 - 06:42] And it gives me the prompt to say, do I want to compare and create a pull request? And that's pretty much what I would want to do.

[06:43 - 06:54] If I want to merge a new functionality onto a protected branch, I would create a pull request and have people review this particular request. By opening this pull request, I now see the changes that I've made.

[06:55 - 07:00] I can see that, okay, this is the entire login component. It has all the functionality that I'm looking for.

[07:01 - 07:07] And these are the tests associated for this component. When it comes to PR descriptions, depends on the setting that you're working in .

[07:08 - 07:21] I like to really make my descriptions as detailed as possible. So I'm not going to go through writing an entire description now, but some of the stuff that I'll look to compile first and foremost is what does this PR do, right?

[07:22 - 07:25] So a detailed description on what is this PR doing? What is it adding?

[07:26 - 07:27] What is it changing? What is it modifying?

[07:28 - 07:29] Why is it doing so? Etc, etc.

[07:30 - 07:38] Second, I'd also add a particular section. If I have any comments or questions or just open discussions, I want people to keep in mind.

[07:39 - 07:52] So, you know, just open questions, discussions, notes. So if there's anything in this PR that I've potentially thinking about or concerned or wondering is there a better way of doing so, I'll do it here.

[07:53 - 08:06] You know, I'll provide information for the reviewers to take into account. And lastly, another big section that I'll always try to fill is specifically if you're working on a client application, you know, we're working on pieces of work that 's going to be visual to the user, right?

[08:07 - 08:18] The user is going to be able to interact with the work that we do. So ideally, if the reviewers have time, I always try to encourage folks or people around me would encourage me as well, likewise, to test these changes.

[08:19 - 08:24] So ways to test these changes. And I'll literally list step by step what needs to be done.

[08:25 - 08:37] So I'll be like, check out this branch. Once this branch is checked out, go to /loggin because that's the new route that this particular PR is going to work with.

[08:38 - 08:50] Click the authentication button. Apply that you're able to sign in to Google servers.

[08:51 - 09:11] And then finally, when redirected back, perhaps verify your logged in and taken to the user page, right? And in cases like this where I want to provide testing information just for people to quickly go through the work, I would often provide images.

[09:12 - 09:17] Images have the power of more than 1,000 words, right? So visually show what this login page looks like.

[09:18 - 09:23] Show how you're being navigated away. Show how you're often taken to the user page, right?

[09:24 - 09:31] And only when I have all this set up, I'll then add a reviewer. Perhaps I'll say, you know, there's no one in this PR, sorry, in this repository because it's just me.

[09:32 - 09:40] But whoever is in this particular repo, I'll add reviewers to review my work. And then I'll just create my pull request, right?

[09:41 - 09:46] Once my pull request is created, I have all this functionality set up. I'll wait for people to actually review my work.

[09:47 - 10:19] And the one point that I want to make here that's relevant to, I guess, the testing side of things is whenever code is often pushed in a secure setting or in a production setting, it should be expected from the person that tests are pushed as well, right? Now, there are some times or unique cases when you're just working on a personal project, or you're working in a time intensive setting where you need to get something out very quickly, then in these cases, I've been in situations where I'll just quickly push something in which tests aren't considered.

[10:20 - 10:31] However, when all other conditions are met and everything is in the perfect setting, an ideally code should always be pushed with tests. So if I'm a reviewer right now, this is how other pros looking through this PR.

[10:32 - 10:37] First and foremost, I'll go through the description and I'll be like, okay, what does this PR do? What is this person trying to comment on?

[10:38 - 10:40] What issues are they closing? How do you actually test these changes?

[10:41 - 10:46] Before I will go to test these changes, I'll see the changes that have been made. So I'll notice that, okay, this person created a new component.

[10:47 - 10:51] This component is probably being used in the root level. They're using all of this stuff here.

[10:52 - 11:02] I'll go through a detail of the process, see if they're doing anything that could be approved upon, see the calling parent function, blah, blah, blah, etc, etc, etc . And then shortly after this, I'll automatically go to the tests.

[11:03 - 11:09] Why? Because the tests, if done well, would oftentimes describe the work being done, right?

[11:10 - 11:17] So right here, I can see, okay, this person's created a test for the login component. This guy's creating, or this person's creating a test around the authentication URL query.

[11:18 - 11:21] What is this query supposed to do? It's supposed to redirect the user when the query is successful.

[11:22 - 11:25] Okay, how does this person do the test? They mocked the request to be successful.

[11:26 - 11:34] So right here, I can see, okay, this is the kind of graph kill response that the client is expecting. It's going to return a particular string, which is the authentication URL.

[11:35 - 11:42] And what happens at the very end is the user has to click a certain button. This button is just a button that exists in the component template.

[11:43 - 11:49] When this button is successful, what is the expectation? We expect the window location to have been called with this.

[11:50 - 12:06] So we expect the user to have literally been redirected to the URL that's specified from the response. So what I'm trying to sort of convey here, and hopefully I'm doing a good job of it, is when tests are done well, they oftentimes describe the work being done.

[12:07 - 12:12] And it's helpful for the person doing the tests. It's helpful for the people reviewing the work as well, right?

[12:13 - 12:17] And right away, I can go on and see what else happens. So what actually happens when the query is unsuccessful?

[12:18 - 12:24] This person says it does not redirect the user. So what actually happens is, oh, it seems like an error message is so, queried by text or a word able to log you in.

[12:25 - 12:33] And this continues on and on and on. So the key aspect that I'm trying to convey here is tests are incredibly important for many reasons, right?

[12:34 - 12:38] They allow you to architect your code better. They allow you to understand what you're doing better.

[12:39 - 12:56] They allow other people to look through your test and say, okay, this is what the person's trying to do. When this code eventually gets merged in, now if anybody else starts to introduce work or push work that break one of your tests, the continuous integration pipeline oftentimes will be running your tests before they get pushed to production.

[12:57 - 13:11] So they'll be able to understand that something got broken. And lastly, this assume I'm now playing the role the person who had this PR created assume I got the reviews I needed, assume I added any of the address, any of the comments that would be made.

[13:12 - 13:22] And quick tangential notes. As I mentioned, if continuous integration is set up with whatever tooling that is used, sometimes this CI pipeline will run the tests before you can merge your request .

[13:23 - 13:46] So oftentimes in a production setting, you're not encouraged to merge until the integration pipeline has run through all the tests in the app to be like, everything's running perfectly, go ahead and merge, right? And this is helpful because now it gives me the security and it gives me the, I guess, yeah, the security or the fact that I know that if this is done well and all the tests pass, most likely my PR is not going to break anything.

[13:47 - 13:55] And going back to what I was just saying, assuming everything is good and the pipeline is done properly and I have the reviewers that I'm looking for. The only done would I then merge my pull request.

[13:56 - 14:00] I'll specify that the question should be merged. I want to change any description I would.

[14:01 - 14:16] And finally, I'll just delete my branch. And in this instance, I now have the work that I've just done pushed on to the main production or in other words, master branch.

[14:17 - 14:36] And yeah, that's pretty much what I wanted to mention in this lesson. It's not really directly related to any of the testing work we were doing directly, but I thought it would be helpful for people who are just interested to see maybe some of the steps that folks would usually take maybe within the actual production app setting when it comes to pushing or introducing new code.