onc-healthit · akanuri9 · Jul 22, 2024 · Jul 15, 2024 · Jul 15, 2024 · Jul 15, 2024
diff --git a/.gitignore b/.gitignore
@@ -19,6 +19,8 @@
 # misc
 .DS_Store
 *.pem
+.project
+.settings/
 
 # debug
 npm-debug.log*

diff --git a/README.md b/README.md
@@ -148,7 +148,13 @@ The easiest way to deploy your Next.js app is to use the [Vercel Platform](https
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
 
 ## E2E tests
+
 1. Run npm install
 2. Update cypress/config/cypress.config.dev.ts with credentials- When login functionality is implemented. Not needed now.
 3. Run npm run test which will open cypress window -> choose E2E testing -> Choose browser to run the tests against -> choose test files to run. This will use dev config file.
 4. Running test through cmd, npm run test:dev. This will use electron headless browser to run the tests.
+
+## Component tests
+
+1. Run npx cypress open which will open cypress window -> choose Component Testing -> Choose browser to run the tests against -> choose test files to run.
+2. Running test through cmd, npx cypress run --component. This will run all specs.
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -6,4 +6,11 @@ export default defineConfig({
       // implement node event listeners here
     },
   },
+
+  component: {
+    devServer: {
+      framework: "next",
+      bundler: "webpack",
+    },
+  },
 });
diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Components App</title>
+    <!-- Used by Next.js to inject CSS. -->
+    <div id="__next_css__DO_NOT_USE__"></div>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
@@ -0,0 +1,39 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/react18'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)
diff --git a/src/app/archived/pageArchiveHome.cy.tsx b/src/app/archived/pageArchiveHome.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import ArchiveHome from './page'
+
+describe('<ArchiveHome />', () => {
+  it('renders', () => {
+    cy.mount(<ArchiveHome />)
+  })
+})
diff --git a/src/app/direct/pageDirectHome.cy.tsx b/src/app/direct/pageDirectHome.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import DirectHome from './page'
+
+describe('<DirectHome />', () => {
+  it('renders', () => {
+    cy.mount(<DirectHome />)
+  })
+})
diff --git a/src/app/pageHome.cy.tsx b/src/app/pageHome.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import Home from './page'
+
+describe('<Home />', () => {
+  it('renders', () => {
+    cy.mount(<Home />)
+  })
+})
diff --git a/src/components/archived/ArchiveCard.cy.tsx b/src/components/archived/ArchiveCard.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import ArchiveCard from './ArchiveCard'
+
+describe('<ArchiveCard />', () => {
+  it('renders', () => {
+    cy.mount(<ArchiveCard cardHeader={''} description={''} />)
+  })
+})
diff --git a/src/components/archived/ArchiveFilter.cy.tsx b/src/components/archived/ArchiveFilter.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import ArchiveFilter from './ArchiveFilter'
+
+describe('<ArchiveFilter />', () => {
+  it('renders', () => {
+    cy.mount(<ArchiveFilter />)
+  })
+})
diff --git a/src/components/archived/ArchiveHome.cy.tsx b/src/components/archived/ArchiveHome.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import ArchiveHome from './ArchiveHome'
+
+describe('<ArchiveHome />', () => {
+  it('renders', () => {
+    cy.mount(<ArchiveHome />)
+  })
+})
diff --git a/src/components/c-cda/CCDAHome.cy.tsx b/src/components/c-cda/CCDAHome.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import CCDAHome from './CCDAHome'
+
+describe('<CCDAHome />', () => {
+  it('renders', () => {
+    cy.mount(<CCDAHome />)
+  })
+})
diff --git a/src/components/c-cda/additional/scorecard/ScorecardResults.cy.tsx b/src/components/c-cda/additional/scorecard/ScorecardResults.cy.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import ScorecardResults from './ScorecardResults'
+
+describe('<ScorecardResults />', () => {
+  it('renders', () => {
+    cy.mount(
+      <ScorecardResults
+        dialogState={false}
+        handleCloseDialog={function (): void {
+          throw new Error('Function not implemented.')
+        }}
+        isShowSampleDownloadButton={false}
+      />
+    )
+  })
+})
diff --git a/src/components/c-cda/validation/results/ErrorDisplayErrorDisplayCard.cy.tsx b/src/components/c-cda/validation/results/ErrorDisplayErrorDisplayCard.cy.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import ErrorDisplayCard from './ErrorDisplay'
+
+describe('<ErrorDisplayCard />', () => {
+  it('renders', () => {
+    cy.mount(
+      <ErrorDisplayCard
+        open={false}
+        handleClose={function (): void {
+          throw new Error('Function not implemented.')
+        }}
+        response={{
+          error: undefined,
+          errorStatus: undefined,
+        }}
+      />
+    )
+  })
+})
diff --git a/src/components/c-cda/validation/results/ResultsLoadingValidatorLoadingCard.cy.tsx b/src/components/c-cda/validation/results/ResultsLoadingValidatorLoadingCard.cy.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import ValidatorLoadingCard from './ResultsLoading'
+
+describe('<ValidatorLoadingCard />', () => {
+  it('renders', () => {
+    cy.mount(
+      <ValidatorLoadingCard
+        open={false}
+        handleClose={function (): void {
+          throw new Error('Function not implemented.')
+        }}
+        estimatedValidationTime={0}
+        fileName={''}
+      />
+    )
+  })
+})
diff --git a/src/components/cqmt/CqmHome.cy.tsx b/src/components/cqmt/CqmHome.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import CqmHome from './CqmHome'
+
+describe('<CqmHome />', () => {
+  it('renders', () => {
+    cy.mount(<CqmHome />)
+  })
+})
diff --git a/src/components/direct/DirectHome.cy.tsx b/src/components/direct/DirectHome.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import DirectHome from './DirectHome'
+
+describe('<DirectHome />', () => {
+  it('renders', () => {
+    cy.mount(<DirectHome />)
+  })
+})
diff --git a/src/components/home/SiteHome.cy.tsx b/src/components/home/SiteHome.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import SiteHome from './SiteHome'
+
+describe('<SiteHome />', () => {
+  it('renders', () => {
+    cy.mount(<SiteHome />)
+  })
+})
diff --git a/src/components/home/SiteHomeRows.cy.tsx b/src/components/home/SiteHomeRows.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import SiteHomeRows from './SiteHomeRows'
+
+describe('<SiteHomeRows />', () => {
+  it('renders', () => {
+    cy.mount(<SiteHomeRows />)
+  })
+})
diff --git a/src/components/industry-resources/IndustryResourcesHome.cy.tsx b/src/components/industry-resources/IndustryResourcesHome.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import IndustryResourcesHome from './IndustryResourcesHome'
+
+describe('<IndustryResourcesHome />', () => {
+  it('renders', () => {
+    cy.mount(<IndustryResourcesHome />)
+  })
+})
diff --git a/src/components/public-health-reporting/PHRHome.cy.tsx b/src/components/public-health-reporting/PHRHome.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import PHRHome from './PHRHome'
+
+describe('<PHRHome />', () => {
+  it('renders', () => {
+    cy.mount(<PHRHome />)
+  })
+})
diff --git a/src/components/resources/DocsCard.cy.tsx b/src/components/resources/DocsCard.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import DocsCard from './DocsCard'
+
+describe('<DocsCard />', () => {
+  it('renders', () => {
+    cy.mount(<DocsCard header={''} content={undefined} />)
+  })
+})
diff --git a/src/components/resources/DocsHome.cy.tsx b/src/components/resources/DocsHome.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import DocsHome from './DocsHome'
+
+describe('<DocsHome />', () => {
+  it('renders', () => {
+    cy.mount(<DocsHome />)
+  })
+})
diff --git a/src/components/resources/DocsSubMenu.cy.tsx b/src/components/resources/DocsSubMenu.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import DocsSubMenu from './DocsSubMenu'
+
+describe('<DocsSubMenu />', () => {
+  it('renders', () => {
+    cy.mount(<DocsSubMenu />)
+  })
+})
diff --git a/src/components/resources/FAQHome.cy.tsx b/src/components/resources/FAQHome.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import FAQHome from './FAQHome'
+
+describe('<FAQHome />', () => {
+  it('renders', () => {
+    cy.mount(<FAQHome />)
+  })
+})
diff --git a/src/components/resources/WelcomeHeader.cy.tsx b/src/components/resources/WelcomeHeader.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import WelcomeHeader from './WelcomeHeader'
+
+describe('<WelcomeHeader />', () => {
+  it('renders', () => {
+    cy.mount(<WelcomeHeader heading={''} subheading={''} description={undefined} />)
+  })
+})
diff --git a/src/components/shared/Ankle.cy.tsx b/src/components/shared/Ankle.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import Ankle from './Ankle'
+
+describe('<Ankle />', () => {
+  it('renders', () => {
+    cy.mount(<Ankle />)
+  })
+})
diff --git a/src/components/shared/BannerBox.cy.tsx b/src/components/shared/BannerBox.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import BannerBox from './BannerBox'
+
+describe('<BannerBox />', () => {
+  it('renders', () => {
+    cy.mount(<BannerBox heading={''} description={undefined} />)
+  })
+})
diff --git a/src/components/shared/CardWithBorder.cy.tsx b/src/components/shared/CardWithBorder.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import CardWithBorder from './CardWithBorder'
+
+describe('<CardWithBorder />', () => {
+  it('renders', () => {
+    cy.mount(<CardWithBorder cardHeader={''} buttonTitle={''} buttonIcon={undefined} />)
+  })
+})
diff --git a/src/components/shared/CardWithImageCriteriaCard.cy.tsx b/src/components/shared/CardWithImageCriteriaCard.cy.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import CriteriaCard from './CardWithImage'
+
+describe('<CriteriaCard />', () => {
+  it('renders', () => {
+    cy.mount(
+      <CriteriaCard
+        title={''}
+        cardImage={''}
+        cardHeader={''}
+        description={''}
+        pathname={''}
+        maxWidth={0}
+        imageWidth={''}
+      />
+    )
+  })
+})
diff --git a/src/components/shared/CircularProgressWithLabelAndBackground.cy.tsx b/src/components/shared/CircularProgressWithLabelAndBackground.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import CircularProgressWithLabelAndBackground from './CircularProgressWithLabelAndBackground'
+
+describe('<CircularProgressWithLabelAndBackground />', () => {
+  it('renders', () => {
+    cy.mount(<CircularProgressWithLabelAndBackground progressValue={0} labelValue={''} labelAndProgressColor={''} />)
+  })
+})
diff --git a/src/components/shared/LinkButton.cy.tsx b/src/components/shared/LinkButton.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import LinkButton from './LinkButton'
+
+describe('<LinkButton />', () => {
+  it('renders', () => {
+    cy.mount(<LinkButton label={''} url={''} icon={undefined} />)
+  })
+})
diff --git a/src/components/shared/SectionHeader.cy.tsx b/src/components/shared/SectionHeader.cy.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import SectionHeader from './SectionHeader'
+
+describe('<SectionHeader />', () => {
+  it('renders', () => {
+    cy.mount(<SectionHeader header={''} subHeader={''} />)
+  })
+})
diff --git a/src/components/shared/dialog/DialogTemplate.tsx b/src/components/shared/dialog/DialogTemplate.tsx
@@ -24,7 +24,7 @@ const CustomDialogTitle: FC<DialogTitleProps> = ({ children, handleClose }) => (
     <IconButton
       aria-label="Close Dialog"
       sx={{ position: 'absolute', right: 8, top: 8 }}
-      onClick={(e) => {
+      onClick={(e: { stopPropagation: () => void }) => {
         e.stopPropagation()
         handleClose()
       }}