Classifier: Refactor survey task tests (#3933)

* Refactor choice required questions tests * Refactor some survey task tests with getByText * Run nyc with --silent flag * Refactor tests with screen * Refactor tests with within * Refactor tests with beforeEach * Refactor tests with getByLabelText * Refactor choiceButton tests with getByLabelText * Remove ARIA labels Co-authored-by: Jim O'Donnell <[email protected]> * Refactor tests for Identify and Not this buttons Co-authored-by: Jim O'Donnell <[email protected]> * Refactors tests with getByText * Refactor tests with querySelector * Refactor choicesMenu tests * Refactor to reduce number of renders - Render once, then test rendered output in individual `it()` blocks. - Fix alt text for Clear Filters button. * Remove .skip * Refactor ClearFilters for readability * Move repeated code into beforeEach() hooks * Add data-testid to choice identify button Co-authored-by: Jim O'Donnell <[email protected]>
zooniverse · Dec 6, 2022 · 921e992 · 921e992
1 parent 103fc15
commit 921e992
Show file tree

Hide file tree

Showing 7 changed files with 281 additions and 316 deletions.
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "panic-button": "./bin/panic-button.sh",
     "storybook": "lerna run --parallel storybook",
     "test": "lerna run --parallel test",
-    "test:ci": "nyc lerna run --parallel test:ci"
+    "test:ci": "nyc --silent lerna run --parallel test:ci"
   },
   "engines": {
     "node": ">=16"

diff --git a/packages/lib-classifier/src/plugins/tasks/survey/components/SurveyTask.spec.js b/packages/lib-classifier/src/plugins/tasks/survey/components/SurveyTask.spec.js
diff --git a/packages/lib-classifier/src/plugins/tasks/survey/components/components/Choice/Choice.js b/packages/lib-classifier/src/plugins/tasks/survey/components/components/Choice/Choice.js
@@ -97,6 +97,7 @@ export default function Choice({
           onClick={() => handleDelete(choiceId)}
         />
         <PrimaryButton
+          data-testid='choice-identify-button'
           disabled={!allowIdentify}
           fill='horizontal'
           label={t('SurveyTask.Choice.identify')}

diff --git a/packages/lib-classifier/src/plugins/tasks/survey/components/components/Choice/Choice.spec.js b/packages/lib-classifier/src/plugins/tasks/survey/components/components/Choice/Choice.spec.js
@@ -84,4 +84,36 @@ describe('Component > Choice', function () {
       expect(screen.queryAllByRole('checkbox', { hidden: true })).to.have.lengthOf(0)
     })
   })
+
+  describe('with choice with required questions unanswered', function () {
+    // choice 'RDVRK' (Aardvark) has 2 required questions
+
+    it('should disable the Identify button', function () {
+      render(
+        <Choice
+          choiceId='RDVRK'
+          task={mockTask}
+        />
+      )
+      expect(screen.getByRole('button', { name: 'SurveyTask.Choice.identify' }).disabled).to.be.true()
+    })
+  })
+
+  describe('with choice with required questions answered', function () {
+    // choice 'RDVRK' (Aardvark) has 2 required questions
+
+    it('should enable the Identify button', function () {
+      render(
+        <Choice
+          answers={{
+            HWMN: '3',
+            WHTBHVRSDS: ['TNG', 'STNDNG']
+          }}
+          choiceId='RDVRK'
+          task={mockTask}
+        />
+      )
+      expect(screen.getByRole('button', { name: 'SurveyTask.Choice.identify' }).disabled).to.be.false()
+    })
+  })
 })
diff --git a/packages/lib-classifier/src/plugins/tasks/survey/components/components/Chooser/Chooser.js b/packages/lib-classifier/src/plugins/tasks/survey/components/components/Chooser/Chooser.js
@@ -20,6 +20,10 @@ function Chooser ({
 }) {
   const [filterDropOpen, setFilterDropOpen] = useState(false)
 
+  function clearFilters() {
+    handleFilter()
+  }
+
   function handleFilterDropClose () {
     setFilterDropOpen(false)
   }
@@ -56,7 +60,7 @@ function Chooser ({
       />
       {showFilters
         ? (<ClearFilters
-            handleFilter={handleFilter}
+            onClick={clearFilters}
             showingChoices={filteredChoiceIds.length}
             totalChoices={task.choicesOrder?.length}
            />)

diff --git a/...mponents/components/Chooser/components/CharacteristicsFilter/ClearFilters/ClearFilters.js b/...mponents/components/Chooser/components/CharacteristicsFilter/ClearFilters/ClearFilters.js
@@ -4,13 +4,12 @@ import PropTypes from 'prop-types'
 import { PlainButton, SpacedText } from '@zooniverse/react-components'
 import { useTranslation } from '@translations/i18n'
 
-export default function ClearFilters (props) {
-  const {
-    handleFilter,
-    showingChoices,
-    totalChoices
-  } = props
-
+const defaultHandler = () => true
+export default function ClearFilters ({
+  onClick = defaultHandler,
+  showingChoices = 0,
+  totalChoices = 0
+}) {
   const { t } = useTranslation('plugins')
 
   return (
@@ -27,22 +26,16 @@ export default function ClearFilters (props) {
       </SpacedText>
       <PlainButton
         disabled={showingChoices === totalChoices}
-        icon={<Clear />}
-        onClick={() => handleFilter()}
+        icon={<Clear aria-hidden='true' />}
+        onClick={onClick}
         text={t('SurveyTask.CharacteristicsFilter.clearFilters')}
       />
     </Box>
   )
 }
 
-ClearFilters.defaultProps = {
-  handleFilter: () => {},
-  showingChoices: 0,
-  totalChoices: 0
-}
-
 ClearFilters.propTypes = {
-  handleFilter: PropTypes.func,
+  onClick: PropTypes.func,
   showingChoices: PropTypes.number,
   totalChoices: PropTypes.number
 }
diff --git a/.../tasks/survey/components/components/Chooser/components/Choices/components/ChoiceButton.js b/.../tasks/survey/components/components/Chooser/components/Choices/components/ChoiceButton.js
@@ -55,7 +55,6 @@ function ChoiceButton({
     <Button
       ref={choiceButton}
       aria-checked={ariaChecked}
-      a11yTitle={choiceLabel}
       disabled={disabled}
       fill
       label={