unit testing pipeline

.github/workflows/unit-test.yml

@@ -0,0 +1,27 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Unit Test CI
+
+on:
+ pull_request:
+ branches: ['dev']
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+
+ strategy:
+ matrix:
+ node-version: [18.x]
+ # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+ steps:
+ - uses: actions/checkout@v4
+ - name: Use Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v3
+ with:
+ node-version: ${{ matrix.node-version }}
+ cache: 'npm'
+ - run: npx yarn install
+ - run: npm run test --workspaces

globals.d.ts

@@ -1,3 +1,5 @@
 declare module '*.svg'
 
+declare module '*.svg?react'
+
 declare module '*.json'

package.json

@@ -35,9 +35,9 @@
  "@visx/group": "^3.0.0",
  "@visx/heatmap": "^3.0.0",
  "@visx/scale": "^3.0.0",
- "@vitejs/plugin-react": "^3.1.0",
- "@vitest/coverage-c8": "^0.29.2",
- "@vitest/ui": "^0.29.2",
+ "@vitejs/plugin-react": "^4.3.1",
+ "@vitest/coverage-c8": "^0.33.0",
+ "@vitest/ui": "^1.6.0",
  "babel-eslint": "^10.1.0",
  "d3-composite-projections": "^1.4.0",
  "eslint": "^8.44.0",
@@ -76,11 +76,11 @@
  "storybook": "^7.4.6",
  "storybook-addon-fetch-mock": "^1.0.1",
  "use-debounce": "^7.0.1",
- "vite": "^4.4.11",
- "vite-plugin-css-injected-by-js": "^2.4.0",
+ "vite": "^5.2.13",
+ "vite-plugin-css-injected-by-js": "^3.5.1",
  "vite-plugin-md": "^0.21.5",
- "vite-plugin-svgr": "^2.4.0",
- "vitest": "^1.2.2",
+ "vite-plugin-svgr": "^4.2.0",
+ "vitest": "^1.6.0",
  "whatwg-fetch": "^3.6.2"
  },
  "lint-staged": {

packages/chart/package.json

@@ -11,8 +11,9 @@
  "preview": "vite preview",
  "graph": "nx graph",
  "prepublishOnly": "lerna run --scope @cdc/chart build",
- "test": "vitest watch --reporter verbose",
- "test:ui": "vitest --ui"
+ "test": "vitest run --reporter verbose",
+ "test-watch": "vitest watch --reporter verbose",
+ "test-watch:ui": "vitest --ui"
  },
  "repository": {
  "type": "git",

packages/chart/src/components/EditorPanel/EditorPanel.tsx

@@ -24,7 +24,7 @@ import { useHighlightedBars } from '../../hooks/useHighlightedBars'
 import ConfigContext from '../../ConfigContext'
 import useReduceData from '../../hooks/useReduceData'
 import useRightAxis from '../../hooks/useRightAxis'
-import WarningImage from '../../images/warning.svg'
+import WarningImage from '../../images/warning.svg?react'
 import useMinMax from '../../hooks/useMinMax'
 
 import { type ChartContext } from '../../types/ChartContext'

packages/chart/src/components/EditorPanel/components/Panels/Panel.ForestPlotSettings.tsx

@@ -4,7 +4,7 @@ import { useContext, FC } from 'react'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
 import { Select, CheckBox, TextField } from '@cdc/core/components/EditorPanel/Inputs'
-import WarningImage from '../../../../images/warning.svg'
+import WarningImage from '../../../../images/warning.svg?react'
 
 // contexts
 import ConfigContext from '../../../../ConfigContext'

packages/chart/src/components/EditorPanel/components/Panels/Panel.Series.tsx

@@ -3,7 +3,7 @@ import ConfigContext from '../../../../ConfigContext'
 
 // Core
 import InputSelect from '@cdc/core/components/inputs/InputSelect'
-import Check from '@cdc/core/assets/icon-check.svg'
+import Check from '@cdc/core/assets/icon-check.svg?react'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 import { sequentialPalettes } from '@cdc/core/data/colorPalettes'
 import Icon from '@cdc/core/components/ui/Icon'

packages/core/components/AdvancedEditor.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
-import MapIcon from '../assets/map-folded.svg'
-import ChartIcon from '../assets/icon-chart-bar.svg'
-import MarkupIncludeIcon from '../assets/icon-code.svg'
+import MapIcon from '../assets/map-folded.svg?react'
+import ChartIcon from '../assets/icon-chart-bar.svg?react'
+import MarkupIncludeIcon from '../assets/icon-code.svg?react'
 
 export const AdvancedEditor = ({ loadConfig, state, convertStateToConfig }) => {
  const [advancedToggle, setAdvancedToggle] = useState(false)

packages/core/components/DataTable/components/CellAnchor.tsx

@@ -1,4 +1,4 @@
-import ExternalIcon from '@cdc/core/assets/external-link.svg'
+import ExternalIcon from '@cdc/core/assets/external-link.svg?react'
 import isDomainExternal from '@cdc/core/helpers/isDomainExternal'
 
 // Optionally wrap cell with anchor if config defines a navigation url

packages/core/components/inputs/InputCheckbox.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, memo } from 'react'
 import PropTypes from 'prop-types'
 
-import Check from '../../assets/icon-check.svg'
+import Check from '../../assets/icon-check.svg?react'
 import '../../styles/v2/components/input/index.scss'
 
 const InputCheckbox = memo(

packages/core/components/ui/Icon.tsx

@@ -1,40 +1,39 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 
-import iconCaretUp from '../../assets/icon-caret-up.svg'
-import iconCaretDown from '../../assets/icon-caret-down.svg'
-import iconCaretFilledUp from '../../assets/icon-caret-filled-up.svg'
-import iconCaretFilledDown from '../../assets/icon-caret-filled-down.svg'
-import iconChartBar from '../../assets/icon-chart-bar.svg'
-import iconChartLine from '../../assets/icon-chart-line.svg'
-import iconChartPie from '../../assets/icon-chart-pie.svg'
-import iconClose from '../../assets/icon-close.svg'
-import iconCode from '../../assets/icon-code.svg'
-import iconDataBite from '../../assets/icon-databite.svg'
-import iconEdit from '../../assets/icon-edit.svg'
-import iconFileUpload from '../../assets/icon-file-upload.svg'
-import iconFilterBars from '../../assets/icon-filter-bars.svg'
-import iconGrid from '../../assets/icon-grid.svg'
-import iconInfo from '../../assets/icon-info.svg'
-import iconLink from '../../assets/icon-link.svg'
-import iconMapAl from '../../assets/icon-map-alabama.svg'
-import iconMapUsa from '../../assets/icon-map-usa.svg'
-import iconMapWorld from '../../assets/icon-map-world.svg'
-import iconMove from '../../assets/icon-move.svg'
-import iconQuestion from '../../assets/icon-question-circle.svg'
-import iconUpload from '../../assets/icon-upload.svg'
-import iconWarningCircle from '../../assets/icon-warning-circle.svg'
-import iconWarningTriangle from '../../assets/icon-warning-triangle.svg'
-import iconGear from '../../assets/icon-gear.svg'
-import iconTools from '../../assets/icon-tools.svg'
-import iconText from '../../assets/icon-filtered-text.svg'
-import iconDropdowns from '../../assets/icon-filter-dropdowns.svg'
-import iconPlus from '../../assets/icon-plus.svg'
-import iconMinus from '../../assets/icon-minus.svg'
-import iconTable from '../../assets/icon-table.svg'
-import iconSankey from '../../assets/icon-sankey.svg'
-import iconRotateLeft from '../../assets/icon-rotate-left.svg'
-import iconCommand from '../../assets/icon-command.svg'
+import iconCaretUp from '../../assets/icon-caret-up.svg?react'
+import iconCaretDown from '../../assets/icon-caret-down.svg?react'
+import iconCaretFilledUp from '../../assets/icon-caret-filled-up.svg?react'
+import iconCaretFilledDown from '../../assets/icon-caret-filled-down.svg?react'
+import iconChartBar from '../../assets/icon-chart-bar.svg?react'
+import iconChartLine from '../../assets/icon-chart-line.svg?react'
+import iconChartPie from '../../assets/icon-chart-pie.svg?react'
+import iconClose from '../../assets/icon-close.svg?react'
+import iconCode from '../../assets/icon-code.svg?react'
+import iconDataBite from '../../assets/icon-databite.svg?react'
+import iconEdit from '../../assets/icon-edit.svg?react'
+import iconFileUpload from '../../assets/icon-file-upload.svg?react'
+import iconFilterBars from '../../assets/icon-filter-bars.svg?react'
+import iconGrid from '../../assets/icon-grid.svg?react'
+import iconInfo from '../../assets/icon-info.svg?react'
+import iconLink from '../../assets/icon-link.svg?react'
+import iconMapAl from '../../assets/icon-map-alabama.svg?react'
+import iconMapUsa from '../../assets/icon-map-usa.svg?react'
+import iconMapWorld from '../../assets/icon-map-world.svg?react'
+import iconMove from '../../assets/icon-move.svg?react'
+import iconQuestion from '../../assets/icon-question-circle.svg?react'
+import iconUpload from '../../assets/icon-upload.svg?react'
+import iconWarningCircle from '../../assets/icon-warning-circle.svg?react'
+import iconWarningTriangle from '../../assets/icon-warning-triangle.svg?react'
+import iconGear from '../../assets/icon-gear.svg?react'
+import iconTools from '../../assets/icon-tools.svg?react'
+import iconText from '../../assets/icon-filtered-text.svg?react'
+import iconDropdowns from '../../assets/icon-filter-dropdowns.svg?react'
+import iconPlus from '../../assets/icon-plus.svg?react'
+import iconMinus from '../../assets/icon-minus.svg?react'
+import iconTable from '../../assets/icon-table.svg?react'
+import iconSankey from '../../assets/icon-sankey.svg?react'
+import iconRotateLeft from '../../assets/icon-rotate-left.svg?react'
+import iconCommand from '../../assets/icon-command.svg?react'
 
 import '../../styles/v2/components/icon.scss'
 

packages/core/helpers/tests/updateFieldFactory.test.ts

@@ -1,4 +1,5 @@
 import { updateFieldFactory } from '../updateFieldFactory'
+import { expect, describe, it } from 'vitest'
 
 describe('updateFieldFactory', () => {
  it('should update the top level field when section and subsection are null', () => {

packages/core/package.json

@@ -5,8 +5,9 @@
  "moduleName": "CdcCore",
  "main": "dist/cdccore",
  "scripts": {
- "test": "vitest watch --reporter verbose --globals true",
- "test:ui": "vitest --ui"
+ "test": "vitest run --reporter verbose",
+ "test-watch": "vitest watch --reporter verbose",
+ "test-watch:ui": "vitest --ui"
  },
  "repository": {
  "type": "git",

packages/dashboard/package.json

@@ -11,8 +11,9 @@
  "preview": "vite preview",
  "graph": "nx graph",
  "prepublishOnly": "lerna run --scope @cdc/dashboard build",
- "test": "vitest watch --reporter verbose",
- "test:ui": "vitest --ui",
+ "test": "vitest run --reporter verbose",
+ "test-watch": "vitest watch --reporter verbose",
+ "test-watch:ui": "vitest --ui",
  "coverage": "vitest run --coverage"
  },
  "repository": {

packages/dashboard/src/components/Row.tsx

@@ -6,12 +6,12 @@ import Icon from '@cdc/core/components/ui/Icon'
 
 import Column from './Column'
 
-import OneColIcon from '../images/icon-col-12.svg'
-import TwoColIcon from '../images/icon-col-6.svg'
-import ThreeColIcon from '../images/icon-col-4.svg'
-import FourEightColIcon from '../images/icon-col-4-8.svg'
-import EightFourColIcon from '../images/icon-col-8-4.svg'
-import ToggleIcon from '../images/icon-toggle.svg'
+import OneColIcon from '../images/icon-col-12.svg?react'
+import TwoColIcon from '../images/icon-col-6.svg?react'
+import ThreeColIcon from '../images/icon-col-4.svg?react'
+import FourEightColIcon from '../images/icon-col-4-8.svg?react'
+import EightFourColIcon from '../images/icon-col-8-4.svg?react'
+import ToggleIcon from '../images/icon-toggle.svg?react'
 import { ConfigRow } from '../types/ConfigRow'
 import { DataDesignerModal } from './DataDesignerModal'
 import { useGlobalContext } from '@cdc/core/components/GlobalContext'
@@ -105,17 +105,17 @@ const RowMenu: React.FC<RowMenuProps> = ({ rowIdx }) => {
  }
 
  const deleteRow = () => {
- let newVisualizations = {...config.visualizations}
+ let newVisualizations = { ...config.visualizations }
 
  //delete the instantiated widgets
- if(rows[rowIdx] && rows[rowIdx].columns && rows[rowIdx].columns.length && config.visualizations) {
+ if (rows[rowIdx] && rows[rowIdx].columns && rows[rowIdx].columns.length && config.visualizations) {
  rows[rowIdx].columns.forEach(column => {
- if(column.widget){
+ if (column.widget) {
  delete newVisualizations[column.widget]
  }
  })
  }
- 
+
  rows.splice(rowIdx, 1) // delete the row
 
  updateConfig({ ...config, rows, visualizations: newVisualizations })

packages/dashboard/src/helpers/tests/filterData.test.ts

@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import { SharedFilter } from '../../types/SharedFilter'
 import { filterData } from '../filterData'
 
@@ -36,48 +37,6 @@ describe('filterData', () => {
  expect(result).toEqual([{ name: 'John', age: 30 }])
  })
 
- it('causes sideEffects to filters', () => {
- // the side effect is not desired, but current functionality depends on the sideEffect.
- // hopefully the side effect will be refactored in the future to be a returned value.
- const filters = [
- { columnName: 'name', active: 'John', queuedActive: 'John', fileName: 'abc', key: 'name' },
- { columnName: 'age', fileName: 'abc', key: 'age' },
- { columnName: 'color', fileName: 'abc', key: 'color', parents: ['age'] }
- ] as SharedFilter[]
- const data = [
- { name: 'John', age: 30, color: 'blue' },
- { name: 'Jane', age: 25, color: 'red' },
- { name: 'John', age: 35, color: 'yellow' },
- { name: 'Jane', age: 30, color: 'green' }
- ]
-
- const result = filterData(filters, data)
-
- expect(result).toEqual([{ name: 'John', age: 30, color: 'blue' }])
-
- const sideEffectOfFiltering = [
- {
- columnName: 'name',
- active: 'John',
- queuedActive: 'John',
- fileName: 'abc',
- key: 'name',
- tier: 1
- },
- { columnName: 'age', fileName: 'abc', key: 'age', tier: 1 },
- {
- columnName: 'color',
- fileName: 'abc',
- key: 'color',
- parents: ['age'],
- tier: 2,
- values: ['blue', 'yellow'],
- active: 'blue'
- }
- ]
- expect(filters).toEqual(sideEffectOfFiltering)
- })
-
  it('should not include data that does not meet the filter criteria', () => {
  const filters = [
  //{ columnName: 'apple', fileName: 'abc', key: 'banana' },
@@ -97,7 +56,7 @@ describe('filterData', () => {
  })
 
  it('should pivot data based on the provided filters', () => {
- const filters = [{ key: 'Race', type: 'datafilter', showDropdown: true, columnName: 'Race', pivot: 'Age-adjusted rate', usedBy: ['table1707935263149'] }] as SharedFilter[]
+ const filter = { key: 'Race', type: 'datafilter', showDropdown: true, columnName: 'Race', pivot: 'Age-adjusted rate', usedBy: ['table1707935263149'] } as SharedFilter
  const data = [
  {
  Race: 'Hispanic or Latino',
@@ -131,7 +90,9 @@ describe('filterData', () => {
  }
  ]
 
- expect(filterData(filters, data)).toEqual([
+ filter.values = _.uniq(data.map(row => row[filter.columnName]))
+ filter.active = ['Hispanic or Latino', 'Non-Hispanic American Indian', 'Non-Hispanic Black']
+ expect(filterData([filter], data)).toEqual([
  {
  'Hispanic or Latino': '644.2',
  'Non-Hispanic American Indian': '636.1',

packages/data-bite/package.json

@@ -11,8 +11,9 @@
  "preview": "vite preview",
  "graph": "nx graph",
  "prepublishOnly": "lerna run --scope @cdc/data-bite build",
- "test": "vitest watch --reporter verbose",
- "test:ui": "vitest --ui"
+ "test": "vitest run --reporter verbose",
+ "test-watch": "vitest watch --reporter verbose",
+ "test-watch:ui": "vitest --ui"
  },
  "repository": {
  "type": "git",

packages/data-bite/src/components/EditorPanel.jsx

@@ -4,7 +4,7 @@ import { Accordion, AccordionItem, AccordionItemButton, AccordionItemHeading, Ac
 
 import { useDebounce } from 'use-debounce'
 import Context from '../context'
-import WarningImage from '@cdc/core/assets/icon-warning-circle.svg'
+import WarningImage from '@cdc/core/assets/icon-warning-circle.svg?react'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'