Skills Assignment SA5-PT: Model Associations Practice Test
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-pt.
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 manage a database of music albums. The project already includes an Album model class and a Track model class, as per this class diagram:
Along with these model classes, the app includes the standard resource-CRUDing pages and UI features for Album model objects (but not for Track objects). It also includes model validations and database seeds. 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 Album and Track 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 Track 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.
Detailed Specifications
Existing Functionalities
Feature: Browse Albums
As a user,
I want to see a list of albums
So that I can choose one to view more details about
Scenario: Viewing the album index page content
Given I have created two sample Album records
And I am on the /albums page
Then I should see an h1 element with text “Albums”
And I should see a table with headers “Title”, “Artist”, and one empty header
And I should see two table body rows with the sample records’ title, artist, and 3 links with the format “Show | Edit | Delete” to show, edit and delete that album
And I should see a link with text “New Album”
Scenario: Redirecting from the root page to the albums page
When I visit the root URL
Then I should be automatically redirected to the /albums page
Feature: View Album Details
As a user,
I want to see detailed information about a selected album
So that I can learn more about it
Scenario: Viewing a album show page content**
Given I have created a sample Album record
And I am on its /albums/:id page
Then I should see an h1 element with the text “Album”
And I should see a p element with the text in the format “Title: [Title]”
And I should see a p element with the text in the format “Artist: [Artist]”
And I should see a link with text “Edit”
And I should see a link with text “Tracklist”
And I should see a link with text “Back”
Scenario: Navigating to an album show page from the index page**
Given I am on the /albums page
When I click on an album’s show link
Then I should be on the /albums/:id page for the selected album
Scenario: Navigating back to the album index page from the show page**
Given I am on the /albums/:id page
When I click on the “Back” link
Then I should be on the /albums page
Feature: Create New Album
As a user,
I want to add a new album
So that I can expand my list of albums
Scenario: Viewing the new album form page**
Given I am on the /albums/new page
Then I should see an h1 element with text “New Album”
And I should see a form with fields “Title”, “Artist”, and a “Create Album” button
And I should see a link with text “Back”
Scenario: Creating a new album with valid details**
Given I am on the /albums/new page
When I fill in a title
And I fill in an artist
And I click the “Create Album” button
Then an Album record with matching attribute values should be created
And I should be on the /albums page
And I should see a success-styled flash message with text “Album was successfully created.”
And I should see the new album in the album list
Scenario: Creating a new album with missing title**
Given I am on the /albums/new page
When I do not fill in a title
And I click the “Create Album” button
Then an Album should not be created
And I should see a HTML5 validation popup with text “Please fill out this field.”
Scenario: Creating a new album with missing artist**
Given I am on the /albums/new page
When I do not fill in an artist
And I click the “Create Album” button
Then an Album should not be created
And I should see a HTML5 validation popup with text “Please fill out this field.”
Scenario: Navigating to the new album page from the index page**
Given I am on the /albums page
When I click on the “New Album” link
Then I should be on the /albums/new page
Scenario: Navigating back to the album index page from the new album page**
Given I am on the /albums/new page
When I click on the “Back” link
Then I should be on the /albums page
Feature: Edit Album
As a user,
I want to edit an existing album
So that I can update its details
Scenario: Viewing the edit album form page**
Given I have created a sample Album record
And I am on its /albums/:id/edit page
Then I should see an h1 element with text “Edit Album”
And I should see a form with fields “Title”, “Artist”, pre-filled with the album’s current details and a “Update Album” button
And I should see a link with text “Back”
Scenario: Updating an album with valid details**
Given I have created a sample Album record
And I am on its /albums/:id/edit page
When I change the title
And I change the artist
And I click the “Update Album” button
Then the original Album record should be updated to match the new attribute values
And the total number of albums should not change
And I should be on the /albums/:id page for the album
And I should see a success-styled flash message “Album was successfully updated.”
Scenario: Updating an album with missing title**
Given I have created a sample Album record
And I am on its /albums/:id/edit page
When I erase the title
And I click the “Update Album” button
Then the original Album record should not change
And I should see a HTML5 validation popup with text “Please fill out this field.”
Scenario: Updating an album with missing artist**
Given I have created a sample Album record
And I am on its /albums/:id/edit page
When I erase the artist
And I click the “Update Album” button
Then the original Album record should not change
And I should see a HTML5 validation popup with text “Please fill out this field.”
Scenario: Navigating to an album edit page from the index page**
Given I am on the /albums page
When I click on an album’s edit link
Then I should be on the /albums/:id/edit page for the selected album
Scenario: Navigating to an album edit page from the show page**
Given I am on the /albums/:id page
When I click on an album’s edit link
Then I should be on the /albums/:id/edit page for the selected album
Scenario: Navigating back to the album index page from the new album page**
Given I am on the /albums/new page
When I click on the “Back” link
Then I should be on the /albums page
Feature: Destroy Album
As a user,
I want to delete an existing album
So that I can remove it from my list
Scenario: Deleting an album from the index page**
Given I am on the /albums page
When I click the “Delete” link for an album
Then the Album record with that id should no longer exist
And the number of albums should decrease by one
And I should be on the /albums page
And I should see a flash message “Album was successfully destroyed.”
And I should not see the deleted album in the list on the /albums page
New Functionalities
Feature: Browse Tracks
As a user,
I want to see a list of tracks on a given album
So that I can choose one to view more details about
Scenario: Viewing the track index page content
Given I have created an Album titled “Album Title”
And I have added two sample Track records to the album
And I am on the /albums/:album_id/tracks page for that album
Then I should see an h1 element with text “Album Title Tracks”
And I should see a table with headers “Title”, “Length”, and one empty header
And I should see two table body rows with the sample records’ title, length in seconds and 3 links with the format “Show | Edit | Delete” to show, edit, and delete that track
And I should see a link with text “New Track”
Scenario: Navigating to the track index page from the album show page
Given I have created an Album
And I am on the /albums/:id page
When I click on the “Tracklist” link
Then I should be on the /albums/:album_id/tracks page for that album
Scenario: Navigating back to the album show page from the track index page
Given I have created an Album
And I am on the /albums/:album_id/tracks page for that album
When I click on the “Back to Album” link
Then I should be on the /albums/:id page for that album
Feature: View Track Details
As a user,
I want to see detailed information about a selected track
So that I can learn more about it
Scenario: Viewing a track show page content
Given I have created an Album titled “Album Title”
And I have added a sample Track record with order number 1 and title “Track Title” to the album
And I am on its /albums/:album_id/tracks/:id page
Then I should see an h1 element with text “Track”
And I should see an p item with text “Title: [Title]”
And I should see an p item with text “Length: [Length in seconds]”
And I should see a link with text “Back”
Scenario: Navigating to a track show page from the index page
Given I have created an Album
And I have added a sample Track record to the album
And I am on the /albums/:album_id/tracks page
When I click on the track’s “Show” link
Then I should be on the /albums/:album_id/tracks/:id page for the selected track
Scenario: Navigating back to the track index page from the show page
Given I am on the /albums/:album_id/tracks/:id page
When I click on the “Back” link
Then I should be on the /albums/:album_id/tracks page
Feature: Create New Track
As a user,
I want to add a new track to an album
So that I can expand the album’s list of tracks
Scenario: Viewing the new track form page
Given I have created an Album titled “Album Title”
And I am on the /albums/:album_id/tracks/new page
Then I should see an h1 element with text “New Track for Album Title”
And I should see a form with fields “Title”, “Length in seconds” and a “Create Track” button
And I should see a link with text “Back”
Scenario: Creating a new track with valid details
Given I have created an Album
And I am on the /albums/:album_id/tracks/new page
When I fill in a title
And I fill in a length in seconds greater than 0
And I click the “Create Track” button
Then a Track record with matching attribute values should be created and associated with the album
And I should be on the /albums/:album_id/tracks page
And I should see a success-styled flash message with text “Track was successfully created.”
And I should see the new track in the track list
Scenario: Creating a new track with missing title
Given I have created an Album
And I am on the /albums/:album_id/tracks/new page
When I do not fill in a title
And I click the “Create Track” button
Then a Track should not be created
And I should see an HTML5 validation popup with text “Please fill out this field.”
Scenario: Creating a new track with invalid length
Given I have created an Album
And I am on the /albums/:album_id/tracks/new page
When I fill in a length in seconds that is not greater than 0
And I click the “Create Track” button
Then a Track should not be created
And I should see an error-styled flash message with text “Error! Unable to create track.”
And I should see the new track form with error messages indicating the validation failures
Scenario: Navigating to the new track page from the index page
Given I have created an Album
And I am on the /albums/:album_id/tracks page
When I click on the “New Track” link
Then I should be on the /albums/:album_id/tracks/new page
Scenario: Navigating back to the track index page from the new track page**
Given I am on the /albums/:album_id/tracks/new page
When I click on the “Back” link
Then I should be on the /albums/:album_id/tracks page
Feature: Edit Track
As a user,
I want to edit an existing track
So that I can update its details
Scenario: Viewing the edit track form page
Given I have created an Album
And I have added a sample Track record to the album
And I am on its /albums/:album_id/tracks/:id/edit page
Then I should see an h1 element with text “Edit Track for Album Title”
And I should see a form with fields “Title”, “Length in seconds” pre-filled with the track’s current details and an “Update Track” button
And I should see a link with text “Back”
Scenario: Updating a track with valid details
Given I have created an Album
And I have added a sample Track record to the album
And I am on its /albums/:album_id/tracks/:id/edit page
And I change the title
And I change the length in seconds to a different number greater than 0
And I click the “Update Track” button
Then the original Track record should be updated to match the new attribute values
And the total number of tracks should not change
And I should be on the /albums/:album_id/tracks/:id page for the track
And I should see a success-styled flash message “Track was successfully updated.”
Scenario: Updating a track with missing title
Given I have created an Album
And I have added a sample Track record to the album
And I am on its /albums/:album_id/tracks/:id/edit page
When I erase the title
And I click the “Update Track” button
Then the original Track record should not change
And I should see an HTML5 validation popup with text “Please fill out this field.”
Scenario: Updating a track with invalid length
Given I have created an Album
And I have added a sample Track record to the album
And I am on its /albums/:album_id/tracks/:id/edit page
When I change the length in seconds to a number that is not greater than 0
And I click the “Update Track” button
Then the original Track record should not change
And I should see an error-styled flash message with text “Error! Unable to update track.”
And I should see the edit track form with error messages indicating the validation failures
Scenario: Navigating to a track edit page from the index page
Given I have created an Album
And I have added a sample Track record to the album
And I am on the /albums/:album_id/tracks page
When I click on the track’s “Edit” link
Then I should be on the /albums/:album_id/tracks/:id/edit page for the selected track
Scenario: Navigating back to the album index page from the edit page**
Given I am on the /albums/:album_id/tracks/:id/edit page
When I click on the “Back” link
Then I should be on the /albums/:album_id/tracks page
Feature: Destroy Track
As a user,
I want to delete an existing track
So that I can remove it from the album
Scenario: Deleting a track from the index page
Given I have created an Album
And I have added a sample Track record to the album
And I am on the /albums/:album_id/tracks page
When I click the “Delete” link for the track
Then the Track record with that id should no longer exist
And the number of tracks for the album should decrease by one
And I should be on the /albums/:album_id/tracks page
And I should see a flash message “Track was successfully destroyed.”
And I should not see the deleted track in the track list on the /albums/:album_id/tracks page
Additional Constraints:
You must follow the standard Rails conventions:
Each page must have a path helper following the standard Rails convention:
albums/:album_id/tracks is album_tracks_path
albums/:album_id/tracks/new is new_album_track_path
albums/:album_id/tracks/:id is album_track_path
albums/:album_id/tracks/:id/edit is edit_album_track_path
get albums/:album_id/tracks routes to TracksController#index
post albums/:album_id/tracks routes to TracksController#create
get albums/:album_id/tracks/new routes to TracksController#new
get albums/:album_id/tracks/:id routes to TracksController#show
get albums/:album_id/tracks/:id/edit routes to TracksController#edit
patch albums/:album_id/tracks/:id routes to TracksController#update
delete albums/:album_id/tracks/:id routes to TracksController#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 Practice Task"
Push your changes to GitHub:
Push your commits to the remote repository:
git push
Take Screenshots:
Open your Rails app in the browser and take four screenshots:
One of the Tracks index page for “Rumours” (/albums/2/tracks).
One of the Track show page for “Come Together” (/albums/3/tracks/7).
One of the Track new page for “The Dark Side of the Moon” (/albums/1/tracks/new).
One of the Track edit page for “Never Going Back Again” (/albums/2/tracks/6/edit).
Ensure that your desktop background or terminal prompt with your unique username is visible in the screenshot.
Submit to Canvas:
In Canvas, submit:
The specified screenshots of your app running in the browser.
The link to your GitHub repository where your code is hosted.
You may submit al of the above in a single document.