[150522] - ReactJS - Round 2 - Demo Test

pokjkj | 15 May 2022

EdYoda | pokjkj Page 1 / 9

Test Name::

[150522] - ReactJS - Round 2 - Demo Test

Finish State: Normal Test Taken on: May 15, 2022 09:04:21 PM IST

pokjkj
P
sourav@gmail.com

Date of birth: Jan 1, 1998

Last Name: Saraf

Contact No: Not Filled

Gender: Male

Country: India

EdYoda | pokjkj Page 2 / 9

 Overall Summary

200 Marks Scored

out of 200 100 % 100 percentile
out of 1 Test Takers 1h 20m 10s Time taken
of 2hr

Marks Scored

Marks percentage percentile

200
Section #1 100
100

200
Total 100
100

Attempt Summary
Distribution of questions attempted in a total of 1 question(s).

Correct 1 Ques 200/200 Marks

Incorrect 0 Ques 0/0 Marks

1 Partially Correct 0 Ques 0/0 Marks
Total Questions

Not Attempted 0 Ques 0/0 Marks

This shows the correctness of questions attempted
by the test taker

EdYoda | pokjkj Page 3 / 9

 Section-Wise Details

Section 1 question(s) Time taken Marks Scored

Section #1 1 Q. 1h 20m 10s 200 / 200
(Untimed)

Marks Scored

Marks percentage

200
React Certification
100

200
Total
100

Attempt Summary
Distribution of questions attempted in a total of 1 question(s).

Correct 1 Ques 200/200 Marks

1
Total Questions

This shows the correctness of questions attempted

by the test taker

EdYoda | pokjkj Page 4 / 9

 Question-Wise Details

Section 1 1 1h 20m 10s

Section #1 question(s) Time taken

Q.
Question 1 Time taken: 1h 20m 10s
1

Problem Details - Kafene Project (Demo Exam)

The web app is a store management system for a pharmacy. It lets you track orders, inventory and customers.
You have to create the Admin Panel functionalities.
The web app is not mobile responsive.
You can use ReactJS to code this webapp.
Do not use the React hooks.
The web app contains 3 pages:
Login Page
Order Listing Page
Product Listing Page
You can find the reference website here.

Or open the link below in the browser: https://edu-web-fundamentals.web.app/login

To login, please enter following credentials

Username: qaifi
Password: qaifi

Screen Details

Login Page

The login form has only one validation which is “username and password should be the same”.
If the values differ then show an alert which says, “Please enter valid credentials!”
If the values are the same then show an alert which says, “Login Successful” and redirect to the orders page.
You have to maintain the user session i.e., if the user closes the browser and comes back he/she should be able to see correct logged-in
status. Use local storage to save the login status.

Order Listing Page:

On page load load all the orders list.

Show the total count of available orders in the list. Show updated count once the filter is applied.
Orders list data is stored in the ApplicationData.js file in the utilities folder.
Users should be able to filter orders using the checkboxes based on order status which can be New, Packed, InTransit and Delivered.

Product Listing Page:

On page load load all the products.

Show the total count of available products in the list. Show updated count once the filter is applied.
Products list data is stored in the ApplicationData.js file in the utilities folder.
Users should be able to filter the products using the checkboxes based on expiry and stock based on below conditions:
a) A product is expired if the expiry date is less than the current date.

b) A product is low stock if the stock count is less than 100.

What is already implemented in the base project?

Login functionality is already implemented

EdYoda | pokjkj Page 5 / 9

 The CSS for all the pages is already implemented
Filter options for Order Listing page and Product Listing page are already added on page

What do you have to implement in the project for submission?

Order Listing Page:

1. Render the list of orders on page load

2. Show total count of the orders on page

3. Implement the filter functionality based on order status

4. Show updated count of the orders after applying the filter

Products Listing Page:

1. Render the list of products on page load

2. Show total count of the products on page

3. Implement the filter functionality

4. Show updated count of the products after applying the filter

Instructions for Code Execution:

1. For initialising the project and to host it on server to see the working UI project,

a. Click on the Goals menu on the sidebar.

b. First click on Install Packages and let it complete.

c. Then click on Build and Deploy and let it complete.

d. Click on Servers and Environment Variables menu on sidebar

e. Then open the Apache dropdown and click on the Open URL icon to open the hosted web app

2. After making code changes:

a. Every time you make code changes, run the Build and Deploy from the Goals panel (No need to install the packages

again, its only for one time.)

b. Then open the web app url from the Servers & Environment Variables menu

3. After you make sure that code is working fine, run the Test Cases from the sidebar and work on the code if any of the test case

is failing.
4. After you complete the test, click on the Finish button to submit it.

5. DO NOT run multiple functions at same time like running test cases while build is in progress, this will break the code.

MEDIUM React Certification

Test Cases

Login_With_Valid_Credentials

Login_Only_With_Valid_Credentials

Weightage : 1.0 Status: PASS Marks : 2.0

Passed

Filters_Orders

Filters_Orders

Weightage : 25.0 Status: PASS Marks : 50.0

EdYoda | pokjkj Page 6 / 9

 Passed

Renders_Orders_Table

Renders_Orders_List_Accurately

Weightage : 25.0 Status: PASS Marks : 50.0

Passed

Filters_Products

Filters_Products

Weightage : 25.0 Status: PASS Marks : 50.0

Passed

Renders_Products_Table

Renders_Products_List_Accurately

Weightage : 24.0 Status: PASS Marks : 48.0

Passed

Test Taker Code Analysis Download Code Analysis

Bugs Vulnerabilities Code Smells

0 0 0

Debt Duplications Lines of Code

0 min 0.0% 312

EdYoda | pokjkj Page 7 / 9

 Test Log

15th May 2022

07:43 PM Started the test with Section #1

09:04 PM Finished the test

EdYoda | pokjkj Page 8 / 9

About the Report

This Report is generated electronically on the basis of the inputs received from the assessment takers. This Report including the AI flags that are generated in
case of availing of proctoring services, should not be solely used/relied on for making any business, selection, entrance, or employment-related decisions. Mettl
accepts no liability from the use of or any action taken or refrained from or for any and all business decisions taken as a result of or reliance upon anything,
including, without limitation, information, advice, or AI flags contained in this Report or sources of information used or referred to in this Report.

EdYoda | pokjkj Page 9 / 9