Merge pull request #4963 from nasa-gibs/release

Release into Main

e2e/features/animation/animation-test.spec.js

@@ -2,6 +2,7 @@
 const { test, expect } = require('@playwright/test')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { skipTour, activeAnimationWidget, animationGeostationary } = require('../../test-utils/global-variables/querystrings')
+const { closeModal } = require('../../test-utils/hooks/wvHooks')
 
 let page
 let selectors
@@ -18,19 +19,18 @@ test.afterAll(async () => {
 })
 
 test('Clicking the animation widget button opens the widget', async () => {
-  const { dragger, animationWidget, animationButton, modalCloseButton } = selectors
+  const { dragger, animationWidget, animationButton } = selectors
   await page.goto(skipTour)
-  await modalCloseButton.click()
+  await closeModal(page)
   await expect(dragger).toBeVisible()
   await expect(animationWidget).not.toBeVisible()
   await animationButton.click()
   await expect(animationWidget).toBeVisible()
 })
 
 test('Opening custom interval widget', async () => {
-  const { modalCloseButton } = selectors
   await page.goto(activeAnimationWidget)
-  await modalCloseButton.click()
+  await closeModal(page)
   await page.locator('.wv-animation-widget-header #timeline-interval-btn-container #current-interval').hover()
   const yearInterval = page.locator('.wv-animation-widget-header .timeline-interval .interval-years')
   await expect(yearInterval).toBeVisible()
@@ -45,9 +45,9 @@ test('Opening custom interval widget', async () => {
 })
 
 test('Changing animation time interval', async () => {
-  const { animationButton, modalCloseButton } = selectors
+  const { animationButton } = selectors
   await page.goto(skipTour)
-  await modalCloseButton.click()
+  await closeModal(page)
   await animationButton.click()
   await page.locator('.wv-animation-widget-header #timeline-interval-btn-container #current-interval').hover()
   const yearInterval = page.locator('.wv-animation-widget-header .timeline-interval .interval-years')
@@ -61,9 +61,9 @@ test('Changing animation time interval', async () => {
 })
 
 test('Disable playback when max frames exceeded', async () => {
-  const { modalCloseButton, playButton, yearStartInput } = selectors
+  const { playButton, yearStartInput } = selectors
   await page.goto(animationGeostationary)
-  await modalCloseButton.click()
+  await closeModal(page)
   const animateYearDown = page.locator('.wv-date-range-selector > div > div > div:nth-child(3) > svg > .downarrow').first()
   const animateYearUp = page.locator('.wv-date-range-selector > div > div > div > svg > .uparrow').first()
   await animateYearDown.click()

e2e/features/animation/gif-test.spec.js

@@ -7,6 +7,7 @@ const {
   animationTooManyFramesGif,
   animationProjectionRotated
 } = require('../../test-utils/global-variables/querystrings')
+const { closeModal } = require('../../test-utils/hooks/wvHooks')
 
 let page
 let selectors
@@ -23,9 +24,9 @@ test.afterAll(async () => {
 })
 
 test('Clicking the animation widget button opens the widget', async () => {
-  const { createGifIcon, arcticRotationResetButton, modalCloseButton, rotationDialogOkButton } = selectors
+  const { createGifIcon, arcticRotationResetButton, rotationDialogOkButton } = selectors
   await page.goto(animationProjectionRotated)
-  await modalCloseButton.click()
+  await closeModal(page)
   await createGifIcon.click()
   await expect(arcticRotationResetButton).toHaveText('-18')
   await rotationDialogOkButton.click()
@@ -39,11 +40,10 @@ test('GIF selection preview is Accurate and selections that are too high disable
     gifPreviewEndDate,
     gifPreviewFrameRateValue,
     gifPreviewEndResolutionSelector,
-    gifDownloadButton,
-    modalCloseButton
+    gifDownloadButton
   } = selectors
   await page.goto(activeAnimationWidget)
-  await modalCloseButton.click()
+  await closeModal(page)
   await createGifIcon.click()
   await expect(gifPreviewStartDate).toHaveText('2018 MAR 28')
   await expect(gifPreviewEndDate).toHaveText('2018 APR 04')
@@ -60,17 +60,15 @@ test('GIF selection preview is Accurate and selections that are too high disable
 })
 
 test('GIF download is disabled when too many frames would be requested with standard interval', async () => {
-  const { modalCloseButton } = selectors
   await page.goto(animationTooManyFramesGif)
-  await modalCloseButton.click()
+  await closeModal(page)
   const createGif = page.locator('#create-gif-button')
   await expect(createGif).toHaveClass(/disabled/)
 })
 
 test('GIF download is disabled when too many frames would be requested with custom interval', async () => {
-  const { modalCloseButton } = selectors
   await page.goto(animationTooManyFramesGifCustomInterval)
-  await modalCloseButton.click()
+  await closeModal(page)
   const createGif = page.locator('#create-gif-button')
   await expect(createGif).toHaveClass(/disabled/)
 })

e2e/features/animation/mobile-animation-test.spec.js

@@ -1,6 +1,7 @@
 const { test, expect } = require('@playwright/test')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { knownDate } = require('../../test-utils/global-variables/querystrings')
+const { closeModal } = require('../../test-utils/hooks/wvHooks')
 
 let page
 let selectors
@@ -20,9 +21,9 @@ test.afterAll(async () => {
 })
 
 test('Clicking the animation widget button opens the widget', async () => {
-  const { mobileAnimateButton, modalCloseButton } = selectors
+  const { mobileAnimateButton } = selectors
   await page.goto(knownDate)
-  await modalCloseButton.click()
+  await closeModal(page)
   await mobileAnimateButton.click()
   const customIntervalInput = page.locator('.custom-interval-delta-input')
   await expect(customIntervalInput).toHaveValue('1')

e2e/features/compare/compare-mobile-test.spec.js

@@ -1,6 +1,7 @@
 const { test, expect } = require('@playwright/test')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { swipeAndAIsActive, spyAndBIsActive, opacityAndBIsActive } = require('../../test-utils/global-variables/querystrings')
+const { closeModal } = require('../../test-utils/hooks/wvHooks')
 
 let page
 let selectors
@@ -20,9 +21,8 @@ test.afterAll(async () => {
 })
 
 test('Mobile comparison A|B toggle buttons are visible and only A is selected by default', async () => {
-  const { modalCloseButton } = selectors
   await page.goto(swipeAndAIsActive)
-  await modalCloseButton.click()
+  await closeModal(page)
   const aMobileCompareButton = page.locator('.comparison-mobile-select-toggle > div:nth-child(1)')
   const bMobileCompareButton = page.locator('.comparison-mobile-select-toggle > div:nth-child(2)')
   await expect(aMobileCompareButton).toHaveClass(/compare-btn-selected/)

e2e/features/compare/compare-test.spec.js

@@ -2,6 +2,7 @@
 const { test, expect } = require('@playwright/test')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { swipeAndAIsActive, spyAndBIsActive } = require('../../test-utils/global-variables/querystrings')
+const { closeModal } = require('../../test-utils/hooks/wvHooks')
 
 let page
 let selectors
@@ -18,9 +19,9 @@ test.afterAll(async () => {
 })
 
 test('Animation is disabled when compare mode active', async () => {
-  const { animationButtonCase, animationWidget, modalCloseButton } = selectors
+  const { animationButtonCase, animationWidget } = selectors
   await page.goto(swipeAndAIsActive)
-  await modalCloseButton.click()
+  await closeModal(page)
   await expect(animationButtonCase).toHaveClass(/wv-disabled-button/)
   const disableMessage = 'Animation feature is deactivated when Compare feature is active'
   await expect(animationButtonCase).toHaveAttribute('aria-label', disableMessage)
@@ -83,9 +84,9 @@ test('Removing layer removes correct layer from correct layer group', async () =
 })
 
 test('Collapse layer list with B state and test label shows correct number of layers', async () => {
-  const { toggleButton, collapsedToggleButton, modalCloseButton } = selectors
+  const { toggleButton, collapsedToggleButton } = selectors
   await page.goto(spyAndBIsActive)
-  await modalCloseButton.click()
+  await closeModal(page)
   await expect(collapsedToggleButton).not.toBeVisible()
   await toggleButton.click()
   await expect(collapsedToggleButton).toBeVisible()

e2e/features/compare/layer-dialog-test.spec.js

@@ -2,6 +2,7 @@
 const { test, expect } = require('@playwright/test')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { swipeAOD } = require('../../test-utils/global-variables/querystrings')
+const { closeModal } = require('../../test-utils/hooks/wvHooks')
 
 let page
 let selectors
@@ -28,9 +29,8 @@ test.afterAll(async () => {
 })
 
 test('Layer option features work in A|B mode', async () => {
-  const { modalCloseButton } = selectors
   await page.goto(swipeAOD)
-  await modalCloseButton.click()
+  await closeModal(page)
   await expect(AodOptionsPanelBody).not.toBeVisible()
   await aerosolLayer.hover()
   await page.locator('#active-MODIS_Terra_Aerosol .wv-layers-options').click()

e2e/features/compare/layer-sidebar-test.spec.js

@@ -2,6 +2,7 @@
 const { test, expect } = require('@playwright/test')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { swipeAndAIsActive } = require('../../test-utils/global-variables/querystrings')
+const { closeModal } = require('../../test-utils/hooks/wvHooks')
 
 let page
 let selectors
@@ -25,11 +26,10 @@ test('Add AOD Layer to Layer Group A', async () => {
   const {
     addLayers,
     aerosolOpticalDepth,
-    layersModalCloseButton,
-    modalCloseButton
+    layersModalCloseButton
   } = selectors
   await page.goto(swipeAndAIsActive)
-  await modalCloseButton.click()
+  await closeModal(page)
   await addLayers.click()
   await aerosolOpticalDepth.click()
   await aodCheckBox.click()

e2e/features/compare/permalinks-test.spec.js

@@ -6,6 +6,7 @@ const {
   opacityAndBIsActive,
   spyAndBIsActive
 } = require('../../test-utils/global-variables/querystrings')
+const { closeModal } = require('../../test-utils/hooks/wvHooks')
 
 let page
 let selectors
@@ -22,36 +23,35 @@ test.afterAll(async () => {
 })
 
 test('Swipe mode and A|B state A are active and date is correct', async () => {
-  const { modalCloseButton, swipeButton, aTab } = selectors
+  const { swipeButton, aTab } = selectors
   await page.goto(swipeAndAIsActive)
-  await modalCloseButton.click()
+  await closeModal(page)
   await expect(swipeButton).not.toBeEnabled()
   await expect(aTab).toHaveClass(/active/)
   await expect(aTab).toContainText('A: 2018 AUG 17')
 })
 
 test('Opacity mode and A|B state B are active and date is correct', async () => {
-  const { modalCloseButton, opacityButton, bTab } = selectors
+  const { opacityButton, bTab } = selectors
   await page.goto(opacityAndBIsActive)
-  await modalCloseButton.click()
+  await closeModal(page)
   await expect(opacityButton).not.toBeEnabled()
   await expect(bTab).toHaveClass(/active/)
   await expect(bTab).toContainText('B: 2018 AUG 16')
 })
 
 test('Spy mode is active in B state', async () => {
-  const { modalCloseButton, spyButton, bTab } = selectors
+  const { spyButton, bTab } = selectors
   await page.goto(spyAndBIsActive)
-  await modalCloseButton.click()
+  await closeModal(page)
   await expect(spyButton).not.toBeEnabled()
   await expect(bTab).toHaveClass(/active/)
   await expect(bTab).toContainText('B: 2018 AUG 16')
 })
 
 test('A|B loaded with only one layer in A section -- Corrected Reflectance (True Color)', async () => {
-  const { modalCloseButton } = selectors
   await page.goto(swipeAndAIsActive)
-  await modalCloseButton.click()
+  await closeModal(page)
   const overlayLayer = page.locator('.ab-tabs-case .tab-pane.active ul#overlays .item')
   const correctedReflectance = page.locator('#active-MODIS_Terra_CorrectedReflectance_TrueColor')
   await expect(overlayLayer).not.toBeVisible()

e2e/features/compare/timeline-test.spec.js

@@ -2,7 +2,7 @@
 const { test, expect } = require('@playwright/test')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { swipeAndAIsActive } = require('../../test-utils/global-variables/querystrings')
-const { timelineDrag, dateSelectorMonthDay } = require('../../test-utils/hooks/wvHooks')
+const { timelineDrag, dateSelectorMonthDay, closeModal } = require('../../test-utils/hooks/wvHooks')
 
 let page
 let selectors
@@ -19,9 +19,9 @@ test.afterAll(async () => {
 })
 
 test('Verify that A|B draggers are visible', async () => {
-  const { draggerA, draggerB, modalCloseButton } = selectors
+  const { draggerA, draggerB } = selectors
   await page.goto(swipeAndAIsActive)
-  await modalCloseButton.click()
+  await closeModal(page)
   await expect(draggerA).toBeVisible()
   await expect(draggerB).toBeVisible()
 })

e2e/features/events/event-filter-test.spec.js

@@ -2,7 +2,7 @@
 const { test, expect } = require('@playwright/test')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { fixedAppNow, wildfiresWithDates, backwardsCompatibleEventUrl, extentsUrl } = require('../../test-utils/global-variables/querystrings')
-const { switchProjections, clickAndWait } = require('../../test-utils/hooks/wvHooks')
+const { switchProjections, clickAndWait, closeModal } = require('../../test-utils/hooks/wvHooks')
 
 let page
 let selectors
@@ -38,9 +38,9 @@ test.afterAll(async () => {
 })
 
 test('Default filtering includes last 120 days and all categories', async () => {
-  const { eventsTab, filterIcons, filterDates, modalCloseButton } = selectors
+  const { eventsTab, filterIcons, filterDates } = selectors
   await page.goto(fixedAppNow)
-  await modalCloseButton.click()
+  await closeModal(page)
   await eventsTab.click()
   await expect(filterIcons).toHaveCount(8)
   await expect(filterDates).toContainText('2011 SEP 02 - 2011 DEC 31')
@@ -88,7 +88,6 @@ test('Loading from permalink sets all criteria properly', async () => {
     filterIcons,
     manmadeSwitch,
     mapExtentFilterCheckbox,
-    modalCloseButton,
     seaLakeIceSwitch,
     severeStormsSwitch,
     snowSwitch,
@@ -98,7 +97,7 @@ test('Loading from permalink sets all criteria properly', async () => {
     wildfiresIcon
   } = selectors
   await page.goto(wildfiresWithDates)
-  await modalCloseButton.click()
+  await closeModal(page)
 
   const currentUrl = await page.url()
 
@@ -133,14 +132,13 @@ test('Changing criteria in modal DOES NOT update summary of criteria in sidebar
     filterDates,
     filterIcons,
     filterModalCancel,
-    modalCloseButton,
     startInputYear,
     startInputMonth,
     startInputDay,
     wildfiresIcon
   } = selectors
   await page.goto(wildfiresWithDates)
-  await modalCloseButton.click()
+  await closeModal(page)
   await filterButton.click()
   await startInputYear.fill('2000')
   await startInputMonth.fill('APR')
@@ -220,11 +218,10 @@ test('Event Selected, No Filter Params: Shows only day of event, all categories,
     filterDates,
     filterButton,
     filterIcons,
-    mapExtentFilterCheckbox,
-    modalCloseButton
+    mapExtentFilterCheckbox
   } = selectors
   await page.goto(backwardsCompatibleEventUrl)
-  await modalCloseButton.click()
+  await closeModal(page)
   await expect(filterDates).toContainText('2005 DEC 31 - 2005 DEC 31')
   await filterButton.click()
   await assertDateInputValues('2005-DEC-31', '2005-DEC-31')
@@ -234,9 +231,9 @@ test('Event Selected, No Filter Params: Shows only day of event, all categories,
 })
 
 test('No extent search checkbox in polar projections', async () => {
-  const { filterButton, mapExtentFilterCheckbox, modalCloseButton } = selectors
+  const { filterButton, mapExtentFilterCheckbox } = selectors
   await page.goto(extentsUrl)
-  await modalCloseButton.click()
+  await closeModal(page)
   await filterButton.click()
   await expect(mapExtentFilterCheckbox).toBeVisible()
   await expect(mapExtentFilterCheckbox).toBeChecked()