[SDK-2670] Run playground against Node OIDC Provider and BrowserStack (…

…auth0#265)

* Run playground against Node OIDC Provider and BrowserStack

* Remove fix cookies

.circleci/config.yml

@@ -1,9 +1,12 @@
 version: 2.1
-
+parameters:
+  docker_image:
+    type: string
+    default: circleci/node:12.22.4-browsers
 jobs:
   build:
     docker:
-      - image: circleci/node:12.9.1-browsers
+      - image: << pipeline.parameters.docker_image >>
     steps:
       - checkout
       - restore_cache:
@@ -35,8 +38,20 @@ jobs:
           path: cypress/videos
       - store_artifacts:
           path: cypress/screenshots
+  browserstack:
+    docker:
+      - image: << pipeline.parameters.docker_image >>
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependencies-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "examples/cra-react-router/package.json" }}-{{ checksum "examples/gatsby-app/package.json" }}-{{ checksum "examples/nextjs-app/package.json" }}-{{ checksum "examples/users-api/package-lock.json" }}
+      - run: npm ci
+      - run: npx concurrently --raw --kill-others --success first "npm:start" "wait-on http://127.0.0.1:3000/ && browserstack-cypress run --build-name $CIRCLE_BRANCH --specs "cypress/integration/smoke-bs.test.ts""
 
 workflows:
   Build and Test:
     jobs:
       - build
+      - browserstack:
+          context:
+            - browserstack-env

browserstack.json

@@ -0,0 +1,36 @@
+{
+  "browsers": [
+    {
+      "browser": "chrome",
+      "os": "Windows 10",
+      "versions": ["latest"]
+    },
+    {
+      "browser": "firefox",
+      "os": "Windows 10",
+      "versions": ["latest"]
+    },
+    {
+      "browser": "edge",
+      "os": "Windows 10",
+      "versions": ["latest"]
+    }
+  ],
+  "run_settings": {
+    "cypress_config_file": "./cypress-bs.json",
+    "cypress-version": "7",
+    "project_name": "Auth0 React SDK",
+    "exclude": [],
+    "parallels": "5",
+    "npm_dependencies": {
+      "typescript": "^3.8.3"
+    },
+    "package_config_options": {},
+    "headless": true
+  },
+  "connection_settings": {
+    "local": true,
+    "local_mode": "always-on"
+  },
+  "disable_usage_reporting": false
+}

cypress-bs.json

@@ -0,0 +1,13 @@
+{
+  "baseUrl": "http://127.0.0.1:3000",
+  "chromeWebSecurity": false,
+  "viewportWidth": 1000,
+  "viewportHeight": 1000,
+  "fixturesFolder": false,
+  "pluginsFile": false,
+  "supportFile": false,
+  "reporter": "junit",
+  "reporterOptions": {
+    "mochaFile": "test-results/cypress/junit-[hash].xml"
+  }
+}

cypress/integration/smoke-bs.test.ts

@@ -0,0 +1,49 @@
+const EMAIL = 'test';
+const PASSWORD = 'test';
+
+if (!EMAIL || !PASSWORD) {
+  throw new Error(
+    'You must provide CYPRESS_USER_EMAIL and CYPRESS_USER_PASSWORD environment variables'
+  );
+}
+
+const loginToNodeOidc = (): void => {
+  cy.get('input[name=login]').clear().type(EMAIL);
+  cy.get('input[name=password]').clear().type(PASSWORD);
+  cy.get('.login-submit').click();
+  cy.get('.login-submit').click();
+};
+
+const login = (): void => {
+  return loginToNodeOidc();
+};
+
+const fixCookies = () => {
+  // Temporary fix for https://github.com/cypress-io/cypress/issues/6375
+  if (Cypress.isBrowser('firefox')) {
+    cy.getCookies({ log: false }).then((cookies) =>
+      cookies.forEach((cookie) => cy.clearCookie(cookie.name, { log: false }))
+    );
+    cy.log('clearCookies');
+  } else {
+    cy.clearCookies();
+  }
+};
+
+describe('Smoke tests', () => {
+  afterEach(fixCookies);
+
+  it('do basic login and show user', () => {
+    cy.visit('/');
+
+    cy.get('[data-cy=use-node-oidc-provider]').click();
+    cy.get('#login').click();
+
+    login();
+
+    cy.get('#hello').contains(`Hello, ${EMAIL}!`);
+    cy.get('#logout').click();
+    cy.get('button[name=logout]').click();
+    cy.get('#login').should('exist');
+  });
+});