fix: SummitDropdown | Type Error - null is not an object (evaluating 'this.state.summitValue.value')

Author: matiasperrone

src/components/summit-dropdown/__tests__/summit-dropdown.test.js

@@ -0,0 +1,95 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import SummitDropdown from '..';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const summits = [
+    { id: 1, name: 'Summit A', start_date: 1000 },
+    { id: 2, name: 'Summit B', start_date: 2000 },
+];
+
+const defaultProps = {
+    summits,
+    actionLabel: 'Go',
+    actionClass: '',
+    onClick: jest.fn(),
+};
+
+function render(props = {}) {
+    return mount(<SummitDropdown {...defaultProps} {...props} />);
+}
+
+describe('SummitDropdown summitValue state', () => {
+    beforeEach(() => {
+        defaultProps.onClick.mockClear();
+    });
+
+    test('summitValue is null on initial render', () => {
+        const wrapper = render();
+        expect(wrapper.instance().state.summitValue).toBeNull();
+    });
+
+    test('handleChange sets summitValue when given a valid object', () => {
+        const wrapper = render();
+        const option = { label: 'Summit A', value: 1 };
+
+        wrapper.instance().handleChange(option);
+
+        expect(wrapper.instance().state.summitValue).toEqual(option);
+    });
+
+    test('handleChange does not set summitValue when given a non-object', () => {
+        const wrapper = render();
+
+        wrapper.instance().handleChange('not-an-object');
+
+        expect(wrapper.instance().state.summitValue).toBeNull();
+    });
+
+    test('handleChange does not set summitValue when given null', () => {
+        const wrapper = render();
+
+        wrapper.instance().handleChange(null);
+
+        expect(wrapper.instance().state.summitValue).toBeNull();
+    });
+
+    test('handleClick does not call onClick when summitValue is null', () => {
+        const wrapper = render();
+        const fakeEvent = { preventDefault: jest.fn() };
+
+        // summitValue starts as null — onClick must NOT be called
+        wrapper.instance().handleClick(fakeEvent);
+
+        expect(defaultProps.onClick).not.toHaveBeenCalled();
+    });
+
+    test('handleClick calls onClick with summit id when summitValue is set', () => {
+        const wrapper = render();
+        const option = { label: 'Summit A', value: 1 };
+        const fakeEvent = { preventDefault: jest.fn() };
+
+        wrapper.instance().handleChange(option);
+        wrapper.instance().handleClick(fakeEvent);
+
+        expect(defaultProps.onClick).toHaveBeenCalledWith(1);
+    });
+
+    test('button is disabled when summitValue is null', () => {
+        const wrapper = render();
+        expect(wrapper.find('button').prop('disabled')).toBe(true);
+    });
+
+    test('button is enabled after selecting a summit', () => {
+        const wrapper = render();
+        wrapper.instance().handleChange({ label: 'Summit A', value: 1 });
+        wrapper.update();
+
+        expect(wrapper.find('button').prop('disabled')).toBe(false);
+    });
+});

src/components/summit-dropdown/index.js

@@ -15,6 +15,7 @@ import React from 'react';
 import './summit-dropdown.less';
 import Select from 'react-select';
 import T from 'i18n-react/dist/i18n-react';
+import { OBJECT_TYPEOF, UNDEFINED_TYPEOF } from '../../utils/constants';
 
 export default class SummitDropdown extends React.Component {
 
@@ -30,25 +31,28 @@ export default class SummitDropdown extends React.Component {
     }
 
     handleChange(summit) {
-        this.setState({summitValue: summit});
+        if (typeof summit === OBJECT_TYPEOF)
+          this.setState({summitValue: summit});
     }
 
     handleClick(ev) {
         ev.preventDefault();
-        if (this.state.summitValue)
-            this.props.onClick(this.state.summitValue.value);
+        if (
+          typeof this.state.summitValue === OBJECT_TYPEOF &&
+          typeof this.state.summitValue?.value !== UNDEFINED_TYPEOF
+        )
+          this.props.onClick(this.state.summitValue.value);
     }
 
     render() {
 
-        let {summits, actionLabel, actionClass} = this.props;
+        let {summits, actionLabel, actionClass, big: bigClass = "" } = this.props;
         let summitOptions = summits
             .sort(
                 (a, b) => (a.start_date < b.start_date ? 1 : (a.start_date > b.start_date ? -1 : 0))
             ).map(s => ({label: s.name, value: s.id}));
 
-        let bigClass = this.props.hasOwnProperty('big') ? 'big' : '';
-        const isDisabled = !this.state.summitValue;
+        const isDisabled = typeof this.state.summitValue !== OBJECT_TYPEOF || this.state.summitValue === null;
 
         return (
             <div className={"summit-dropdown btn-group " + bigClass}>

src/utils/constants.js

@@ -3,3 +3,6 @@ export const TWO_DECIMAL_PLACES = 2;
 export const THREE_DECIMAL_PLACES = 3;
 export const ONE_CENT = 1n;
 export const ZERO_INT = 0;
+
+export const OBJECT_TYPEOF = 'object';
+export const UNDEFINED_TYPEOF = 'undefined';