Feature: add general playwright tests

.github/workflows/linter.yml

@@ -164,6 +164,8 @@ jobs:
     needs: install
     runs-on: ubuntu-latest
     if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    outputs:
+      static_web_app_url: ${{ steps.builddeploy.outputs.static_web_app_url }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
@@ -187,6 +189,11 @@ jobs:
           app_location: "/" # App source code path
           app_artifact_location: "build" # Built app content directory - optional
 
+      - name: Set url
+        run: |
+          echo "::set-output name=static_web_app_url::$PLAYWRIGHT_TESTS_BASE_URL"
+          echo $PLAYWRIGHT_TESTS_BASE_URL
+
   close_pull_request_job:
     if: github.event_name == 'pull_request' && github.event.action == 'closed'
     runs-on: ubuntu-latest

.gitignore

@@ -25,3 +25,5 @@ yarn-error.log*
 .idea
 .vs
 *.xml
+playwright-report/index.html
+test-results

.vscode/extensions.json

@@ -18,7 +18,9 @@
 		"ms-vscode.sublime-keybindings",
 		"redhat.vscode-yaml",
 		"redhat.vscode-commons",
-		"eamodio.gitlens"
+		"eamodio.gitlens",
+		"ms-playwright.playwright",
+		"nitayneeman.playwright-snippets"
 	],
 	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
 	"unwantedRecommendations": [

README.md

@@ -1,31 +1,31 @@
 # Microsoft Graph Explorer V4
+
 [![Build Status](https://dev.azure.com/japhethobalak/japhethobalak/_apis/build/status/microsoftgraph.microsoft-graph-explorer-v2?branchName=dev)](https://dev.azure.com/japhethobalak/japhethobalak/_build/latest?definitionId=4&branchName=dev)
 
 The [Microsoft Graph Explorer V4](https://developer.microsoft.com/graph/graph-explorer) lets developers quickly navigate and test API endpoints.
 
 The Graph Explorer is written in [TypeScript](https://www.typescriptlang.org/) and powered by:
-* [React](https://reactjs.org/)
-* [Office Fabric](https://dev.office.com/fabric)
 
+- [React](https://reactjs.org/)
+- [Office Fabric](https://dev.office.com/fabric)
 
 ## Running the explorer locally
 
-* `npm install` to install project dependencies. `npm` is installed by default with [Node.js](https://nodejs.org/).
-* `npm start` starts the TypeScript compiler in watch mode and the local server. It should open your browser automatically with the Graph Explorer at [http://localhost:3000/](http://localhost:3000).
+- `npm install` to install project dependencies. `npm` is installed by default with [Node.js](https://nodejs.org/).
+- `npm start` starts the TypeScript compiler in watch mode and the local server. It should open your browser automatically with the Graph Explorer at [http://localhost:3000/](http://localhost:3000).
+
+### Enabling authentication with your own credentials
 
-#### Enabling authentication with your own credentials
-* Sign in to your Microsoft account (or Create one) at the [Microsoft Azure Portal](https://ms.portal.azure.com/).
-* Find the Azure service named App registrations. If you haven't used this service before, you might need to search for it in the search bar.
-* In the App registrations page, click `+ New registration`. You will be redirected to a form in the Microsoft Azure portal where you Register an application. Fill out the form and set the Redirect URI to a `Single-page application (SPA)` with `http://localhost:3000`. You can also set it from authentication tab in the app you have just created.
-* Create a `.env` file at the root of the project/repo and add the following keys.
-    - REACT_APP_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
-    - REACT_APP_INSTRUMENTATION_KEY=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
-Where `REACT_APP_CLIENT_ID` is the `Application (client) ID` from the Azure portal and `REACT_APP_INSTRUMENTATION_KEY` is the `Object ID` from the portal.
+- Sign in to your Microsoft account (or Create one) at the [Microsoft Azure Portal](https://ms.portal.azure.com/).
+- Find the Azure service named App registrations. If you haven't used this service before, you might need to search for it in the search bar.
+- In the App registrations page, click `+ New registration`. You will be redirected to a form in the Microsoft Azure portal where you Register an application. Fill out the form and set the Redirect URI to a `Single-page application (SPA)` with `http://localhost:3000`. You can also set it from authentication tab in the app you have just created.
+- Create a `.env` file at the root of the project/repo and add the following keys. - REACT_APP_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx - REACT_APP_INSTRUMENTATION_KEY=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
+  Where `REACT_APP_CLIENT_ID` is the `Application (client) ID` from the Azure portal and `REACT_APP_INSTRUMENTATION_KEY` is the `Object ID` from the portal.
 
 ## Other commands
-* `npm test` to run tests from the command line for scenarios like parsing metadata and functional explorer tests.
-* `npm run ci` to run accessibility tests from the command line
-* `npm run lint` linting your files
+
+- `npm test` to run tests from the command line for scenarios like parsing metadata and functional explorer tests.
+- `npm run lint` linting your files
 
 ## Getting Help & Guides
 ### Where To Get Support
@@ -46,26 +46,34 @@ Are you new to Graph Explorer or would like to raise a bug or request a feature?
 
 * Refer to [Microsoft Graph Quick Start](https://developer.microsoft.com/en-us/graph/quick-start) to get a pre-initialized SDK sample application up and running in less 3 minutes using the language of your choice.
 ## Contributing
+
 Please see the [contributing guidelines](CONTRIBUTING.md).
 
 This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [[email protected]](mailto:[email protected]) with any additional questions or comments.
 
-## Testing Accessbility
-* Download the latest stable chromedriver from [here](https://chromedriver.chromium.org/).
-* In your `.env` file, create a variable `REACT_APP_CHROMEDRIVER_PATH` and save the path to your `chromedriver.exe` file.
-    For example (on a Windows PC)  it would be : `REACT_APP_CHROMEDRIVER_PATH=C:\\SeleniumWebDrivers\\ChromeDriver\\chromedriver.exe`
-    Take note of the format.
-* Save your changes.
-* On your terminal run the command `npm install`.
-* Once the installation is complete run the command `npm run ci`.
+## E2E playwright testing
+
+- Playwright requires a running GE Url to run against.
+- In your `.env` file, create add variables:
+  - PLAYWRIGHT_TESTS_USERNAME='your demo tenant email address'
+  - PLAYWRIGHT_TESTS_PASSWORD='password to the demo tenant account'
+  - PLAYWRIGHT_TESTS_BASE_URL='url that you are running against' // http://localhost:3000 if testing locally
+- Save your changes.
+- On your terminal run the command `npx playwright install`
+- On your terminal run the command `npx playwright install-deps`.
+- Once the installation is complete run the command `npx playwright test ui`.
+- Playwright commands can be extended using arguments described in the official documentation [Running tests](https://playwright.dev/docs/running-tests)
 
 ## Known issues
-* You cannot remove permissions by using the Graph Explorer UI. You will need to [remove the application consent](http://shawntabrizi.com/aad/revoking-consent-azure-active-directory-applications/) and then re-consent to remove permissions. I know, this is far from a good experience.
+
+- You cannot remove permissions by using the Graph Explorer UI. You will need to [remove the application consent](http://shawntabrizi.com/aad/revoking-consent-azure-active-directory-applications/) and then re-consent to remove permissions. I know, this is far from a good experience.
 
 ## Additional resources
-* [Microsoft Graph website](https://graph.microsoft.io)
-* [Office Dev Center](http://dev.office.com/)
-* [Graph Explorer releases](https://github.com/microsoftgraph/microsoft-graph-explorer/releases)
+
+- [Microsoft Graph website](https://graph.microsoft.io)
+- [Office Dev Center](http://dev.office.com/)
+- [Graph Explorer releases](https://github.com/microsoftgraph/microsoft-graph-explorer/releases)
 
 ## Copyright
+
 Copyright (c) 2017 Microsoft. All rights reserved.

azure-pipelines.yml

@@ -32,6 +32,10 @@ pr:
       - azure-pipelines.yml
       - package-lock.json
 
+variables:
+  isMaster: $[eq(variables['Build.SourceBranch'], 'refs/heads/master')]
+  isDev: $[eq(variables['Build.SourceBranch'], 'refs/heads/dev')]
+
 trigger:
   branches:
     include:
@@ -86,10 +90,6 @@ jobs:
           npm test
         displayName: "Runs Unit tests"
 
-      - script: |
-          npm run ci
-        displayName: "Runs Accessibility tests"
-
       - task: PublishTestResults@2
         condition: succeededOrFailed()
         inputs:
@@ -102,9 +102,58 @@ jobs:
         displayName: "Run build"
 
   - job: Two
+    displayName: "Run playwright tests"
+    condition: eq(variables['isDev'], 'true')
+    steps:
+      - task: NodeTool@0
+        inputs:
+          versionSpec: "14.20.x"
+        displayName: "Install npm"
+
+      - script: |
+          npm install
+        displayName: "npm install"
+
+      - script: |
+          npm install -D @playwright/test
+          npx playwright install-deps
+        displayName: "Install playwright dependancies"
+
+      - script: |
+          npx playwright install
+        displayName: "Install playwright"
+
+      - script: |
+          set CI=true
+          npm run test-playwright
+
+        env:
+          REACT_APP_CLIENT_ID: $(REACT_APP_PLAYWRIGHT_TEST_CLIENT_ID)
+          REACT_APP_INSTRUMENTATION_KEY: $(REACT_APP_STAGING_INSTRUMENTATION_KEY)
+          REACT_APP_FEEDBACK_CAMPAIGN_ID: $(REACT_APP_STAGING_FEEDBACK_CAMPAIGN_ID)
+          REACT_APP_NPS_FEEDBACK_CAMPAIGN_ID: $(REACT_APP_NPS_FEEDBACK_CAMPAIGN_ID)
+          REACT_APP_NOMINATION_PERIOD: $(REACT_APP_NOMINATION_PERIOD)
+          REACT_APP_COOLDOWN_PERIOD: $(REACT_APP_COOLDOWN_PERIOD)
+          REACT_APP_USAGE_TIME: $(REACT_APP_USAGE_TIME)
+          PLAYWRIGHT_TESTS_BASE_URL: $(PLAYWRIGHT_TESTS_BASE_URL)
+          PLAYWRIGHT_TESTS_USERNAME: $(PLAYWRIGHT_TESTS_USERNAME)
+          PLAYWRIGHT_TESTS_PASSWORD: $(PLAYWRIGHT_TESTS_PASSWORD)
+        displayName: "Run playwright tests"
+
+      - script: |
+          npm run test-playwright-accessibility
+        displayName: "Run accessibility tests"
+
+      - publish: $(System.DefaultWorkingDirectory)/playwright-report
+        artifact: playwright-report
+        condition: always()
+        displayName: "Publish test results"
+
+
+  - job: Three
     displayName: "Publish artifacts"
     dependsOn: One
-    condition: succeeded()
+    condition: and(succeeded(), or(eq(variables['isMaster'], 'true'), eq(variables['isDev'], 'true')))
     steps:
       - task: NodeTool@0
         inputs:
@@ -129,7 +178,7 @@ jobs:
 
       - task: PowerShell@2
         displayName: "Set version-number"
-        condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/master'))
+        condition: and(succeeded(), eq(variables['isMaster'], 'true'))
         inputs:
           targetType: "inline"
           script: |
@@ -141,7 +190,7 @@ jobs:
 
       - script: |
           npm run build
-        condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/master'))
+        condition: and(succeeded(), eq(variables['isMaster'], 'true'))
         env:
           REACT_APP_CLIENT_ID: $(REACT_APP_PROD_CLIENT_ID)
           REACT_APP_INSTRUMENTATION_KEY: $(REACT_APP_INSTRUMENTATION_KEY)

jest.config.js

@@ -6,7 +6,6 @@ module.exports = {
     '!build/**',
     '!src/**/*.d.ts',
     '!src/index.tsx',
-    '!src/tests/accessibility/**',
     '!src/app/middleware/telemetryMiddleware.ts',
     '!src/telemetry/telemetry.ts'
   ],