loading trips fails

[shakori999]

Current Behavior

I'm at part 3 chapter 5 tried to load the trips on the rider/driver dashboard but it failed with this error on cypress, and this is the same error in both rider/driver if there is an info you need to know more or not mentioned here , I'll share it as fast as possible

Timed out retrying after 4000ms: Expected to find content: 'STARTED' within the element: <div.mb-3.card> but never did.

Steps To Reproduce

1. clone this repro https://github.com/shakori999/taxi-app.git
2. Run docker-compose up -d --build
3. Run `git checkout 31f4d72
4. inside client folder Run npx cypress open
5. Run driver.spec.js test

driver.spec.js

const logIn = () => {
  const { username, password } = Cypress.env('driver');
  cy.server();
  cy.route('POST', '**/api/log_in/').as('logIn');
  cy.visit('/#/log-in');
  cy.get('input#username').type(username);
  cy.get('input#password').type(password, { log: false });
  cy.get('button').contains('Log in').click();
  cy.wait('@logIn');
};

describe('The driver dashboard', function () {
    before(function () {
        cy.loadUserData();
    });
  it('Cannot be visited if the user is not a driver', function () {
    const { username, password } = Cypress.env('rider')

    // Capture API calls.
    cy.server()
    cy.route('POST', '**/api/log_in/').as('logIn')

    // Log in.
    cy.visit('/#/log-in')
    cy.get('input#username').type(username)
    cy.get('input#password').type(password, { log: false })
    cy.get('button').contains('Log in').click()
    cy.hash().should('eq', '#/')
    cy.get('button').contains('Log out')
    cy.wait('@logIn')

    cy.visit('/#/driver')
    cy.hash().should('eq', '#/')
  }),
  it('Can be visited if the user is a driver', function () {
    logIn();

    cy.visit('/#/driver')
    cy.hash().should('eq', '#/driver')
    })

  context('When there are no trips', function () {
    before(function () {
      cy.task('tableTruncate', {
        table: 'trips_trip'
      });
    });

    it('Displays messages for no trips', function () {
      cy.server();
      cy.route('GET', '**/api/trip/').as('getTrips');

      logIn();

      cy.visit('/#/driver');
      cy.wait('@getTrips');

      // Current trips.
      cy.get('[data-cy=trip-card]')
        .eq(0)
        .contains('No trips.');

      // Requested trips.
      cy.get('[data-cy=trip-card]')
        .eq(1)
        .contains('No trips.');

      // Completed trips.
      cy.get('[data-cy=trip-card]')
        .eq(2)
        .contains('No trips.');
    });
  });
  context('When there are trips', function () {
    before(function () {
      cy.loadTripData();
    });

    it('Displays current, requested, and completed trips', function () {
      cy.server();
      cy.route('GET', '**/api/trip/').as('getTrips');

      logIn();

      cy.visit('/#/driver');
      cy.wait('@getTrips');

      // Current trips.
      cy.get('[data-cy=trip-card]')
        .eq(0)
        .contains('STARTED');

      // Requested trips.
      cy.get('[data-cy=trip-card]')
        .eq(1)
        .contains('REQUESTED');

      // Completed trips.
      cy.get('[data-cy=trip-card]')
        .eq(2)
        .contains('COMPLETED');
    });
  });
})

trips.json

[
  {
    "id": "f0a132af-97d1-4b50-ba2a-0bff0b4a32ed",
    "created": "2019-06-01 00:00:00",
    "updated": "2019-06-01 00:00:00",
    "pick_up_address": "6969 Fifth St",
    "drop_off_address": "2846 Central St",
    "status": "COMPLETED",
    "rider_id": 2,
    "driver_id": 1
  },
  {
    "id": "676cb20b-d51d-44b5-951a-3e3c72a42668",
    "created": "2019-06-02 00:00:00",
    "updated": "2019-06-02 00:00:00",
    "pick_up_address": "231 Oak Ridge Ln",
    "drop_off_address": "8746 Spring Hill Rd",
    "status": "STARTED",
    "rider_id": 2,
    "driver_id": 1
  },
  {
    "id": "987a8e30-ca2f-4019-bbd9-1c7441e2ab1d",
    "created": "2019-06-03 00:00:00",
    "updated": "2019-06-03 00:00:00",
    "pick_up_address": "8061 College St",
    "drop_off_address": "2782 E Pecan St",
    "status": "REQUESTED",
    "rider_id": 2,
    "driver_id": 1
  }
]

index.js

import 'cypress-file-upload';

const loadUserData = () => {
  cy.fixture('data/users.json').then((users) => {
    cy.task('tableInsert', {
      table: 'trips_user', rows: users, truncate: true
    })
  });
  cy.fixture('data/groups.json').then((groups) => {
    cy.task('tableInsert', {
      table: 'auth_group', rows: groups, truncate: true
    })
  });
  cy.fixture('data/user_groups.json').then((groups) => {
    cy.task('tableInsert', {
      table: 'trips_user_groups', rows: groups, truncate: true
    })
  });
}

// new
Cypress.Commands.add('loadUserData', loadUserData);

const loadTripData = () => {
  cy.fixture('data/trips.json').then((trips) => {
    cy.task('tableInsert', {
      table: 'trips_trip', rows: trips, truncate: true
    });
  });
};

Cypress.Commands.add('loadTripData', loadTripData);

components/Driver.js

import React, {useEffect, useState} from 'react';
import {
  Breadcrumb, Card, Col, Row
} from 'react-bootstrap';

import { Redirect } from 'react-router-dom';

import TripCard from './TripCard';
import { isDriver } from '../services/AuthService';
import { getTrips } from '../services/TripService';

function Driver (props) {
    const [trips, setTrips] = useState([]);

    useEffect(() => {
      const loadTrips = async () => {
        const { response, isError } = await getTrips();
        if (isError) {
          setTrips([]);
        } else {
          setTrips(response.data);
        }
      }
      loadTrips();
    }, []); 

    if(!isDriver()) {
        return <Redirect to='/' />
    }
    const getCurrentTrips = () => {
      return trips.filter(trip => {
        return trip.driver !== null && trip.status !== 'COMPLETED';
      });
    }

    // new
    const getRequestedTrips = () => {
      return trips.filter(trip => {
        return trip.status === 'REQUESTED';
      });
    }

    // new
    const getCompletedTrips = () => {
      return trips.filter(trip => {
        return trip.status === 'COMPLETED';
      });
    }

  return (
    <Row>
      <Col lg={12}>
        <Breadcrumb>
          <Breadcrumb.Item href='/'>Home</Breadcrumb.Item>
          <Breadcrumb.Item active>Dashboard</Breadcrumb.Item>
        </Breadcrumb>
        <TripCard
          title='Current Trip'
          trips={getCurrentTrips()}
          group='driver'
          otherGroup='rider'
        />

        <TripCard
          title='Requested Trips'
          trips={getRequestedTrips()}
          group='driver'
          otherGroup='rider'
        />

        <TripCard
          title='Recent Trips'
          trips={getCompletedTrips()}
          group='driver'
          otherGroup='rider'
        />
      </Col>
    </Row>
  );
}

export default Driver;

services/TripServic.js

import axios from 'axios';

import { getAccessToken } from './AuthService';

export const getTrip = async (id) => {
  const url = `/api/trip/${id}/`;
  const token = getAccessToken();
  const headers = { Authorization: `Bearer ${token}` };
  try {
    const response = await axios.get(url, { headers });
    return { response, isError: false };
  } catch (response) {
    return { response, isError: true };
  }
};

export const getTrips = async () => {
  const url = '/api/trip/';
  const token = getAccessToken();
  const headers = { Authorization: `Bearer ${token}` };
  try {
    const response = await axios.get(url, { headers });
    return { response, isError: false };
  } catch (response) {
    return { response, isError: true };
  }
};

[shakori999]

@ParentJA if you have any idea about this problem?

[ParentJA]

I’ll take a look tomorrow and let you know.

On Tue, Feb 8, 2022 at 10:37 PM murtatah @.***> wrote:

@ParentJA https://github.com/ParentJA if you have any idea about this problem?

— Reply to this email directly, view it on GitHub https://github.com/ParentJA/taxi-react-app-part-3/issues/6#issuecomment-1033311024, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAMIKCRNLQK2XIEYQPSLNVLU2HOPNANCNFSM5NWYL4BA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

[ParentJA]

@shakori999 I tried loading the app from your repo, but I'm running into some issues around the test database. Would you mind getting everything to a state where it works on installation and then reach back out? You have test hardcoded in the cypress.json file, but I'm not sure if you're passing this into Django via an environment variable or something. Happy to try again if you update the Steps to Reproduce. Thanks!