Updating test cases for SOTO compatibility (#35)

* - Added Soto git action workflow
- Added Soto npm e2e execution
- Updated test cases for SOTO compatibility

* - Added parameter for assertDefaultLayers

* Lint fixing

* Lint fixing

* Lint fix

* Lint fix

* disabled some tests for SOTO

* updated CI-CD for windows

* Lint Fix

* Updated changelog

* Update package-lock.json

* lint

---------

Co-authored-by: Zoltan Miskolci <zoltan.miskolci@jpl.nasa.gov>
Co-authored-by: Frank Greguska <89428916+frankinspace@users.noreply.github.com>

.github/workflows/ci-cd-soto.yml

@@ -0,0 +1,55 @@
+
+name: CI SOTO
+
+on: [push]
+
+jobs:
+
+  build:
+    runs-on: ${{matrix.os}}
+    name: ${{matrix.os}}, Node ${{matrix.node}}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [macOS-latest, ubuntu-latest, windows-latest]
+        node: [18]
+
+    steps:
+      - name: Checkout the code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{matrix.node}}
+
+      - name: Install NPM Dependencies
+        run: |
+          npm ci
+
+      - name: Linting and Unit testing
+        run: |
+          npm test
+
+      - name: Build the application
+        run: |
+          npm run build:ci
+
+      - name: Run E2E tests - Chrome / MacOS
+        if: ${{ runner.os == 'macOS' }}
+        run: |
+          npm run start &
+          npx playwright install chromium &
+          sleep 10
+          SOTO=true npx playwright test --project=chromium --reporter=list
+
+      - name: Run E2E tests - Firefox / Windows
+        if: ${{ runner.os == 'Windows' }}
+        run: |
+          npm run start &
+          npx playwright install firefox &
+          sleep 10
+          set SOTO=true
+          npx playwright test --project=firefox --reporter=list
+
+

CHANGELOG.md

@@ -5,6 +5,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+- Added SOTO git action workflow
+- Added SOTO npm e2e execution
+- Updated test cases for SOTO compatibility
+- Added parameter for assertDefaultLayers
+- Disabled some test cases for SOTO due to issue #33 and #34
 
 ## [0.2.5]
 - Updated to 4.4.0 upstream version

e2e/docker-ci-soto.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+# This script should be run inside the docker container to execute
+# the headless end-to-end tests
+
+npm cache verify
+npm install --unsafe-perm
+npm run build
+npm start &
+npx playwright install
+SOTO=true npx playwright test

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

@@ -8,8 +8,6 @@ let selectors
 
 test.describe.configure({ mode: 'serial' })
 
-test.skip(true, 'Needs to be updated for SOTO')
-
 test.beforeAll(async ({ browser }) => {
   page = await browser.newPage()
   selectors = createSelectors(page)

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

@@ -5,53 +5,54 @@ const { swipeAndAIsActive } = require('../../test-utils/global-variables/queryst
 
 let page
 let selectors
-let aodCheckBox
-let aodMAIACCheckbox
 
 test.describe.configure({ mode: 'serial' })
 
 test.beforeAll(async ({ browser }) => {
   page = await browser.newPage()
   selectors = createSelectors(page)
-  aodCheckBox = page.locator('#MODIS_Combined_Value_Added_AOD-checkbox')
-  aodMAIACCheckbox = page.locator('#checkbox-case-MODIS_Combined_MAIAC_L2G_AerosolOpticalDepth .wv-checkbox input')
 })
 
 test.afterAll(async () => {
   await page.close()
 })
 
-test.skip(true, 'Needs to be updated for SOTO')
-
 test('Add AOD Layer to Layer Group A', async () => {
   const {
     addLayers,
-    aerosolOpticalDepth,
+    layersAll3rdElement,
+    layersList1stCheckbox,
     layersModalCloseButton
   } = selectors
   await page.goto(swipeAndAIsActive)
   await addLayers.click()
-  await aerosolOpticalDepth.click()
-  await aodCheckBox.click()
+  await layersAll3rdElement.click()
+  await layersList1stCheckbox.click()
   await layersModalCloseButton.click()
   const layerPicker = page.locator('#layer_picker_component')
   await expect(layerPicker).not.toBeVisible()
 })
 
 test('Add AOD index layer to Active state B and verify it has been added', async () => {
-  const { addLayers } = selectors
+  const {
+    addLayers,
+    layersList1stCheckbox
+  } = selectors
   await page.locator('.ab-tabs-case .ab-tab.second-tab .productsIcon').click()
   const aodLayerA = page.locator('active-MODIS_Combined_Value_Added_AOD')
   const aodLayerB = page.locator('activeB-MODIS_Combined_Value_Added_AOD')
   await expect(aodLayerA).not.toBeVisible()
   await addLayers.click()
-  await aodMAIACCheckbox.click()
+  await layersList1stCheckbox.click()
   await expect(aodLayerA).not.toBeVisible()
   await expect(aodLayerB).not.toBeVisible()
 })
 
 test('Verify that AOD combined is visible and AOD index is not present in Layer list A', async () => {
-  const { aTab, layersModalCloseButton } = selectors
+  const {
+    aTab,
+    layersModalCloseButton
+  } = selectors
   await layersModalCloseButton.click()
   await aTab.click()
   const aodMAIACIdA = page.locator('active-MODIS_Combined_MAIAC_L2G_AerosolOpticalDepth')

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

@@ -3,17 +3,22 @@ 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 moment = require('moment')
 
 let page
 let selectors
+let dayDisplacement
 
 test.describe.configure({ mode: 'serial' })
 
-test.skip(true, 'Needs to be updated for SOTO')
-
 test.beforeAll(async ({ browser }) => {
   page = await browser.newPage()
   selectors = createSelectors(page)
+  if (process.env.SOTO === 'true') {
+    dayDisplacement = 2
+  } else {
+    dayDisplacement = 0
+  }
 })
 
 const assertDateInputValues = async (start, end) => {
@@ -44,7 +49,10 @@ test('Default filtering includes last 120 days and all categories', async () =>
   await page.goto(fixedAppNow)
   await eventsTab.click()
   await expect(filterIcons).toHaveCount(8)
-  await expect(filterDates).toContainText('2011 SEP 02 - 2011 DEC 31')
+  const endDate = moment.utc('2011-DEC-31', 'YYYY-MMM-DD').subtract(0 + dayDisplacement, 'days').format('YYYY MMM DD').toUpperCase()
+  const startDate = moment.utc('2011-DEC-31', 'YYYY-MMM-DD').subtract(120 + dayDisplacement, 'days').format('YYYY MMM DD').toUpperCase()
+  const expectedText = startDate + ' - ' + endDate
+  await expect(filterDates).toContainText(expectedText)
 })
 
 test('Filter modal inputs are correct', async () => {
@@ -60,8 +68,10 @@ test('Filter modal inputs are correct', async () => {
     wildfiresSwitch,
     mapExtentFilterCheckbox
   } = selectors
+  const endDate = moment.utc('2011-DEC-31', 'YYYY-MMM-DD').subtract(0 + dayDisplacement, 'days').format('YYYY-MMM-DD').toUpperCase()
+  const startDate = moment.utc('2011-DEC-31', 'YYYY-MMM-DD').subtract(120 + dayDisplacement, 'days').format('YYYY-MMM-DD').toUpperCase()
   await filterButton.click()
-  await assertDateInputValues('2011-SEP-02', '2011-DEC-31')
+  await assertDateInputValues(startDate, endDate)
   await expect(dustSwitch).toBeChecked()
   await expect(manmadeSwitch).toBeChecked()
   await expect(seaLakeIceSwitch).toBeChecked()
@@ -75,9 +85,11 @@ test('Filter modal inputs are correct', async () => {
 
 test('URL params for categories, dates, and extent filtering are present', async () => {
   const currentUrl = await page.url()
+  const endDate = moment.utc('2011-DEC-31', 'YYYY-MMM-DD').subtract(0 + dayDisplacement, 'days').format('YYYY-MM-DD').toUpperCase()
+  const startDate = moment.utc('2011-DEC-31', 'YYYY-MMM-DD').subtract(120 + dayDisplacement, 'days').format('YYYY-MM-DD').toUpperCase()
   expect(currentUrl).toContain('e=true')
   expect(currentUrl).toContain('efc=dustHaze,manmade,seaLakeIce,severeStorms,snow,volcanoes,waterColor,wildfires')
-  expect(currentUrl).toContain('efd=2011-09-02,2011-12-31')
+  expect(currentUrl).toContain('efd=' + startDate + ',' + endDate)
   expect(currentUrl).toContain('efs=true')
 })
 
@@ -224,6 +236,9 @@ test('Event Selected, No Filter Params: Shows only day of event, all categories,
 })
 
 test('No extent search checkbox in polar projections', async () => {
+  if (process.env.SOTO === 'true') {
+    test.skip(true, 'Polar change is hidden by something: <iframe src="about:blank" id="react-refresh-overlay"></iframe> intercepts pointer events')
+  }
   const { filterButton, mapExtentFilterCheckbox } = selectors
   await page.goto(extentsUrl)
   await filterButton.click()

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

@@ -8,8 +8,6 @@ let selectors
 
 test.describe.configure({ mode: 'serial' })
 
-test.skip(true, 'Needs to be updated for SOTO')
-
 test.beforeAll(async ({ browser }) => {
   page = await browser.newPage()
   selectors = createSelectors(page)
@@ -21,6 +19,7 @@ test.afterAll(async () => {
 
 test('Make sure that 4 fire layers are not present in layer list: use mock', async ({ browserName }) => {
   test.skip(browserName === 'firefox', 'firefox cant find iceberg event sometimes')
+  test.skip(process.env.SOTO === 'true', 'SOTO does not contain the layers')
   const { sidebarEvent, thermAnomSNPPday, thermAnomSNPPnight, thermAnomVIIRSday, thermAnomVIIRSnight } = selectors
   await page.goto(mockEvents)
   await expect(sidebarEvent).toBeVisible()
@@ -32,6 +31,7 @@ test('Make sure that 4 fire layers are not present in layer list: use mock', asy
 
 test('Check that 4 fire layers are now present', async ({ browserName }) => {
   test.skip(browserName === 'firefox', 'firefox cant find iceberg event sometimes')
+  test.skip(process.env.SOTO === 'true', 'SOTO does not contain the layers')
   const { sidebarEvent, thermAnomSNPPday, thermAnomSNPPnight, thermAnomVIIRSday, thermAnomVIIRSnight, layersTab } = selectors
   await sidebarEvent.click()
   await layersTab.click()

e2e/features/image-download/initial-state-test.spec.js

@@ -59,7 +59,9 @@ test('Check arctic formats', async () => {
 })
 
 test('Check antarctic formats', async () => {
-  test.skip(true, 'Needs to be updated for SOTO')
+  if (process.env.SOTO === 'true') {
+    test.skip(true, '2nd Polar change is hidden by something: <iframe src="about:blank" id="react-refresh-overlay"></iframe> intercepts pointer events')
+  }
   const { imageFormat } = selectors
   await closeImageDownloadPanel(page)
   await switchProjections(page, 'antarctic')

e2e/features/image-download/time-test.spec.js

@@ -6,6 +6,7 @@ const {
   clickDownload
 } = require('../../test-utils/hooks/wvHooks')
 const { joinUrl, getAttribute } = require('../../test-utils/hooks/basicHooks')
+const moment = require('moment')
 
 let page
 
@@ -15,8 +16,6 @@ const startParams = [
 
 test.describe.configure({ mode: 'serial' })
 
-test.skip(true, 'Needs to be updated for SOTO')
-
 test.beforeAll(async ({ browser }) => {
   page = await browser.newPage()
 })
@@ -26,31 +25,41 @@ test.afterAll(async () => {
 })
 
 test('Image for today', async () => {
-  const url = await joinUrl(startParams, '&now=2018-06-01T3')
+  if (process.env.SOTO === 'true') {
+    test.skip(true, 'Bug Reported for SOTO: https://github.com/podaac/worldview/issues/33')
+  }
+  const todayDate = '2018-06-01'
+  const url = await joinUrl(startParams, '&now=' + todayDate + 'T3')
   await page.goto(url)
   await openImageDownloadPanel(page)
   await clickDownload(page)
   const urlAttribute = await getAttribute(page, '#wv-image-download-url', 'url')
-  expect(urlAttribute).toContain('TIME=2018-06-01')
+  expect(urlAttribute).toContain('TIME=' + todayDate)
   await closeImageDownloadPanel(page)
 })
 
 test('Image for yesterday', async () => {
-  const url = await joinUrl(startParams, '&now=2018-06-01T0')
+  if (process.env.SOTO === 'true') {
+    test.skip(true, 'Bug Reported for SOTO: https://github.com/podaac/worldview/issues/33')
+  }
+  const todayDate = '2018-06-01'
+  const expectedDate = moment.utc(todayDate, 'YYYY-MM-DD').subtract(1, 'days').format('YYYY-MM-DD').toUpperCase()
+  const url = await joinUrl(startParams, '&now=' + todayDate + 'T0')
   await page.goto(url)
   await openImageDownloadPanel(page)
   await clickDownload(page)
   const urlAttribute = await getAttribute(page, '#wv-image-download-url', 'url')
-  expect(urlAttribute).toContain('TIME=2018-05-31')
+  expect(urlAttribute).toContain('TIME=' + expectedDate)
   await closeImageDownloadPanel(page)
 })
 
 test('Image for 2018-05-15', async () => {
-  const url = await joinUrl(startParams, '&t=2018-05-15')
+  const expectedDate = '2018-05-15'
+  const url = await joinUrl(startParams, '&t=' + expectedDate)
   await page.goto(url)
   await openImageDownloadPanel(page)
   await clickDownload(page)
   const urlAttribute = await getAttribute(page, '#wv-image-download-url', 'url')
-  expect(urlAttribute).toContain('TIME=2018-05-15')
+  expect(urlAttribute).toContain('TIME=' + expectedDate)
   await closeImageDownloadPanel(page)
 })