feat: add typecheck and lint in CI for tests

samshara · samshara · commit c11fe18ee8e0 · 2024-11-27T13:59:46.000+05:45
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -24,6 +24,24 @@ concurrency:
   cancel-in-progress: false
 
 jobs:
+  typecheck-lint:
+    name: Typecheck & Lint
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: packages/e2e-tests
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Run Typecheck
+        run: yarn typecheck
+      - name: Run Biome Check
+        run: yarn biome:ci
   test-e2e:
     name: E2E Tests
     environment: 'test'
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
@@ -10,10 +10,13 @@
     },
     "scripts": {
         "install": "playwright install",
+        "typecheck": "tsc --noEmit",
         "test": "playwright test",
-        "format": "biome format --write ./tests/*",
-        "lint": "yarn biome lint --apply ./tests/*",
-        "biome:check": "biome check --apply ./tests/*"
+        "format": "biome format ./tests/* ./utils/*",
+        "lint": "yarn biome lint ./tests/* ./utils/*",
+        "biome:check": "biome check ./tests/* ./utils/*",
+        "biome:ci": "biome ci ./tests/* ./utils/*",
+        "biome:fix": "biome check --write ./tests/* ./utils/*"
     },
     "dependencies": {
         "@togglecorp/fujs": "^2.1.1",
diff --git a/packages/e2e-tests/tests/auth.setup.ts b/packages/e2e-tests/tests/auth.setup.ts
@@ -3,8 +3,15 @@ import { login } from '#utils/auth';
 const authFile = 'playwright/.auth/user.json';
 
 setup('authenticate', async ({ page }) => {
-    if (process.env.PLAYWRIGHT_USER_NAME && process.env.PLAYWRIGHT_USER_PASSWORD) {
-        await login(page, process.env.PLAYWRIGHT_USER_NAME, process.env.PLAYWRIGHT_USER_PASSWORD);
+    if (
+        process.env.PLAYWRIGHT_USER_NAME &&
+        process.env.PLAYWRIGHT_USER_PASSWORD
+    ) {
+        await login(
+            page,
+            process.env.PLAYWRIGHT_USER_NAME,
+            process.env.PLAYWRIGHT_USER_PASSWORD,
+        );
     }
 
     // End of authentication steps.
diff --git a/packages/e2e-tests/tests/field-report/fieldReport.spec.ts b/packages/e2e-tests/tests/field-report/fieldReport.spec.ts
@@ -4,7 +4,7 @@ import fixtureData from './fieldReport.json';
 
 test.use({ storageState: 'playwright/.auth/user.json' });
 
-test.describe('Field Report',  () => {
+test.describe('Field Report', () => {
     test('should create a new event type field report', async ({ page }) => {
         const {
             formName,
@@ -103,19 +103,15 @@ test.describe('Field Report',  () => {
         await page.getByRole('button', { name: 'Continue' }).click();
         // Situation Page
         await page.locator('input[name="num_injured"]').fill(numInjured);
-        await page
-            .locator('input[name="gov_num_injured"]')
-            .fill(govNumInjured);
+        await page.locator('input[name="gov_num_injured"]').fill(govNumInjured);
         await page
             .locator('input[name="other_num_injured"]')
             .fill(otherNumInjured);
         await page.locator('input[name="num_dead"]').fill(numDead);
         await page.locator('input[name="gov_num_dead"]').fill(govNumDead);
         await page.locator('input[name="other_num_dead"]').fill(otherNumDead);
         await page.locator('input[name="num_missing"]').fill(numMissing);
-        await page
-            .locator('input[name="gov_num_missing"]')
-            .fill(govNumMissing);
+        await page.locator('input[name="gov_num_missing"]').fill(govNumMissing);
         await page
             .locator('input[name="other_num_missing"]')
             .fill(otherNumMissing);
@@ -133,9 +129,7 @@ test.describe('Field Report',  () => {
         await page
             .locator('input[name="other_num_displaced"]')
             .fill(otherNumDisplaced);
-        await page
-            .locator('textarea[name="other_sources"]')
-            .fill(otherSources);
+        await page.locator('textarea[name="other_sources"]').fill(otherSources);
         // await page.frameLocator('iframe[title="Rich Text Area"]').locator('html').fill("Just the random data");
         // issue in Situational overview textbox
         await page.getByRole('button', { name: 'Continue' }).click();
@@ -497,28 +491,36 @@ test.describe('Field Report',  () => {
             await expect(detailLocator).toContainText(detail.email);
             await expect(detailLocator).toContainText(detail.phone);
         }
-          await page.getByRole('link', { name: 'Edit Report' }).click();
+        await page.getByRole('link', { name: 'Edit Report' }).click();
         // Input Value Assertions
         // Context Page
         // Status
-        const statusValue = page.locator('label').filter({ hasText: 'EventFirst report for this disaster' })
+        const statusValue = page
+            .locator('label')
+            .filter({ hasText: 'EventFirst report for this disaster' });
         await expect(statusValue).toBeChecked();
         // Assertions for Country, Region, Disaster Type, Date and Title
         const countryValue = page.locator('input[name="country"]');
         await expect(countryValue).toHaveValue(country);
-        const regionValue = page.locator('input[name="districts"]')
+        const regionValue = page.locator('input[name="districts"]');
         await expect(regionValue).toHaveValue(district);
         const disasterValue = page.locator('input[name="dtype"]');
         await expect(disasterValue).toHaveValue(disasterType);
         const dateValue = page.locator('input[name="start_date"]');
         await expect(dateValue).toHaveValue(date);
         const titleValue = page.getByPlaceholder('Example: Cyclone Cody');
-        await expect(titleValue).toHaveValue(`${newtitle} - ${title}`,);
+        await expect(titleValue).toHaveValue(`${newtitle} - ${title}`);
         // Government request international assistance
-        const govReqValue = page.locator('label').filter({ hasText: govRequest }).nth(1)
+        const govReqValue = page
+            .locator('label')
+            .filter({ hasText: govRequest })
+            .nth(1);
         await expect(govReqValue).toBeChecked();
         // National Society requests international assistance?
-        const nsReqValue = page.locator('label').filter({ hasText: nationalsocietyRequest }).nth(2)
+        const nsReqValue = page
+            .locator('label')
+            .filter({ hasText: nationalsocietyRequest })
+            .nth(2);
         await expect(nsReqValue).toBeChecked();
         await page.getByRole('button', { name: 'Continue' }).click();
         // Situation Page
@@ -538,7 +540,7 @@ test.describe('Field Report',  () => {
             { name: 'other_num_affected', value: otherNumAffected },
             { name: 'num_displaced', value: numDisplaced },
             { name: 'gov_num_displaced', value: govNumDisplaced },
-            { name: 'other_num_displaced', value: otherNumDisplaced }
+            { name: 'other_num_displaced', value: otherNumDisplaced },
         ];
         for (const { name, value } of numericDetailValues) {
             const inputValue = page.locator(`input[name="${name}"]`);
@@ -555,7 +557,7 @@ test.describe('Field Report',  () => {
             { name: 'num_assisted', value: numAssisted },
             { name: 'num_localstaff', value: numLocalstaff },
             { name: 'num_volunteers', value: numVolunteers },
-            { name: 'num_expats_delegates', value: numExpatsDelegates }
+            { name: 'num_expats_delegates', value: numExpatsDelegates },
         ];
         for (const { name, value } of assistedValues) {
             const inputValue = page.locator(`input[name="${name}"]`);
@@ -564,33 +566,51 @@ test.describe('Field Report',  () => {
         // Assertions for Actions Taken by National Society Red Cross Value
         const nsActions = [actionHuman, actionShelter, actionEvacuation];
         for (const action of nsActions) {
-            const label = page.locator('label').filter({ hasText: action }).first();
+            const label = page
+                .locator('label')
+                .filter({ hasText: action })
+                .first();
             await expect(label).toBeChecked();
         }
-        const nsValue = page.getByPlaceholder('Brief description of the action').first();
+        const nsValue = page
+            .getByPlaceholder('Brief description of the action')
+            .first();
         await expect(nsValue).toHaveText(nationalSocietySummary);
         // Assertions for Actions Taken by IFRC Value
         const ifrcActions = [actionHealth, actionShelter, actionCamp];
         for (const action of ifrcActions) {
-            const label = page.locator('label').filter({ hasText: action }).nth(1);
+            const label = page
+                .locator('label')
+                .filter({ hasText: action })
+                .nth(1);
             await expect(label).toBeChecked();
         }
-        const ifrcValue = page.getByPlaceholder('Brief description of the action').nth(1);
+        const ifrcValue = page
+            .getByPlaceholder('Brief description of the action')
+            .nth(1);
         await expect(ifrcValue).toHaveText(federationSummary);
         // Assertions for Actions Taken by RCRC Movements Value
         const rcrcActions = [actionFirst, actionPsychosocial, actionFood];
         for (const action of rcrcActions) {
-            const label = page.locator('label').filter({ hasText: action }).nth(2);
+            const label = page
+                .locator('label')
+                .filter({ hasText: action })
+                .nth(2);
             await expect(label).toBeChecked();
         }
-        const rcrcValue = page.getByPlaceholder('Brief description of the action').nth(2);
+        const rcrcValue = page
+            .getByPlaceholder('Brief description of the action')
+            .nth(2);
         await expect(rcrcValue).toHaveText(rcrcSummary);
         // Assertions for Information Bulletin
-        const bulletinValue = page.locator('label').filter({ hasText: informationBulletin });
+        const bulletinValue = page
+            .locator('label')
+            .filter({ hasText: informationBulletin });
         await expect(bulletinValue).toBeChecked();
         // Assertions for Actions Taken by Others Value
-        const actionsOtherValue = page.locator('textarea[name="actions_others"]');
-        await expect(actionsOtherValue).toHaveText(actionOther)
-        
-        });
+        const actionsOtherValue = page.locator(
+            'textarea[name="actions_others"]',
+        );
+        await expect(actionsOtherValue).toHaveText(actionOther);
+    });
 });
diff --git a/packages/e2e-tests/tests/loginLogout.spec.ts b/packages/e2e-tests/tests/loginLogout.spec.ts
@@ -8,7 +8,9 @@ test('should login', async ({ page }) => {
         process.env.PLAYWRIGHT_USER_PASSWORD,
     );
     await page.waitForURL('/');
-    await expect(page.getByRole('button', { name: 'Create a Report' })).toBeVisible();
+    await expect(
+        page.getByRole('button', { name: 'Create a Report' }),
+    ).toBeVisible();
 });
 
 test('should logout', async ({ page }) => {
diff --git a/packages/e2e-tests/utils/auth.ts b/packages/e2e-tests/utils/auth.ts
@@ -13,5 +13,7 @@ export async function login(page: Page, username: string, password: string) {
     // Wait for the final URL to ensure that the cookies are actually set.
     await page.waitForURL('/');
     // Alternatively, you can wait until the page reaches a state where all cookies are set.
-    await expect(page.getByRole('button', { name: 'Create a Report' })).toBeVisible();
+    await expect(
+        page.getByRole('button', { name: 'Create a Report' }),
+    ).toBeVisible();
 }
diff --git a/packages/e2e-tests/utils/common.ts b/packages/e2e-tests/utils/common.ts
@@ -1,4 +1,9 @@
-import { isNotDefined, isFalsyString, isTruthyString, isDefined } from '@togglecorp/fujs';
+import {
+    isDefined,
+    isFalsyString,
+    isNotDefined,
+    isTruthyString,
+} from '@togglecorp/fujs';
 
 function getMaximumFractionDigits(value: number) {
     if (value < 1000) {
@@ -25,8 +30,8 @@ interface FormatNumberOptions {
     unit?: Intl.NumberFormatOptions['unit'];
     maximumFractionDigits?: Intl.NumberFormatOptions['maximumFractionDigits'];
     compact?: boolean;
-    separatorHidden?: boolean,
-    language?: string,
+    separatorHidden?: boolean;
+    language?: string;
 }
 
 export function formatNumber(
@@ -35,13 +40,14 @@ export function formatNumber(
 ) {
     const formattingOptions: Intl.NumberFormatOptions = {};
 
-    const safeNumber = typeof value === 'string'
-        ? Number(value)
-        : value;
+    const safeNumber = typeof value === 'string' ? Number(value) : value;
 
     if (isNotDefined(options)) {
-        formattingOptions.maximumFractionDigits = getMaximumFractionDigits(safeNumber);
-        return new Intl.NumberFormat('default', formattingOptions).format(safeNumber);
+        formattingOptions.maximumFractionDigits =
+            getMaximumFractionDigits(safeNumber);
+        return new Intl.NumberFormat('default', formattingOptions).format(
+            safeNumber,
+        );
     }
 
     const {
@@ -71,11 +77,13 @@ export function formatNumber(
     if (isDefined(maximumFractionDigits)) {
         formattingOptions.maximumFractionDigits = maximumFractionDigits;
     } else {
-        formattingOptions.maximumFractionDigits = getMaximumFractionDigits(safeNumber);
+        formattingOptions.maximumFractionDigits =
+            getMaximumFractionDigits(safeNumber);
     }
 
-    const newValue = new Intl.NumberFormat(language, formattingOptions)
-        .format(safeNumber);
+    const newValue = new Intl.NumberFormat(language, formattingOptions).format(
+        safeNumber,
+    );
 
     return newValue;
-}
+}

Original file line number	Diff line number	Diff line change
`@@ -13,5 +13,7 @@ export async function login(page: Page, username: string, password: string) {`
`13`	`13`	`// Wait for the final URL to ensure that the cookies are actually set.`
`14`	`14`	`await page.waitForURL('/');`
`15`	`15`	`// Alternatively, you can wait until the page reaches a state where all cookies are set.`
`16`		`- await expect(page.getByRole('button', { name: 'Create a Report' })).toBeVisible();`
	`16`	`+ await expect(`
	`17`	`+ page.getByRole('button', { name: 'Create a Report' }),`
	`18`	`+ ).toBeVisible();`
`17`	`19`	`}`