Change how screenshots are recorded during tests

react/eslint.config.mjs

@@ -8,6 +8,7 @@ import reactPlugin from "eslint-plugin-react"
 import preferFC from 'eslint-plugin-react-prefer-function-component/config'
 import reactHooks from 'eslint-plugin-react-hooks'
 import noOnlyTests from 'eslint-plugin-no-only-tests'
+import jest from 'eslint-plugin-jest'
 
 export default tseslint.config(
  ...tseslint.configs.strictTypeChecked,
@@ -115,5 +116,11 @@ export default tseslint.config(
  rules: {
  'no-only-tests/no-only-tests': 'error'
  }
+ },
+ jest.configs['flat/style'],
+ {
+ rules: {
+ 'jest/no-identical-title': 'error' // Prevent default screencap names
+ }
  }
 )

react/package.json

@@ -36,6 +36,7 @@
  "eslint-import-resolver-typescript": "^3.6.3",
  "eslint-plugin-eslint-comments": "^3.2.0",
  "eslint-plugin-import": "^2.29.1",
+ "eslint-plugin-jest": "^28.8.3",
  "eslint-plugin-no-only-tests": "^3.3.0",
  "eslint-plugin-react": "^7.35.2",
  "eslint-plugin-react-hooks": "^4.6.2",

react/test/article_test.ts

@@ -10,12 +10,12 @@ urbanstatsFixture('longer article test', '/article.html?longname=California%2C+U
 
 test('california-article-test', async (t) => {
  // screenshot path: images/first_test.png
- await screencap(t, 'article/california')
+ await screencap(t)
 })
 
 test('neighboring-state-test', async (t) => {
  await t.wait(1000)
- await screencap(t, 'article/california-with-neighbors')
+ await screencap(t)
  await t
  .click(Selector('path').withAttribute('class', /tag-Arizona,_USA/))
  await t.expect(getLocation())
@@ -25,7 +25,7 @@ test('neighboring-state-test', async (t) => {
 urbanstatsFixture('shorter article test', `/article.html?longname=San+Marino+city%2C+California%2C+USA`)
 
 test('san-marino-article-test', async (t) => {
- await screencap(t, 'article/san-marino')
+ await screencap(t)
 })
 
 test('editable-number', async (t) => {
@@ -78,7 +78,7 @@ test('lr-buttons', async (t) => {
 
 test('san-marino-2010-health', async (t) => {
  await check_textboxes(t, ['2010 Census', 'Health'])
- await screencap(t, 'article/san-marino-2010-health')
+ await screencap(t)
 })
 
 test('uncheck-box-mobile', async (t) => {
@@ -90,10 +90,10 @@ test('uncheck-box-mobile', async (t) => {
  await t.wait(1000)
  await check_textboxes(t, ['Race'])
 
- await screencap(t, 'article/remove_race_initial_mobile')
+ await screencap(t)
  // refresh
  await t.eval(() => { location.reload() })
- await screencap(t, 'article/remove_race_refresh_mobile')
+ await screencap(t)
 })
 
 test('uncheck-box-desktop', async (t) => {
@@ -103,10 +103,10 @@ test('uncheck-box-desktop', async (t) => {
  await t.wait(1000)
  await check_textboxes(t, ['Race'])
 
- await screencap(t, 'article/remove_race_initial_desktop')
+ await screencap(t)
  // refresh
  await t.eval(() => { location.reload() })
- await screencap(t, 'article/remove_race_refresh_desktop')
+ await screencap(t)
 })
 
 test('simple', async (t) => {
@@ -116,11 +116,11 @@ test('simple', async (t) => {
  await t.wait(1000)
  await check_textboxes(t, ['Simple Ordinals'])
 
- await screencap(t, 'article/simple-ordinals')
+ await screencap(t)
 })
 
 test('download-article', async (t) => {
- await download_image(t, 'article/download-article')
+ await download_image(t)
 })
 
 test('create-comparison-from-article', async (t) => {
@@ -135,10 +135,10 @@ test('create-comparison-from-article', async (t) => {
 
 urbanstatsFixture('article universe selector test', `/article.html?longname=San+Marino+city%2C+California%2C+USA`)
 
-test('article-universe-selector-test', async (t) => {
+test('article-universe-selector-test-california', async (t) => {
  await t
  .click(Selector('img').withAttribute('class', 'universe-selector'))
- await screencap(t, 'article-dropped-down-universe-selector')
+ await screencap(t)
  await t
  .click(
  Selector('img')
@@ -150,18 +150,18 @@ test('article-universe-selector-test', async (t) => {
 
 urbanstatsFixture('article universe selector test international', `/article.html?longname=Delhi+%5BNew+Delhi%5D+Urban+Center%2C+India`)
 
-test('article-universe-selector-test', async (t) => {
+test('article-universe-selector-test-india', async (t) => {
  await t
  .click(Selector('img').withAttribute('class', 'universe-selector'))
- await screencap(t, 'article-dropped-down-universe-selector-international')
+ await screencap(t)
  await t
  .click(
  Selector('img')
  .withAttribute('class', 'universe-selector-option')
  .withAttribute('alt', 'India'))
  await t.expect(getLocation())
  .eql(`${TARGET}/article.html?longname=Delhi+%5BNew+Delhi%5D+Urban+Center%2C+India&universe=India`)
- await screencap(t, 'article/delhi-india')
+ await screencap(t)
 })
 
 urbanstatsFixture('article universe navigation test', `/article.html?longname=San+Marino+city%2C+California%2C+USA&universe=California%2C+USA`)
@@ -193,7 +193,7 @@ test('article-universe-statistic-page', async (t) => {
  .click(Selector('a').withText(/^Area$/))
  await t.expect(getLocation())
  .eql(`${TARGET}/statistic.html?statname=Area&article_type=City&start=821&amount=20&universe=California%2C+USA`)
- await screencap(t, 'statistics/universe-statistic-page')
+ await screencap(t)
 })
 
 test('article-universe-related-button', async (t) => {
@@ -223,7 +223,7 @@ test('article-universe-compare', async (t) => {
  .eql(
  `${TARGET}/comparison.html?longnames=%5B%22San+Marino+city%2C+California%2C+USA%22%2C%22San+Francisco+city%2C+California%2C+USA%22%5D&universe=California%2C+USA`,
  )
- await screencap(t, 'comparison/universe-compare')
+ await screencap(t)
 })
 
 test('article-universe-compare-different', async (t) => {
@@ -236,7 +236,7 @@ test('article-universe-compare-different', async (t) => {
  .eql(
  `${TARGET}/comparison.html?longnames=%5B%22San+Marino+city%2C+California%2C+USA%22%2C%22Chicago+city%2C+Illinois%2C+USA%22%5D`,
  )
- await screencap(t, 'comparison/universe-compare-different')
+ await screencap(t)
 })
 
 urbanstatsFixture('article universe state test', `/article.html?longname=California%2C+USA`)
@@ -253,19 +253,19 @@ test('article-universe-state-world', async (t) => {
  await t.expect(getLocation())
  .eql(`${TARGET}/article.html?longname=California%2C+USA&universe=world`)
  // screenshot
- await screencap(t, 'article/california-world')
+ await screencap(t)
 })
 
 urbanstatsFixture('article universe state from subnational test', `/article.html?longname=Kerala%2C+India`)
 
 test('article-universe-state-from-subnational', async (t) => {
- await screencap(t, 'article/kerala-india')
+ await screencap(t)
  // click the > button
  await t
  .click(Selector('a').withText('>'))
  await t.expect(getLocation())
  .eql(`${TARGET}/article.html?longname=California%2C+USA&universe=world`)
- await screencap(t, 'article/california-world-from-kerala')
+ await screencap(t)
 })
 
 urbanstatsFixture('all stats test', `/article.html?longname=California%2C+USA`)
@@ -274,7 +274,7 @@ test('california-all-stats', async (t) => {
  await t.resizeWindow(1400, 800)
  await t.eval(() => { location.reload() })
  await check_all_category_boxes(t)
- await screencap(t, 'article/california-all-stats')
+ await screencap(t)
 })
 
 // selected because the gz changed in statistic classes
@@ -284,5 +284,5 @@ test('charlotte-all-stats', async (t) => {
  await t.resizeWindow(1400, 800)
  await t.eval(() => { location.reload() })
  await check_all_category_boxes(t)
- await screencap(t, 'article/charlotte-all-stats')
+ await screencap(t)
 })

react/test/comparison_test.ts

@@ -13,41 +13,41 @@ urbanstatsFixture('comparison test heterogenous', comparison_page(['San Marino c
 test('comparison-3-desktop-heterogenous', async (t) => {
  await t.resizeWindow(1400, 800)
  await t.eval(() => { location.reload() })
- await screencap(t, 'comparison/heterogenous-comparison-desktop')
+ await screencap(t)
 })
 
 test('comparison-3-mobile-heterogenous', async (t) => {
  await t.resizeWindow(400, 800)
  await t.eval(() => { location.reload() })
- await screencap(t, 'comparison/heterogenous-comparison-mobile')
+ await screencap(t)
 })
 
 urbanstatsFixture('comparison test homogenous (2)', comparison_page([upper_sgv, sw_sgv]))
 
 test('comparison-2-mobile', async (t) => {
  await t.resizeWindow(400, 800)
  await t.eval(() => { location.reload() })
- await screencap(t, 'comparison/basic-comparison-2-mobile')
+ await screencap(t)
 })
 
 urbanstatsFixture('comparison test homogenous (3)', comparison_page([upper_sgv, pasadena, sw_sgv]))
 
 test('comparison-3-desktop', async (t) => {
  await t.resizeWindow(1400, 800)
  await t.eval(() => { location.reload() })
- await screencap(t, 'comparison/basic-comparison-desktop')
+ await screencap(t)
 })
 
 test('comparison-3-mobile', async (t) => {
  await t.resizeWindow(400, 800)
  await t.eval(() => { location.reload() })
- await screencap(t, 'comparison/basic-comparison-mobile')
+ await screencap(t)
 })
 
 test('comparison-3-download', async (t) => {
  await t.resizeWindow(1400, 800)
  await t.eval(() => { location.reload() })
- await download_image(t, 'comparison/download-comparison')
+ await download_image(t)
 })
 
 test('comparison-3-add', async (t) => {
@@ -107,5 +107,5 @@ urbanstatsFixture('plotted-across-180', `${TARGET}/comparison.html?longnames=%5B
 test('comparison-3-plotted-across-180', async (t) => {
  await t.resizeWindow(1400, 800)
  await t.eval(() => { location.reload() })
- await screencap(t, 'comparison/plotted-across-180')
+ await screencap(t)
 })

react/test/histogram_test.ts

@@ -35,7 +35,7 @@ test('histogram-basic-article', async (t) => {
  await t.eval(() => { location.reload() })
  await t.click(Selector('.expand-toggle'))
  await download_or_check_histogram(t, 'histogram-basic-article')
- await screencap(t, 'histogram/histogram-basic-article')
+ await screencap(t)
 })
 
 test('histogram-basic-article-multi', async (t) => {
@@ -48,10 +48,10 @@ test('histogram-basic-article-multi', async (t) => {
  for (let i = 0; i < count; i++) {
  await t.click(Selector('.expand-toggle').nth(i))
  }
- await screencap(t, 'histogram/histogram-basic-article-multi')
- await download_image(t, 'histogram/histogram-basic-article-multi-screenshot')
- await download_histogram(t, 'histogram/histogram-basic-article-multi-histogram-0', 0)
- await download_histogram(t, 'histogram/histogram-basic-article-multi-histogram-1', 1)
+ await screencap(t)
+ await download_image(t)
+ await download_histogram(t, 0)
+ await download_histogram(t, 1)
 })
 
 urbanstatsFixture('comparison test heterogenous', comparison_page(['San Marino city, California, USA', pasadena, sw_sgv]))
@@ -62,7 +62,7 @@ test('histogram-basic-comparison', async (t) => {
  // select element with class name `expand-toggle`
  await t.click(Selector('.expand-toggle'))
  await download_or_check_histogram(t, 'histogram-basic-comparison')
- await screencap(t, 'histogram/histogram-basic-comparison')
+ await screencap(t)
 })
 
 urbanstatsFixture('comparison test heterogenous with nan', comparison_page(['India', 'China', pasadena]))
@@ -73,7 +73,7 @@ test('histogram-basic-comparison-nan', async (t) => {
  // select element with class name `expand-toggle`
  await t.click(Selector('.expand-toggle'))
  await download_or_check_histogram(t, 'histogram-basic-comparison-nan')
- await screencap(t, 'histogram/histogram-basic-comparison-nan')
+ await screencap(t)
 })
 
 urbanstatsFixture('comparison test heterogenous with nan in the middle', comparison_page(['India', pasadena, 'China']))
@@ -84,13 +84,13 @@ test('histogram-basic-comparison-nan-middle', async (t) => {
  // select element with class name `expand-toggle`
  await t.click(Selector('.expand-toggle'))
  await download_or_check_histogram(t, 'histogram-basic-comparison-nan-middle')
- await screencap(t, 'histogram/histogram-basic-comparison-nan-middle')
+ await screencap(t)
 })
 
 urbanstatsFixture('comparison ordering test', `${TARGET}/comparison.html?longnames=%5B%22USA%22%2C%22United+Kingdom%22%5D`)
 
 test('histogram-ordering', async (t) => {
  await t.click(Selector('.expand-toggle'))
  await download_or_check_histogram(t, 'histogram-ordering')
- await screencap(t, 'histogram/histogram-ordering')
+ await screencap(t)
 })

react/test/mapper_test.ts

@@ -16,7 +16,7 @@ async function check_geojson(t: TestController, path: string): Promise<void> {
 urbanstatsFixture('mapping', `${TARGET}/mapper.html?settings=H4sIAAAAAAAAA1WOzQ6CQAyEX8XUeCOGixeO%2BggejSEFy7Kh%2B5PdRSWEd7dLjMHe2plvpjMociqg76d60PYBFVwTJoICOs2JAlQzkMWGSbQOOZIoo22TdjZrafIk0O9UwBODzv4I1e2%2BLAW0jl2oo8RugKitYlrtPObDmbEddgcQIKDxGytrSxjgG2Rwq%2FlAkZJoFk3eL2NDPbF%2BQ27OpBRPUiTIiotnX64j0Iu06uWr8ngSd4OR%2FtNdNJLzAd2YY7skAQAA`)
 
 test('state-map', async (t) => {
- await screencap(t, 'state-map')
+ await screencap(t)
  await check_geojson(t, 'state-map-geojson')
 })
 
@@ -26,6 +26,6 @@ test('mapping-more-complex', async (t) => {
  await t.resizeWindow(1400, 800)
  await t.eval(() => { location.reload() })
  await t.wait(5000)
- await screencap(t, 'mapping-more-complex')
+ await screencap(t)
  await check_geojson(t, 'mapping-more-complex-geojson')
 })