Merge pull request #303 from topcoder-platform/fix/GAME-108

Fix/game 108

Author: kkartunov

.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

@@ -155,7 +155,11 @@ See the [Dev Center README](/src-ts/tools/dev-center/README.md) for further inst
 | `yarn eslint`         | Run eslint against js/x files and outputs report |
 | `yarn eslint:fix`     | Run eslint against js/x files, fixes auto-fixable issues, and  outputs report |
 | `yarn test`           | Run unit tests, watching for changes and re-running per your specifications |             
-| `yarn test:no-watch`  | Run unit tests once, without watching for changes or re-running |             
+| `yarn test:no-watch`  | Run unit tests once, without watching for changes or re-running |
+| `yarn cy:run`         | Run e2e tests once in local command with the site is running    |
+| `yarn cy:ci`          | Run e2e tests once by circle ci                                 |
+| `yarn report:coverage`| Generate e2e coverage report in html format                     |
+| `yarn report:coverage:text`  | Generate e2e coverage report in text format              |
 
 ## Folder Structure
 

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

@@ -1,6 +1,12 @@
 describe('Landing Page', () => {
-  beforeEach(() => cy.visit('/'))
-  it('loads landing page should be successfully', () => {
-    cy.get('[data-cy="root"]').should('be.visible')
-  })
+
+    beforeEach(() => cy.visit('/'))
+
+    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

@@ -15,17 +15,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",
@@ -83,8 +80,12 @@
         "@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/marked": "4.0.3",
         "@types/node": "^18.7.13",
         "@types/reach__router": "^1.3.10",
         "@types/react": "^18.0.5",
@@ -95,6 +96,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",

public/index.html

@@ -32,7 +32,7 @@
 
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root" data-cy="root"></div>
+  <div id="root" data-id="root"></div>
   <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
@@ -45,4 +45,4 @@
     -->
 </body>
 
-</html>
+</html>

src-ts/declarations.d.ts

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

src-ts/lib/form/form-functions/form.functions.ts

@@ -33,9 +33,13 @@ export function initializeValues<T>(inputs: Array<FormInputModel>, formValues?:
     inputs
         .filter(input => !input.dirty && !input.touched)
         .forEach(input => {
-            input.value = !!(formValues as any)?.hasOwnProperty(input.name)
-                ? (formValues as any)[input.name]
-                : undefined
+            if (input.type === 'checkbox') {
+                input.value = input.checked || false
+            } else {
+                input.value = !!(formValues as any)?.hasOwnProperty(input.name)
+                    ? (formValues as any)[input.name]
+                    : undefined
+            }
         })
 }
 
@@ -121,7 +125,13 @@ function handleFieldEvent<T>(input: HTMLInputElement | HTMLTextAreaElement, inpu
     inputDef.touched = true
 
     // set the def value
-    inputDef.value = input.value
+    if (input.type === 'checkbox') {
+        const checkbox: HTMLInputElement = input as HTMLInputElement
+        inputDef.value = checkbox.checked
+        inputDef.checked = checkbox.checked
+    } else {
+        inputDef.value = input.value
+    }
 
     // now let's validate the field
     const formElements: HTMLFormControlsCollection = (input.form as HTMLFormElement).elements

src-ts/lib/form/form-groups/FormGroups.tsx

@@ -23,12 +23,13 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
 
     const { formDef, onBlur, onChange }: FormGroupsProps = props
 
-    const getTabIndex: (input: FormInputModel, index: number) => number = (input, index) => {
+    function getTabIndex(input: FormInputModel, index: number): number {
         const tabIndex: number = input.notTabbable ? -1 : index + 1 + (formDef.tabIndexStart || 0)
         return tabIndex
     }
 
-    const renderInputField: (input: FormInputModel, index: number) => JSX.Element | undefined = (input, index) => {
+    function renderInputField(input: FormInputModel, index: number): JSX.Element | undefined {
+
         const tabIndex: number = getTabIndex(input, index)
 
         let inputElement: JSX.Element
@@ -40,23 +41,33 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                         {...input}
                         onChange={onChange}
                         tabIndex={tabIndex}
-                        value={input.value}
+                        value={input.value as number | undefined}
                     />
                 )
                 break
-
             case 'textarea':
                 inputElement = (
                     <InputTextarea
                         {...input}
                         onBlur={onBlur}
                         onChange={onChange}
                         tabIndex={tabIndex}
-                        value={input.value}
+                        value={input.value as string | undefined}
                     />
                 )
                 break
             case 'checkbox':
+                inputElement = (
+                    <InputText
+                        {...input}
+                        checked={!!input.value}
+                        onBlur={onBlur}
+                        onChange={onChange}
+                        tabIndex={tabIndex}
+                        type='checkbox'
+                    />
+                )
+                break
             case 'radio':
                 inputElement = (
                     <FormRadio
@@ -83,7 +94,7 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
                         onChange={onChange}
                         tabIndex={tabIndex}
                         type={input.type as InputTextTypes || 'text'}
-                        value={input.value}
+                        value={input.value as string | undefined}
                     />
                 )
                 break
@@ -100,9 +111,18 @@ const FormGroups: (props: FormGroupsProps) => JSX.Element = (props: FormGroupsPr
         )
     }
 
-    const formGroups: Array<JSX.Element | undefined> = formDef?.groups?.map((element: FormGroup, index: number) => {
-        return <FormGroupItem key={`element-${index}`} group={element} renderFormInput={renderInputField} totalGroupCount={formDef.groups?.length || 0} />
-    }) || []
+    const formGroups: Array<JSX.Element | undefined> = formDef?.groups
+        ?.map((element: FormGroup, index: number) => {
+            return (
+                <FormGroupItem
+                    key={`element-${index}`}
+                    group={element}
+                    renderFormInput={renderInputField}
+                    totalGroupCount={formDef.groups?.length || 0}
+                />
+            )
+        })
+        || []
 
     return (
         <div className={styles['form-groups']}>