E2E test - /my-posts page - Multiple issues available

[John-Paul-Larkin]

Context

We need to ensure that our core application features and user flows are fully covered by end-to-end (E2E) tests. We are using Playwright for these tests, and the workflow framework for E2E testing is already in place.

If you navigate to the e2e folder in the root of the project, you'll find that @JohnAllenTech has written numerous tests for the article page. These tests have been grouped into two categories: authenticated and unauthenticated. Please ensure that this pattern is followed when adding new tests.

Expected Behavior

Below is a list of possible tests for the /my-posts page. These are suggested tests generated with the help of ChatGPT, meant to provide a starting point. You should use your discretion to refine these tests and account for relevant edge cases.

Additionally, feel free to propose other valid tests that might apply specifically to the functionality of the '/my-posts' page.

Tests should be standalone and focus on a single purpose, ensuring each test verifies only one specific behavior or functionality.

Test should be added to e2e/my-posts.spec.ts

Please leave a comment specifying the tests you plan to write, so others don't duplicate the same efforts.
All PRs are accepted for Hacktoberfest.

Note: For this page, the unauthenticated test is only necessary to verify that the user is correctly redirected to the /get-started page.

Note: As multiple people may contribute to this issue, please ensure you pull the latest changes from the upstream and resolve any conflicts. Sync the upstream

Tests

Here are some suggested E2E tests for the page based on your provided details:

General Tests:

1. Tab Navigation
   • Test: Ensure the user can navigate between the "Drafts", "Scheduled", and "Published" tabs.
   • Scenario: Click on each tab and verify that the correct content is displayed.

For the "Published" Tab:

2. Display Published Date

   • Test: Verify the correct display of "Published on" and "Last updated on" dates.
   • Scenario: For a post that has only been published, it should say "Published on [date]". If a post has been edited after publication, it should say "Last updated on [date]".

3. Sorting by Published Date

   • Test: Verify that posts in the "Published" tab are sorted correctly, with the most recently published or updated post appearing first.
   • Scenario: Check that the order of posts reflects the latest publication or update date, with updated posts using the updatedAt field.
     Note Refer to issue [fix] Post Sorting and Timestamp Display in Your Posts Section #1095 by @HarshitT00 to see how the "Published posts" should be sorted.
     In published posts section as the post is published update post is done so updatedAt is set to slightly greater time than published so use 1 minute time difference to distinguish between a published post and a post that published but updated later

4. Edit Published Post

   • Test: Ensure the "Edit" option in the dropdown works for published posts.
   • Scenario: Select "Edit", make changes, and verify that the "Last updated on" timestamp changes correctly after saving.

5. Delete Published Post

   • Test: Verify the "Delete" option in the dropdown works for published posts.
   • Scenario: Select "Delete" and confirm that the post is removed from the list.

For the "Drafts" Tab:

6. Sorting by Last Updated

   • Test: Verify that posts in the "Drafts" tab are sorted chronologically by their last updated date.
   • Scenario: Confirm that the first post in the list is the most recently updated, and the last post is the oldest.

7. Edit Draft Post

   • Test: Ensure the "Edit" option in the dropdown works for draft posts.
   • Scenario: Select "Edit" from the dropdown, make changes, and save. Verify that the post is updated and reflected correctly on the page.

8. Delete Draft Post

   • Test: Verify the "Delete" option in the dropdown works for draft posts.
   • Scenario: Select "Delete" from the dropdown and confirm deletion. Ensure the post is removed from the list.

For the "Scheduled" Tab:

9. Sorting by Nearest Scheduled Date

   • Test: Verify that posts in the "Scheduled" tab are sorted by the nearest scheduled date.
   • Scenario: Confirm that the first post in the list is the one scheduled to publish the soonest, and the last post is the furthest out.

10. Edit Scheduled Post

• Test: Ensure the "Edit" option in the dropdown works for scheduled posts.
• Scenario: Select "Edit", make changes, and save. Verify that the post is updated and the scheduled date reflects any changes.

11. Delete Scheduled Post

• Test: Verify the "Delete" option in the dropdown works for scheduled posts.
• Scenario: Select "Delete" and confirm the post is removed from the list.

Additional Edge Case Tests:

12. Empty States
    • Test: Verify how the UI behaves when there are no drafts, scheduled posts, or published posts.
    • Scenario: If there are no posts in a tab, ensure the UI displays an appropriate message like "No posts available."

Screenshots

[JohnAllenTech]

Can I haz it?

[github-actions]

Uh oh! @JohnAllenTech, the image you shared is missing helpful alt text. Check #1169 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[JohnAllenTech]

Fantastic issue write up btw @John-Paul-Larkin

[patrickhladun]

Hey, I would love to help with testing @John-Paul-Larkin

[John-Paul-Larkin]

Fantastic issue write up btw @John-Paul-Larkin

I actually think the details turned people off taking this issue 🤣

[John-Paul-Larkin]

@JohnAllenTech Have you written any of these tests yet?
Just so @patrickhladun knows what to work on.

PS Patrick, you can do these incrementally if you prefer.

[patrickhladun]

I just started with a simple test for the unauthenticated user that visits the 'my-posts' page.