Merge pull request #1085 from GSA/982-scroll-lock-when-modal-opens

982 scroll lock when modal opens

benefit-finder/cypress/e2e/storybook/scroll-lock-when-modal-opens.cy.js

@@ -0,0 +1,87 @@
+/// <reference types="cypress" />
+
+import * as utils from '../../support/utils.js'
+import * as EN_LOCALE_DATA from '../../../src/shared/locales/en/en.json'
+import * as EN_DOLO_MOCK_DATA from '../../../src/shared/api/mock-data/current.json'
+import { pageObjects } from '../../support/pageObjects.js'
+
+const dob = utils.getDateByOffset(-(18 * 365.2425 - 1))
+const dod = utils.getDateByOffset(-30)
+
+const relation =
+  EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0].section
+    .fieldsets[1].fieldset.inputs[0].inputCriteria.values[1].value
+const status =
+  EN_DOLO_MOCK_DATA.data.lifeEventForm.sectionsEligibilityCriteria[0].section
+    .fieldsets[2].fieldset.inputs[0].inputCriteria.values[1].value
+
+describe('Validate scrolling when modal is open', () => {
+  it('Should disable body from scrolling when model is open', () => {
+    cy.visit(utils.storybookUri)
+    pageObjects.button().contains(EN_LOCALE_DATA.intro.button).click()
+    utils.dataInputs({ dob, relation, status })
+    pageObjects.button().contains(EN_LOCALE_DATA.buttonGroup[1].value).click()
+    utils.dataInputs({ dod })
+
+    // open modal
+    pageObjects.button().contains(EN_LOCALE_DATA.buttonGroup[1].value).click()
+
+    // close when clicked off modal
+    cy.get('.ReactModal__Overlay').click('topRight')
+
+    // confirm type works for body
+    cy.get('body').type(
+      '{upArrow}{upArrow}{downArrow}{downArrow}{leftArrow}{rightArrow}{leftArrow}{rightArrow}ba'
+    ) // these types run successfully but do not trigger movement in the window
+
+    // open modal
+    pageObjects.button().contains(EN_LOCALE_DATA.buttonGroup[1].value).click()
+
+    // confirm type works for modal
+    cy.get('#benefit-finder-modal').type(
+      '{upArrow}{upArrow}{downArrow}{downArrow}{leftArrow}{rightArrow}{leftArrow}{rightArrow}ba'
+    )
+
+    let scrollYPosition
+
+    cy.window().then($w => {
+      scrollYPosition = $w.scrollY
+    })
+
+    cy.window().then($w => {
+      expect($w.scrollY).to.be.at.most(scrollYPosition)
+    })
+
+    cy.get('#benefit-finder-modal').type('{downArrow}') // modal has an tabIndex
+
+    // confirm that no changes are made
+    cy.window().then($w => {
+      expect($w.scrollY).to.be.at.most(scrollYPosition)
+    })
+
+    cy.get('#benefit-finder-modal').type('{upArrow}')
+
+    // confirm that no changes are made
+    cy.window().then($w => {
+      expect($w.scrollY).to.be.at.most(scrollYPosition)
+    })
+
+    // close modal to confirm that type on modal works
+    cy.get('#benefit-finder-modal').type('{esc}')
+
+    // scroll to bottom
+    cy.scrollTo('bottom')
+
+    // confirm we are at bottom
+    cy.window().then($w => {
+      expect($w.scrollY).to.be.greaterThan(scrollYPosition)
+    })
+
+    pageObjects.button().contains(EN_LOCALE_DATA.buttonGroup[1].value).click()
+
+    // confirm we are back at the top
+    cy.window().then($w => {
+      expect($w.scrollY).to.be.at.most(scrollYPosition)
+    })
+  })
+})

benefit-finder/src/shared/components/Modal/__tests__/indexModal.cy.jsx

@@ -0,0 +1,28 @@
+import { useState } from 'react'
+import { composeStories } from '@storybook/react'
+import * as stories from '../index.stories'
+const { Primary } = composeStories(stories)
+
+const ModalWrapper = () => {
+  const [modalOpen, setModalOpen] = useState(false)
+  return (
+    <div style={{ height: '2000px' }}>
+      <Primary setModalOpen={setModalOpen} modalOpen={modalOpen} />
+    </div>
+  )
+}
+
+describe('Modal Component Tests', () => {
+  it('should open modal when trigger is clicked', () => {
+    cy.mount(<ModalWrapper />)
+    cy.viewport(550, 750)
+    cy.get('[tabindex=0]').click()
+    cy.get('#benefit-finder-modal').type(
+      '{upArrow}{upArrow}{downArrow}{downArrow}{leftArrow}{rightArrow}{leftArrow}{rightArrow}ba'
+    )
+    cy.get('body').type('{esc}')
+    cy.get('body').type('{pageDown}')
+    cy.get('[tabindex=0]').click()
+    cy.get('body').type('{pageDown}')
+  })
+})

benefit-finder/src/shared/components/Modal/index.stories.jsx

@@ -1,15 +1,29 @@
+import { useState } from 'react'
 import Modal from './index.jsx'
 
+let modalOpen = false
+const setModalOpen = state => (modalOpen = state)
+
+const ModalWrapper = props => {
+  const [modalOpen, setModalOpen] = useState(false)
+
+  return <Modal {...props} setModalOpen={setModalOpen} modalOpen={modalOpen} />
+}
+
 export default {
-  component: Modal,
+  component: ModalWrapper,
   tags: ['autodocs'],
   args: {
     id: 'nav-modal',
     modalHeading: 'Select an option:',
     triggerLabel: 'Continue',
     navItemOneLabel: 'Verify Information',
     navItemTwoLabel: 'View Results',
+    navItemOneFunction: () => setModalOpen(!modalOpen),
+    navItemTwoFunction: () => setModalOpen(!modalOpen),
+    handleCheckRequriedFields: () => true,
+    completed: true,
   },
 }
 
-export const Primary = {}
+export const Primary = args => <ModalWrapper {...args} />