raju-scofield / jobby-app Goto Github PK

• Extra Small (Size < 576px) and Small (Size >= 576px) - Login Success
• Extra Small (Size < 576px) and Small (Size >= 576px) - Login Failure
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Login Success
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Login Failure

• Extra Small (Size < 576px) and Small (Size >= 576px) - Home
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home

• Extra Small (Size < 576px) and Small (Size >= 576px) - Jobs Success
• Extra Small (Size < 576px) and Small (Size >= 576px) - No Jobs
• Extra Small (Size < 576px) and Small (Size >= 576px) - Profile Failure
• Extra Small (Size < 576px) and Small (Size >= 576px) - Jobs Failure
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Jobs Success
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No Jobs
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Profile Failure
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Jobs Failure

• Extra Small (Size < 576px) and Small (Size >= 576px) - Job Details Success
• Extra Small (Size < 576px) and Small (Size >= 576px) - Job Details Failure
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Job Details Success
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Job Details Failure

• Extra Small (Size < 576px) and Small (Size >= 576px) - Not Found
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Not Found

• Download dependencies by running npm install
• Start up the app using npm start

The app must have the following functionalities

• Login Route

  • When invalid credentials are provided and the Login button is clicked, then the respective error message received from the response should be displayed
  • When a valid username and password are provided and the Login button is clicked, then the page should be navigated to the Home route
  • When an unauthenticated user, tries to access the HomeRoute, JobsRoute, JobDetailsRoute, then the page should be navigated to Login route
  • When an authenticated user, tries to access the HomeRoute, JobsRoute, JobDetailsRoute, then the page should be navigated to the respective route
  • When an authenticated user tries to access the LoginRoute, then the page should be navigated to the Home route

• Home Route

  • When an authenticated user opens the Home Route and,
    • Clicks on the Jobs link in the Header, then the page should be navigated to the Jobs route
    • Clicks on the Find Jobs button, then the page should be navigated to the Jobs route

• Jobs Route

  • When an authenticated user opens the Jobs route

    • An HTTP GET request should be made to profileApiUrl
      • Loader should be displayed while the HTTP request is fetching the data
      • After the data is fetched successfully, the response received should be displayed
      • If the HTTP GET request made is unsuccessful, then the Failure view should be displayed.
        • When Retry button is clicked, an HTTP GET request should be made to profileApiUrl
    • An HTTP GET request should be made to jobsApiUrl with employment_type, minimum_package and search as query parameters with initial values
      • Loader should be displayed while the HTTP request is fetching the data
      • After the data is fetched successfully, display the list of jobs received in the response
      • If the HTTP GET request made is unsuccessful, then the Failure view should be displayed
        • When Retry button is clicked, an HTTP GET request should be made to jobsApiUrl
    • When a value is provided in the Search Input and button with search icon is clicked
      • Make an HTTP GET request to the jobsApiUrl with jwt_token in the Cookies and query parameter search with value as the text provided in the Search Input
      • Loader should be displayed while the HTTP request is fetching the data
      • After the data is fetched successfully, display the list of jobs received in the response
    • When Employment Types options are selected
      • Make an HTTP GET request to the jobsApiUrl with jwt_token in the Cookies and query parameter employment_type with value as a list of selected employment type id's as a single string separated by ,
      • Loader should be displayed while the HTTP request is fetching the data
      • After the data is fetched successfully, display the list of jobs received in the response
    • When Salary Range is selected
      • Make an HTTP GET request to the jobsApiUrl with jwt_token in the Cookies and query parameter minimum_package with value as the id of the selected salary range
      • Loader should be displayed while the HTTP request is fetching the data
      • After the data is fetched successfully, display the list of jobs received in the response
    • When the HTTP GET request made to the jobsApiUrl returns an empty list for jobs then No Jobs View should be displayed

  • When multiple filters are applied, then the HTTP GET request should be made with all the filters that are applied

  • For example: When the Full Time and Part Time employment types are selected, salary range 10 LPA and above is selected and search input field is empty, then the jobsApiUrl will be as follows

    const apiUrl = 'https://apis.ccbp.in/jobs?employment_type=FULLTIME,PARTTIME&minimum_package=1000000&search=""'

  • Home link is clicked in Header, the page should be navigated to the Home route

  • When the website logo image is clicked, the page should be navigated to the Home route

  • When a job is clicked, the page should be navigated to the Job Item Details route

• Job Item Details Route

  • When an authenticated user opens the Job Item Details route
    • An HTTP GET request should be made to jobDetailsApiUrl with jwt_token in the Cookies and job_id as path parameter
      • loader should be displayed while the HTTP request is fetching the data
      • After the HTTP request is successful, the response received should be displayed
      • The list of similar jobs should be displayed
      • If the HTTP GET request made is unsuccessful, then the Failure view should be displayed
        • When Retry button is clicked, an HTTP GET request should be made to jobDetailsApiUrl
  • When we click on the Visit button, then the corresponding company website URL is opened in the new tab

• Not Found Route

  • When a random path is provided in the URL then the page should navigate to the Not Found route

• employmentTypesList consists of a list of employmentType objects with the following properties in each employmentType object

  Key	Data Type
  employmentTypeId	String
  label	String

• salaryRangesList consists of a list of salaryRange objects with the following properties in each salaryRange object

  Key	Data Type
  salaryRangeId	String
  label	String

• The success example response received from request to the loginApiUrl will be

  {
    "jwt_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJhaHVsIiwicm9sZSI6IlBSSU1FX1VTRVIiLCJpYXQiOjE2MTk2Mjg2MTN9. nZDlFsnSWArLKKeF0QbmdVfLgzUbx1BGJsqa2kc_21Y"
  }

• The failure example response received from request to the loginApiUrl will be

  {
    "status_code": 404,
    "error_msg": "Username is not found"
  }

• The example response received from request to the profileApiUrl will be

  {
    "profile_details": {
      "name": "Rahul Attuluri",
      "profile_image_url": "https://assets.ccbp.in/frontend/react-js/male-avatar-img.png",
      "short_bio": "Lead Software Developer and AI-ML expert"
    }
  }

• The example response received from request to the jobsApiUrl will be

  {
    "jobs": [
      {
        "company_logo_url": "https://assets.ccbp.in/frontend/react-js/jobby-app/netflix-img.png",
        "employment_type": "Internship",
        "id": "bb95e51b-b1b2-4d97-bee4-1d5ec2b96751",
        "job_description": "We are looking for a DevOps Engineer with a minimum of 5 years of industry experience, preferably working in the financial IT community. The position in the team is focused on delivering exceptional services to both BU and Dev partners to minimize/avoid any production outages. The role will focus on production support.",
        "location": "Delhi",
        "package_per_annum": "10 LPA",
        "rating": 4,
        "title": "Devops Engineer"
      }
      ...
    ],
    "total":60,
  }

• The example response received from request to the jobDetailsApiUrl will be

  {
    "job_details": {
      "company_logo_url": "https://assets.ccbp.in/frontend/react-js/jobby-app/netflix-img.png",
      "company_website_url": "https://about.netflix.com/en",
      "employment_type": "Internship",
      "id": "bb95e51b-b1b2-4d97-bee4-1d5ec2b96751",
      "job_description": "We are looking for a DevOps Engineer with a minimum of 5 years of industry experience, preferably working in the financial IT community. The position in the team is focused on delivering exceptional services to both BU and Dev",
      "skills": [
        {
          "image_url": "https://assets.ccbp.in/frontend/react-js/jobby-app/docker-img.png",
          "name": "Docker"
        },
        ...
      ],
      "life_at_company": {
        "description": "Our core philosophy is people over process. Our culture has been instrumental to our success. It has helped us attract and retain stunning colleagues, making work here more satisfying. Entertainment, like friendship, is a fundamental human need, and it changes how we feel and gives us common ground. We want to entertain the world.",
        "image_url": "https://assets.ccbp.in/frontend/react-js/jobby-app/life-netflix-img.png"
      },
      "location":"Delhi",
      "package_per_annum":"10 LPA",
      "rating":4
    },
    "similar_jobs": [
      {
        "company_logo_url": "https://assets.ccbp.in/frontend/react-js/jobby-app/netflix-img.png",
        "employment_type": "Freelance",
        "id": "2b40029d-e5a5-48cc-84a6-b6e12d25625d",
        "job_description": "The Experimentation Platform team builds internal tools with a big impact across the company. We are looking to add a UI engineer to our team to continue to improve our experiment analysis workflow and tools. Ideal candidates will be excited by direct contact with our users, fast feedback, and quick iteration.",
        "location": "Delhi",
        "rating": 4,
        "title": "Frontend Engineer"
      },
      ...
    ]
  }

• To convert a list of items as a comma-separated string we can use the array method join

The following instructions are required for the tests to pass

• Home route should consist of "/" in the URL path

• Login route should consist of "/login" in the URL path

• Jobs route should consist of "/jobs" in the URL path

• Job Item Details route should consist of "/jobs/:id" in the URL path

• No need to use the BrowserRouter in App.js as we have already included in index.js

• User credentials

   username: rahul
   password: rahul@2021
  
  

• Wrap the Loader component with an HTML container element and add the testid attribute value as loader to it

  <div className="loader-container" testid="loader">
    <Loader type="ThreeDots" color="#ffffff" height="50" width="50" />
  </div>

• The HTML button element in Jobs Route has the testid attribute value as searchButton to it

  <button type="button" testid="searchButton">
    <BsSearch className="search-icon" />
  </button>

• The profile image in Jobs Route should have the alt text as profile

• The company logo images in Jobs Route should have the alt text as company logo

• The company logo image in Job Item Details Route should have the alt text as job details company logo

• The life at company image in Job Item Details Route should have the alt text as life at company

• The skill images in the Job Item Details Route should have the alt text as the value of the key name from each object in the skills list in jobDetailsResponse

• The company logo image in similar Job Item in Job Item Details Route should have the alt text as similar job company logo

• https://apis.ccbp.in/login
• https://apis.ccbp.in/profile
• https://apis.ccbp.in/jobs
• https://apis.ccbp.in/jobs/:id

// Example URL with query parameters and values
const apiUrl = 'https://apis.ccbp.in/jobs?employment_type=FULLTIME,PARTTIME&minimum_package=1000000&search='

• https://assets.ccbp.in/frontend/react-js/logo-img.png alt should be website logo

• https://assets.ccbp.in/frontend/react-js/home-lg-bg.png

• https://assets.ccbp.in/frontend/react-js/home-sm-bg.png

• https://assets.ccbp.in/frontend/react-js/profile-bg.png

• https://assets.ccbp.in/frontend/react-js/failure-img.png alt should be failure view

• https://assets.ccbp.in/frontend/react-js/no-jobs-img.png alt should be no jobs

• https://assets.ccbp.in/frontend/react-js/jobby-app-not-found-img.png alt should be not found

• Roboto