chore: add TypeScript strict checking command

Author: DuckerQA

.husky/pre-commit

@@ -1 +1,3 @@
-npm run lint
+npm run lint
+npm run format:check
+npm run tsc:check

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "ms-playwright.playwright",
     "eamodio.gitlens",
     "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "streetsidesoftware.code-spell-checker"
   ]
 }

.vscode/settings.json

@@ -2,6 +2,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.organizeImports": true
-  }
+    "source.organizeImports": "explicit"
+  },
+  "cSpell.words": ["trivago", "tseslint"]
 }

README.md

@@ -5,7 +5,13 @@
   "main": "index.js",
   "scripts": {
     "format": "npx prettier --write .",
-    "lint": "npx eslint . --max-warnings 0"
+    "format:check": "npx prettier . --check \"!**.ts\"",
+    "lint": "npx eslint . --max-warnings 0",
+    "tsc:check": "npx tsc --noEmit --pretty --strict",
+    "test": "npx playwright test",
+    "test:headed": "npx playwright test -- --headed",
+    "test:ui": "npm run test -- --ui",
+    "show-report": "npx playwright show-report"
   },
   "keywords": [],
   "author": "",

package.json

@@ -2,58 +2,24 @@ import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
   testDir: './tests',
+  timeout: 60_000,
+  expect: {
+    timeout: 10_000,
+  },
   fullyParallel: true,
+  retries: 0,
+  workers: undefined,
   reporter: 'html',
   use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    actionTimeout: 0,
+    trace: 'retain-on-failure',
+    video: 'retain-on-failure',
+    screenshot: 'only-on-failure',
   },
-
-  /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
-
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
   ],
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
 });

playwright.config.ts

@@ -472,7 +472,6 @@ async function checkNumberOfCompletedTodosInLocalStorage(
   page: Page,
   expected: number,
 ) {
-  console.log('test');
   return await page.waitForFunction((e) => {
     return (
       JSON.parse(localStorage['react-todos']).filter(

tests-examples/demo-todo-app.spec.ts

@@ -1,3 +1,4 @@
+import { PlaywrightPage } from './playwright.page';
 import { expect, test } from '@playwright/test';
 
 test('has title', async ({ page }) => {
@@ -17,3 +18,12 @@ test('get started link', async ({ page }) => {
     page.getByRole('heading', { name: 'Installation' }),
   ).toBeVisible();
 });
+
+test('get started link pom', async ({ page }) => {
+  const playwrightPage = new PlaywrightPage(page);
+  await playwrightPage.goto();
+  await playwrightPage.button.click();
+  await expect(
+    page.getByRole('heading', { name: 'Installation' }),
+  ).toBeVisible();
+});

tests/example.spec.ts

@@ -0,0 +1,11 @@
+import { Page } from '@playwright/test';
+
+export class PlaywrightPage {
+  button = page.getByRole('link', { name: 'Get started' });
+
+  constructor(private page: Page) {}
+
+  async goto(): Promise<void> {
+    await this.page.goto('https://playwright.dev/');
+  }
+}

tests/playwright.page.ts

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "strict": true,
+    "module": "CommonJS",
+    "sourceMap": true
+  }
+}