Toll Calculator Component Documentation

Vercel : https://toll-calculator-q6pcoweak-sammywysors-projects.vercel.app/

Github : https://github.com/sammywysor/Toll-Calculator-Mapup

Overview

The Toll Calculator component stands as a pivotal feature within our application, empowering users to
effortlessly compute toll information for their designated routes. This component seamlessly integrates
with the TollGuru API, harnessing its capabilities to retrieve comprehensive toll details. The calculated
toll data is then presented interactively on an embedded map, offering users an intuitive and visually
engaging experience.

Features
User-Friendly Interface:

 Input fields for origin and destination locations.

 A "Calculate Toll" button triggers the toll calculation process.
 Interactive Map Display:
 Utilizes Leaflet, a widely-used JavaScript library for interactive maps.
 Displays the calculated route with markers for origin, destination, and toll details.
 Real-time Toll Calculation:

 Communicates with the TollGuru API to fetch accurate toll details based on the provided route.
 Visualizes toll booths along the route with relevant information.
 Dynamic Marker Popups:

 Provides additional information about markers, such as origin, destination, and toll details,
through popups.
 Component Structure
 State Variables
 origin: Object with latitude and longitude for the origin location.
 destination: Object with latitude and longitude for the destination location.
 tollInfo: Stores toll information retrieved from the API.
 isLoading: Boolean flag indicating whether the toll calculation is in progress.
  routePolyline: Decoded polyline for visualizing the calculated route on the map.

Map Initialization

 The component initializes a Leaflet map centered at [0, 0] with a default zoom level of 2. The
OpenStreetMap tile layer is added as the base layer.

Map Initialization
 The component initializes a Leaflet map centered at [0, 0] with a default zoom level of 2.
 The OpenStreetMap tile layer is added as the base layer.

const map = L.map('map').setView([0, 0], 2);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>

contributors',

}).addTo(map);

Calculate Toll Function

The handleCalculateToll function triggers the toll calculation process. It calls the calculateToll
API function, decodes the received polyline, and updates the state variables accordingly.

Calculate Toll Function

 The handleCalculateToll function triggers the toll calculation process. It calls the calculateToll
API function, decodes the received polyline, and updates the state variables accordingly.

const handleCalculateToll = async () => {

setIsLoading(true);

try {
 const result = await calculateToll(origin, destination);

setTollInfo(result);

const decodedPolyline = decodePolyline(result.route.polyline);

setRoutePolyline(decodedPolyline);

} catch (error) {

console.error('Error calculating toll:', error);

} finally {

setIsLoading(false);

};

Map Markers
 Markers are added to the map for origin, destination, and toll details. Each marker has a
popup displaying relevant information.

jsx
<Marker position={origin}>

<Popup>

<div>

<h3>Origin</h3>

<p>Additional information about the origin</p>

</div>

</Popup>

</Marker>

Cypress Test Cases

Test: Component Loading

Verifies that the Toll Calculator component loads successfully on the page.

Cypress Test Cases

 Test: Component Loading

 Verifies that the Toll Calculator component loads successfully on the page.

it('successfully loads', () => {

cy.visit('/');

cy.get('.tollCalculatorContainer').should('exist');

});

Test: Calculate Toll Functionality

Checks if the toll calculation works for a valid route.

Test: Calculate Toll Functionality

 Checks if the toll calculation works for a valid route.

it('calculates toll for a valid route', () => {

cy.intercept('POST', '/api/calculate', { fixture: 'sampleTollResponse.json' }).as('calculateToll');

// Input origin and destination

cy.get('input[placeholder="Enter origin"]').type('New York');

cy.get('input[placeholder="Enter destination"]').type('Los Angeles');

// Click the Calculate Toll button

cy.get('button').contains('Calculate Toll').click();
 // Wait for the API request to complete

cy.wait('@calculateToll');

// Check if the toll details are displayed on the map

cy.get('#map .leaflet-popup-content').should('have.length.greaterThan', 0);

});

Test: Error Handling

 Scenario: API Failure
 Checks if the component gracefully handles API failures.

it('handles API failure', () => {

cy.intercept('POST', '/api/calculate', { statusCode: 500 }).as('calculateToll');

// Input origin and destination

cy.get('input[placeholder="Enter origin"]').type('Invalid Origin');

cy.get('input[placeholder="Enter destination"]').type('Invalid Destination');

// Click the Calculate Toll button

cy.get('button').contains('Calculate Toll').click();

// Wait for the API request to complete

cy.wait('@calculateToll');

// Check for error handling message

 cy.get('.tollInfoContainer').should('contain', 'Error calculating toll');

});

Test: Route Visualization

Scenario: Display Route on Map

Ensures that the calculated route is displayed on the map.

Test: Route Visualization

Scenario: Display Route on Map

Ensures that the calculated route is displayed on the map.

it('displays route on the map', () => {

cy.intercept('POST', '/api/calculate', { fixture: 'sampleTollResponse.json' }).as('calculateToll');

// Input origin and destination

cy.get('input[placeholder="Enter origin"]').type('City A');

cy.get('input[placeholder="Enter destination"]').type('City B');

// Click the Calculate Toll button

cy.get('button').contains('Calculate Toll').click();

// Wait for the API request to complete

cy.wait('@calculateToll');

// Check if the route polyline is displayed on the map

cy.get('#map .leaflet-overlay-pane .leaflet-interactive').should('exist');

});

Test: Marker Popups

Scenario: Marker Popup Content

Verifies the content of marker popups for origin, destination, and toll details.

Test: Marker Popups

 Scenario: Marker Popup Content
 Verifies the content of marker popups for origin, destination, and toll details.

it('displays correct content in marker popups', () => {

cy.intercept('POST', '/api/calculate', { fixture: 'sampleTollResponse.json' }).as('calculateToll');

// Input origin and destination

cy.get('input[placeholder="Enter origin"]').type('City X');

cy.get('input[placeholder="Enter destination"]').type('City Y');

// Click the Calculate Toll button

cy.get('button').contains('Calculate Toll').click();

// Wait for the API request to complete

cy.wait('@calculateToll');

// Check the content of origin marker popup

cy.get('#map .leaflet-popup-content h3').contains('Origin');

cy.get('#map .leaflet-popup-content p').contains('Additional information about the origin');

 // Check the content of destination marker popup

cy.get('#map .leaflet-popup-content h3').contains('Destination');

cy.get('#map .leaflet-popup-content p').contains('Additional information about the destination');

// Check the content of toll details marker popup

cy.get('#map .leaflet-popup-content h3').contains('Toll Details');

cy.get('#map .leaflet-popup-content p strong').contains('Booth Name');

cy.get('#map .leaflet-popup-content p strong').contains('Road Type');

cy.get('#map .leaflet-popup-content p strong').contains('Cost');

});

Test: Input Suggestions

Scenario: Display Origin Suggestions

Ensures that origin suggestions are displayed based on user input.

Test: Marker Popups

 Scenario: Marker Popup Content

 Verifies the content of marker popups for origin, destination, and toll details.

it('displays origin suggestions', () => {

// Input partial origin

cy.get('input[placeholder="Enter origin"]').type('Ind');

// Check if suggestions are displayed

cy.get('.suggestion-item').should('exist');

});
Test: Distance Calculation

Scenario: Display Distance

Verifies that the component displays the calculated distance.

Test: Distance Calculation

 Scenario: Display Distance
 Verifies that the component displays the calculated distance.

it('displays calculated distance', () => {

cy.intercept('POST', '/api/calculate', { fixture: 'sampleTollResponse.json' }).as('calculateToll');

// Input origin and destination

cy.get('input[placeholder="Enter origin"]').type('City P');

cy.get('input[placeholder="Enter destination"]').type('City Q');

// Click the Calculate Toll button

cy.get('button').contains('Calculate Toll').click();

// Wait for the API request to complete

cy.wait('@calculateToll');

// Check if the distance is displayed

cy.get('.tollInfoContainer').should('contain', 'Distance: ');

});

Test: Additional Features

Scenario: Custom Marker

Checks if a custom marker is added for a specific location.

Test: Additional Features

 Scenario: Custom Marker

 Checks if a custom marker is added for a specific location.

it('adds custom marker for a specific location', () => {

// Input a specific origin

cy.get('input[placeholder="Enter origin"]').type('Custom Location');

// Click the Calculate Toll button

cy.get('button').contains('Calculate Toll').click();

// Check if the custom marker is displayed on the map

cy.get('#map .leaflet-marker-icon.custom-marker').should('exist');

});

Future Enhancements
The Toll Calculator component is designed to facilitate future enhancements and modifications.
Developers can extend its functionality seamlessly, and the test suite ensures that new changes
do not compromise existing functionalities.

For any assistance or inquiries, refer to the comprehensive documentation, reach out to our
support team, or explore the source code for further insights.

Thank you for choosing our Toll Calculator component. Happy coding!