Skip to content

Create Page for Students plus tests and stories #107

@github-actions

Description

@github-actions

Dependencies

Complete the following issues first:

  • Create fixtures for Students
  • Form Component for Students
  • Copy Placeholders for Students pages; add to App.js/AppNavbar.js

Acceptance Criteria:

  • When you navigate to /students/create in the URL bar,
    there is page that allows the user to create a new Students record.

  • When you enter data into the form and click the submit button,
    if the data is valid, the data is sent to the server,
    a new Students record is created,and the user is routed to the
    /students route for the StudentsIndexPage page.

  • When you enter data into the form and click the submit button,
    if the data is not valid,appropriate error messages are displayed,
    the data is NOT sent to the server, a new Students record is NOT created,
    and the user remains on the students/create page.

  • When you submit valid data to the page and click submit, a new valid database
    entry is stored in the database. (You can verify this by using the swagger
    endpoint to view the current data in the table.)

  • The PR description has step-by-step descriptions for testing the new page, along
    with screenshots, so that someone reviewing the PR will know what to do to test
    it, and what it is supposed to look like when it functions correctly.

  • The PR description has a link to the storybook entry for the new page.

Implementation Details

  • Before starting, refamiliarize yourself with the backend CRUD API endpoints for
    Students by looking at the swagger page. You are going to be copy/pasting
    code from the Restaurant and UCSBDates components. Those use backend api endpoints
    that are similar to the ones for Students, but not identical. You will need
    to know the exact name of the API endpoints for Students in order to
    be sure that your frontend code is calling the correct backend endpoints.

  • In StudentsCreatePage.js, replace the code from PlaceholderCreatePage.js
    with code modelled after the files RestaurantCreatePage.js and/or UCSBDatesCreatePage.js
    that is appropriate to your Students table. Be sure to get the API endpoint names correct for your Students table.

  • In StudentsCreatePage.test.js, replace the code from PlaceholderCreatePage.test.js
    with code modelled after the files RestaurantCreatePage.test.js and/or UCSBDatesCreatePage.test.js
    appropriate to your Students table. Be sure to get the API endpoint names correct for your Students table.

  • Under frontend/src/stories/pages/Students/ create a file called StudentsCreatePage.stories.js
    modelled after the files RestaurantCreatePage.stories.js and/or UCSBDatesCreatePage.stories.js.

Reminders (all from frontend directory):

  • Always start by setting your node version with nvm use 20.17.0
  • To run storybook locally: npm run storybook.
  • To run tests locally: npm test.
  • Quickly test coverage locally: npm run coverage
  • Check linting locally: npx eslint --fix .
  • Check mutation coverage locally (slow): npx stryker run
  • Check mutation coverage of single file (faster): npx stryker run -m src/main/pages/Students/StudentsCreatePage.js

What to do next

  • Do a PR (following the usual steps).
  • Check for other PRs
  • Start work on "Index Page for Students plus tests and stories"(following the usual steps for a new issue)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Studentsteam02 issues for Students

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions