You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> If we wanted to go one step further, we could even break down the title bar into 3 component parts, the _menu_ button, the _title_, and the _search_ icon. We could dive even further into each one of those if we needed to.
Let's start our app in the browser. The `create-react-app` package comes with a few built-in scripts it created for us (in the `package.json` file). We can _start_ editing our app using the built-in webserver using the `npm start` command:
Let's edit the newly created app. Looking at the directory structure it created, we'll see we have a basic node app running with a `public/index.html` and a few files in the `src/` directory that comprise our running app.
Let's open up the `src/App.js` file and we'll see we have a very basic component that should all look familiar. It has a simple render function which returns the result we see in the Chrome window.
The `index.html` file has a single `<div />` node with the id of `#root`, where the app itself will be mounted for us automatically (this is handled in the `src/index.js` file). Anytime we want to add webfonts, style tags, etc. we can load them in the `index.html` file.
With that, we now have a live-reloading single-page app (SPA) ready for development. Tomorrow, we'll use this new app we built diving into rendering multiple components at run-time.
However, if we open the developer console, we'll see we have an error printed out. This error is caused by the fact that React doesn't know how to keep track of the individual components in our list as each one just looks like a `<li />` component.
There are several other really useful methods in the `React.Children` object available to us. We'll mostly use the `React.Children.map()` function, but it's good to know about the other ones [available](https://facebook.github.io/react/docs/top-level-api.html#react.children) to us. Check out the [documentation](https://facebook.github.io/react/docs/top-level-api.html#react.children) for a longer list.
With the library installed, we can make a request to an off-site server. In order to get access to the `fetch` library, we'll need to `import` the package in our script. Let's update the top few lines of our `src/App.js` file adding the second line:
With `react-router` installed, we'll import a few packages from the library and update our app architecture. Before we make those updates, let's take a step back and from a high level look at _how_ and _why_ we architect our application this way.
The error redux is giving us is telling us that we don't have a reducer inside our store. Without a reducer, it won't know what to do with actions or how to create the state, etc. In order to move beyond this error, we'll need to reference our rootReducer we created.
From this output, we can see the two tests with one passing test (with a green checkmark) and one failing test (with the red x and a description of the failure).
131
131
@@ -149,7 +149,7 @@ Re-running the test, we can see we have two passing tests
Next, let's update our search button tests. We have two tests here, where one requires us to test an interaction. Enzyme provides a very clean interface for handling interactions. Let's see how we can write a test against the search icon.
In the second window, we'll need to launch our app. Remember, the browser we're going to launch will _actually_ hit our site, so we need an instance of it running. We can start our app up with the `npm start` comamnd:
When we run the `nightwatch` command, we'll see a chrome window open up, visit the site, and click on the login link automatically... (pretty cool, right?).
184
184
@@ -234,7 +234,7 @@ Running these tests again (in the third terminal window):
One final note, if you're interested in a deeper set of selenium tutorials, check out the free tutorials from guru99.com at [https://www.guru99.com/selenium-tutorial.html](https://www.guru99.com/selenium-tutorial.html). They are pretty in-depth and well done (in our opinion).
0 commit comments