Add TCCP Cypress E2E tests

test/cypress/integration/consumer-tools/credit-cards/explore-cards-helpers.cy.js

@@ -0,0 +1,63 @@
+export class ExploreCreditCards {
+  openLandingPage() {
+    cy.visit('/consumer-tools/credit-cards/explore-cards/');
+  }
+
+  openResultsPage(filterParams) {
+    const url =
+      '/consumer-tools/credit-cards/explore-cards/cards?' +
+      new URLSearchParams(filterParams).toString();
+    cy.visit(url);
+  }
+
+  selectCreditTier(tier) {
+    cy.get('select[name=credit_tier]').select(tier);
+  }
+
+  selectLocation(location) {
+    cy.get('select[name=location]').select(location);
+  }
+
+  selectSituation(situation) {
+    cy.get('input[name=situations]').check(situation, { force: true });
+  }
+
+  clickSubmitButton() {
+    cy.get('button').contains('See cards for your situation').click();
+  }
+
+  openFilterExpandable() {
+    cy.get('.o-filterable-list-controls button.o-expandable_header').click();
+  }
+
+  clickShowMoreButton() {
+    cy.get('button')
+      .contains('Show more results with higher interest rates')
+      .click();
+  }
+
+  getNumberResults() {
+    return new Promise((resolve) => {
+      return cy
+        .get('.htmx-container')
+        .not('.htmx-request')
+        .get('.o-filterable-list-results .m-notification')
+        .then((el) => resolve(Number(el.text().replace(/[^0-9]/g, ''))));
+    });
+  }
+
+  getNumberVisibleResults() {
+    return new Promise((resolve) => {
+      return cy
+        .get('.htmx-container')
+        .not('.htmx-request')
+        .get('.o-filterable-list-results table tr')
+        .filter(':visible')
+        .then((el) => resolve(el.length));
+    });
+  }
+
+  selectCheckboxFilter(name, value) {
+    cy.get(`input[name=${name}]`).check(value, { force: true });
+  }
+}

test/cypress/integration/consumer-tools/credit-cards/explore-cards.cy.js

@@ -0,0 +1,48 @@
+import { ExploreCreditCards } from './explore-cards-helpers.cy.js';
+
+const exploreCards = new ExploreCreditCards();
+
+describe('Explore credit cards landing page', () => {
+  it('should show results tailored to the selected situation', () => {
+    exploreCards.openLandingPage();
+
+    exploreCards.selectLocation('FL');
+    exploreCards.selectSituation('Earn rewards');
+    exploreCards.clickSubmitButton();
+
+    exploreCards.openFilterExpandable();
+
+    cy.get('#id_rewards input').should('be.checked');
+  });
+});
+
+describe('Explore credit cards results page', () => {
+  it('should update results when user changes filters', () => {
+    exploreCards.openResultsPage();
+
+    exploreCards.getNumberResults().then((oldNumResults) => {
+      exploreCards.selectCheckboxFilter('rewards', 'Cashback rewards');
+      exploreCards.getNumberResults().then((newNumResults) => {
+        expect(newNumResults).to.be.lt(oldNumResults);
+      });
+    });
+  });
+  it('should show additional results when "Show more" button is clicked', () => {
+    exploreCards.openResultsPage();
+
+    exploreCards.getNumberVisibleResults().then((oldNumResults) => {
+      exploreCards.clickShowMoreButton();
+      exploreCards.getNumberVisibleResults().then((newNumResults) => {
+        expect(oldNumResults).to.be.lt(newNumResults);
+      });
+    });
+  });
+  it('should link to card detail pages', () => {
+    exploreCards.openResultsPage();
+
+    cy.get('td[data-label="Credit card"] a').first().click();
+
+    cy.get('h1').contains('Customize for your situation').should('not.exist');
+    cy.get('h2').contains('Application requirements').should('exist');
+  });
+});