Skills Assignment SA5-EV: Model Associations Explanation Video
Getting Started
Access the GitHub organization’s repositories page.
In your web browser, log into GitHub.
Navigate to the repositories page of the memphis-comp-7012-2024-08fall GitHub organization.
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 memphis-comp-7012-2024-08fall.
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.
Once you have filled out all the fields, click the Create repository button at the bottom right of the page.
Clone the repository and set up your local environment.
In your terminal, clone the newly created repository into your workspace folder.
Set up local repository by following steps similar to those in the Running Apps demo.
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
Read through the detailed specifications first. Understand what is required for each page and scenario.
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.
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 Your Work
Once you’ve completed the task and confirmed that all tests pass:
Commit your changes:
Add all your changes:
git add -A
Commit your work with a meaningful message:
git commit -m"Completed SA5 Explanation Video"
Push your changes to GitHub:
Push your commits to the remote repository:
git push
Submit to Canvas:
In Canvas, submit:
The link to your GitHub repository where your code is hosted.
The link to your video if you are using Teams to record. (If you are not using Teams, then upload the video file.)