Refactor survey task tests per Choice layout changes

zooniverse · Nov 19, 2024 · 2de6216 · 2de6216
1 parent c1b97ad
commit 2de6216
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 49 deletions.
diff --git a/packages/lib-classifier/src/plugins/tasks/survey/components/SurveyTask.userClicks.spec.js b/packages/lib-classifier/src/plugins/tasks/survey/components/SurveyTask.userClicks.spec.js
@@ -173,9 +173,9 @@ describe('SurveyTask with user clicks', function () {
       await user.click(choiceButton)
     })
 
-    it('should show the choice description', async function () {
-      const choiceDescription = screen.getByText('It\'s a fire. Pretty sure you know what this looks like.')
-      expect(choiceDescription).to.be.ok()
+    it('should show the "More info" button', async function () {
+      const choiceMoreInfoButton = screen.getByRole('button', { name: 'SurveyTask.Choice.moreInfo' })
+      expect(choiceMoreInfoButton).to.be.ok()
     })
 
     it('should show choice images', async function () {
@@ -184,12 +184,12 @@ describe('SurveyTask with user clicks', function () {
     })
 
     it('should show choices with closed choice focused when Not This button is clicked', async function () {
-      const notThisButton = screen.getByText('SurveyTask.Choice.notThis')
+      const cancelButton = screen.getByText('SurveyTask.Choice.cancel')
       // close choice (Fire) component
-      await user.click(notThisButton)
-      // confirm choice (Fire) description, and therefore choice, is not shown
-      const choiceDescription = screen.queryByText('It\'s a fire. Pretty sure you know what this looks like.')
-      expect(choiceDescription).to.be.null()
+      await user.click(cancelButton)
+      // confirm choice "More info" button is not shown, therefore choice is closed
+      const choiceMoreInfoButton = screen.queryByRole('button', { name: 'SurveyTask.Choice.moreInfo' })
+      expect(choiceMoreInfoButton).to.be.null()
       // confirm choices are shown
       const choiceButtons = document.querySelector('[role=menu]').querySelectorAll('[role=menuitemcheckbox]')
       expect(choiceButtons.length).to.equal(6)
@@ -202,9 +202,9 @@ describe('SurveyTask with user clicks', function () {
       const identifyButton = screen.getByTestId('choice-identify-button')
       // identify choice (Fire) and close choice (Fire) component
       await user.click(identifyButton)
-      // confirm choice (Fire) description, and therefore choice, is not shown
-      const choiceDescription = screen.queryByText('It\'s a fire. Pretty sure you know what this looks like.')
-      expect(choiceDescription).to.be.null()
+      // confirm choice "More info" button is not shown, therefore choice is closed
+      const choiceMoreInfoButton = screen.queryByRole('button', { name: 'SurveyTask.Choice.moreInfo' })
+      expect(choiceMoreInfoButton).to.be.null()
       // confirm choices are shown
       const choiceButtons = document.querySelector('[role=menu]').querySelectorAll('[role=menuitemcheckbox]')
       expect(choiceButtons.length).to.equal(6)

diff --git a/...ages/lib-classifier/src/plugins/tasks/survey/components/SurveyTask.userKeystrokes.spec.js b/...ages/lib-classifier/src/plugins/tasks/survey/components/SurveyTask.userKeystrokes.spec.js
@@ -167,9 +167,9 @@ describe('SurveyTask with user keystrokes', function () {
       await user.keyboard('[Enter]')
     })
 
-    it('should show the choice description', async function () {
-      const choiceDescription = screen.getByText('Not as awesome as a pangolin, but surprisingly big.')
-      expect(choiceDescription).to.be.ok()
+    it('should show the "more info" button', async function () {
+      const choiceMoreInfoButton = screen.getByRole('button', { name: 'SurveyTask.Choice.moreInfo' })
+      expect(choiceMoreInfoButton).to.be.ok()
     })
 
     it('should show choice images', async function () {

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
@@ -38,7 +38,7 @@ function Choice({
   onIdentify = () => {},
   task
 }) {
-  const [showDescription, setShowDescription] = useState(false)
+  const [showInfo, setShowInfo] = useState(false)
   const {
     choices,
     images,
@@ -58,12 +58,12 @@ function Choice({
   const choice = choices?.get(choiceId) || {}
   const questionIds = getQuestionIds(choiceId, task)
   const allowIdentify = allowIdentification(answers, choiceId, task)
-  const DescriptionLabel = (
+  const InfoLabel = (
     <Box
       direction='row'
       gap='xsmall'
     >
-      {showDescription ? (
+      {showInfo ? (
         <>
           <Text>{t('SurveyTask.Choice.lessInfo')}</Text>
           <FormUp />
@@ -139,13 +139,14 @@ function Choice({
             {strings.get(`choices.${choiceId}.label`)}
           </Heading>
           <Button
-            label={DescriptionLabel}
-            onClick={() => setShowDescription(!showDescription)}          
+            a11yTitle={showInfo ? t('SurveyTask.Choice.lessInfo') : t('SurveyTask.Choice.moreInfo')}
+            label={InfoLabel}
+            onClick={() => setShowInfo(!showInfo)}          
             plain
           />
         </Box>
         <Collapsible
-          open={showDescription}
+          open={showInfo}
         >
           <Box margin={{ bottom: '30px' }}>
             <Paragraph margin='none'>

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
@@ -12,10 +12,10 @@ const mockTask = SurveyTask.TaskModel.create(task)
 describe('Component > Choice', function () {
   this.timeout(0)
 
-  describe('with choice with images, confusions, and questions', function () {
-    let carousel, confusedWith, question
+  describe('with choice with images and questions', function () {
+    let carousel, showMoreInfo, question
 
-    // choice 'KD' (Kudu) includes images, confusions, and questions
+    // choice 'KD' (Kudu) includes images and questions
     before(function () {
       render(
         <Grommet
@@ -30,25 +30,25 @@ describe('Component > Choice', function () {
       )
 
       carousel = screen.getByTestId('choice-images')
-      confusedWith = screen.getByText('SurveyTask.ConfusedWith.confused')
+      showMoreInfo = screen.getByRole('button', { name: 'SurveyTask.Choice.moreInfo' })
       question = screen.getByText('Are there any young present?')
     })
 
     it('should show Carousel', function () {
       expect(carousel).to.be.ok()
     })
 
-    it('should show ConfusedWith', function () {
-      expect(confusedWith).to.be.ok()
+    it('should show "More info" button', function () {
+      expect(showMoreInfo).to.be.ok()
     })
 
     it('should show Questions', function () {
       expect(question).to.be.ok()
     })
   })
 
-  describe('with choice without images, with confusions', function () {
-    // choice 'NTHNGHR' (Nothing here) excludes images, includes confusions
+  describe('with choice without images', function () {
+    // choice 'NTHNGHR' (Nothing here) excludes images
 
     it('should not render Carousel', function () {
       render(
@@ -66,27 +66,8 @@ describe('Component > Choice', function () {
     })
   })
 
-  describe('with choice without images or confusions, with questions', function () {
-    // choice 'HMN' (Human) excludes images and confusions, includes questions
-
-    it('should not render ConfusedWith', function () {
-      render(
-        <Grommet
-          theme={zooTheme}
-          themeMode='light'
-        >
-          <Choice
-            choiceId='HMN'
-            task={mockTask}
-          />
-        </Grommet>
-      )
-      expect(screen.queryByText('Sometimes confused with')).to.be.null()
-    })
-  })
-
-  describe('with choice without more than 1 image, confusions, or questions', function () {
-    // choice 'FR' (Fire) has 1 image, excludes confusions and questions
+  describe('with choice without more than 1 image or questions', function () {
+    // choice 'FR' (Fire) has 1 image excludes questions
 
     it('should not render Questions', function () {
       render(