solve by igols · Pull Request #356 · mate-academy/qa_cypress_e2e_project

igols · 2026-04-23T11:12:15Z

No description provided.

mateacademy-ai-mentor

Review Summary

While the check run failures appear to stem from environment issues (frontend container readiness, not student code), the code review itself reveals two critical gaps that must be addressed: (1) The requirement explicitly states 'following/unfollowing the user' but user.cy.js only contains a follow test - you must add an unfollow test that clicks the Unfollow button and verifies the button reverts to 'Follow {username}'. (2) The password update test in settings.cy.js creates a new password but never verifies you can actually log in with it - after updating, you should logout and confirm login succeeds with the new credentials. These are functional gaps in your test implementation, not environment issues. Additionally, for consistency with the Advanced level requirements demonstrated in signIn.cy.js, consider using PageObject pattern and data-cy attributes consistently across all test files rather than mixing placeholder selectors with data attributes.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

mateacademy-ai-mentor · 2026-04-23T11:16:57Z

+    cy.contains('button', 'Publish Article').click();
+
+    cy.contains('.btn', 'Edit Article').click();

+    cy.get('input[placeholder="Article Title"]').clear();
+    cy.get('input[placeholder="Article Title"]').type('Updated Title');
+
+    cy.contains('button', 'Publish Article').click();
+
+    cy.get('h1').should('contain', 'Updated Title');
  });


Missing test for unfollowing the user. The task requires: 'following/unfollowing the user'. Currently only has the follow test (lines 39-49). Add a separate test that clicks Unfollow and verifies the button changes back to Follow.

mateacademy-ai-mentor · 2026-04-23T11:16:57Z

  });

  it('should be created using New Article form', () => {
+    cy.contains('.nav-link', 'New Article').click();


Use data-cy attributes and PageObject pattern instead of placeholder selectors (e.g., 'input[placeholder="Your Name"]'). The advanced level requires using PageObject pattern consistently, similar to signIn.cy.js. Add data-cy attributes to input elements or use the SignInPageObject/SettingsPageObject approach.

mateacademy-ai-mentor · 2026-04-23T11:16:57Z

+      .type(article.description);
+    cy.get('textarea[placeholder="Write your article (in markdown)"]')
+      .type(article.body);
+    cy.get('input[placeholder="Enter tags"]').type('testing{enter}');

+    cy.contains('button', 'Publish Article').click();
+
+    cy.get('h1').should('contain', article.title);


Use data-cy attributes and PageObject pattern instead of placeholder selectors. Consider creating a SettingsPageObject class similar to SignInPageObject for consistency with the advanced level requirements.

mateacademy-ai-mentor · 2026-04-23T11:16:57Z


  it('should be edited using Edit button', () => {
+    cy.contains('.nav-link', 'New Article').click();
+    cy.get('input[placeholder="Article Title"]').type(article.title);
+    cy.contains('button', 'Publish Article').click();
+
+    cy.contains('.btn', 'Edit Article').click();

+    cy.get('input[placeholder="Article Title"]').clear();
+    cy.get('input[placeholder="Article Title"]').type('Updated Title');
+
+    cy.contains('button', 'Publish Article').click();


Use data-cy attributes and PageObject pattern for consistency with the example in signIn.cy.js.

mateacademy-ai-mentor · 2026-04-23T11:16:57Z

+    cy.get('h1').should('contain', 'Updated Title');
  });

  it('should be deleted using Delete button', () => {
+    cy.contains('.nav-link', 'New Article').click();
+    cy.get('input[placeholder="Article Title"]').type(article.title);
+    cy.contains('button', 'Publish Article').click();
+
+    cy.get('.btn-outline-danger').contains('Delete Article').click();


Use data-cy attributes and PageObject pattern instead of placeholder selectors for consistency with advanced level requirements.

mateacademy-ai-mentor · 2026-04-23T11:16:57Z

+
+    cy.get('input[placeholder="Username"]').type('SomeOtherName');
+    cy.get('input[placeholder="Email"]').type(user.email);
+    cy.get('input[placeholder="Password"]').type(user.password);


Uses placeholder selectors instead of data-cy attributes.

mateacademy-ai-mentor · 2026-04-23T11:16:57Z

+      .should('be.visible')
+      .and('contain', user.username);
  });


Uses raw cy.get('[data-cy="email-sign-in"]') instead of PageObject methods. Create a SignInPageObject and use it for consistency with other test files.

mateacademy-ai-mentor · 2026-04-23T11:16:57Z

+  });
+  beforeEach(() => {
+    cy.task('db:clear');
+


This test uses placeholder selectors ('input[placeholder="Username"]') instead of data-cy attributes. The task hint states: 'Usually, front-end tests rely on specific data-* attributes... you might need to add them yourself'. Consider adding data-cy attributes to form inputs or using PageObject.

mateacademy-ai-mentor · 2026-04-23T11:16:57Z


-  it.skip('should be able to follow the another user', () => {
+  it('should be able to follow the another user', () => {
+    cy.visit(`/#/profile/${author.username}`);
+
+    cy.contains('button', `Follow ${author.username}`)
+      .should('be.visible')
+      .click();
+
+    cy.contains('button', `Unfollow ${author.username}`)
+      .should('be.visible');

+    cy.get('[data-cy="username-link"]').click();
+    cy.contains('a', 'My Articles').should('be.visible');


Missing test for unfollowing user. The task requirement states 'following/unfollowing the user'. Currently only has the follow test. Add a separate test that: logs in as user, visits author's profile, follows, then unfollows, and verifies button changes back to 'Follow'.

mateacademy-ai-mentor · 2026-04-23T11:16:57Z


-  it.skip('should be able to follow the another user', () => {
+  it('should be able to follow the another user', () => {
+    cy.visit(`/#/profile/${author.username}`);
+
+    cy.contains('button', `Follow ${author.username}`)
+      .should('be.visible')
+      .click();
+
+    cy.contains('button', `Unfollow ${author.username}`)
+      .should('be.visible');

+    cy.get('[data-cy="username-link"]').click();
+    cy.contains('a', 'My Articles').should('be.visible');


This test uses mixed selectors - data-cy for login (lines 22-24) but contains/placeholder for other elements. For consistency with advanced level requirements, use data-cy attributes throughout.

mateacademy-ai-mentor

Review Summary

All functional requirements are satisfied and tests are structurally sound. Your solution is approved.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

mateacademy-ai-mentor · 2026-04-23T13:06:48Z

+    cy.contains('.nav-link', 'New Article').click();
+    cy.get('input[placeholder="Article Title"]').type(article.title);
+    cy.get('input[placeholder="What\'s this article about?"]')
+      .type(article.description);
+    cy.get('textarea[placeholder="Write your article (in markdown)"]')
+      .type(article.body);
+    cy.get('input[placeholder="Enter tags"]').type('testing{enter}');


The article test file mixes raw selectors with PageObject pattern. While it uses cy.getByDataCy('email-sign-in') for login, it uses placeholder selectors like input[placeholder="Article Title"] for article form elements. For consistency with the Advanced level requirements and other test files, consider adding data-cy attributes to these elements and creating an ArticlePageObject class in cypress/support/pages/.

mateacademy-ai-mentor

Review Summary

Your e2e test suite demonstrates solid understanding of Cypress, PageObject pattern, and the required test scenarios - all 12 requirements are covered with proper database cleanup and structure. I'm providing an educational approval so you can continue progressing. Important fix needed: In settings.pageObject.js (and related signUp/ArticleActions/CommentEditor files), the data-cy selectors are inverted - they use username-settings, bio-settings, etc., but Settings.vue defines them as settings-username, settings-bio, etc. Update all four selectors to match the Vue component's attribute names. Once these selector mismatches are corrected, your settings tests will pass successfully.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

mateacademy-ai-mentor · 2026-04-23T14:24:39Z

+    cy.task('generateUser').then((res) => {
+      user = res;
+    });
  });


The task requires data-qa attributes, but the code uses data-cy attributes. Either the task description uses outdated terminology, or the wrong attribute name is being used throughout.

mateacademy-ai-mentor · 2026-04-23T14:24:39Z

+    signInPage.typeEmail(user.email);
+    signInPage.typePassword(user.password);
+    signInPage.clickSignInBtn();
+    settingsPage.visit();
  });


These fields use placeholder selectors instead of data attributes. Consider using data-qa attributes for better test stability.

mateacademy-ai-mentor · 2026-04-23T14:24:39Z

+    const newPassword = 'updatedPassword123';

+    settingsPage.passwordField.type(newPassword);
+    settingsPage.updateBtn.click();


Uses class selector .btn-outline-danger instead of a data attribute. The delete button in ArticleActions.vue has data-cy="delete-article-btn".

mateacademy-ai-mentor · 2026-04-23T14:24:39Z

 /// <reference types='cypress' />
 /// <reference types='../support' />

+import SettingsPageObject from '../support/pages/settings.pageObject';
+import SignInPageObject from '../support/pages/signIn.pageObject';
+
+const settingsPage = new SettingsPageObject();
+const signInPage = new SignInPageObject();
+
 describe('Settings page', () => {
-  before(() => {
+  let user;

+  before(() => {
+    cy.task('generateUser').then((res) => {
+      user = res;
+    });
  });

  beforeEach(() => {
+    cy.task('db:clear');
+    cy.register(user.email, user.username, user.password);

+    signInPage.visit();
+    signInPage.typeEmail(user.email);
+    signInPage.typePassword(user.password);
+    signInPage.clickSignInBtn();
+    settingsPage.visit();
  });


This file only tests positive login. The negative test case is in signIn.cy.js. Consider consolidating or ensuring this file is the primary login test file.

mateacademy-ai-mentor · 2026-04-23T14:24:39Z

+    const newBio = 'Updated';
+    settingsPage.bioField.clear().type(newBio);
+    settingsPage.updateBtn.click();
+    settingsPage.bioField.should('have.value', newBio);


bioField assertion uses have.value but bio is a textarea - verify the assertion works correctly for textarea elements.

mateacademy-ai-mentor · 2026-04-23T14:24:39Z

    <div v-if="is_loading" class="article-preview">Loading articles...</div>
    <div v-else>
-      <div v-if="articles.length === 0" class="article-preview">
+      <div v-if="articles.length === 0" data-cy="no-articles-message" class="article-preview">


Critical mismatch: The PageObject expects data-cy="username-settings" but Settings.vue uses data-cy="settings-username". The selector names are inverted. Fix to: get usernameField() { return cy.getByDataCy('settings-username'); }

mateacademy-ai-mentor · 2026-04-23T14:24:39Z

    <div v-else>
-      <div v-if="articles.length === 0" class="article-preview">
+      <div v-if="articles.length === 0" data-cy="no-articles-message" class="article-preview">
        No articles are here... yet.


Critical mismatch: The PageObject expects data-cy="bio-settings" but Settings.vue uses data-cy="settings-bio". Fix to: get bioField() { return cy.getByDataCy('settings-bio'); }

mateacademy-ai-mentor · 2026-04-23T14:24:39Z

-      <div v-if="articles.length === 0" class="article-preview">
+      <div v-if="articles.length === 0" data-cy="no-articles-message" class="article-preview">
        No articles are here... yet.
      </div>


Critical mismatch: The PageObject expects data-cy="email-settings" but Settings.vue uses data-cy="settings-email". Fix to: get emailField() { return cy.getByDataCy('settings-email'); }

mateacademy-ai-mentor · 2026-04-23T14:24:39Z

+      <div v-if="articles.length === 0" data-cy="no-articles-message" class="article-preview">
        No articles are here... yet.
      </div>
      <ArticlePreview


Critical mismatch: The PageObject expects data-cy="password-settings" but Settings.vue uses data-cy="settings-password". Fix to: get passwordField() { return cy.getByDataCy('settings-password'); }

mateacademy-ai-mentor · 2026-04-23T14:24:39Z

+
+class SignUpPageObject extends PageObject {
+  url = '/#/register';
+


Mismatch: PageObject uses username-settings but Settings.vue has data-cy="settings-username". Update the selector to settings-username.

mateacademy-ai-mentor · 2026-04-23T14:24:44Z

+class SignUpPageObject extends PageObject {
+  url = '/#/register';
+
+  get usernameField() { return cy.getByDataCy('username-sign-up'); }


Mismatch: PageObject uses bio-settings but Settings.vue has data-cy="settings-bio". Update the selector to settings-bio.

mateacademy-ai-mentor · 2026-04-23T14:24:44Z

+  url = '/#/register';
+
+  get usernameField() { return cy.getByDataCy('username-sign-up'); }
+  get emailField() { return cy.getByDataCy('email-sign-up'); }


Mismatch: PageObject uses email-settings but Settings.vue has data-cy="settings-email". Update the selector to settings-email.

mateacademy-ai-mentor · 2026-04-23T14:24:44Z

+
+  get usernameField() { return cy.getByDataCy('username-sign-up'); }
+  get emailField() { return cy.getByDataCy('email-sign-up'); }
+  get passwordField() { return cy.getByDataCy('password-sign-up'); }


Mismatch: PageObject uses password-settings but Settings.vue has data-cy="settings-password". Update the selector to settings-password.

mateacademy-ai-mentor · 2026-04-23T14:24:44Z

  <span v-if="canModify">
-    <router-link class="btn btn-sm btn-outline-secondary" :to="editArticleLink">
+    <router-link data-cy="edit-article-btn" class="btn btn-sm btn-outline-secondary" :to="editArticleLink">
      <i class="ion-edit"></i> <span>&nbsp;Edit Article</span>


CRITICAL: The selector uses username-settings but Settings.vue has data-cy="settings-username". These are reversed! This mismatch will cause tests to fail.

mateacademy-ai-mentor · 2026-04-23T14:24:44Z

-    <router-link class="btn btn-sm btn-outline-secondary" :to="editArticleLink">
+    <router-link data-cy="edit-article-btn" class="btn btn-sm btn-outline-secondary" :to="editArticleLink">
      <i class="ion-edit"></i> <span>&nbsp;Edit Article</span>
    </router-link>


CRITICAL: The selector uses bio-settings but Settings.vue has data-cy="settings-bio". These are reversed! This mismatch will cause tests to fail.

mateacademy-ai-mentor · 2026-04-23T14:24:44Z

+    <router-link data-cy="edit-article-btn" class="btn btn-sm btn-outline-secondary" :to="editArticleLink">
      <i class="ion-edit"></i> <span>&nbsp;Edit Article</span>
    </router-link>
    <span>&nbsp;&nbsp;</span>


CRITICAL: The selector uses email-settings but Settings.vue has data-cy="settings-email". These are reversed! This mismatch will cause tests to fail.

mateacademy-ai-mentor · 2026-04-23T14:24:44Z

    </router-link>
    <span>&nbsp;&nbsp;</span>
-    <button class="btn btn-outline-danger btn-sm" @click="deleteArticle">
+    <button data-cy="delete-article-btn" class="btn btn-outline-danger btn-sm" @click="deleteArticle">


CRITICAL: The selector uses password-settings but Settings.vue has data-cy="settings-password". These are reversed! This mismatch will cause tests to fail.

mateacademy-ai-mentor · 2026-04-23T14:24:44Z

@@ -4,6 +4,7 @@
    <form class="card comment-form" @submit.prevent="onSubmit(slug, comment)">
      <div class="card-block">


Critical mismatch: The PageObject uses username-settings but Settings.vue defines data-cy="settings-username". These are inverted. Change to settings-username.

mateacademy-ai-mentor · 2026-04-23T14:24:44Z

@@ -4,6 +4,7 @@
    <form class="card comment-form" @submit.prevent="onSubmit(slug, comment)">
      <div class="card-block">
        <textarea


Critical mismatch: The PageObject uses bio-settings but Settings.vue defines data-cy="settings-bio". Change to settings-bio.

mateacademy-ai-mentor · 2026-04-23T14:24:44Z

    <form class="card comment-form" @submit.prevent="onSubmit(slug, comment)">
      <div class="card-block">
        <textarea
+          data-cy="comment-field"


Critical mismatch: The PageObject uses email-settings but Settings.vue defines data-cy="settings-email". Change to settings-email.

mateacademy-ai-mentor · 2026-04-23T14:24:48Z

      <div class="card-block">
        <textarea
+          data-cy="comment-field"
          class="form-control"


Critical mismatch: The PageObject uses password-settings but Settings.vue defines data-cy="settings-password". Change to settings-password.

2pasha

go on 🚀

solve

79fd702

mateacademy-ai-mentor suggested changes Apr 23, 2026

View reviewed changes

fix_1

63b5afb

igols requested a review from mateacademy-ai-mentor April 23, 2026 13:04

mateacademy-ai-mentor suggested changes Apr 23, 2026

View reviewed changes

fix_2

f5db68a

igols requested a review from mateacademy-ai-mentor April 23, 2026 14:21

mateacademy-ai-mentor suggested changes Apr 23, 2026

View reviewed changes

mateacademy-ai-mentor reviewed Apr 23, 2026

View reviewed changes

fix_3

8be26c4

igols requested a review from mateacademy-ai-mentor April 23, 2026 15:27

2pasha approved these changes Apr 23, 2026

View reviewed changes


		class SignUpPageObject extends PageObject {
		url = '/#/register';

		@@ -4,6 +4,7 @@
		<form class="card comment-form" @submit.prevent="onSubmit(slug, comment)">
		<div class="card-block">

Uh oh!

Conversation

igols commented Apr 23, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment