fixes

_docs/contributing/development-environment/index.md

@@ -15,13 +15,15 @@ There are a few options for running Playnite Web for local development. Choose a
 
 ## Running Playnite Web
 
-| Application      | Command                                           | Notes                                                                                                                                                                                                      |
-| :--------------- | :------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Playnite Web App | `yarn nx run playnite-web:start`                  | Run Playnite Web application locally. Navigate to [http://localhost:3000](http://localhost:3000) in a browser. Environment variables are pulled from `./apps/playnite-web/local.env`.                      |
-| Playnite Web App | `yarn nx run playnite-web:test/components`        | Run component tests for development.                                                                                                                                                                       |
-| Playnite Web App | `yarn nx run playnite-web:test/components/update` | Run component tests with intention to update a baseline screenshot.                                                                                                                                        |
-| Playnite Web App | `yarn nx run playnite-web-app:test/e2e`           | Run end-to-end (e2e) tests for development (including visual regression capabilities). A consistent database restored along with consistent game assets. This ensures a reliable data set to test against. |
-| Playnite Web App | `yarn nx run playnite-web-app:test/e2e/update`    | Run end-to-end (e2e) tests with intention to update a baseline screenshot.                                                                                                                                 |
+| Application      | Command                                                            | Notes                                                                                                                                                                                                      |
+| :--------------- | :----------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Playnite Web App | `yarn nx run playnite-web:start`                                   | Run Playnite Web application locally. Navigate to [http://localhost:3000](http://localhost:3000) in a browser. Environment variables are pulled from `./apps/playnite-web/local.env`.                      |
+| Playnite Web App | `yarn nx run playnite-web:test/components`                         | Run component tests for development.                                                                                                                                                                       |
+| Playnite Web App | `yarn nx run playnite-web:test/components/update`                  | Run component tests with intention to update a baseline screenshot.                                                                                                                                        |
+| Playnite Web App | `yarn nx run playnite-web:test/components/update $GLOB_FILE_MATCH` | Run component tests with intention to update baseline screenshots. Runs only tests matching glob CLI parameter; e.g. `yarn nx run playnite-web:test/components/update FilterForm*`                         |
+| Playnite Web App | `yarn nx run playnite-web-app:test/e2e`                            | Run end-to-end (e2e) tests for development (including visual regression capabilities). A consistent database restored along with consistent game assets. This ensures a reliable data set to test against. |
+| Playnite Web App | `yarn nx run playnite-web-app:test/e2e/update`                     | Run end-to-end (e2e) tests with intention to update a baseline screenshot.                                                                                                                                 |
+| Playnite Web App | `yarn nx run playnite-web-app:test/e2e/update $GLOB_FILE_MATCH`    | Run end-to-end (e2e) tests with intention to update a baseline screenshot. Runs only tests matching glob CLI parameter' e.g. `yarn nx run playnite-web-app:test/e2e/update **/browse*`                     |
 
 ## Playnite Web Plugin Development
 

apps/playnite-web/cypress.config.mjs

@@ -29,15 +29,15 @@ const config = {
               `--window-size=${viewportWidth},${viewportHeight}`,
             )
             launchOptions.args.push(
-              `--force-device-scale-factor=${process.env.LOCAL === 'true' ? '2' : '1'}`,
+              `--force-device-scale-factor=${process.env.LOCAL === 'true' ? process.env.SCALE && '1' : '1'}`,
             )
             break
           case 'electron':
           default:
             launchOptions.preferences.width = viewportWidth
             launchOptions.preferences.height = viewportHeight
             launchOptions.args.push(
-              `--force-device-scale-factor=${process.env.LOCAL === 'true' ? '2' : '1'}`,
+              `--force-device-scale-factor=${process.env.LOCAL === 'true' ? process.env.SCALE && '1' : '1'}`,
             )
         }
 
@@ -148,15 +148,15 @@ const config = {
               `--window-size=${viewportWidth},${viewportHeight}`,
             )
             launchOptions.args.push(
-              `--force-device-scale-factor=${process.env.LOCAL === 'true' ? '2' : '1'}`,
+              `--force-device-scale-factor=${process.env.LOCAL === 'true' ? process.env.SCALE && '1' : '1'}`,
             )
             break
           case 'electron':
           default:
             launchOptions.preferences.width = viewportWidth
             launchOptions.preferences.height = viewportHeight
             launchOptions.args.push(
-              `--force-device-scale-factor=${process.env.LOCAL === 'true' ? '2' : '1'}`,
+              `--force-device-scale-factor=${process.env.LOCAL === 'true' ? process.env.SCALE && '1' : '1'}`,
             )
         }
 

apps/playnite-web/cypress/e2e/on-deck/index.cy.ts

@@ -12,15 +12,10 @@ describe('On deck.', () => {
 - Each game shows the game's cover image and name.
 - Playing playlist shows games that have the game state: "On Deck".`, () => {
         cy.visit('/')
-
-        cy.contains('h4', 'On Deck').parents('[data-test="playlist"]')
-        cy.get('[data-test="GameFigure"]').should('have.length', 8)
-        cy.get('[data-test="GameFigure"]')
-          .eq(0)
-          .should('have.text', 'Star Wars Outlaws')
+        cy.wait(300)
 
         cy.compareSnapshot({
-          name: 'on-deck-playlist',
+          name: `on-deck-playlist_${breakpointName}`,
         })
       })
     })

apps/playnite-web/project.json

@@ -10,10 +10,12 @@
         "{projectRoot}/_packaged",
         "{projectRoot}/.test-runs",
         "{projectRoot}/build",
-        "{projectRoot}/.nyc_output"
+        "{projectRoot}/.nyc_output",
+        "{projectRoot}/visual-regression-tests/component-report",
+        "{projectRoot}/visual-regression-tests/e2e-report"
       ],
       "options": {
-        "command": "yarn rimraf server.production.cjs .dist _packaged .test-runs build .nyc_output",
+        "command": "yarn rimraf server.production.cjs .dist _packaged .test-runs build .nyc_output visual-regression-tests/*report",
         "cwd": "{projectRoot}"
       }
     },
@@ -143,10 +145,7 @@
       "dependsOn": ["test/components:ci/local"],
       "options": {
         "parallel": false,
-        "commands": [
-          "yarn tsx scripts/component-for-update.ts",
-          "yarn cypress-image-diff-html-report start --reportJsonDir visual-regression-tests/component-report --autoOpen"
-        ],
+        "command": "yarn tsx scripts/component-for-update.ts",
         "cwd": "{projectRoot}"
       }
     },
@@ -198,7 +197,7 @@
           "commands": [
             "yarn nx run playnite-web-app:start/services:ci",
             "yarn nx run playnite-web-app:package/instrumented",
-            "yarn start-server-and-test 'yarn cross-env DEBUG=\"playnite*\" NODE_ENV=production yarn node _packaged/server.production.cjs' http://localhost:3000 'yarn cross-env TEST=e2e CI=true LOCAL=true yarn cypress run --e2e --browser electron'"
+            "yarn start-server-and-test 'yarn cross-env DEBUG=\"playnite*\" NODE_ENV=production yarn node _packaged/server.production.cjs' http://localhost:3000 'yarn cross-env TEST=e2e CI=true LOCAL=true yarn cypress open --e2e --browser electron'"
           ]
         }
       }
@@ -218,10 +217,7 @@
       ],
       "options": {
         "parallel": false,
-        "commands": [
-          "yarn tsx scripts/e2e-for-update.ts",
-          "yarn cypress-image-diff-html-report start --reportJsonDir visual-regression-tests/e2e-report --autoOpen"
-        ],
+        "command": "yarn tsx scripts/e2e-for-update.ts",
         "cwd": "{projectRoot}",
         "env": {
           "INSTRUMENT": "true"

apps/playnite-web/scripts/component-for-update.ts

@@ -1,7 +1,14 @@
 import sh from 'shelljs'
 
 async function run() {
-  sh.exec(`yarn nx run playnite-web-app:test/components:ci/local`)
+  const [, , specFilter] = process.argv
+  sh.exec(
+    `yarn cypress run --component --browser electron ${specFilter && `--spec src/**/__component_tests__/${specFilter}`}`,
+  )
+
+  sh.exec(
+    'yarn cypress-image-diff-html-report start --reportJsonDir visual-regression-tests/component-report --autoOpen',
+  )
 }
 
 run()

apps/playnite-web/scripts/e2e-for-update.ts

@@ -1,7 +1,16 @@
 import sh from 'shelljs'
-
 async function run() {
-  sh.exec(`yarn nx run playnite-web-app:test/e2e:ci/local`)
+  sh.exec('yarn nx run playnite-web-app:start/services:ci')
+  sh.exec('yarn nx run playnite-web-app:package/instrumented')
+
+  const [, , specFilter] = process.argv
+  sh.exec(
+    `yarn start-server-and-test 'yarn cross-env DEBUG=\"playnite*\" NODE_ENV=production yarn node _packaged/server.production.cjs' http://localhost:3000 'yarn cross-env TEST=e2e CI=true LOCAL=true yarn cypress run --e2e --browser electron ${specFilter && `--spec cypress/e2e/**/${specFilter}`}'`,
+  )
+
+  sh.exec(
+    `yarn cypress-image-diff-html-report start --reportJsonDir visual-regression-tests/e2e-report --autoOpen`,
+  )
 }
 
 run()