EDSC-4322: Add tests and fix one test mistake

static/src/js/components/AvailableCustomizationsIcons/AvailableCustomizationsTooltipIcons.jsx

@@ -21,7 +21,6 @@ import './AvailableCustomizationsTooltipIcons.scss'
  * @param {boolean} hasFormats
  * @param {boolean} hasTemporalSubsetting
  * @param {boolean} hasCombine
- * @param {boolean} forAccessMethodRadio - indicates usage for AccessMethodRadio
  */
 export const availableCustomizationsTooltipIcons = ({
   hasSpatialSubsetting,
@@ -48,7 +47,7 @@ export const availableCustomizationsTooltipIcons = ({
           <li>
             <EDSCIcon
               className="available-customizations-tooltip-icons__tooltip-feature-icon"
-              title="A white icon"
+              title="A white globe icon"
               size="0.725rem"
               icon={FaGlobe}
             />
@@ -113,7 +112,7 @@ export const availableCustomizationsTooltipIcons = ({
           <li>
             <EDSCIcon
               className="available-customizations-tooltip-icons__tooltip-feature-icon"
-              title="A white boxes icon"
+              title="A white cubes icon"
               size="0.725rem"
               icon={FaCubes}
             />

static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsIcons.test.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 
-import CustomizableIcons from '../CustomizableIcons'
+import AvailableCustomizationsIcons from '../AvailableCustomizationsIcons'
 
 const setup = (overrideProps) => {
   const props = {
@@ -16,19 +16,14 @@ const setup = (overrideProps) => {
   }
 
   return render(
-    <CustomizableIcons {...props} />
+    <AvailableCustomizationsIcons {...props} />
   )
 }
 
-describe('CustomizableIcons component', () => {
+describe('AvailableCustomizationsIcons component', () => {
   test('on load should contain all of the custom icons for the customizable options', () => {
     setup()
 
-    // Ensure the when not using the `forAccessMethodRadio` use `metaIconClasses`
-    const metaIcon = screen.getByText('Customize')
-    const metaIconWrapper = metaIcon.parentElement
-    expect(metaIconWrapper).toHaveClass('meta-icon customizable-icons__meta-icon')
-
     // Ensure that each of the icons rendered
     expect(screen.getByTitle('A white globe icon')).toBeInTheDocument()
     expect(screen.getByTitle('A white clock icon')).toBeInTheDocument()
@@ -38,29 +33,13 @@ describe('CustomizableIcons component', () => {
     expect(screen.getByTitle('A white cubes icon')).toBeInTheDocument()
   })
 
-  describe('if the customizableIcon is for the access method radio', () => {
-    test('the class name should be appended with', () => {
-      setup({ forAccessMethodRadio: true })
-
-      // Ensure the when using the `forAccessMethodRadio` adds the `meta-icon__accessMethod` to classname
-      const metaIcon = screen.getByText('Customize')
-      const metaIconWrapper = metaIcon.parentElement
-      expect(metaIconWrapper).toHaveClass('meta-icon customizable-icons__meta-icon customizable-icons__meta-icon__accessMethod')
-    })
-  })
-
-  describe('if some of the conditionals are false', () => {
+  describe('when some of the dat customizations are not supported', () => {
     test('those icons do not render', () => {
       setup({
         hasVariables: false,
         hasCombine: false
       })
 
-      // Ensure the when not using the `forAccessMethodRadio` use `metaIconClasses`
-      const metaIcon = screen.getByText('Customize')
-      const metaIconWrapper = metaIcon.parentElement
-      expect(metaIconWrapper).toHaveClass('meta-icon customizable-icons__meta-icon')
-
       // Ensure that each of the icons that are supposed to render do
       expect(screen.getByTitle('A white globe icon')).toBeInTheDocument()
       expect(screen.getByTitle('A white clock icon')).toBeInTheDocument()

static/src/js/components/AvailableCustomizationsIcons/__tests__/AvailableCustomizationsTooltipIcons.test.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import AvailableCustomizationsTooltipIcons from '../AvailableCustomizationsTooltipIcons'
+
+const setup = (overrideProps) => {
+  const props = {
+    hasSpatialSubsetting: true,
+    hasVariables: true,
+    hasTransforms: true,
+    hasFormats: true,
+    hasTemporalSubsetting: true,
+    hasCombine: true,
+    ...overrideProps
+  }
+
+  return render(
+    <AvailableCustomizationsTooltipIcons {...props} />
+  )
+}
+
+describe('AvailableCustomizationsTooltipIcons component', () => {
+  test('on load should contain all of the custom icons for the customizable options', () => {
+    setup()
+
+    // Ensure that each of the icons rendered
+    expect(screen.getByTitle('A white clock icon')).toBeInTheDocument()
+    expect(screen.getByTitle('A white tags icon')).toBeInTheDocument()
+    expect(screen.getByTitle('A white horizontal sliders icon')).toBeInTheDocument()
+    expect(screen.getByTitle('A white file icon')).toBeInTheDocument()
+    expect(screen.getByTitle('A white cubes icon')).toBeInTheDocument()
+  })
+
+  test('ensure Tool-Tip content are list items', () => {
+    setup()
+    const iconListItemsCount = screen.getAllByRole('listitem').length
+    // Ensure that each of the icons rendered
+    expect(iconListItemsCount).toEqual(6)
+  })
+
+  describe('when some of the dat customizations are not supported', () => {
+    test('those icons do not render', () => {
+      setup({
+        hasVariables: false,
+        hasCombine: false
+      })
+
+      // Ensure that each of the icons that are supposed to render do
+      expect(screen.getByTitle('A white globe icon')).toBeInTheDocument()
+      expect(screen.getByTitle('A white clock icon')).toBeInTheDocument()
+      expect(screen.getByTitle('A white horizontal sliders icon')).toBeInTheDocument()
+      expect(screen.getByTitle('A white file icon')).toBeInTheDocument()
+
+      // Ensure that the icons for `hasVariables` and `hasCombine` which were passed false do not render
+      expect(screen.queryByTitle('A white cubes icon')).not.toBeInTheDocument()
+      expect(screen.queryByTitle('A white tags icon')).not.toBeInTheDocument()
+    })
+  })
+})