Merge pull request #5068 from nasa-gibs/release

Release v4.30.0 to Main

.github/workflows/ci-cd.yml

@@ -47,4 +47,4 @@ jobs:
           npm run start &
           npx playwright install firefox &
           sleep 10
-          npx playwright test --project=firefox --reporter=list
+          npx playwright test --project=firefox --reporter=list

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

@@ -1,50 +1,85 @@
-// // @ts-check
-// const { test, expect } = require('@playwright/test')
-// let page
-
-// const floodOnlyGrayUrl = 'http://localhost:3000/?v=-141,-32,21,66&df=true&l=MODIS_Combined_Flood_2-Day(disabled=3-0)&lg=true&t=2023-12-07-T18%3A49%3A23Z'
-// const floodGrayAndBlueUrl = 'http://localhost:3000/?v=-139,-44,23,54&df=true&l=MODIS_Combined_Flood_2-Day(disabled=3-1)&lg=true&t=2023-12-07-T18%3A49%3A23Z'
-// const floodAllColorsUrl = 'http://localhost:3000/?v=40,22,53,33&df=true&l=MODIS_Combined_Flood_2-Day&lg=true&t=2023-01-07-T18%3A49%3A23Z'
-
-// test.describe.configure({ mode: 'serial' })
-
-// test.beforeEach(async ({ browser }) => {
-//   page = await browser.newPage()
-// })
-
-// test.afterEach(async () => {
-//   await page.close()
-// })
-
-// test('Flood 2 Day only Gray', async () => {
-//   await page.goto(floodOnlyGrayUrl)
-//   await page.waitForLoadState('load')
-//   await page.waitForTimeout(5000)
-
-//   await expect(page).toHaveScreenshot('only-gray.png', {
-//     fullPage: true,
-//     threshold: 0.2
-//   })
-// })
-
-// test('Flood 2 Day Gray & Blue', async () => {
-//   await page.goto(floodGrayAndBlueUrl)
-//   await page.waitForLoadState('load')
-//   await page.waitForTimeout(5000)
-
-//   await expect(page).toHaveScreenshot('gray-and-blue.png', {
-//     fullPage: true,
-//     threshold: 0.2
-//   })
-// })
-
-// test('Flood 2 Day All Colors', async () => {
-//   await page.goto(floodAllColorsUrl)
-//   await page.waitForLoadState('load')
-//   await page.waitForTimeout(5000)
-
-//   await expect(page).toHaveScreenshot('all-colors.png', {
-//     fullPage: true,
-//     threshold: 0.2
-//   })
-// })
+// @ts-check
+const { test, expect } = require('@playwright/test')
+const UPNG = require('upng-js')
+let page
+
+const floodOnlyGrayUrl = 'http://localhost:3000/?v=-213,-96,107,99&df=true&l=MODIS_Combined_Flood_2-Day(disabled=3-0)&lg=true&t=2023-12-07-T18%3A49%3A23Z'
+const floodGrayAndBlueUrl = 'http://localhost:3000/?v=-195,-120,202,122&df=true&l=MODIS_Combined_Flood_2-Day(disabled=3-1)&lg=true&t=2023-12-07-T18%3A49%3A23Z'
+const floodAllColorsUrl = 'http://localhost:3000/?v=20.927495068573297,59.38686212149608,23.42534040372529,60.914081461203466&l=MODIS_Combined_Flood_2-Day(disabled=3)&lg=true&t=2021-04-05-T18%3A49%3A23Z'
+
+// RGB Colors taken from the colormap for the flood layer
+const red = '250,30,36,255'
+const blue = '50,210,245,255'
+const gray = '175,175,175,255'
+
+test.describe.configure({ mode: 'serial' })
+
+test.beforeEach(async ({ browser }) => {
+  page = await browser.newPage()
+})
+
+test.afterEach(async () => {
+  await page.close()
+})
+
+test('Flood 2 Day only Gray', async () => {
+  await page.goto(floodOnlyGrayUrl)
+  await page.waitForLoadState('load')
+  await page.waitForTimeout(3000)
+  const screenshot = await page.screenshot()
+  const colorsFound = analyzePixels(screenshot)
+  const isRed = colorsFound.indexOf(red) > -1
+  const isBlue = colorsFound.indexOf(blue) > -1
+  const isGray = colorsFound.indexOf(gray) > -1
+  const isGrayOnly = !isRed && !isBlue && isGray
+  expect(isGrayOnly).toEqual(true)
+})
+
+test('Flood 2 Day Gray & Blue', async () => {
+  await page.goto(floodGrayAndBlueUrl)
+  await page.waitForLoadState('load')
+  await page.waitForTimeout(3000)
+  const screenshot = await page.screenshot()
+  const colorsFound = analyzePixels(screenshot)
+  const isRed = colorsFound.indexOf(red) > -1
+  const isBlue = colorsFound.indexOf(blue) > -1
+  const isGray = colorsFound.indexOf(gray) > -1
+  const isGrayAndBlue = !isRed && isBlue && isGray
+  expect(isGrayAndBlue).toEqual(true)
+})
+
+test('Flood 2 Day All Colors', async () => {
+  await page.goto(floodAllColorsUrl)
+  await page.waitForLoadState('load')
+  await page.waitForTimeout(3000)
+  const screenshot = await page.screenshot()
+  const colorsFound = analyzePixels(screenshot)
+  const isRed = colorsFound.indexOf(red) > -1
+  const isBlue = colorsFound.indexOf(blue) > -1
+  const isGray = colorsFound.indexOf(gray) > -1
+  const isRedAndBlueAndGray = isRed && isBlue && isGray
+  expect(isRedAndBlueAndGray).toEqual(true)
+})
+
+function analyzePixels (screenshot) {
+  const imageData = decodeImageData(screenshot)
+  const colorsFound = new Set()
+  const uint8Array = new Uint8Array(imageData)
+  for (let i = 0; i < uint8Array.length; i += 4) {
+    const pixelColor = [
+      uint8Array[i], // Red
+      uint8Array[i + 1], // Green
+      uint8Array[i + 2], // Blue
+      uint8Array[i + 3] // Alpha
+    ]
+    const colorString = pixelColor.join(',')
+    colorsFound.add(colorString)
+  }
+  return Array.from(colorsFound)
+}
+
+function decodeImageData (screenshot) {
+  const decodedImage = UPNG.decode(screenshot)
+  const rgbaData = UPNG.toRGBA8(decodedImage)[0]
+  return rgbaData
+}

e2e/features/notifications/notify-test.spec.js

@@ -1,104 +1,104 @@
-// @ts-check
-const { test, expect } = require('@playwright/test')
-const createSelectors = require('../../test-utils/global-variables/selectors')
-const { closeModal } = require('../../test-utils/hooks/wvHooks')
+// // @ts-check
+// const { test, expect } = require('@playwright/test')
+// const createSelectors = require('../../test-utils/global-variables/selectors')
+// const { closeModal } = require('../../test-utils/hooks/wvHooks')
 
-let page
-let selectors
+// let page
+// let selectors
 
-const mockAlertQuery = 'http://localhost:3000/?mockAlerts='
-const layerNoticesQuery = 'http://localhost:3000/?l=Coastlines_15m,MODIS_Aqua_CorrectedReflectance_TrueColor,Particulate_Matter_Below_2.5micrometers_2001-2010'
+// const mockAlertQuery = 'http://localhost:3000/?mockAlerts='
+// const layerNoticesQuery = 'http://localhost:3000/?l=Coastlines_15m,MODIS_Aqua_CorrectedReflectance_TrueColor,Particulate_Matter_Below_2.5micrometers_2001-2010'
 
-let infoButtonIcon
-let infoMenu
-let notificationsListItem
-let tooltipSelector
+// let infoButtonIcon
+// let infoMenu
+// let notificationsListItem
+// let tooltipSelector
 
-test.describe.configure({ mode: 'serial' })
+// test.describe.configure({ mode: 'serial' })
 
-test.beforeAll(async ({ browser }) => {
-  page = await browser.newPage()
-  selectors = createSelectors(page)
-  infoButtonIcon = page.locator('#wv-info-button svg.svg-inline--fa')
-  infoMenu = page.locator('#toolbar_info')
-  notificationsListItem = page.locator('#notifications_info_item')
-  tooltipSelector = page.locator('.tooltip-inner div')
-})
+// test.beforeAll(async ({ browser }) => {
+//   page = await browser.newPage()
+//   selectors = createSelectors(page)
+//   infoButtonIcon = page.locator('#wv-info-button svg.svg-inline--fa')
+//   infoMenu = page.locator('#toolbar_info')
+//   notificationsListItem = page.locator('#notifications_info_item')
+//   tooltipSelector = page.locator('.tooltip-inner div')
+// })
 
-test.afterAll(async () => {
-  await page.close()
-})
+// test.afterAll(async () => {
+//   await page.close()
+// })
 
-test('No visible notifications with mockAlert parameter set to no_types', async () => {
-  const url = `${mockAlertQuery}no_types`
-  const giftListItem = await page.locator('#toolbar_info li.gift')
-  const boltListItem = await page.locator('#toolbar_info li.bolt')
-  await page.goto(url)
-  await infoButtonIcon.click()
-  await expect(infoMenu).not.toContainText('Notifications')
-  await expect(giftListItem).not.toBeVisible()
-  await expect(boltListItem).not.toBeVisible()
-})
+// test('No visible notifications with mockAlert parameter set to no_types', async () => {
+//   const url = `${mockAlertQuery}no_types`
+//   const giftListItem = await page.locator('#toolbar_info li.gift')
+//   const boltListItem = await page.locator('#toolbar_info li.bolt')
+//   await page.goto(url)
+//   await infoButtonIcon.click()
+//   await expect(infoMenu).not.toContainText('Notifications')
+//   await expect(giftListItem).not.toBeVisible()
+//   await expect(boltListItem).not.toBeVisible()
+// })
 
-test('Verify that layer notices don\'t show up in the notification list or contribute to the count', async () => {
-  const url = `${layerNoticesQuery}&mockAlerts=all_types`
-  await page.goto(url)
-  await closeModal(page)
-  await infoButtonIcon.click()
-  const badge = await page.getByRole('button', { name: 'Notifications 2' })
-  await expect(badge).toBeVisible()
-  await expect(badge).toContainText('2')
-})
+// test('Verify that layer notices don\'t show up in the notification list or contribute to the count', async () => {
+//   const url = `${layerNoticesQuery}&mockAlerts=all_types`
+//   await page.goto(url)
+//   await closeModal(page)
+//   await infoButtonIcon.click()
+//   const badge = await page.getByRole('button', { name: 'Notifications 2' })
+//   await expect(badge).toBeVisible()
+//   await expect(badge).toContainText('2')
+// })
 
-test('Alert and message content is highlighted and found in modal', async () => {
-  const alertContentHighlighted = await page.locator('#notification_list_modal .alert-notification-item p')
-  const messageContentHighlighted = await page.locator('#notification_list_modal .message-notification-item p')
-  await notificationsListItem.click()
-  await expect(alertContentHighlighted).toContainText('learn how to visualize global satellite imagery')
-  await expect(messageContentHighlighted).toContainText('This is a message test')
-})
+// test('Alert and message content is highlighted and found in modal', async () => {
+//   const alertContentHighlighted = await page.locator('#notification_list_modal .alert-notification-item p')
+//   const messageContentHighlighted = await page.locator('#notification_list_modal .message-notification-item p')
+//   await notificationsListItem.click()
+//   await expect(alertContentHighlighted).toContainText('learn how to visualize global satellite imagery')
+//   await expect(messageContentHighlighted).toContainText('This is a message test')
+// })
 
-test('Verify that the user is only alerted if they have not already stored all items in localStorage', async () => {
-  const hideButton = await page.locator('#wv-info-button.wv-status-hide')
-  await page.locator('.modal-close-btn').click()
-  await expect(hideButton).toBeVisible()
-})
+// test('Verify that the user is only alerted if they have not already stored all items in localStorage', async () => {
+//   const hideButton = await page.locator('#wv-info-button.wv-status-hide')
+//   await page.locator('.modal-close-btn').click()
+//   await expect(hideButton).toBeVisible()
+// })
 
-test('Verify that zots show for the layers that have notices', async () => {
-  const url = `${layerNoticesQuery}&mockAlerts=all_types`
-  await page.goto(url)
-  await closeModal(page)
-  const aquaZot = await page.locator('#MODIS_Aqua_CorrectedReflectance_TrueColor-zot')
-  const particulateZot = await page.locator('#Particulate_Matter_Below_2__2E__5micrometers_2001-2010-zot')
-  await expect(aquaZot).toBeVisible()
-  await aquaZot.hover()
-  const aquaNotice = tooltipSelector.first()
-  const multiNotice = tooltipSelector.last()
-  await expect(aquaNotice).toContainText('The Aqua / MODIS Corrected Reflectance (True Color) layer is currently unavailable.')
-  await expect(multiNotice).toContainText('Several layers are experiencing delays in processing.')
-  await expect(particulateZot).toBeVisible()
-  await particulateZot.hover()
-  const tooltip = await page.locator('.tooltip-inner div div').first()
-  await expect(tooltip).toContainText('Several layers are experiencing delays in processing.')
-})
+// test('Verify that zots show for the layers that have notices', async () => {
+//   const url = `${layerNoticesQuery}&mockAlerts=all_types`
+//   await page.goto(url)
+//   await closeModal(page)
+//   const aquaZot = await page.locator('#MODIS_Aqua_CorrectedReflectance_TrueColor-zot')
+//   const particulateZot = await page.locator('#Particulate_Matter_Below_2__2E__5micrometers_2001-2010-zot')
+//   await expect(aquaZot).toBeVisible()
+//   await aquaZot.hover()
+//   const aquaNotice = tooltipSelector.first()
+//   const multiNotice = tooltipSelector.last()
+//   await expect(aquaNotice).toContainText('The Aqua / MODIS Corrected Reflectance (True Color) layer is currently unavailable.')
+//   await expect(multiNotice).toContainText('Several layers are experiencing delays in processing.')
+//   await expect(particulateZot).toBeVisible()
+//   await particulateZot.hover()
+//   const tooltip = await page.locator('.tooltip-inner div div').first()
+//   await expect(tooltip).toContainText('Several layers are experiencing delays in processing.')
+// })
 
-test('Verify that warning shows in the product picker category/measurement rows', async () => {
-  const { addLayers } = selectors
-  await addLayers.click()
-  await page.locator('#layer-category-item-air-quality-corrected-reflectance').click()
-  await page.locator('#checkbox-case-MODIS_Aqua_CorrectedReflectance_TrueColor').hover()
-  const aquaNotice = tooltipSelector.first()
-  const multiNotice = tooltipSelector.last()
-  await expect(aquaNotice).toContainText('The Aqua / MODIS Corrected Reflectance (True Color) layer is currently unavailable.')
-  await expect(multiNotice).toContainText('Several layers are experiencing delays in processing.')
-})
+// test('Verify that warning shows in the product picker category/measurement rows', async () => {
+//   const { addLayers } = selectors
+//   await addLayers.click()
+//   await page.locator('#layer-category-item-air-quality-corrected-reflectance').click()
+//   await page.locator('#checkbox-case-MODIS_Aqua_CorrectedReflectance_TrueColor').hover()
+//   const aquaNotice = tooltipSelector.first()
+//   const multiNotice = tooltipSelector.last()
+//   await expect(aquaNotice).toContainText('The Aqua / MODIS Corrected Reflectance (True Color) layer is currently unavailable.')
+//   await expect(multiNotice).toContainText('Several layers are experiencing delays in processing.')
+// })
 
-test('Verify that warning shows in the product picker search results rows', async () => {
-  const { layersSearchField } = selectors
-  await layersSearchField.fill('MODIS_Aqua_CorrectedReflectance_TrueColor')
-  await page.locator('.layer-notice-icon').hover()
-  const aquaNotice = tooltipSelector.first()
-  const multiNotice = tooltipSelector.last()
-  await expect(aquaNotice).toContainText('The Aqua / MODIS Corrected Reflectance (True Color) layer is currently unavailable.')
-  await expect(multiNotice).toContainText('Several layers are experiencing delays in processing.')
-})
+// test('Verify that warning shows in the product picker search results rows', async () => {
+//   const { layersSearchField } = selectors
+//   await layersSearchField.fill('MODIS_Aqua_CorrectedReflectance_TrueColor')
+//   await page.locator('.layer-notice-icon').hover()
+//   const aquaNotice = tooltipSelector.first()
+//   const multiNotice = tooltipSelector.last()
+//   await expect(aquaNotice).toContainText('The Aqua / MODIS Corrected Reflectance (True Color) layer is currently unavailable.')
+//   await expect(multiNotice).toContainText('Several layers are experiencing delays in processing.')
+// })