fix(tests): e2e tests - [CU-11111]

app/components/Settings/InterestEntry.vue

@@ -17,7 +17,7 @@ const translatedInterest = (interest: Interest) => {
 </script>
 
 <template>
-  <div class="p-4">
+  <div class="p-4" data-cy="interest-entry">
     <label class="group flex cursor-pointer flex-row items-center justify-between">
       <p class="text-md select-none">
         {{ translatedInterest(props.interest) }}
@@ -33,6 +33,7 @@ const translatedInterest = (interest: Interest) => {
         <UiCheckbox
           :model-value="props.isActive"
           :label="$t(`profile.account-setup.interests.${props.interest.code}`)"
+          data-cy="interest-checkbox"
           @update:model-value="$emit('toggle-interest')"
         />
       </div>

app/components/SideBar/Left/index.vue

@@ -56,19 +56,18 @@ const handleLogout = async () => {
         :tab="{ label: 'settings', icon: 'settings', route: '/settings' }"
         data-cy="sidebar-settings-btn"
       ></SideBarLeftTab>
-      <div class="w-full xl:pe-8">
-        <UiButton
-          variant="default"
-          data-cy="sidebar-post-btn"
-          class="my-2 h-12.5 w-12.5 shrink-0 transition-[width] xl:w-full"
-          @click="showPostDialog = true"
-        >
-          <p class="flex xl:hidden">
-            <Icon name="mingcute:quill-pen-ai-line" size="1.6rem" class="shrink-0" />
-          </p>
-          <p class="mx-6 hidden text-xl font-extrabold xl:block">{{ $t('ui.post') }}</p>
-        </UiButton>
-      </div>
+      <UiButton
+        class="mx-2 xl:w-auto"
+        variant="default"
+        size="lg"
+        data-cy="open-post-tweet-dialog-btn"
+        @click="showPostDialog = true"
+      >
+        <div class="relative flex h-8 w-8 items-center justify-center">
+          <Icon name="mingcute:quill-pen-ai-line" size="28" />
+        </div>
+        <p class="mx-6 hidden text-xl font-extrabold xl:block">{{ $t('ui.post') }}</p>
+      </UiButton>
     </div>
     <div class="flex w-full flex-grow pb-2">
       <UiAlertDialog>
@@ -91,7 +90,7 @@ const handleLogout = async () => {
                     {{ '@' + (userStore.user?.username || 'username') }}
                   </p>
                 </div>
-                <div class="ms-auto flex">
+                <div class="ms-auto flex" data-cy="user-actions-button">
                   <Icon name="lucide:more-horizontal" class="pe-2" />
                 </div>
               </div>

app/components/tweet/TweetView.vue

@@ -116,7 +116,10 @@ function handleAiSummary() {
       </div>
     </div>
     <div class="border-b-border border-b-1">
-      <p class="pt-2 text-lg leading-relaxed break-words whitespace-pre-wrap">
+      <p
+        class="pt-2 text-lg leading-relaxed break-words whitespace-pre-wrap"
+        data-cy="tweet-view-content"
+      >
         <ContentEntitiesRenderer :content="tweet.content" :entities="tweet.entities" />
       </p>
       <div v-if="showMedia">

app/pages/settings/interests.vue

@@ -54,6 +54,7 @@ const {
         variant="default"
         type="submit"
         :disabled="isLoading || !selectedOne || isSubmitting"
+        data-cy="save-interests-button"
       >
         {{ $t('ui.save') }}
       </UiButton>

cypress.config.ts

@@ -4,7 +4,7 @@ export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:3000',
     env: {
-      API_URL: 'http://localhost:3001', // backend API
+      API_URL: 'https://stress.api.raven.cmp27.space',
     },
   },
   viewportWidth: 1280,

cypress/e2e/auth/login.cy.ts

@@ -101,8 +101,12 @@ describe('Login Flow', () => {
         cy.visitAndWaitForHydration('/home/for-you');
         // Verify url redirection to home page
         cy.url({ timeout: 10000 }).should('eq', `${Cypress.config().baseUrl}/home/for-you`);
+        // Open Actions Menu
+        cy.get('div[data-cy="user-actions-button"]').click();
         // Click logout button
-        cy.get('button[data-cy="logout-button"]').click();
+        cy.get('[data-cy="logout-button"]').click();
+        // Confirm logout in dialog
+        cy.get('button[data-cy="confirm-logout-button"]').click();
         // Verify redirection to login page
         cy.url({ timeout: 10000 }).should('eq', `${Cypress.config().baseUrl}/`);
       });

cypress/e2e/profile/profile-data.cy.ts

@@ -19,7 +19,6 @@ describe('Profile Page Actions', () => {
         'contain.text',
         this.masterUser.displayName,
       );
-      // Additional checks for tweets, likes, replies, media can be added here
     });
 
     it('should show correct following/followers count', function () {

cypress/e2e/settings/privacy.cy.ts

@@ -15,7 +15,7 @@ describe('Privacy Settings Actions', function () {
   describe('Privacy and Safety settings', function () {
     describe('Mutes and Blocks settings', function () {
       beforeEach(() => {
-        cy.get('[data-cy="mutes-blocks-settings-btn"]').should('be.visible').click();
+        cy.get('[data-cy="mutes-and-blocks-settings-btn"]').should('be.visible').click();
         cy.url().should('include', '/settings/mute-and-block'); // TODO: should be /settings/privacy/mute-and-block
       });
 
@@ -107,5 +107,53 @@ describe('Privacy Settings Actions', function () {
         });
       });
     });
+
+    describe('Safety settings', function () {
+      beforeEach(() => {
+        cy.get('[data-cy="content-you-see-settings-btn"]').should('be.visible').click();
+        cy.url().should('include', '/settings/content-you-see');
+        // data-cy="interests-settings-btn"
+        cy.get('[data-cy="interests-settings-btn"]').should('be.visible').click();
+        cy.url().should('include', '/settings/interests');
+      });
+      it('should show interest entries', function () {
+        cy.get('[data-cy="interest-entry"]').should('have.length.greaterThan', 0);
+      });
+
+      it('should toggle an interest entry', function () {
+        cy.get('[data-cy="interest-entry"]')
+          .first()
+          .within(() => {
+            // data-state="checked"
+            cy.get('[data-cy="interest-checkbox"]').then(($checkbox) => {
+              const isChecked = $checkbox.attr('data-state') === 'checked';
+              cy.get('[data-cy="interest-checkbox"]').click();
+              cy.get('[data-cy="interest-checkbox"]').should(($cb) => {
+                const newIsChecked = $cb.attr('data-state') === 'checked';
+                expect(newIsChecked).to.eq(!isChecked);
+              });
+            });
+          });
+      });
+      it('should toggle multiple interest entries and save', function () {
+        cy.get('[data-cy="interest-entry"]').each(($el, index) => {
+          if (index < 3) {
+            cy.wrap($el).within(() => {
+              cy.get('[data-cy="interest-checkbox"]').then(($checkbox) => {
+                const isChecked = $checkbox.attr('data-state') === 'checked';
+                cy.get('[data-cy="interest-checkbox"]').click();
+                cy.get('[data-cy="interest-checkbox"]').should(($cb) => {
+                  const newIsChecked = $cb.attr('data-state') === 'checked';
+                  expect(newIsChecked).to.eq(!isChecked);
+                });
+              });
+            });
+          }
+        });
+        // Click save button
+        cy.get('button[data-cy="save-interests-button"]').should('not.be.disabled').click();
+        cy.get('button[data-cy="save-interests-button"]').should('be.disabled');
+      });
+    });
   });
 });

cypress/e2e/tweets/posting.cy.ts

@@ -1,5 +1,5 @@
-describe('Tweeting Flow', { testIsolation: false }, function () {
-  before(function () {
+describe('Tweeting Flow', function () {
+  beforeEach(function () {
     cy.clearAllCookies();
     cy.clearAllLocalStorage();
     cy.clearAllSessionStorage();
@@ -20,6 +20,23 @@ describe('Tweeting Flow', { testIsolation: false }, function () {
       cy.get('[data-cy="tweet-content"]').first().should('contain.text', tweetContent);
       cy.contains('Tweet posted successfully').should('be.visible');
     });
+
+    it('should open tweet composer from sidebar button', function () {
+      cy.get('button[data-cy="open-post-tweet-dialog-btn"]').click();
+      cy.get('div[data-cy="dialog-content-body"]')
+        .should('be.visible')
+        .within(() => {
+          cy.get('textarea[data-cy="tweet-composer-textarea"]').should('exist');
+          const tweetContent = 'This is a test tweet from sidebar button!';
+          cy.get('textarea[data-cy="tweet-composer-textarea"]').type(tweetContent);
+          cy.get('button[data-cy="tweet-composer-post-button"]').should('not.be.disabled').click();
+        });
+      cy.get('[data-cy="tweet-content"]')
+        .first()
+        .should('contain.text', 'This is a test tweet from sidebar button!');
+      cy.contains('Tweet posted successfully').should('be.visible');
+    });
+
     it('should post a tweet with hashtags and mentions', function () {
       const tweetContent = 'Hello @gelgel! Check out #ThisTweet';
       cy.get('textarea[data-cy="tweet-composer-textarea"]').clear().type(tweetContent);