Skills Assignment SA2-PT: Webpage Basics Practice Test
Getting Started
Setting Up Your Repository
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-sa2-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.
sa2-pt-hjsimpson-1
What’s in the Repository
The repository contains a basic Rails project with a set of gems that will be useful for this course.
Two gems are new this semester:
RuboCop: A linter that checks your code for formatting issues and can autocorrect if you enable it.
RSpec: An automated testing framework for Ruby. You’ll be using RSpec to run feature tests (also called feature specs) to verify that you’ve met the assignment’s requirements.
Task
Add a welcome page and an “about me” page to the provided Rails app. Be creative in designing your pages but your design must at least meet the detailed specifications below.
Detailed Specifications
Feature: Feel Welcomed
User Story:
As a visitor,
I want to feel greeted and welcomed when I visit the site
So that I am encouraged to explore further and learn more about the site
Scenario: Viewing the welcome page content
Given I am on the /welcome page
Then I should see a greeting in an h1 element
And I should see a link with text “About Me”
Scenario: Redirecting from the root page to the welcome page
When I visit the root URL
Then I should be automatically redirected to the /welcome page
Feature: Learn About the Creator
User Story:
As a visitor,
I want to discover interesting information about the creator
So that I feel connected and engaged with the site
Scenario: Viewing the creator’s information page
Given I am on the /me page
Then I should see a heading with a title or the creator’s name in an h1 element
And I should see a paragraph with a personal introduction in a p element
And I should see a list of interesting facts or hobbies in a ul element containing exactly 3 li items
And I should see an image that represents the creator
And I should see a link with text “Back”
Scenario: Navigating to the me page from the welcome page
Given I am on the /welcome page
When I click on the “About Me” link
Then I should be on the /me page
Scenario: Navigating back to the welcome page from the me page
Given I am on the /me page
When I click on the “Back” link
Then I should be on the /welcome page
Additional Constraints:
You must follow the standard Rails conventions:
Each page must have a path helper following the standard Rails convention:
/welcome is welcome_path
/me is me_path
/welcome routes to the PagesController#welcome action
/me routes to the PagesController#me action
Links must use the link_to helper with the appropriate path helper
The scenario “Navigating back to the welcome page from the me page” should use root_path
Images must use the image_tag helper
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 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 SA2 Practice Test"
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 two screenshots:
One of the Welcome page (/welcome).
One of the About Me page (/me).
Ensure that your desktop background or terminal prompt with your unique username is visible in the screenshot.
Submit to Canvas:
A Word DOCX that contains:
The link to your GitHub repository where your code is hosted.
The two screenshots of your app running in the browser.