wip

.gitignore

@@ -28,6 +28,7 @@ e2e/reports
 e2e/screens
 playwright-report/
 playwright/.cache/
+.nyc_output
 *.jar
 # Config
 /config/*

babel.config.js

@@ -16,5 +16,10 @@ module.exports = {
         loose: true
       }
     ]
-  ]
+  ],
+  env: {
+    playwright: {
+      plugins: ['istanbul']
+    }
+  }
 }

doc/e2e_testing.md

@@ -141,3 +141,22 @@ test('Recent tab shows layers that were selected', async () => {
 - For elements that are not defined in the `selectors.js` file you can use `page.locator()` or any other locator. A full list can be found in the [Playwright Locators docs](https://playwright.dev/docs/locators)
 - If you are only performing an action on an element such as `click()` you do not need to define the element as a variable. You can simply write `await page.locator('.recent-tab').click()`
 - If you are performing an assertion on an element, you will need to define the element as a variable first `const aquaAerosolRow = await page.locator('#MODIS_Aqua_Aerosol-search-row')` `await expect(aquaAerosolRow).toBeVisible()`
+
+### Running Code Coverage Tests
+1. `npm install nyc playwright-test-coverage start-server-and-test`
+2. Create the following scripts in the package.json
+```
+    "playwright:coverage": "NODE_ENV=playwright nyc playwright test --project=chromium --reporter=list",
+    "playwright:ci": "start-server-and-test start http-get://localhost:3000 playwright:coverage",
+```
+3. Add the following to babel.config.js
+```
+  env: {
+    playwright: {
+      plugins: ['istanbul']
+    }
+  }
+```
+4. Use VSCode's search & replace tool to search for all instances of "@playwright/test" in the e2e/features directory and replace them with "playwright-test-coverage".
+5. Run the playwright:ci script
+6. After the tests finish, you can view results from the coverage/lcov-report index.html file

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { skipTour, activeAnimationWidget, animationGeostationary } = require('../../test-utils/global-variables/querystrings')
 

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const {
   animationTooManyFramesGifCustomInterval,

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

@@ -1,4 +1,4 @@
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { knownDate } = require('../../test-utils/global-variables/querystrings')
 

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { swipeAndAIsActive, multipleDataLayers, referenceLayersOnly } = require('../../test-utils/global-variables/querystrings')
 

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

@@ -1,4 +1,4 @@
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { swipeAndAIsActive, spyAndBIsActive, opacityAndBIsActive } = require('../../test-utils/global-variables/querystrings')
 

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { swipeAndAIsActive, spyAndBIsActive } = require('../../test-utils/global-variables/querystrings')
 

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { swipeAOD } = require('../../test-utils/global-variables/querystrings')
 

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { swipeAndAIsActive } = require('../../test-utils/global-variables/querystrings')
 

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const {
   swipeAndAIsActive,

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { swipeAndAIsActive } = require('../../test-utils/global-variables/querystrings')
 const { timelineDrag, dateSelectorMonthDay } = require('../../test-utils/hooks/wvHooks')

e2e/features/dev-test-mode/dev-test-mode-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const { skipTour } = require('../../test-utils/global-variables/querystrings')
 
 let page

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 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')

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { mockEvents } = require('../../test-utils/global-variables/querystrings')
 

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { mockEvents, stormEventSelected } = require('../../test-utils/global-variables/querystrings')
 

e2e/features/global-unit/coordinate-format-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 
 const url = 'http://localhost:3000/?v=-78.52435703125,37.8608744140625,-75.56244296875,39.7483255859375&l=Reference_Labels_15m,Reference_Features_15m(hidden),Coastlines_15m,VIIRS_NOAA20_CorrectedReflectance_TrueColor(hidden),VIIRS_SNPP_CorrectedReflectance_TrueColor(hidden),MODIS_Aqua_CorrectedReflectance_TrueColor(hidden),MODIS_Terra_CorrectedReflectance_TrueColor&lg=false&s=-77.0434,38.8046&t=2023-02-15-T19%3A53%3A41Z'

e2e/features/global-unit/global-unit-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 
 const SSTQueryString = 'http://localhost:3000/?l=GHRSST_L4_MUR_Sea_Surface_Temperature,Reference_Labels_15m(hidden),Reference_Features_15m(hidden),Coastlines_15m,VIIRS_NOAA20_CorrectedReflectance_TrueColor(hidden),VIIRS_SNPP_CorrectedReflectance_TrueColor(hidden),MODIS_Aqua_CorrectedReflectance_TrueColor(hidden),MODIS_Terra_CorrectedReflectance_TrueColor&lg=false&t=2020-09-28-T20%3A40%3A53Z'

e2e/features/image-download/crosses-dateline-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 
 let page

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const {
   clickDownload,
   closeImageDownloadPanel,

e2e/features/image-download/global-select-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { openImageDownloadPanel } = require('../../test-utils/hooks/wvHooks')
 const { joinUrl } = require('../../test-utils/hooks/basicHooks')

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const { skipTour } = require('../../test-utils/global-variables/querystrings')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const {

e2e/features/image-download/lat-long-input-test.spec.js

@@ -1,5 +1,5 @@
 // // @ts-check
-// const { test, expect } = require('@playwright/test')
+// const { test, expect } = require('playwright-test-coverage')
 // const { skipTour } = require('../../test-utils/global-variables/querystrings')
 // const createSelectors = require('../../test-utils/global-variables/selectors')
 // const { openImageDownloadPanel } = require('../../test-utils/hooks/wvHooks')

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const { openImageDownloadPanel, clickDownload } = require('../../test-utils/hooks/wvHooks')
 const { joinUrl, getAttribute } = require('../../test-utils/hooks/basicHooks')
 const createSelectors = require('../../test-utils/global-variables/selectors')

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const {
   openImageDownloadPanel,
   closeImageDownloadPanel,

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const {
   openImageDownloadPanel,

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const {
   openImageDownloadPanel,

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const {
   openImageDownloadPanel,
   closeImageDownloadPanel,

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { closeImageDownloadPanel } = require('../../test-utils/hooks/wvHooks')
 const { joinUrl } = require('../../test-utils/hooks/basicHooks')

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 
 let page

e2e/features/layers/layer-picker-mobile-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { assertDefaultLayers, assertCategories } = require('../../test-utils/hooks/wvHooks')
 

e2e/features/layers/layer-picker-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { assertCategories, switchProjections } = require('../../test-utils/hooks/wvHooks')
 

e2e/features/layers/layers-sidebar-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { assertLayerOrdering } = require('../../test-utils/hooks/wvHooks')
 

e2e/features/layers/layers-vector-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 
 let page

e2e/features/layers/options-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 
 let page

e2e/features/layers/recent-layers-mobile-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { assertCategories } = require('../../test-utils/hooks/wvHooks')
 

e2e/features/layers/recent-layers-no-local-storage-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { localStorageEnabled } = require('../../test-utils/hooks/wvHooks')
 

e2e/features/layers/recent-layers-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { assertCategories } = require('../../test-utils/hooks/wvHooks')
 

e2e/features/location-search/location-search-mobile-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { skipTour } = require('../../test-utils/global-variables/querystrings')
 

e2e/features/location-search/location-search-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { skipTour } = require('../../test-utils/global-variables/querystrings')
 

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { skipTour } = require('../../test-utils/global-variables/querystrings')
 const { getAttribute } = require('../../test-utils/hooks/basicHooks')

e2e/features/modal/about-modal-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { skipTour } = require('../../test-utils/global-variables/querystrings')
 

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 
 let page

e2e/features/palettes/disable-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 
 let page

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { switchProjections } = require('../../test-utils/hooks/wvHooks')
 const { skipTour } = require('../../test-utils/global-variables/querystrings')

e2e/features/share/embed-test.spec.js

@@ -1,5 +1,5 @@
 // // @ts-check
-// const { test, expect } = require('@playwright/test')
+// const { test, expect } = require('playwright-test-coverage')
 // const createSelectors = require('../../test-utils/global-variables/selectors')
 
 // let page

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { skipTour } = require('../../test-utils/global-variables/querystrings')
 const { getAttribute } = require('../../test-utils/hooks/basicHooks')

e2e/features/smart-handoff/smart-handoff-test.spec.js

@@ -2,7 +2,7 @@
 // THIS SHOULD BE REVISTIED
 
 // // @ts-check
-// const { test, expect } = require('@playwright/test')
+// const { test, expect } = require('playwright-test-coverage')
 // const createSelectors = require('../../test-utils/global-variables/selectors')
 
 // let page

e2e/features/timeline/date-selector-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const { subdailyLayerIntervalTimescale, knownDate } = require('../../test-utils/global-variables/querystrings')
 

e2e/features/timeline/layer-coverage-panel-test.spec.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const { skipTour, referenceLayersOnly } = require('../../test-utils/global-variables/querystrings')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 
 let page

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

@@ -1,5 +1,5 @@
 // @ts-check
-const { test, expect } = require('@playwright/test')
+const { test, expect } = require('playwright-test-coverage')
 const createSelectors = require('../../test-utils/global-variables/selectors')
 const {
   skipTour,