MMT:3410: More cleanup

nasa · Dec 16, 2023 · a6faba9 · a6faba9
1 parent 23b3e9a
commit a6faba9
Show file tree

Hide file tree

Showing 27 changed files with 305 additions and 198 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -95,8 +95,7 @@ const config = {
   // moduleNameMapper: {},
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'babel-jest',
-    '^.+\\.(css|less|scss)$': 'babel-jest',
-    // '^lodash-es$': 'lodash'
+    '^.+\\.(css|less|scss)$': 'babel-jest'
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader

diff --git a/static/src/css/eui/_nested-item-picker.scss b/static/src/css/eui/_nested-item-picker.scss
@@ -1,3 +1,5 @@
+/* stylelint-disable */
+
 .eui-nested-item-picker {
   position: relative;
   max-height: 400px;
@@ -78,4 +80,4 @@
               .eui-nested-item-picker .eui-item-list-pane span.final-option-selected:after, .eui-nested-item-picker .eui-item-list-pane span.final-option-selected:hover:after {
                 color: var(--bs-green);
                 font-family: EUI-Icon-Library;
-                content: "\f102"; }
+                content: "\f102"; }
diff --git a/static/src/js/components/CustomArrayFieldTemplate/CustomArrayFieldTemplate.jsx b/static/src/js/components/CustomArrayFieldTemplate/CustomArrayFieldTemplate.jsx
@@ -130,7 +130,7 @@ const CustomArrayFieldTemplate = ({
                         className="custom-array-field-template__remove-button text-danger px-0"
                         Icon={FaMinusCircle}
                         naked
-                        onClick={() => onDropIndexClick(elementIndex)}
+                        onClick={onDropIndexClick(elementIndex)}
                       >
                         Remove
                       </Button>

diff --git a/static/src/js/components/CustomArrayFieldTemplate/__tests__/CustomArrayFieldTemplate.test.js b/static/src/js/components/CustomArrayFieldTemplate/__tests__/CustomArrayFieldTemplate.test.js
@@ -17,15 +17,13 @@ const setup = (overrideProps = {}) => {
     className: 'array-item',
     key: 'mock-key',
     length: '1',
-    onDropIndexClick: jest.fn()
+    onDropIndexClick: jest.fn(() => jest.fn())
   }]
 
-  const onAddClick = jest.fn()
-
   const props = {
     canAdd: true,
     items,
-    onAddClick,
+    onAddClick: jest.fn(),
     required: false,
     schema: {
       description: 'Test Description'
@@ -85,7 +83,7 @@ describe('CustomArrayFieldTemplate', () => {
     test('adds another array field', async () => {
       const { props } = setup()
 
-      const addButton = screen.getAllByRole('button')[1]
+      const addButton = screen.getByRole('button', { name: 'Add Another Array Field Test' })
 
       await waitFor(async () => {
         addButton.click()
@@ -102,10 +100,10 @@ describe('CustomArrayFieldTemplate', () => {
     test('removes a array field', async () => {
       const { props } = setup()
 
-      const addButton = screen.getAllByRole('button')[0]
+      const remove = screen.getByRole('button', { name: 'Remove' })
 
       await waitFor(async () => {
-        addButton.click()
+        remove.click()
       })
 
       expect(props.items[0].onDropIndexClick).toHaveBeenCalledTimes(1)

diff --git a/static/src/js/components/CustomRadioWidget/CustomRadioWidget.jsx b/static/src/js/components/CustomRadioWidget/CustomRadioWidget.jsx
@@ -37,6 +37,7 @@ const CustomRadioWidget = ({
   uiSchema,
   value
 }) => {
+  console.log('🚀 ~ file: CustomRadioWidget.jsx:40 ~ id:', id)
   const selectScrollRef = useRef(null)
   const focusRef = useRef(null)
   const { formContext } = registry
@@ -100,23 +101,23 @@ const CustomRadioWidget = ({
         </div>
 
         <input
-          id="trueRadio"
+          id={`${id}-true`}
           name="true"
           onChange={handleChange}
           type="radio"
           checked={value === true}
           ref={focusRef}
         />
-        <label htmlFor="trueRadio">True</label>
+        <label htmlFor={`${id}-true`}>True</label>
         <br />
         <input
-          id="falseRadio"
+          id={`${id}-false`}
           name="false"
           onChange={handleChange}
           type="radio"
           checked={value === false}
         />
-        <label htmlFor="falseRadio">False</label>
+        <label htmlFor={`${id}-false`}>False</label>
       </div>
     </CustomWidgetWrapper>
   )

diff --git a/static/src/js/components/CustomRadioWidget/CustomRadioWidget.scss b/static/src/js/components/CustomRadioWidget/CustomRadioWidget.scss
@@ -1,5 +1,5 @@
 .custom-radio-widget-clear-btn {
     color:blue;
-    text-decoration: underline;
     cursor: pointer;
-}
+    text-decoration: underline;
+}
diff --git a/static/src/js/components/CustomSelectWidget/__tests__/CustomSelectWidget.test.js b/static/src/js/components/CustomSelectWidget/__tests__/CustomSelectWidget.test.js
@@ -85,8 +85,7 @@ beforeEach(() => {
 
 describe('CustomSelectWidget', () => {
   describe('when the field is given schema enums for options', () => {
-    // TODO Matthew help!
-    test.skip('renders a select element', async () => {
+    test('renders a select element', async () => {
       const { user } = setup({
         schema: {
           description: 'Test Description',
@@ -107,8 +106,7 @@ describe('CustomSelectWidget', () => {
 
       // First call is loading the page
       // Second call is setting the options
-      // Third call is clicking the select
-      expect(CustomWidgetWrapper).toHaveBeenCalledTimes(3)
+      expect(CustomWidgetWrapper).toHaveBeenCalledTimes(2)
       expect(CustomWidgetWrapper).toHaveBeenCalledWith(expect.objectContaining({
         description: 'Test Description',
         headerClassName: null,
@@ -121,7 +119,7 @@ describe('CustomSelectWidget', () => {
   })
 
   describe('when the field is given selectOptions props', () => {
-    test.skip('renders a select element', async () => {
+    test('renders a select element', async () => {
       const { user } = setup({
         selectOptions: [
           'Select Options Enum 1',
@@ -137,7 +135,7 @@ describe('CustomSelectWidget', () => {
       expect(screen.getByRole('option', { name: 'Select Options Enum 1' })).toBeInTheDocument()
       expect(screen.getByRole('option', { name: 'Select Options Enum 2' })).toBeInTheDocument()
 
-      expect(CustomWidgetWrapper).toHaveBeenCalledTimes(3)
+      expect(CustomWidgetWrapper).toHaveBeenCalledTimes(2)
       expect(CustomWidgetWrapper).toHaveBeenCalledWith(expect.objectContaining({
         description: 'Test Description',
         headerClassName: null,
@@ -150,7 +148,7 @@ describe('CustomSelectWidget', () => {
   })
 
   describe('when the field is given ui:options', () => {
-    test.skip('renders a select element', async () => {
+    test('renders a select element', async () => {
       const { user } = setup({
         uiSchema: {
           'ui:options': {
@@ -170,7 +168,7 @@ describe('CustomSelectWidget', () => {
       expect(screen.getByRole('option', { name: 'UI Schema Options Enum 1' })).toBeInTheDocument()
       expect(screen.getByRole('option', { name: 'UI Schema Options Enum 2' })).toBeInTheDocument()
 
-      expect(CustomWidgetWrapper).toHaveBeenCalledTimes(3)
+      expect(CustomWidgetWrapper).toHaveBeenCalledTimes(2)
       expect(CustomWidgetWrapper).toHaveBeenCalledWith(expect.objectContaining({
         description: 'Test Description',
         headerClassName: null,
@@ -183,7 +181,7 @@ describe('CustomSelectWidget', () => {
   })
 
   describe('when the field uses controlled keywords', () => {
-    test.skip('renders a select element', async () => {
+    test('renders a select element', async () => {
       const { user } = setup()
 
       expect(screen.getByText('Test Placeholder').className).toContain('placeholder')
@@ -195,7 +193,7 @@ describe('CustomSelectWidget', () => {
       expect(screen.getByRole('option', { name: 'application/gzip' })).toBeInTheDocument()
       expect(screen.getByRole('option', { name: 'application/json' })).toBeInTheDocument()
 
-      expect(CustomWidgetWrapper).toHaveBeenCalledTimes(3)
+      expect(CustomWidgetWrapper).toHaveBeenCalledTimes(2)
       expect(CustomWidgetWrapper).toHaveBeenCalledWith(expect.objectContaining({
         description: 'Test Description',
         headerClassName: null,

diff --git a/static/src/js/components/CustomTextareaWidget/CustomTextareaWidget.jsx b/static/src/js/components/CustomTextareaWidget/CustomTextareaWidget.jsx
@@ -65,14 +65,6 @@ const CustomTextareaWidget = ({
     }
   }, [shouldFocus])
 
-  if (shouldFocus) {
-    textareaScrollRef.current?.scrollIntoView({ behavior: 'smooth' })
-
-    if (focusRef.current) {
-      focusRef.current.focus()
-    }
-  }
-
   const handleChange = (event) => {
     const { value: newValue } = event.target
 

diff --git a/static/src/js/components/CustomTextareaWidget/CustomTextareaWidget.scss b/static/src/js/components/CustomTextareaWidget/CustomTextareaWidget.scss
@@ -1,6 +1,6 @@
 .custom-textarea-widget {
   &__input {
-    min-height: 100px;
     min-width: 100%;
+    min-height: 100px;
   }
-}
+}
diff --git a/static/src/js/components/CustomWidgetWrapper/CustomWidgetWrapper.scss b/static/src/js/components/CustomWidgetWrapper/CustomWidgetWrapper.scss
@@ -1,11 +1,11 @@
 .custom-widget-wrapper {
   &__help {
-    border-radius: 0.125rem;
-    padding: 0.0625rem 0.25rem;
     position: relative;
     right: -0.125rem;
+    padding: 0.0625rem 0.25rem;
     border: 0;
+    border-radius: 0.125rem;
     margin: 0;
     background-color: transparent;
   }
-}
+}