Task/accessibility ci (#358)

* Adds selenium

* Add accessibility spec

* Uncomment test setup

* Fix failing tests

* Remove UI tests

* Fixe AxeBuilder import

* Remove unused variable reference

* Increase timeout duration

* remove unnecessary file

* update dependencies

* include the root element in the test

* update node.js version

* update node.js version

* start project before running test

* include headless chrome option

* start project before running test

* add start-server-and-test package

* update test command

* add no-watch option

* add start-server script

* remove carets

* add aria-role and aria-level

* add comments

* add chrome binaries script

* remove main tag

* update package

* add 'disable rules' property

* remove chrome binaries script

* Set up CI with Azure Pipelines

* Set up CI with Azure Pipelines

* reset pool to previous vm Image

* update packages

* rename chromedriver

* add chrome driver path

* Change to hosted agent

removed linting checks for now.

* disable web app deployment for now

* set chromedriver path

* edit test script

* remove unused import

* chore(release): 4.1.9

* change path

* return to previous path

* change vmImage

* removed disabled rules to test for failure

* add disabled rules

* set up agent pool

* set path as environment variable

* remove carets

* publish test results

* change testResultFiles location

* add condition

* correct formatting error

* change testResultsFiles path

* add junit-reporter

* change testResultsFile path

* remove testResultsProcessor

* change testResultsFiles path

* rename test name

* add testResultsProcessor

* add jest-junit-reporter package

* add comments

* update node version

* use previous node version

* separate accessibilty test command

* delete test-report.xml

* update test scripts

* add accessibility test command

* add accessibility testing instructions

* delete unused packages and update existing ones

* remove carets

Co-authored-by: Elinor <ekaguongo@gmail.com>
Co-authored-by: Charles Wahome <thewahome.cw@gmail.com>

.gitignore

@@ -24,3 +24,4 @@ yarn-error.log*
 .idea
 .vscode
 .vs
+*.xml

README.md

@@ -25,13 +25,23 @@ Where `REACT_APP_CLIENT_ID` is the `Application (client) ID` from the Azure port
 
 ## 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
 
 ## 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 [opencode@microsoft.com](mailto:opencode@microsoft.com) 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`.
+
 ## 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.
 

azure-pipelines.yml

@@ -8,8 +8,7 @@
 
 name: $(date:yyyyMMdd)$(rev:.r)
 
-pool:
- vmImage: 'ubuntu-latest'
+pool: MsGraphDevXAzureAgents
 
 pr:
  branches:
@@ -61,7 +60,7 @@ jobs:
  steps:
  - task: NodeTool@0
  inputs:
- versionSpec: '10.x'
+ versionSpec: '12.x'
  displayName: 'Install Node.js'
 
  - script: |
@@ -73,8 +72,19 @@ jobs:
  displayName: 'Runs linting checks'
 
  - script: |
- npm test -- --coverage
- displayName: 'Runs tests'
+ npm test
+ displayName: 'Runs Unit tests'
+
+ - script: |
+ npm run ci
+ displayName: 'Runs Accessibility tests'
+
+ - task: PublishTestResults@2
+ condition: succeededOrFailed()
+ inputs:
+ testResultsFormat: 'JUnit'
+ testResultsFiles: 'test-report.xml'
+ displayName: 'Publish Test Results'
 
  - script: |
  npm run build
@@ -85,7 +95,6 @@ jobs:
  dependsOn: One
  condition: succeeded()
  steps:
-
  - script: |
  npm install
  displayName: 'npm install'

jest.config.js

@@ -10,10 +10,10 @@ module.exports = {
  testEnvironment: "jsdom",
  testURL: "http://localhost",
  transform: {
- "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
+ "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js",
  "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
  "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)":
- "<rootDir>/config/jest/fileTransform.js"
+ "<rootDir>/node_modules/ts-jest/preprocessor.js"
  },
  transformIgnorePatterns: [
  "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
@@ -38,5 +38,6 @@ module.exports = {
  watchPlugins: [
  "jest-watch-typeahead/filename",
  "jest-watch-typeahead/testname"
- ]
+ ],
+ testResultsProcessor: "./node_modules/jest-junit-reporter"
 };