Getting Started and Code Structure

Install Node.js. We will need Node.js to manage the react app and its dependencies.

We do not actually need to know Node.js yet. When you install Node.js, it will come with the npm package manager, which will also get installed. We will use npm to install

dependencies and start the react application.

The repository is structured as a react application. The public/ directory has metadata  about the application such as images and logos and the main HTML page, index.html.

You should not change anything in this file.

The src/ directory has the directories, components, data, models, stylesheets, and tool. Further, it has two files index.js and App.js. The index.js file is used to render the

component exported in App.js in public/index.html’s “root” div.

The data directory defines the in-memory data structure that the application uses.   Currently, it only has model.js and is identical to the one you used in the JavaScript MVC assignment.

The models directory defines several objects that provide a representation of the    underlying in-memory data. All access (read and write) to the underlying data must

happen through the model objects as they are designed optimally for the presentation layer.

All React components are defined in the components directory. Additional react

components that you define must also be part of the same directory. Each component is defined to have its local stylesheet as defined by the corresponding css files. You must   not change the selector names in the style rules. You are free to change the style

elements or add more style rules.

The tool directory contains utility functions. You should modify the utility functions if they do not exhibit expected behavior. Further, you can add your own utility functions to this   directory.

In the repository, you will find two files called package.json and package- lock.json. If     you have added dependencies to these files, then you will need to commit these files to the repository so we can run your application with the same dependencies. However,     there should be no reason for you to change these files. These files list the external

dependencies which we will need for the react application to run successfully on any

machine. When you clone the repository run the command npm install. Running the

command will create a directory called node_modules which will contain all the required packages. You can then start your application using the command npm start. Running  this command will open a local host server at port 3000. The application will

automatically open in a browser. If it does not, then manually open http://localhost:3000/ in a browser. In the browser, you should see a collection of questions currently in

data/model.js. You can now proceed and make changes to the code base. If you change code and save it, the server will automatically pick up the changes.

Debugging

In addition to the debugging tools used in the previous assignment, you can use the

React Dev tools extension for specifically debugging React components. Here is a short video tutorial on using the tool on Chrome.

Testing

As before, we will use the Cypress tool to test and verify the correctness of the graphical user interface (GUI). All GUI tests are defined in cypress/e2e/.

In addition to the GUI tests, component tests are defined in cypress/component.

The purpose of the component tests is two-fold:

1.  Theyhelpusverifythebehaviorofindividualcomponentswithouthavingtorun the

entire application. If we make a mistake while developing a component the error is immediately detected at the component level. This aligns with one of

characteristics of component-based development, that is, components should be individually developed and tested.

2.  Theydefinetheinterfacespecificationofacomponent,thatis,itsinputs,the expected elements it is supposed to return, and the functions or methods it is supposed to call when expected events are triggered. This aligns with one of the crucial

aspects of component-based development, that is, components must have well-defined interfaces to facilitate communication between components.

The directory does not have tests for all components, only the ones you are expected to change or define for the purpose of this assignment. Read the following references to better understand the component tests:

-  The section on Mounting Component at

https://docs.cypress.io/guides/component-testing/react/examples#Mounting- Components

-  How to create spy methods: https://docs.cypress.io/api/commands/spy .

Some components may take functions as arguments. We do not need a full-

blown implementation of such functions to test the component. Instead, it is

enough to define a bare-bones implementation with the expected inputs and

mock output in the test. Such mock functions are called spies, and they are used to check if the functions passed as input to the component are being called on expected events (e.g., click).

Assuming Node and npm are installed, you can run the following command from the project root to run the tests:

$ npx cypress open.

This should open the Cypress Launchpad. Select the “E2E” testing option to run the

GUI tests. Select the Component Testing option to run the component tests. You can also run the tests in headless mode (i.e., without the GUI) using the following commands:

$ npx cypress run --spec cypress/e2e/<test> $ npx cypress run --component

Headless mode is a quick way to run the tests from the terminal without using the browser. Note when tests are run in headless mode a cypress/videos/ directory    gets

generated. Do not push this directory with your commits. Add cypress/videos/to the .gitignore file of your repository if necessary.

Note the class names required for the tests to run successfully are the same as before.

Problem Statement

We have just learned Component-based Development (CbD), an architectural pattern used to design systems in a modular and reusable fashion. To this end, we will use a  JavaScript framework called React, which has several characteristics of CbD.

In the previous assignment, we learned how to practice test-driven development (TDD)1 . CbD aligns very well with TDD as we define tests for a component. This is helpful in two  ways -- (1) it allows us to verify the behavior of a component in isolation without running  the entire application, (2) it provides us with a well-defined interface, that is, inputs,

expected outputs, and its dependencies. Hence, in this system along with the

end-to-end UI tests, we define tests for all relevant components. Read the Testing section for details on the tests.

Part of the application has already been implemented. Your job is to complete the implementation in a way that passes all defined tests (e2eand component). To     complete the application, you need to implement the following:

1.  Thesearchfunctionalityintheheadersectiondoesnotworkasexpected. 2.  Questions On The Homepage Are Not Displayed As Links.

3.  Whenaquestionisclickedallitsanswersarenotshown.

4.  Userscannotaddanewquestionoranewanswer.

5.  Tags In The Application Are Not Shown.

6.  Questionspecifictoatagarenotbeingrendered.

7.  Theoptionstoselectdisplayorderforquestionsonthehomepagearenot shown.

Note the following:

1. Thefunctionalrequirementsandtheformattingrequirementsoftheapplication are the same as the JavaScript assignment.

1 We did not define any tests, but we extended an existing implementation to pass a given set of tests. In TDD, developers also define their own tests, which we shall practice later.

2.  Inadditiontothecomponentsforwhichtestshavebeendefined.Youshouldalso

consider adding/changing utility functions to format dates in the tools directory.     Further, pay attention to the conditional rendering logic to switch the view defined in src/components/Main/index.js as some features may not work due to missing   or incorrect logic.

3.  Youarefreetoaddmorecomponentsifnecessaryorrefactortheexisting components.

Grading

We will clone your repository and test your code in the Chrome web browser. The rubric we will use is shown below:

1. PassingComponenttests:40pts.

2. PassingE2EGUItests:50pts.

3. CodeQuality(ESLint)onsrc/:10pts.