Merge pull request #622 from microsoft/staging

May Sprint 3 (Due May 31st) Release

.eslintrc

@@ -1,5 +1,6 @@
 extends: 
   - '@essex/eslint-config'
+  - 'plugin:playwright/playwright-test'
 
 rules:
   # All logging should go through the 'debug' library
@@ -51,4 +52,5 @@ overrides:
       - "packages/acceptance-tests/**"
     rules: 
       # Not idiomatic for acceptance tests
-      '@essex/adjacent-await': off
+      '@essex/adjacent-await': off
+      'jest/no-done-callback': off

.gitignore

@@ -46,4 +46,25 @@ launch.json
 
 # LogFiles
 packages/webapp/test-output.html
-*-*.log*
+*-*.log*
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+# Yarn Ignores
+/packages/acceptance-tests/.pnp.*
+/packages/acceptance-tests/.yarn/*
+/packages/acceptance-tests/!.yarn/patches
+/packages/acceptance-tests/!.yarn/plugins
+/packages/acceptance-tests/!.yarn/releases
+/packages/acceptance-tests/!.yarn/sdks
+/packages/acceptance-tests/!.yarn/versions
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/playwright/.cache/

README.md

@@ -40,6 +40,10 @@ The following branch naming patterns are utilized for different kinds of efforts
 - Testing: `test/*`
 - Refactoring: `refactor/*`
 
+## Testing
+
+Please refer to the [readme](packages/acceptance-tests/README.md#community-based-organization-operations-suite-cbo-suite) in `packages/acceptance-tests` for testing instructions.
+
 ## Localization
 
 The application is developed to support multiple locales. Text displayed to the user, either directly on the site or through emails (ex: password reset) will use the locale selected by the user to determine the language. To achieve this, all text displayed to the user must be read from asset files and must not be hardcoded in the application.
@@ -50,6 +54,7 @@ There are two places in the application where localized strings exist:
 - [Web Application](packages/webapp)
 
 Both of those projects have a locales subfolder (src/locales). In turn, each supported locale will have a subfolder in the locale folder. The text to display is captured in JSON files structured by locale folder. The JSON files are heirarchical key -> value pairs that map keys to their display text values. For example, the following details basic text keys for the page title and account header.
+
 ```
 {
   "pageTitle": "My Profile",
@@ -70,9 +75,11 @@ Both of those projects have a locales subfolder (src/locales). In turn, each sup
   }
 }
 ```
+
 A few things to note from the above:
+
 - `account.header.title` would be used in the application to display `My Profile`
-- The keys starting with an _ and ending with `.comment` do not need to be translated as they are informational only
+- The keys starting with an \_ and ending with `.comment` do not need to be translated as they are informational only
 
 When it comes time to display text to the user, the application will use the specified locale to lookup the text to use by key. The locale will default to en-US if not otherwise specified. Furthermore, if a key does not exist for the specified locale, then the text will be taken from the en-US locale file.
 

SECURITY.md

@@ -12,19 +12,19 @@ If you believe you have found a security vulnerability in any Microsoft-owned re
 
 Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://aka.ms/opensource/security/create-report).
 
-If you prefer to submit without logging in, send email to [[email protected]](mailto:[email protected]).  If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://aka.ms/opensource/security/pgpkey).
+If you prefer to submit without logging in, send email to [[email protected]](mailto:[email protected]). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://aka.ms/opensource/security/pgpkey).
 
-You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://aka.ms/opensource/security/msrc). 
+You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://aka.ms/opensource/security/msrc).
 
 Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
 
-  * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
-  * Full paths of source file(s) related to the manifestation of the issue
-  * The location of the affected source code (tag/branch/commit or direct URL)
-  * Any special configuration required to reproduce the issue
-  * Step-by-step instructions to reproduce the issue
-  * Proof-of-concept or exploit code (if possible)
-  * Impact of the issue, including how an attacker might exploit the issue
+- Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
+- Full paths of source file(s) related to the manifestation of the issue
+- The location of the affected source code (tag/branch/commit or direct URL)
+- Any special configuration required to reproduce the issue
+- Step-by-step instructions to reproduce the issue
+- Proof-of-concept or exploit code (if possible)
+- Impact of the issue, including how an attacker might exploit the issue
 
 This information will help us triage your report more quickly.
 

package.json

@@ -33,6 +33,7 @@
     "chalk": "^4.1.2",
     "docker-compose": "^0.23.17",
     "eslint": "^8.10.0",
+    "eslint-plugin-playwright": "^0.9.0",
     "husky": "^7.0.4",
     "jest": "^27.5.1",
     "lint-staged": "^11.2.6",

packages/acceptance-tests/.gitignore

@@ -1 +1,17 @@
-screenshots/
+screenshots/
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/playwright/.cache/

packages/acceptance-tests/README.md

@@ -0,0 +1,118 @@
+# Community-Based Organization Operations Suite (CBO Suite)
+
+The CBO Suite is a case-management web application that enables CBOs and members of CBOs to work together more effectively.
+
+## Getting Started
+
+### Prerequisites
+
+- NodeJS LTS Release
+- Yarn v1 global installation (`npm i -g yarn`)
+- docker-compose OR a MongoDB connection string defined in the environment variable `DB_CONNECTION_STRING`.
+
+If you are using GitHub Codespaces with the provided devcontainer, these prerequisites are provided.
+
+To start the application:
+
+    > yarn
+    > yarn start:db // (optional) for local development
+    > yarn assets:
+    > yarn start:
+
+## Before Development
+
+To begin testing, run the following commands in the root of the project.
+
+    > yarn install:playwright_deps
+
+Now you can start running tests, there are two options for running tests, the first will act exactly as the CI will, the second will only work if a local copy of the project is currently running
+
+If you'd like to run the code similar to the CI, run:
+
+    > yarn acceptance:test
+
+If you'd like to run the tests while you have a local copy of the project running, run:
+
+    > cd /package/acceptance-tests
+    > yarn pwrun
+
+## Development
+
+> **_Note:_** The following commands require the user to be in `/package/acceptance-tests` folder, make sure to
+
+    > cd packages/acceptance-tests
+
+We use playwright for all of our acceptance tests, the docs can be found here: https://playwright.dev/docs/intro
+
+### Creating a simple test
+
+If you haven't already, create a file ending with `.spec.ts` in the `test/specs/` directory
+
+To make testing development easier for everyone, we can use playwrights build in codegen feature. To get started simply run
+
+    > yarn codegen
+
+You can then go though your entire testing steps and see what playwright generates for you. From there you may copy the code in the playwright window and paste it into your `.spec.ts` file.
+
+### Running a specific test
+
+Sometimes its useful to run a specific test. To do this simply run
+
+    > yarn playwright test -g "YOUR_TEST_NAME"
+
+## Debugging
+
+### Headed mode
+
+Headed mode will open a browser window and run the test in that window.
+
+    > yarn playwright test -g "YOUR_TEST_NAME" --headed
+
+### Debug mode
+
+Debug mode will open a browser window, run the test in the browser, and put a breakpoint at the very beginning.
+
+    > yarn playwright test -g "YOUR_TEST_NAME" --debug
+
+### VSCode Extension
+
+Playwright comes with a VSCode extension that can create, run and debug tests from within VSCode. The extension can be found here: https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright
+
+> **_Note:_** Make sure you cd into `packages/acceptance-tests`, you may need to temporarily remove the
+> `
+> "workspaces": [
+
+    "packages/*"
+
+],
+`line from the parent directory`package.json`file before running`npm i --save-dev @playwright/test`. Once installed you will need to open `packages/acceptance-tests` in a separate vscode window to allow for test debugging.
+
+### Errors
+
+When trying to run your tests, you may come across `TypeError: Cannot read properties of undefined (reading 'mode')`
+
+The reason this is happening is because your test async function may look like this (note the `{ page }` attribute):
+
+    test('test', async ({ page }) => {
+
+To fix this issue, change your test to:
+
+    import type { Page } from '@playwright/test'
+
+    test.describe('test description', () => {
+        let page: Page
+
+        test.beforeEach(async ({ browser }) => {
+            page = await browser.newPage()
+        })
+
+        test.afterAll(async () => {
+            await page.close()
+        })
+
+        test.describe('test description', () => {
+            test('test', async () => {
+                ...
+            })
+        })
+    })

packages/acceptance-tests/config/ci.json

@@ -1,5 +1,5 @@
 {
 	"timeout": 60000,
 	"video": null,
-	"trace": null
+	"trace": "off"
 }

packages/acceptance-tests/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "scripts": {
     "pwrun": "playwright test",
-    "pwrun_all": "yarn pwrun --browser=all",
+    "pwrun_all": "yarn pwrun",
     "pwrun_all_ci": "NODE_CONFIG_ENV=ci yarn pwrun_all",
     "pwrun_test": "NODE_CONFIG_ENV=test yarn pwrun",
     "pwgen": "playwright codegen -b chromium http://localhost:3000",
@@ -13,10 +13,11 @@
     "test-with-api": "WAIT_ON_TIMEOUT=600000 start-server-and-test 'yarn start:api:static' 'http-get://localhost:3030/.well-known/apollo/server-health' 'yarn pwrun_all_ci'",
     "test-with-app": "start-server-and-test 'yarn start:webapp:static' 'http-get://localhost:3000/' 'yarn test-with-api'",
     "install:playwright_deps": "playwright install-deps && yarn playwright install",
-    "acceptance:test": "yarn test-with-app"
+    "acceptance:test": "yarn test-with-app",
+    "codegen": "playwright codegen localhost:3000"
   },
   "devDependencies": {
-    "@playwright/test": "^1.19.2",
+    "@playwright/test": "^1.22.2",
     "@tsconfig/node14": "^1.0.1",
     "@types/config": "^0.0.41",
     "@types/node": "^17.0.21",

packages/acceptance-tests/playwright.config.ts

@@ -3,8 +3,8 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import type { PlaywrightTestConfig } from '@playwright/test'
+import { devices } from '@playwright/test'
 import config from 'config'
-import path from 'path'
 
 const playwrightConfiguration: PlaywrightTestConfig = {
 	workers: config.get('workers') ?? undefined,
@@ -16,6 +16,34 @@ const playwrightConfiguration: PlaywrightTestConfig = {
 		video: config.get('video') ?? undefined,
 		trace: config.get('trace') ?? undefined
 	},
-	outputDir: path.join(__dirname, 'test-results')
+	outputDir: './test-results',
+	testDir: './test/specs',
+
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: {
+				...devices['Desktop Chrome']
+			}
+		},
+
+		{
+			name: 'firefox',
+			use: {
+				...devices['Desktop Firefox']
+			}
+		},
+
+		{
+			name: 'webkit',
+			use: {
+				...devices['Desktop Safari']
+			}
+		}
+	]
 }
 export default playwrightConfiguration

packages/acceptance-tests/test/specs/dashboard.spec.ts

@@ -21,15 +21,19 @@ test.describe('The Dashboard Page', () => {
 		await po.dashboardPage.waitForLoad()
 	})
 
-	test('can open up the "Create Request" panel', async ({ page }) => {
+	test.afterAll(async () => {
+		await page.close()
+	})
+
+	test('can open up the "Create Request" panel', async () => {
 		await po.dashboardPage.clickNewRequest()
 		await po.newRequestPanel.waitForLoad()
 		const isSubmitEnabled = await po.newRequestPanel.isSubmitEnabled()
 		expect(isSubmitEnabled).toBe(false)
 		await po.newRequestPanel.closePanel()
 	})
 
-	test('can open up the "New Client" panel', async ({ page }) => {
+	test('can open up the "New Client" panel', async () => {
 		await po.dashboardPage.clickNewClient()
 		await po.newClientPanel.waitForLoad()
 		const isSubmitEnabled = await po.newClientPanel.isSubmitEnabled()
@@ -38,21 +42,21 @@ test.describe('The Dashboard Page', () => {
 		await po.newClientPanel.closePanel()
 	})
 
-	test('can expand the request panel', async ({ page }) => {
+	test('can expand the request panel', async () => {
 		await po.dashboardPage.expandRequestList()
 		await po.dashboardPage.waitForRequestData()
 		const numRequests = await po.dashboardPage.countRequestsVisible()
 		expect(numRequests).toBeGreaterThan(0)
 	})
 
-	test('can expand the closed request panel', async ({ page }) => {
+	test('can expand the closed request panel', async () => {
 		await po.dashboardPage.expandClosedRequestList()
 		await po.dashboardPage.waitForClosedRequestData()
 		const numRequests = await po.dashboardPage.countClosedRequestsVisible()
 		expect(numRequests).toBeGreaterThan(0)
 	})
 
-	test('can start a service using the quickstart menu', async ({ page }) => {
+	test('can start a service using the quickstart menu', async () => {
 		await po.dashboardPage.clickStartService()
 		await po.serviceQuickstartPanel.waitForLoad()
 		const availableServices = await po.serviceQuickstartPanel.getAvailableServices()

packages/acceptance-tests/test/specs/header.spec.ts

@@ -21,6 +21,10 @@ test.describe('The application header', () => {
 		await po.dashboardPage.waitForLoad()
 	})
 
+	test.afterAll(async () => {
+		await page.close()
+	})
+
 	test('can navigate to dashboard page', async () => {
 		await po.servicesPage.open()
 		await po.servicesPage.waitForLoad()