Add bounce tests (Cypress)

cmd/handlers.go

@@ -130,6 +130,7 @@ func registerHTTPHandlers(e *echo.Echo, app *App) {
 	g.GET("/subscribers", handleIndexPage)
 	g.GET("/subscribers/lists/:listID", handleIndexPage)
 	g.GET("/subscribers/import", handleIndexPage)
+	g.GET("/subscribers/bounces", handleIndexPage)
 	g.GET("/campaigns", handleIndexPage)
 	g.GET("/campaigns/new", handleIndexPage)
 	g.GET("/campaigns/media", handleIndexPage)

frontend/cypress/integration/bounces.js

@@ -0,0 +1,75 @@
+describe('Bounces', () => {
+  let subs = [];
+
+  it('Enable bounces', () => {
+    cy.resetDB();
+
+    cy.loginAndVisit('/settings');
+    cy.get('.b-tabs nav a').eq(5).click();
+    cy.get('[data-cy=btn-enable-bounce] .switch').click();
+    cy.get('[data-cy=btn-enable-bounce-webhook] .switch').click();
+    cy.get('[data-cy=btn-bounce-count] .plus').click();
+
+    cy.get('[data-cy=btn-save]').click();
+    cy.wait(1000);
+  });
+
+
+  it('Post bounces', () => {
+    // Get campaign.
+    let camp = {};
+    cy.request('/api/campaigns').then((resp) => {
+      camp = resp.body.data.results[0];
+    })
+    cy.then(() => {
+      console.log("campaign is ", camp.uuid);
+    })
+
+
+    // Get subscribers.
+    cy.request('/api/subscribers').then((resp) => {
+      subs = resp.body.data.results;
+      console.log(subs)
+    });
+
+    cy.then(() => {
+      console.log(`got ${subs.length} subscribers`);
+
+      // Post bounces. Blocklist the 1st sub.
+      cy.request('POST', '/webhooks/bounce', { source: "api", type: "hard", email: subs[0].email });
+      cy.request('POST', '/webhooks/bounce', { source: "api", type: "hard", campaign_uuid: camp.uuid, email: subs[0].email });
+      cy.request('POST', '/webhooks/bounce', { source: "api", type: "hard", campaign_uuid: camp.uuid, subscriber_uuid: subs[0].uuid });
+
+      for (let i = 0; i < 2; i++) {
+        cy.request('POST', '/webhooks/bounce', { source: "api", type: "soft", campaign_uuid: camp.uuid, subscriber_uuid: subs[1].uuid });
+      }
+    });
+
+    cy.wait(250);
+  });
+
+  it('Opens bounces page', () => {
+    cy.loginAndVisit('/subscribers/bounces');
+    cy.wait(250);
+    cy.get('tbody tr').its('length').should('eq', 5);
+  });
+
+  it('Delete bounce', () => {
+    cy.get('tbody tr:last-child [data-cy="btn-delete"]').click();
+    cy.get('.modal button.is-primary').click();
+    cy.wait(250);
+    cy.get('tbody tr').its('length').should('eq', 4);
+  });
+
+  it('Check subscriber statuses', () => {
+    cy.loginAndVisit(`/subscribers/${subs[0].id}`);
+    cy.wait(250);
+    cy.get('.modal-card-head .tag').should('have.class', 'blocklisted');
+    cy.get('.modal-card-foot button[type="button"]').click();
+
+    cy.loginAndVisit(`/subscribers/${subs[1].id}`);
+    cy.wait(250);
+    cy.get('.modal-card-head .tag').should('have.class', 'enabled');
+  });
+
+});

frontend/src/views/Bounces.vue

@@ -36,11 +36,13 @@
         </router-link>
       </b-table-column>
 
-      <b-table-column v-slot="props" field="campaign_name" :label="$tc('globals.terms.campaign')"
+      <b-table-column v-slot="props" field="campaign" :label="$tc('globals.terms.campaign')"
         sortable>
-        <router-link :to="{ name: 'bounces', query: { campaign_id: props.row.campaign.id }}">
+        <router-link v-if="props.row.campaign"
+          :to="{ name: 'bounces', query: { campaign_id: props.row.campaign.id }}">
           {{ props.row.campaign.name }}
         </router-link>
+        <span v-else>-</span>
       </b-table-column>
 
       <b-table-column v-slot="props" field="source" :label="$t('bounces.source')" sortable>

frontend/src/views/Settings.vue

@@ -449,13 +449,13 @@
           <b-tab-item :label="$t('settings.bounces.name')">
             <div class="columns mb-6">
               <div class="column">
-                <b-field :label="$t('settings.bounces.enable')">
+                <b-field :label="$t('settings.bounces.enable')" data-cy="btn-enable-bounce">
                   <b-switch v-model="form['bounce.enabled']" name="bounce.enabled" />
                 </b-field>
               </div>
               <div class="column" :class="{'disabled': !form['bounce.enabled']}">
                 <b-field :label="$t('settings.bounces.count')" label-position="on-border"
-                  :message="$t('settings.bounces.countHelp')">
+                  :message="$t('settings.bounces.countHelp')" data-cy="btn-bounce-count">
                   <b-numberinput v-model="form['bounce.count']"
                     name="bounce.count" type="is-light"
                     controls-position="compact" placeholder="3" min="1" max="1000" />
@@ -472,7 +472,8 @@
             </div><!-- columns -->
 
             <div class="mb-6">
-              <b-field :label="$t('settings.bounces.enableWebhooks')">
+              <b-field :label="$t('settings.bounces.enableWebhooks')"
+                data-cy="btn-enable-bounce-webhook">
                 <b-switch v-model="form['bounce.webhooks_enabled']"
                   :disabled="!form['bounce.enabled']"
                   name="webhooks_enabled" :native-value="true"

frontend/vue.config.js

@@ -26,7 +26,7 @@ module.exports = {
   devServer: {
     port: process.env.LISTMONK_FRONTEND_PORT || 8080,
     proxy: {
-      '^/api': {
+      '^/(api|webhooks)': {
         target: process.env.LISTMONK_API_URL || 'http://127.0.0.1:9000'
       }
     }