Merge pull request #345 from topcoder-platform/dev

TCA-464 TCA New Courses & GAME Release -> master

Author: brooketopcoder

.circleci/config.yml

@@ -8,6 +8,10 @@ deploy_defaults: &deploy_defaults
     docker:
       - image: cimg/python:3.10.2
 
+test_defaults: &test_defaults
+    docker:
+      - image: cypress/browsers:node16.14.2-slim-chrome100-ff99-edge
+
 install_build_dependency: &install_build_dependency
     name: Installation of build and deployment dependencies.
     command: |
@@ -50,6 +54,14 @@ running_yarn_build: &running_yarn_build
       yarn install
       yarn build
 
+running_yarn_test: &running_yarn_test
+    name: Running Yarn Test Build
+    command: |
+      yarn install
+      yarn cypress install
+      yarn build
+      yarn cy:ci
+
 workspace_persist: &workspace_persist
     root: .
     paths:
@@ -81,6 +93,27 @@ build_steps: &build_steps
     - run: *running_yarn_build
     - persist_to_workspace: *workspace_persist
 
+test_steps: &test_steps
+    # Initialization.
+    - checkout
+    - setup_remote_docker
+    - restore_cache:
+        key: test-node-modules-{{ checksum "yarn.lock" }}
+    - run: *running_yarn_test
+    - save_cache:
+        key: test-node-modules-{{ checksum "yarn.lock" }}
+        paths:
+          - node_modules
+          - /root/.cache/Cypress
+    - store_test_results:
+        path: cypress/test-report
+    - store_artifacts:
+        path: cypress/test-report
+    - store_artifacts:
+        path: cypress/videos
+    - store_artifacts:
+        path: cypress/screenshots
+
 deploy_steps: &deploy_steps
     - checkout
     - attach_workspace: *workspace_attach
@@ -127,6 +160,14 @@ jobs:
       LOGICAL_ENV: "prod"
       APPNAME: "platform-ui-mvp"
     steps: *build_steps
+  
+  test-dev:
+    <<: *test_defaults
+    environment:
+      DEPLOY_ENV: "DEV"
+      LOGICAL_ENV: "dev"
+      APPNAME: "platform-ui-mvp"
+    steps: *test_steps
 
   # Just tests commited code.
   deployDev:
@@ -147,35 +188,6 @@ jobs:
       APPNAME: "platform-ui-mvp"
     steps: *deploy_steps
 
-  # Test job for the cases when we don not need deployment.
-  e2e-test:
-    docker:
-      - image: cypress/browsers:node16.14.2-slim-chrome100-ff99-edge
-    steps:
-      - checkout
-      - restore_cache:
-          key: test-node-modules-{{ checksum "yarn.lock" }}
-      - run:
-          name: Config Git
-          command: git config --global url."https://git@".insteadOf git://
-      - run:
-          name: Install Dependencies
-          command: yarn install
-          no_output_timeout: 20m
-      - run:
-          name: Install Cypress Binary
-          command: yarn cypress install
-      - run:
-          name: Build the application
-          command: yarn build
-          no_output_timeout: 20m
-      - save_cache:
-          key: test-node-modules-{{ checksum "yarn.lock" }}
-          paths:
-            - node_modules
-            - /root/.cache/Cypress
-      - run: yarn cy:ci
-
 workflows:
   version: 2
   build:
@@ -201,9 +213,6 @@ workflows:
               ignore:
                 - master
 
-      - e2e-test:
-          context : org-global
-
       - build-prod:
           context : org-global
           filters:
@@ -215,7 +224,6 @@ workflows:
           context : org-global
           requires:
             - build-dev
-            - e2e-test
           filters: 
             branches:
               only:
@@ -229,3 +237,6 @@ workflows:
             branches:
               only:
                 - master
+
+      - test-dev:
+          context : org-global

.gitignore

@@ -8,6 +8,9 @@
 # testing
 /coverage
 .nyc_output
+/cypress/screenshots
+/cypress/videos
+/cypress/test-report
 
 # production
 /build

README.md

@@ -62,6 +62,14 @@ You can verify the versions of `nvm`, `node`, and `npm` using the commands below
 | `% nvm current`   | v15.15.0 |
 
 
+>**NOTE:** The `yarn start` command requires the `NVM_DIR` env variable is set.
+
+```zsh
+export NVM_DIR=~/.nvm
+```
+
+If you don't have this set globally, you can create your own [personal config](#personal-config) to define your local nvm dir.
+
 ### Hosting 
 You will need to add the following line to your hosts file. The hosts file is normally located at `/etc/hosts` (Mac). Do not overwrite the existing localhost entry also pointing to 127.0.0.1.
 
@@ -81,9 +89,9 @@ You will need to add the following line to your hosts file. The hosts file is no
 
 >% yarn start
 
-3. Go to https://local.topcoder-dev.com:3000
+3. Go to https://local.topcoder-dev.com
 
->**NOTE**: The default port is 3000, but you can override it in your [personal config](#personal-config).
+>**NOTE**: The site must run on port 443 in order for auth0 to work and for the site to load properly. Mac users will need to run the app with elevated permissions.
 
 ### Local SSL
 
@@ -102,7 +110,7 @@ Otherwise, you will need to override the exception each time you load the site.
 ### Personal Config
 
 1. Add [hostname] to [`/src-ts/config/environments/app-host-environment.type.ts`](/src-ts/config/environments/app-host-environment.type.ts)
-2. Copy an existing config from [`/src-ts/config/environments/environment.*.config.ts`](/src-ts/config/environments/environment.bsouza.config.ts)
+2. Copy an existing config from [`/src-ts/config/environments/environment.*.config.ts`](/src-ts/config/environments/environment.brooke.config.ts)
 3. Rename new config `environment.[hostname].config.ts`
 4. Rename config variable to `EnvironmentConfig[HostName]`
 5. Set the `ENV` variable to `[hostname]`
@@ -509,3 +517,5 @@ e.g.:
     }
 }
 ```
+
+>**NOTE** - all SVGs require explicit `width` and `height` in the Safari browser in order to be rendered properly, otherwise they'll be rendered to the _default_ size and probably will crop out of view

cypress.config.ts

@@ -1,19 +1,33 @@
+// tslint:disable-next-line: no-submodule-imports This is the way cypress does it
+import task from '@cypress/code-coverage/task'
 import { defineConfig } from 'cypress'
 
 export default defineConfig({
-  fixturesFolder: false,
-  video: false,
-  screenshotOnRunFailure: false,
-  defaultCommandTimeout: 10000,
-  e2e: {
-    baseUrl: 'http://localhost:3000',
-    specPattern: "cypress/e2e/**/*.spec.{js,jsx,ts,tsx}",
-    supportFile: "cypress/support/e2e.ts",
-    viewportHeight: 1000,
-    viewportWidth: 1280,
-    setupNodeEvents(on, config) {
-      require('@cypress/code-coverage/task')(on, config)
-      return config;
+    defaultCommandTimeout: 10000,
+    e2e: {
+        // baseUrl: 'https://local.topcoder-dev.com',
+        baseUrl: 'http://localhost:3000',
+        setupNodeEvents: setUpNodeEvents,
+        specPattern: 'cypress/e2e/**/*.spec.{js,jsx,ts,tsx}',
+        supportFile: 'cypress/support/e2e.ts',
+        viewportHeight: 1000,
+        viewportWidth: 1280,
     },
-  },
+    fixturesFolder: false,
+    reporter: 'junit',
+    reporterOptions: {
+        mochaFile: 'cypress/test-report/test-result-[hash].xml',
+        toConsole: false,
+    },
+    screenshotOnRunFailure: true,
+    video: true,
 })
+
+// adds the config to node setup events
+function setUpNodeEvents(
+    on: Cypress.PluginEvents,
+    config: Cypress.PluginConfigOptions
+): Cypress.PluginConfigOptions {
+    task(on, config)
+    return config
+}

cypress/e2e/home/home.spec.ts

@@ -5,4 +5,8 @@ describe('Landing Page', () => {
     it('loads landing page should be successfully', () => {
         cy.get('[data-id="root"]').should('be.visible')
     })
+
+    it.skip('loads landing page should fail', () => {
+      cy.get('[data-id="root"]').should('not.be.visible')
+    })
 })

package.json

@@ -5,8 +5,9 @@
     "scripts": {
         "dev": "yarn react-app-rewired start",
         "start": "sh start-ssl.sh",
-        "start:bsouza": "sudo sh start-ssl-bsouza.sh",
+        "start:brooke": "sudo sh start-ssl-brooke.sh",
         "build": "yarn react-app-rewired build",
+        "postbuild": "gzip build/static/js/*.js && gzip build/static/css/*.css",
         "lint": "tslint 'src-ts/**/*.{ts,tsx}' && eslint 'src*/**/*.{js,jsx,ts,tsx}'",
         "lint:fix": "tslint 'src-ts/**/*.{ts,tsx}' --fix && eslint 'src*/**/*.{js,jsx,ts,tsx}' --fix",
         "tslint": "tslint 'src-ts/**/*.{ts,tsx}'",
@@ -15,17 +16,14 @@
         "eslint:fix": "eslint 'src/**/*.{js,jsx}' --fix",
         "test": "react-scripts test --watchAll",
         "test:no-watch": "react-scripts test --watchAll=false --passWithNoTests",
-        "cy:run": "cypress run",
+        "cy:run": "cypress run --reporter junit",
         "cy:ci": "start-server-and-test 'serve -s build -n -p 3000' http://localhost:3000 'cy:run'",
         "report:coverage": "nyc report --reporter=html",
         "report:coverage:text": "nyc report --reporter=text"
     },
     "dependencies": {
         "@datadog/browser-logs": "^4.7.1",
         "@heroicons/react": "^1.0.6",
-        "@types/dompurify": "^2.3.3",
-        "@types/highlightjs": "^9.12.2",
-        "@types/marked": "4.0.3",
         "apexcharts": "^3.35.3",
         "axios": "^0.26.1",
         "browser-cookies": "^1.2.0",
@@ -37,14 +35,17 @@
         "highlight.js": "^11.6.0",
         "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
+        "markdown-it": "^13.0.1",
         "marked": "4.0.3",
         "moment": "^2.29.3",
         "moment-timezone": "^0.5.34",
         "prop-types": "^15.8.1",
+        "qs": "^6.11.0",
         "rc-checkbox": "^2.3.2",
         "react": "^17.0.2",
         "react-apexcharts": "^1.4.0",
         "react-app-rewired": "^2.2.1",
+        "react-contenteditable": "^3.3.6",
         "react-dom": "^17.0.2",
         "react-elastic-carousel": "^0.11.5",
         "react-gtm-module": "^2.0.11",
@@ -63,6 +64,7 @@
         "redux-thunk": "^2.4.1",
         "sass": "^1.49.8",
         "styled-components": "^5.3.5",
+        "swr": "^1.3.0",
         "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.4",
         "typescript": "^4.6.3",
         "uuid": "^8.3.2"
@@ -82,8 +84,13 @@
         "@testing-library/react": "^12.0.0",
         "@testing-library/user-event": "^13.2.1",
         "@types/axios": "^0.14.0",
+        "@types/cypress": "^1.1.3",
+        "@types/dompurify": "^2.3.3",
+        "@types/highlightjs": "^9.12.2",
         "@types/jest": "^27.0.1",
         "@types/lodash": "^4.14.182",
+        "@types/markdown-it": "^12.2.3",
+        "@types/marked": "4.0.3",
         "@types/node": "^18.7.13",
         "@types/reach__router": "^1.3.10",
         "@types/react": "^18.0.5",
@@ -94,6 +101,7 @@
         "@types/segment-analytics": "^0.0.34",
         "@types/systemjs": "^6.1.0",
         "@types/uuid": "^8.3.4",
+        "@wdio/junit-reporter": "^7.24.0",
         "autoprefixer": "^9.8.6",
         "babel-eslint": "^11.0.0-beta.2",
         "babel-jest": "^24.9.0",

src-ts/config/environments/app-host-environment.type.ts

@@ -1 +1 @@
-export type AppHostEnvironmentType = 'bsouza' | 'default' | 'dev' | 'prod'
+export type AppHostEnvironmentType = 'brooke' | 'default' | 'dev' | 'prod'

src-ts/config/environments/environment.bsouza.config.ts renamed to src-ts/config/environments/environment.brooke.config.ts

@@ -1,7 +1,7 @@
 import { EnvironmentConfigModel } from './environment-config.model'
 import { EnvironmentConfigDefault } from './environment.default.config'
 
-export const EnvironmentConfigBsouza: EnvironmentConfigModel = {
+export const EnvironmentConfigBrooke: EnvironmentConfigModel = {
     ...EnvironmentConfigDefault,
-    ENV: 'bsouza',
+    ENV: 'brooke',
 }

src-ts/config/environments/environment.config.ts

@@ -1,6 +1,6 @@
 import { AppHostEnvironmentType } from './app-host-environment.type'
 import { EnvironmentConfigModel } from './environment-config.model'
-import { EnvironmentConfigBsouza } from './environment.bsouza.config'
+import { EnvironmentConfigBrooke } from './environment.brooke.config'
 import { EnvironmentConfigDefault } from './environment.default.config'
 import { EnvironmentConfigDev } from './environment.dev.config'
 import { EnvironmentConfigProd } from './environment.prod.config'
@@ -12,8 +12,8 @@ function getEnvironmentConfig(): EnvironmentConfigModel {
 
     switch (environment) {
 
-        case 'bsouza':
-            return EnvironmentConfigBsouza
+        case 'brooke':
+            return EnvironmentConfigBrooke
 
         case 'default':
             return EnvironmentConfigDefault

src-ts/declarations.d.ts

@@ -1,3 +1,5 @@
+declare module '@cypress/code-coverage/task'
+
 declare module '*.html' {
     const htmlFile: string
     export = htmlFile