SA5-EV Explanation Video: Model Associations

How to Start

1. Access the GitHub organization’s repositories page.
   • Log into GitHub.
   • Open the comp-7012-s25 repositories page.
2. Create a new repository from the template.
   • Click the New repository button at the top-right of the page.
   • Fill out the Create a new repository form as follows:
     • Repository template: Select template-sa5-ev.
     • Owner: Select comp-7012-s25.
     • Repository name: Use the form below to generate the name for your repository.
       • It is required that your repository’s name precisely follow the format produced by the form.
     • Select Private, so that only you and your instructors can access your repository.
   • Click the Create repository button at the bottom right of the page.
3. cd into your workspace folder.
4. git clone the repo you created above.
5. cd into the new working tree.
6. Open the working directory in VS Code and bundle install/rails db:migrate && rails db:seed.
7. Start your screen recording (as per these instructions) and begin the task.

Your UofM Username Submission Opportunity 1 2 3

sa5-ev-hsimpson-1

Task

The aim of this project is enable users to create and edit basketball team rosters. The project already includes a Team model class and a Player model class, as per this class diagram:

Along with these model classes, the app includes the standard resource-CRUDing pages and UI features for Team model objects (but not for Player objects). It also includes model validations and database seeds. (You can ignore the test fixtures and model tests for this assignment.) It is recommended that you initialize and run the base app at this point, so you can see what’s there.

Task to perform:

• Add a one-to-many has-many/belongs-to model association between the Team and Player model classes, as per this class diagram:

• Update the db/seeds.rb file to use the association.
• Add the standard nested-resource-CRUDing pages and UI features for Player objects (as demonstrated in the Nested-Resource Pages demo). Make these pages and features work in a manner consistent with how they worked in the demo.

In the video, be sure to use all features that you create, so that it’s clear that they work. Don’t forget to enter invalid data into the forms.

Detailed Specifications

Existing Functionalities

• Feature: Browse Teams
  • As a user,
  • I want to see a list of teams
  • So that I can choose one to view more details about
  • Scenario: Viewing the team index page content
    • Given I have created two sample Team records
    • And I am on the /teams page
    • Then I should see an h1 element with text “Teams”
    • And I should see a table with headers “Name”, “Home City”, and one empty header
    • And I should see two table body rows with the sample records’ name, home city, and 3 links with the format “Show | Edit | Delete” to show, edit, and delete that team
    • And I should see a link with text “New Team”
  • Scenario: Redirecting from the root page to the teams page
    • When I visit the root URL
    • Then I should be automatically redirected to the /teams page
• Feature: View Team Details
  • As a user,
  • I want to see detailed information about a selected team
  • So that I can learn more about it
  • Scenario: Viewing a team show page content
    • Given I have created a sample Team record
    • And I am on its /teams/:id page
    • Then I should see an h1 element with the text “[Team Name]”
    • And I should see a p element with the text in the format “Home City: [Home City]”
    • And I should see a link with text “Edit”
    • And I should see a link with text “Roster”
    • And I should see a link with text “Back”
  • Scenario: Navigating to a team show page from the index page
    • Given I am on the /teams page
    • When I click on a team’s show link
    • Then I should be on the /teams/:id page for the selected team
  • Scenario: Navigating back to the team index page from the show page
    • Given I am on the /teams/:id page
    • When I click on the “Back” link
    • Then I should be on the /teams page
• Feature: Create New Team
  • As a user,
  • I want to add a new team
  • So that I can expand my list of teams
  • Scenario: Viewing the new team form page
    • Given I am on the /teams/new page
    • Then I should see an h1 element with text “New Team”
    • And I should see a form with fields “Name”, “Home city”, and a “Create Team” button
    • And I should see a link with text “Back”
  • Scenario: Creating a new team with valid details
    • Given I am on the /teams/new page
    • When I fill in a name
    • And I fill in a home city
    • And I click the “Create Team” button
    • Then a Team record with matching attribute values should be created
    • And I should be on the /teams page
    • And I should see a success-styled flash message with text “Team was successfully created.”
    • And I should see the new team in the team list
  • Scenario: Creating a new team with missing name
    • Given I am on the /teams/new page
    • When I do not fill in a name
    • And I click the “Create Team” button
    • Then a Team should not be created
    • And I should see a HTML5 validation popup with text “Please fill out this field.”
  • Scenario: Creating a new team with missing home city
    • Given I am on the /teams/new page
    • When I do not fill in a home city
    • And I click the “Create Team” button
    • Then a Team should not be created
    • And I should see a HTML5 validation popup with text “Please fill out this field.”
  • Scenario: Navigating to the new team page from the index page
    • Given I am on the /teams page
    • When I click on the “New Team” link
    • Then I should be on the /teams/new page
  • Scenario: Navigating back to the team index page from the new team page
    • Given I am on the /teams/new page
    • When I click on the “Back” link
    • Then I should be on the /teams page
• Feature: Edit Team
  • As a user,
  • I want to edit an existing team
  • So that I can update its details
  • Scenario: Viewing the edit team form page
    • Given I have created a sample Team record
    • And I am on its /teams/:id/edit page
    • Then I should see an h1 element with text “Edit Team”
    • And I should see a form with fields “Name”, “Home city”, pre-filled with the team’s current details and an “Update Team” button
    • And I should see a link with text “Back”
  • Scenario: Updating a team with valid details
    • Given I have created a sample Team record
    • And I am on its /teams/:id/edit page
    • When I change the name
    • And I change the home city
    • And I click the “Update Team” button
    • Then the original Team record should be updated to match the new attribute values
    • And the total number of teams should not change
    • And I should be on the /teams/:id page for the team
    • And I should see a success-styled flash message “Team was successfully updated.”
  • Scenario: Updating a team with missing name
    • Given I have created a sample Team record
    • And I am on its /teams/:id/edit page
    • When I erase the name
    • And I click the “Update Team” button
    • Then the original Team record should not change
    • And I should see a HTML5 validation popup with text “Please fill out this field.”
  • Scenario: Updating a team with missing home city
    • Given I have created a sample Team record
    • And I am on its /teams/:id/edit page
    • When I erase the home city
    • And I click the “Update Team” button
    • Then the original Team record should not change
    • And I should see a HTML5 validation popup with text “Please fill out this field.”
  • Scenario: Navigating to a team edit page from the index page
    • Given I am on the /teams page
    • When I click on a team’s edit link
    • Then I should be on the /teams/:id/edit page for the selected team
  • Scenario: Navigating to a team edit page from the show page
    • Given I am on the /teams/:id page
    • When I click on the “Edit” link
    • Then I should be on the /teams/:id/edit page for the selected team
  • Scenario: Navigating back to the team index page from the edit team page
    • Given I am on the /teams/:id/edit page
    • When I click on the “Back” link
    • Then I should be on the /teams page
• Feature: Destroy Team
  • As a user,
  • I want to delete an existing team
  • So that I can remove it from my list
  • Scenario: Deleting a team from the index page
    • Given I am on the /teams page
    • When I click the “Delete” link for a team
    • Then the Team record with that id should no longer exist
    • And the number of teams should decrease by one
    • And I should be on the /teams page
    • And I should see a flash message “Team was successfully destroyed.”
    • And I should not see the deleted team in the list on the /teams page

New Functionalities

• Feature: Browse Players
  • As a user,
  • I want to see a list of players on a given team
  • So that I can choose one to view more details about
  • Scenario: Viewing the player index page content
    • Given I have created a sample Team
    • And I have added two sample Player records to the team
    • And I am on the /teams/:team_id/players page for that team
    • Then I should see an h1 element with text “[Team Name] Roster”
    • And I should see a table with headers “First Name”, “Last Name”, “Position”, and one empty header
    • And I should see two table body rows with the sample records’ first name, last name, position, and 3 links with the format “Show | Edit | Delete” to show, edit, and delete that player
    • And I should see a link with text “New Player”
  • Scenario: Navigating to the player index page from the team show page
    • Given I have created a Team
    • And I am on the /teams/:id page
    • When I click on the “Roster” link
    • Then I should be on the /teams/:team_id/players page for that team
  • Scenario: Navigating back to the team show page from the player index page
    • Given I have created a Team
    • And I am on the /teams/:team_id/players page for that team
    • When I click on the “Back to Team” link
    • Then I should be on the /teams/:id page for that team
• Feature: View Player Details
  • As a user,
  • I want to see detailed information about a selected player
  • So that I can learn more about them
  • Scenario: Viewing a player show page content
    • Given I have created a sample Team
    • And I have added a sample Player record to the team
    • And I am on its /teams/:team_id/players/:id page
    • Then I should see an h1 element with text “[First Name] [Last Name]”
    • And I should see a p element with text “Position: [Position]”
    • And I should see a link with text “Edit”
    • And I should see a link with text “Back”
  • Scenario: Navigating to a player show page from the index page
    • Given I have created a Team
    • And I have added a sample Player record to the team
    • And I am on the /teams/:team_id/players page
    • When I click on the player’s “Show” link
    • Then I should be on the /teams/:team_id/players/:id page for the selected player
  • Scenario: Navigating back to the player index page from the show page
    • Given I am on the /teams/:team_id/players/:id page
    • When I click on the “Back” link
    • Then I should be on the /teams/:team_id/players page
• Feature: Create New Player
  • As a user,
  • I want to add a new player to a team
  • So that I can expand the team’s roster
  • Scenario: Viewing the new player form page
    • Given I have created a Team named “Team Name”
    • And I am on the /teams/:team_id/players/new page
    • Then I should see an h1 element with text “New Player for Team Name”
    • And I should see a form with fields “First Name”, “Last Name”, “Position”, and a “Create Player” button
    • And I should see a link with text “Back”
  • Scenario: Creating a new player with valid details
    • Given I have created a Team
    • And I am on the /teams/:team_id/players/new page
    • When I fill in a first name
    • And I fill in a last name
    • And I fill in a position
    • And I click the “Create Player” button
    • Then a Player record with matching attribute values should be created and associated with the team
    • And I should be on the /teams/:team_id/players page
    • And I should see a success-styled flash message with text “Player was successfully created.”
    • And I should see the new player in the player list
  • Scenario: Creating a new player with missing first name
    • Given I have created a Team
    • And I am on the /teams/:team_id/players/new page
    • When I do not fill in a first name
    • And I click the “Create Player” button
    • Then a Player should not be created
    • And I should see an HTML5 validation popup with text “Please fill out this field.”
  • Scenario: Creating a new player with missing last name
    • Given I have created a Team
    • And I am on the /teams/:team_id/players/new page
    • When I do not fill in a last name
    • And I click the “Create Player” button
    • Then a Player should not be created
    • And I should see an HTML5 validation popup with text “Please fill out this field.”
  • Scenario: Creating a new player with no position
    • Given I have created a Team
    • And I am on the /teams/:team_id/players/new page
    • When I do not fill in a position that matches the list
    • And I click the “Create Player” button
    • Then a Player should not be created
    • And I should see an error-styled flash message with text “Error! Unable to create player.”
    • And I should see the new player form with error messages indicating the validation failures
  • Scenario: Navigating to the new player page from the index page
    • Given I have created a Team
    • And I am on the /teams/:team_id/players page
    • When I click on the “New Player” link
    • Then I should be on the /teams/:team_id/players/new page
  • Scenario: Navigating back to the player index page from the new player page
    • Given I am on the /teams/:team_id/players/new page
    • When I click on the “Back” link
    • Then I should be on the /teams/:team_id/players page
• Feature: Edit Player
  • As a user,
  • I want to edit an existing player
  • So that I can update their details
  • Scenario: Viewing the edit player form page
    • Given I have created a Team
    • And I have added a sample Player record to the team
    • And I am on its /teams/:team_id/players/:id/edit page
    • Then I should see an h1 element with text “Edit Player for Team Name”
    • And I should see a form with fields “First Name”, “Last Name”, “Position”, pre-filled with the player’s current details and an “Update Player” button
    • And I should see a link with text “Back”
  • Scenario: Updating a player with valid details
    • Given I have created a Team
    • And I have added a sample Player record to the team
    • And I am on its /teams/:team_id/players/:id/edit page
    • When I change the first name
    • And I change the last name
    • And I change the position
    • And I click the “Update Player” button
    • Then the original Player record should be updated to match the new attribute values
    • And the total number of players should not change
    • And I should be on the /teams/:team_id/players/:id page for the player
    • And I should see a success-styled flash message “Player was successfully updated.”
  • Scenario: Updating a player with missing first name
    • Given I have created a Team
    • And I have added a sample Player record to the team
    • And I am on its /teams/:team_id/players/:id/edit page
    • When I erase the first name
    • And I click the “Update Player” button
    • Then the original Player record should not change
    • And I should see an HTML5 validation popup with text “Please fill out this field.”
  • Scenario: Updating a player with missing last name
    • Given I have created a Team
    • And I have added a sample Player record to the team
    • And I am on its /teams/:team_id/players/:id/edit page
    • When I erase the last name
    • And I click the “Update Player” button
    • Then the original Player record should not change
    • And I should see an HTML5 validation popup with text “Please fill out this field.”
  • Scenario: Updating a player with missing position
    • Given I have created a Team
    • And I have added a sample Player record to the team
    • And I am on its /teams/:team_id/players/:id/edit page
    • When I erase the position
    • And I click the “Update Player” button
    • Then the original Player record should not change
    • And I should see an HTML5 validation popup with text “Please fill out this field.”
  • Scenario: Navigating to a player edit page from the index page
    • Given I have created a Team
    • And I have added a sample Player record to the team
    • And I am on the /teams/:team_id/players page
    • When I click on the player’s “Edit” link
    • Then I should be on the /teams/:team_id/players/:id/edit page for the selected player
  • Scenario: Navigating back to the player index page from the edit player page
    • Given I am on the /teams/:team_id/players/:id/edit page
    • When I click on the “Back” link
    • Then I should be on the /teams/:team_id/players page
• Feature: Destroy Player
  • As a user,
  • I want to delete an existing player
  • So that I can remove them from the team
  • Scenario: Deleting a player from the index page
    • Given I have created a Team
    • And I have added a sample Player record to the team
    • And I am on the /teams/:team_id/players page
    • When I click the “Delete” link for the player
    • Then the Player record with that id should no longer exist
    • And the number of players for the team should decrease by one
    • And I should be on the /teams/:team_id/players page
    • And I should see a flash message “Player was successfully destroyed.”
    • And I should not see the deleted player in the player list on the /teams/:team_id/players page

Additional Constraints:

• You must follow the standard Rails conventions:
  • Each page must have a path helper following the standard Rails convention:
    • teams/:team_id/players is team_players_path
    • teams/:team_id/players/new is new_team_player_path
    • teams/:team_id/players/:id is team_player_path
    • teams/:team_id/players/:id/edit is edit_team_player_path
  • get teams/:team_id/players routes to PlayersController#index
  • post teams/:team_id/players routes to PlayersController#create
  • get teams/:team_id/players/new routes to PlayersController#new
  • get teams/:team_id/players/:id routes to PlayersController#show
  • get teams/:team_id/players/:id/edit routes to PlayersController#edit
  • patch teams/:team_id/players/:id routes to PlayersController#update
  • delete teams/:team_id/players/:id routes to PlayersController#destroy
• Links must use the link_to or button_to helper where appropriate with the appropriate path helper
  • The button_to can be styled with class: 'btn btn-link p-0 pb-1 m-0', form: { class: 'd-inline' } to match the other links.
• Forms must use the bootstrap_form_with helper
• All HTML tags must be properly closed
• No duplication of head/style/body elements in the rendered HTML

Note: Italicized requirements will be manually confirmed by the graders.

Testing Your Work with RSpec

Each of the feature stories above corresponds to an RSpec feature spec. These tests (and others for the additional constraints) have been provided in the repository to help you check whether your implementation meets the requirements.

Recommended Workflow

1. Read through the detailed specifications first. Understand what is required for each page and scenario.
2. Approach 1 - for those familiar with Test-Driven Development (TDD):
   • Run rspec spec/features to execute the feature tests.
   • Try to write the minimum amount of code needed to make each test pass.
   • Watch the tests fail and pass as you meet each requirement.
   • At the end, run all the provided tests with the rspec command to check if everything passes.
     • Note that not all tests are feature tests, so it is necessary to run rspec at the end to ensure that all tests are run.
3. Approach 2 - for those less experienced with testing:
   • Work through the specifications step by step, ensuring your implementation meets each requirement.
   • Once you’ve completed your implementation, run all the tests with the rspec command to check if everything passes.

Either of the above approaches is fine, as long as all tests pass by the end.

How to Submit

Once you’ve completed the task and confirmed that all tests pass, perform the follow steps to submit your work.

1. Commit your changes and push them to GitHub.
   • git add -A
   • git commit -m "Completed SA5-EV Explanation Video"
   • git push
2. Stop recording and save the video.
   • See these instructions for how.
3. Submit to Canvas.
   • Submit a Word DOCX that contains the following:
     • The link to your GitHub repository where your code is hosted.
     • The link(s) to your video(s) as per these instructions.