diff --git a/frontend/cypress/e2e/complaint-list.cy.ts b/frontend/cypress/e2e/complaint-list.cy.ts new file mode 100644 index 000000000..73439693f --- /dev/null +++ b/frontend/cypress/e2e/complaint-list.cy.ts @@ -0,0 +1,39 @@ +/* +Tests to verify complaint list specification functionality +*/ +describe('Complaint List Functionality', () => { + + const complaintTypes = ['#hwcr-tab', '#ers-tab']; + + beforeEach(function() { + cy.viewport("macbook-16"); + cy.kcLogout().kcLogin(); + }); + + Cypress._.times(complaintTypes.length, ((index) => { + + it('Verifies the complaint tabs, filter and table header are sticky', {scrollBehavior: false}, () => { + cy.visit("/"); + cy.get('.comp-loader-overlay').should('exist'); + cy.get('.comp-loader-overlay').should('not.exist'); + + cy.get(complaintTypes[index]).click({ force: true }); + + // remove the open filter + cy.get('#comp-status-filter').click({ force: true }); + cy.get('#comp-zone-filter').click({ force: true }); + + + //-- check to make sure there are enough rows to scroll + cy.get('.pagination').should('exist'); + + //scroll to the bottom of the page + cy.scrollTo('bottom'); + + cy.get('.fixed-nav-header').isInViewport(); + cy.get('.fixed-filter-header').isInViewport(); + cy.get('.fixed-table-header').isInViewport(); + + }); + })); + }); \ No newline at end of file diff --git a/frontend/cypress/support/commands.ts b/frontend/cypress/support/commands.ts index efcbf4e0b..398ee1433 100644 --- a/frontend/cypress/support/commands.ts +++ b/frontend/cypress/support/commands.ts @@ -218,6 +218,18 @@ Cypress.Commands.add("navigateToAllegationEditScreen", (complaintIdentifier: str cy.get("#details-screen-edit-button").click({ force: true }); }); +Cypress.Commands.add('isInViewport', { prevSubject: true },(subject) => { + const bottom = Cypress.$(cy.state('window')).height(); + const rect = subject[0].getBoundingClientRect(); + + console.log(rect.top); + + expect(rect.top).not.to.be.greaterThan(bottom, `Expected element not to be below the visible scrolled area`); + expect(rect.top).to.be.greaterThan(0, `Expected element not to be above the visible scrolled area`); + + return subject; +}); + function hasSameTopLevelDomain(url1: string, url2: string): boolean { const tld1 = extractTopLevelDomain(url1); const tld2 = extractTopLevelDomain(url2); @@ -233,4 +245,6 @@ function extractTopLevelDomain(url: string): string { return tld; } + + module.exports = {}; diff --git a/frontend/cypress/support/index.ts b/frontend/cypress/support/index.ts index 4a97bfa6b..2b1db1a43 100644 --- a/frontend/cypress/support/index.ts +++ b/frontend/cypress/support/index.ts @@ -9,5 +9,6 @@ declare namespace Cypress { navigateToHWLCEditScreen(complaintIdentifier: string) : Chainable; navigateToAllegationDetailsScreen(complaintIdentifier: string) : Chainable; navigateToAllegationEditScreen(complaintIdentifier: string) : Chainable; + isInViewport() : Chainable; } } \ No newline at end of file diff --git a/frontend/src/app/components/common/comp-input.tsx b/frontend/src/app/components/common/comp-input.tsx index 8727bf106..23df74119 100644 --- a/frontend/src/app/components/common/comp-input.tsx +++ b/frontend/src/app/components/common/comp-input.tsx @@ -2,6 +2,7 @@ import { FC } from "react"; type Props = { id: string; + divId: string; type: "input" | "number" | "text"; label?: string; inputClass?: string; @@ -25,6 +26,7 @@ const noop = () => {}; export const CompInput: FC = ({ id, + divId, type, inputClass, formClass, @@ -62,6 +64,7 @@ export const CompInput: FC = ({ const props = { id: id, + divId: divId, value: value, // defaultValue: defaultValue, className: inputClasses.join(" "), @@ -80,7 +83,7 @@ export const CompInput: FC = ({ } return ( -
+
{label && (