web-test-runner fixups

For awhile, the wtr tests on firefox have been timing out. This happened
after an upgrade to playwright a few versions ago. Developers will need to
re-run the tests CI jobs multiple times to get a pass.

This change fixes that. The web test runner config has been modified
to adjust the concurrency only for firefox.

Other changes:
- Rename test-helpers.test.ts to test-helpers.ts so it won't count as a test file. (And fix imports)
- Add missing import on webstatus-app.test.ts
- Reduce the number of args passed in package.json for testing since now
  we rely on the web test runner config.

Author: jcscottiii

frontend/package.json

@@ -16,8 +16,8 @@
     "postinstall": "./scripts/postinstall.js",
     "start": "node dist/server/index.js",
     "cp-imgs": "mkdir -p build/public/img && cp -v -r src/static/img/* build/public/img && cp -v .postinstall/static/img/* build/public/img",
-    "test": "npm run build && npm run cp-imgs && wtr --coverage --node-resolve --playwright --browsers chromium firefox webkit",
-    "test:watch": "npm run build && concurrently -k --raw \"tsc --watch --preserveWatchOutput\"  \"wtr --watch --coverage --node-resolve --playwright --browsers chromium firefox webkit\" "
+    "test": "npm run build && npm run cp-imgs && wtr --coverage",
+    "test:watch": "npm run build && concurrently -k --raw \"tsc --watch --preserveWatchOutput\"  \"wtr --watch --coverage\" "
   },
   "devDependencies": {
     "@browser-logos/chrome": "^2.0.0",

frontend/src/static/js/components/test/test-helpers.test.ts frontend/src/static/js/components/test/test-helpers.ts

@@ -18,6 +18,7 @@ import {assert, fixture, html} from '@open-wc/testing';
 
 import {type AppSettings} from '../../contexts/settings-context.js';
 import {type WebstatusApp} from '../webstatus-app.js';
+import '../webstatus-app.js';
 
 describe('webstatus-app', () => {
   it('can be added to the page with the settings', async () => {

frontend/src/static/js/components/test/webstatus-app.test.ts

@@ -25,7 +25,7 @@ import {Task} from '@lit/task';
 import {WebStatusDataObj, WebstatusGChart} from '../webstatus-gchart.js';
 import {TemplateResult, html} from 'lit';
 import {customElement} from 'lit/decorators.js';
-import {createMockIterator, taskUpdateComplete} from './test-helpers.test.js';
+import {createMockIterator, taskUpdateComplete} from './test-helpers.js';
 
 // Interface for the data used in LineChartMetricData
 interface MetricDataPoint {

frontend/src/static/js/components/test/webstatus-line-chart-panel.test.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import {playwrightLauncher} from '@web/test-runner-playwright';
 const filteredLogs = [
   'Running in dev mode',
   'Lit is in dev mode',
@@ -25,7 +25,6 @@ const filteredLogs = [
 
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   concurrency: 4,
-  concurrentBrowsers: 1,
   /** Resolve bare module imports */
   nodeResolve: {
     exportConditions: ['browser', 'development'],
@@ -65,4 +64,18 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   testsFinishTimeout: 1000 * 60 * 1, // (1 min)
   // mocha config https://mochajs.org/api/mocha
   testFramework: {config: {timeout: 30000}},
+
+  browsers: [
+    playwrightLauncher({
+      product: 'chromium',
+    }),
+    playwrightLauncher({
+      product: 'firefox',
+      // For some we need to limit the concurrency for Firefox to ensure test stability.
+      concurrency: 1,
+    }),
+    playwrightLauncher({
+      product: 'webkit',
+    }),
+  ],
 });