@govuk-frederic/countdown-text-area - npm Package Compare versions

Comparing version 0.0.4 to 0.1.0

es/index.js

@@ -66,3 +66,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  * import manageState from 'manage-state';
- * 
+ *
  * const ManagedCountdownTextarea = manageState(CountdownTextArea, {
@@ -72,10 +72,10 @@ *  changeEvent: true,
  * });
- * 
+ *
  * <ManagedCountdownTextarea />
  * ```
- * 
+ *
  * With maxlength (150)
  * ```jsx
  * import manageState from 'manage-state';
- * 
+ *
  * const ManagedCountdownTextarea = manageState(CountdownTextArea, {
@@ -85,10 +85,10 @@ *  changeEvent: true,
  * });
- 
+
  * <ManagedCountdownTextarea noMaxLengthAttr maxLength={150} />
  * ```
- * 
+ *
  * With maxlength (100) and positiveOnly
  * ```jsx
  * import manageState from 'manage-state';
- * 
+ *
  * const ManagedCountdownTextarea = manageState(CountdownTextArea, {
@@ -98,3 +98,3 @@ *  changeEvent: true,
  * });
- * 
+ *
  * <ManagedCountdownTextarea maxLength={100} positiveOnly />
@@ -113,7 +113,14 @@ * ```
   var over = showRemaining && remaining <= 0;
+  var name = input.name ? input.name : 'CountdownTextArea';
   return React.createElement(StyledTextArea, _extends({
     over: over
-  }, props), React.createElement(StyledTextAreaField, _extends({}, input, {
+  }, props, {
+    name: name + "--container"
+  }), React.createElement(StyledTextAreaField, _extends({}, input, {
     maxLength: noMaxLengthAttr ? null : maxLength
-  })), showRemaining && React.createElement(StyledCountdownContainer, null, React.createElement(StyledCountdown, null, over && positiveOnly ? '0' : remaining)));
+  })), showRemaining && React.createElement(StyledCountdownContainer, {
+    name: name + "--count_wrapper"
+  }, React.createElement(StyledCountdown, {
+    name: name + "--count"
+  }, over && positiveOnly ? '0' : remaining)));
 };
@@ -126,8 +133,3 @@
 };
-CountdownTextArea.propTypes = process.env.NODE_ENV !== "production" ? {
-  maxLength: PropTypes.number,
-  noMaxLengthAttr: PropTypes.bool,
-  positiveOnly: PropTypes.bool
-} : {};
 export default CountdownTextArea;
 //# sourceMappingURL=index.js.map

es/test.js

 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import { createMatchers } from 'jest-emotion';
 import * as emotion from 'emotion';
 import { ERROR_COLOUR } from 'govuk-colours';
-import Component from '.';
+import CountdownTextArea from '.';
 expect.extend(createMatchers(emotion));
-describe('CountdownTextarea', function () {
-  var wrapper;
+var onChange = jest.fn();
+describe('CountdownTextArea', function () {
+  it('renders without crashing', function () {
+    var wrapper = shallow(React.createElement(CountdownTextArea, null));
+    expect(wrapper.exists()).toBe(true);
+  });
   describe('displays a countdown based on maxLength prop', function () {
     it('contains countdown', function () {
-      wrapper = shallow(React.createElement(Component, {
+      var wrapper = shallow(React.createElement(CountdownTextArea, {
         maxLength: 250
@@ -18,13 +22,40 @@ }));
     it('reduces countdown', function () {
-      wrapper.setProps({
-        value: 'test'
-      });
+      var wrapper = shallow(React.createElement(CountdownTextArea, {
+        value: "Test",
+        maxLength: 250,
+        onChange: onChange
+      }));
       expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('246');
     });
   });
+  describe('displays a countdown container prop', function () {
+    it('correctly shows container name attribute', function () {
+      var wrapper = shallow(React.createElement(CountdownTextArea, {
+        name: "countdown"
+      }));
+      expect(wrapper.prop('name')).toEqual('countdown--container');
+    });
+    it('correctly shows countdown wrapper attribute', function () {
+      var wrapper = shallow(React.createElement(CountdownTextArea, {
+        value: "Test",
+        name: "countdown",
+        maxLength: 202
+      }));
+      expect(wrapper.find('StyledCountdownContainer').prop('name')).toEqual('countdown--count_wrapper');
+    });
+    it('correctly shows countdown name attribute', function () {
+      var wrapper = shallow(React.createElement(CountdownTextArea, {
+        value: "Test",
+        name: "countdown",
+        maxLength: 202
+      }));
+      expect(wrapper.find('StyledCountdown').prop('name')).toEqual('countdown--count');
+    });
+  });
   describe('displays count as expected', function () {
     it('correctly shows 198 when 198 remaining', function () {
-      wrapper = shallow(React.createElement(Component, {
+      var wrapper = shallow(React.createElement(CountdownTextArea, {
         value: "Test",
-        maxLength: 202
+        maxLength: 202,
+        onChange: onChange
       }));
@@ -34,5 +65,7 @@ expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('198');
     it('correctly shows -2 as count when 2 over', function () {
-      wrapper.setProps({
-        maxLength: 2
-      });
+      var wrapper = shallow(React.createElement(CountdownTextArea, {
+        value: "Test",
+        maxLength: 2,
+        onChange: onChange
+      }));
       expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('-2');
@@ -43,2 +76,7 @@ });
     it('sets color and font-weight when overflowing', function () {
+      var wrapper = shallow(React.createElement(CountdownTextArea, {
+        value: "Test",
+        maxLength: 2,
+        onChange: onChange
+      }));
       expect(wrapper).toHaveStyleRule('color', ERROR_COLOUR);
@@ -48,5 +86,7 @@ expect(wrapper).toHaveStyleRule('font-weight', '800');
     it('does not set color and font-weight when not overflowing', function () {
-      wrapper.setProps({
-        maxLength: 5
-      });
+      var wrapper = shallow(React.createElement(CountdownTextArea, {
+        value: "Test",
+        maxLength: 5,
+        onChange: onChange
+      }));
       expect(wrapper).not.toHaveStyleRule('color', ERROR_COLOUR);
@@ -56,17 +96,8 @@ expect(wrapper).not.toHaveStyleRule('font-weight', '800');
   });
-  describe('maxLengths to zero when positiveOnly set', function () {
-    it('limits countdown value by maxLength', function () {
-      wrapper = shallow(React.createElement(Component, {
-        value: "Test",
-        maxLength: 2,
-        positiveOnly: true
-      }));
-      expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('0');
-    });
-  });
   describe('manages maxLength prop as expected', function () {
     it('sets maxLength prop if sent', function () {
-      wrapper = shallow(React.createElement(Component, {
+      var wrapper = shallow(React.createElement(CountdownTextArea, {
         value: "Test",
-        maxLength: 10
+        maxLength: 10,
+        onChange: onChange
       }));
@@ -76,15 +107,33 @@ expect(wrapper.find('StyledTextAreaField').prop('maxLength')).toBe(10);
     it('does not set maxLength prop if not sent', function () {
-      wrapper.setProps({
-        noMaxLengthAttr: true
-      });
+      var wrapper = shallow(React.createElement(CountdownTextArea, {
+        value: "Test",
+        maxLength: 2,
+        noMaxLengthAttr: true,
+        onChange: onChange
+      }));
       expect(wrapper.find('StyledTextAreaField').prop('maxLength')).toBe(null);
     });
+    it('maxLengths to zero when positiveOnly set', function () {
+      var wrapper = shallow(React.createElement(CountdownTextArea, {
+        value: "Test",
+        maxLength: 2,
+        positiveOnly: true,
+        onChange: onChange
+      }));
+      expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('0');
+    });
+    it('omits countdown field when no maxLength given', function () {
+      var wrapper = shallow(React.createElement(CountdownTextArea, {
+        value: "Test",
+        onChange: onChange
+      }));
+      expect(wrapper.find('StyledCountdown').exists()).toBe(false);
+    });
   });
-  it('omits countdown field when no maxLength given', function () {
-    wrapper = shallow(React.createElement(Component, {
-      value: "Test"
+  it('matches snapshot', function () {
+    var wrapper = mount(React.createElement(CountdownTextArea, {
+      value: "Test",
+      maxLength: 2,
+      onChange: onChange
     }));
-    expect(wrapper.find('StyledCountdown').exists()).toBe(false);
-  });
-  it('matches snapshot', function () {
     expect(wrapper).toMatchSnapshot();
@@ -91,0 +140,0 @@ });

lib/index.js

@@ -79,3 +79,3 @@ "use strict";
  * import manageState from 'manage-state';
- * 
+ *
  * const ManagedCountdownTextarea = manageState(CountdownTextArea, {
@@ -85,10 +85,10 @@ *  changeEvent: true,
  * });
- * 
+ *
  * <ManagedCountdownTextarea />
  * ```
- * 
+ *
  * With maxlength (150)
  * ```jsx
  * import manageState from 'manage-state';
- * 
+ *
  * const ManagedCountdownTextarea = manageState(CountdownTextArea, {
@@ -98,10 +98,10 @@ *  changeEvent: true,
  * });
- 
+
  * <ManagedCountdownTextarea noMaxLengthAttr maxLength={150} />
  * ```
- * 
+ *
  * With maxlength (100) and positiveOnly
  * ```jsx
  * import manageState from 'manage-state';
- * 
+ *
  * const ManagedCountdownTextarea = manageState(CountdownTextArea, {
@@ -111,3 +111,3 @@ *  changeEvent: true,
  * });
- * 
+ *
  * <ManagedCountdownTextarea maxLength={100} positiveOnly />
@@ -126,7 +126,14 @@ * ```
   var over = showRemaining && remaining <= 0;
+  var name = input.name ? input.name : 'CountdownTextArea';
   return _react.default.createElement(StyledTextArea, _extends({
     over: over
-  }, props), _react.default.createElement(StyledTextAreaField, _extends({}, input, {
+  }, props, {
+    name: name + "--container"
+  }), _react.default.createElement(StyledTextAreaField, _extends({}, input, {
     maxLength: noMaxLengthAttr ? null : maxLength
-  })), showRemaining && _react.default.createElement(StyledCountdownContainer, null, _react.default.createElement(StyledCountdown, null, over && positiveOnly ? '0' : remaining)));
+  })), showRemaining && _react.default.createElement(StyledCountdownContainer, {
+    name: name + "--count_wrapper"
+  }, _react.default.createElement(StyledCountdown, {
+    name: name + "--count"
+  }, over && positiveOnly ? '0' : remaining)));
 };
@@ -139,7 +146,2 @@
 };
-CountdownTextArea.propTypes = process.env.NODE_ENV !== "production" ? {
-  maxLength: _propTypes.default.number,
-  noMaxLengthAttr: _propTypes.default.bool,
-  positiveOnly: _propTypes.default.bool
-} : {};
 var _default = CountdownTextArea;
@@ -146,0 +148,0 @@ exports.default = _default;

lib/test.js

@@ -20,7 +20,11 @@ "use strict";
 expect.extend((0, _jestEmotion.createMatchers)(emotion));
-describe('CountdownTextarea', function () {
-  var wrapper;
+var onChange = jest.fn();
+describe('CountdownTextArea', function () {
+  it('renders without crashing', function () {
+    var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, null));
+    expect(wrapper.exists()).toBe(true);
+  });
   describe('displays a countdown based on maxLength prop', function () {
     it('contains countdown', function () {
-      wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
+      var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
         maxLength: 250
@@ -31,13 +35,40 @@ }));
     it('reduces countdown', function () {
-      wrapper.setProps({
-        value: 'test'
-      });
+      var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
+        value: "Test",
+        maxLength: 250,
+        onChange: onChange
+      }));
       expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('246');
     });
   });
+  describe('displays a countdown container prop', function () {
+    it('correctly shows container name attribute', function () {
+      var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
+        name: "countdown"
+      }));
+      expect(wrapper.prop('name')).toEqual('countdown--container');
+    });
+    it('correctly shows countdown wrapper attribute', function () {
+      var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
+        value: "Test",
+        name: "countdown",
+        maxLength: 202
+      }));
+      expect(wrapper.find('StyledCountdownContainer').prop('name')).toEqual('countdown--count_wrapper');
+    });
+    it('correctly shows countdown name attribute', function () {
+      var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
+        value: "Test",
+        name: "countdown",
+        maxLength: 202
+      }));
+      expect(wrapper.find('StyledCountdown').prop('name')).toEqual('countdown--count');
+    });
+  });
   describe('displays count as expected', function () {
     it('correctly shows 198 when 198 remaining', function () {
-      wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
+      var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
         value: "Test",
-        maxLength: 202
+        maxLength: 202,
+        onChange: onChange
       }));
@@ -47,5 +78,7 @@ expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('198');
     it('correctly shows -2 as count when 2 over', function () {
-      wrapper.setProps({
-        maxLength: 2
-      });
+      var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
+        value: "Test",
+        maxLength: 2,
+        onChange: onChange
+      }));
       expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('-2');
@@ -56,2 +89,7 @@ });
     it('sets color and font-weight when overflowing', function () {
+      var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
+        value: "Test",
+        maxLength: 2,
+        onChange: onChange
+      }));
       expect(wrapper).toHaveStyleRule('color', _govukColours.ERROR_COLOUR);
@@ -61,5 +99,7 @@ expect(wrapper).toHaveStyleRule('font-weight', '800');
     it('does not set color and font-weight when not overflowing', function () {
-      wrapper.setProps({
-        maxLength: 5
-      });
+      var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
+        value: "Test",
+        maxLength: 5,
+        onChange: onChange
+      }));
       expect(wrapper).not.toHaveStyleRule('color', _govukColours.ERROR_COLOUR);
@@ -69,17 +109,8 @@ expect(wrapper).not.toHaveStyleRule('font-weight', '800');
   });
-  describe('maxLengths to zero when positiveOnly set', function () {
-    it('limits countdown value by maxLength', function () {
-      wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
-        value: "Test",
-        maxLength: 2,
-        positiveOnly: true
-      }));
-      expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('0');
-    });
-  });
   describe('manages maxLength prop as expected', function () {
     it('sets maxLength prop if sent', function () {
-      wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
+      var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
         value: "Test",
-        maxLength: 10
+        maxLength: 10,
+        onChange: onChange
       }));
@@ -89,15 +120,33 @@ expect(wrapper.find('StyledTextAreaField').prop('maxLength')).toBe(10);
     it('does not set maxLength prop if not sent', function () {
-      wrapper.setProps({
-        noMaxLengthAttr: true
-      });
+      var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
+        value: "Test",
+        maxLength: 2,
+        noMaxLengthAttr: true,
+        onChange: onChange
+      }));
       expect(wrapper.find('StyledTextAreaField').prop('maxLength')).toBe(null);
     });
+    it('maxLengths to zero when positiveOnly set', function () {
+      var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
+        value: "Test",
+        maxLength: 2,
+        positiveOnly: true,
+        onChange: onChange
+      }));
+      expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('0');
+    });
+    it('omits countdown field when no maxLength given', function () {
+      var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
+        value: "Test",
+        onChange: onChange
+      }));
+      expect(wrapper.find('StyledCountdown').exists()).toBe(false);
+    });
   });
-  it('omits countdown field when no maxLength given', function () {
-    wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
-      value: "Test"
+  it('matches snapshot', function () {
+    var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.default, {
+      value: "Test",
+      maxLength: 2,
+      onChange: onChange
     }));
-    expect(wrapper.find('StyledCountdown').exists()).toBe(false);
-  });
-  it('matches snapshot', function () {
     expect(wrapper).toMatchSnapshot();
@@ -104,0 +153,0 @@ });

package.json

 {
   "name": "@govuk-frederic/countdown-text-area",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "dependencies": {
@@ -5,0 +5,0 @@ "@govuk-react/constants": "^0.2.7",

src/index.js

@@ -46,3 +46,3 @@ import React from 'react';
  * import manageState from 'manage-state';
- * 
+ *
  * const ManagedCountdownTextarea = manageState(CountdownTextArea, {
@@ -52,10 +52,10 @@ *  changeEvent: true,
  * });
- * 
+ *
  * <ManagedCountdownTextarea />
  * ```
- * 
+ *
  * With maxlength (150)
  * ```jsx
  * import manageState from 'manage-state';
- * 
+ *
  * const ManagedCountdownTextarea = manageState(CountdownTextArea, {
@@ -65,10 +65,10 @@ *  changeEvent: true,
  * });
- 
+
  * <ManagedCountdownTextarea noMaxLengthAttr maxLength={150} />
  * ```
- * 
+ *
  * With maxlength (100) and positiveOnly
  * ```jsx
  * import manageState from 'manage-state';
- * 
+ *
  * const ManagedCountdownTextarea = manageState(CountdownTextArea, {
@@ -78,3 +78,3 @@ *  changeEvent: true,
  * });
- * 
+ *
  * <ManagedCountdownTextarea maxLength={100} positiveOnly />
@@ -91,9 +91,10 @@ * ```
   const over = showRemaining && remaining <= 0;
+  const name = input.name ? input.name : 'CountdownTextArea';
 
   return (
-    <StyledTextArea over={over} {...props}>
+    <StyledTextArea over={over} {...props} name={`${name}--container`}>
       <StyledTextAreaField {...input} maxLength={noMaxLengthAttr ? null : maxLength} />
       {showRemaining && (
-        <StyledCountdownContainer>
-          <StyledCountdown>{over && positiveOnly ? '0' : remaining}</StyledCountdown>
+        <StyledCountdownContainer name={`${name}--count_wrapper`}>
+          <StyledCountdown name={`${name}--count`}>{over && positiveOnly ? '0' : remaining}</StyledCountdown>
         </StyledCountdownContainer>
@@ -100,0 +101,0 @@ )}

src/test.js

 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import { createMatchers } from 'jest-emotion';
@@ -7,17 +7,22 @@ import * as emotion from 'emotion';
 
-import Component from '.';
+import CountdownTextArea from '.';
 
 expect.extend(createMatchers(emotion));
 
-describe('CountdownTextarea', () => {
-  let wrapper;
+const onChange = jest.fn();
 
+describe('CountdownTextArea', () => {
+  it('renders without crashing', () => {
+    const wrapper = shallow(<CountdownTextArea />);
+    expect(wrapper.exists()).toBe(true);
+  });
+
   describe('displays a countdown based on maxLength prop', () => {
     it('contains countdown', () => {
-      wrapper = shallow(<Component maxLength={250} />);
+      const wrapper = shallow(<CountdownTextArea maxLength={250} />);
       expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('250');
-    });    
+    });
 
     it('reduces countdown', () => {
-      wrapper.setProps({ value: 'test' });
+      const wrapper = shallow(<CountdownTextArea value="Test" maxLength={250} onChange={onChange} />);
       expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('246');
@@ -27,5 +32,22 @@ });
 
+  describe('displays a countdown container prop', () => {
+    it('correctly shows container name attribute', () => {
+      const wrapper = shallow(<CountdownTextArea name="countdown" />);
+      expect(wrapper.prop('name')).toEqual('countdown--container');
+    });
+
+    it('correctly shows countdown wrapper attribute', () => {
+      const wrapper = shallow(<CountdownTextArea value="Test" name="countdown" maxLength={202} />);
+      expect(wrapper.find('StyledCountdownContainer').prop('name')).toEqual('countdown--count_wrapper');
+    });
+
+    it('correctly shows countdown name attribute', () => {
+      const wrapper = shallow(<CountdownTextArea value="Test" name="countdown" maxLength={202} />);
+      expect(wrapper.find('StyledCountdown').prop('name')).toEqual('countdown--count');
+    });
+  });
+
   describe('displays count as expected', () => {
     it('correctly shows 198 when 198 remaining', () => {
-      wrapper = shallow(<Component value="Test" maxLength={202} />);
+      const wrapper = shallow(<CountdownTextArea value="Test" maxLength={202} onChange={onChange} />);
       expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('198');
@@ -35,3 +57,3 @@ });
     it('correctly shows -2 as count when 2 over', () => {
-      wrapper.setProps({ maxLength: 2 });
+      const wrapper = shallow(<CountdownTextArea value="Test" maxLength={2} onChange={onChange} />);
       expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('-2');
@@ -43,2 +65,3 @@ });
     it('sets color and font-weight when overflowing', () => {
+      const wrapper = shallow(<CountdownTextArea value="Test" maxLength={2} onChange={onChange} />);
       expect(wrapper).toHaveStyleRule('color', ERROR_COLOUR);
@@ -49,3 +72,3 @@ expect(wrapper).toHaveStyleRule('font-weight', '800');
     it('does not set color and font-weight when not overflowing', () => {
-      wrapper.setProps({ maxLength: 5 });
+      const wrapper = shallow(<CountdownTextArea value="Test" maxLength={5} onChange={onChange} />);
       expect(wrapper).not.toHaveStyleRule('color', ERROR_COLOUR);
@@ -56,28 +79,28 @@ expect(wrapper).not.toHaveStyleRule('font-weight', '800');
 
-  describe('maxLengths to zero when positiveOnly set', () => {
-    it('limits countdown value by maxLength', () => {
-      wrapper = shallow(<Component value="Test" maxLength={2} positiveOnly />);
-      expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('0');
-    });
-  });
-
   describe('manages maxLength prop as expected', () => {
     it('sets maxLength prop if sent', () => {
-      wrapper = shallow(<Component value="Test" maxLength={10} />);
+      const wrapper = shallow(<CountdownTextArea value="Test" maxLength={10} onChange={onChange} />);
       expect(wrapper.find('StyledTextAreaField').prop('maxLength')).toBe(10);
     });
+
     it('does not set maxLength prop if not sent', () => {
-      wrapper.setProps({ noMaxLengthAttr: true });
+      const wrapper = shallow(<CountdownTextArea value="Test" maxLength={2} noMaxLengthAttr onChange={onChange} />);
       expect(wrapper.find('StyledTextAreaField').prop('maxLength')).toBe(null);
     });
-  });
 
-  it('omits countdown field when no maxLength given', () => {
-    wrapper = shallow(<Component value="Test" />);
-    expect(wrapper.find('StyledCountdown').exists()).toBe(false);
+    it('maxLengths to zero when positiveOnly set', () => {
+      const wrapper = shallow(<CountdownTextArea value="Test" maxLength={2} positiveOnly onChange={onChange} />);
+      expect(wrapper.find('StyledCountdown').childAt(0).text()).toBe('0');
+    });
+
+    it('omits countdown field when no maxLength given', () => {
+      const wrapper = shallow(<CountdownTextArea value="Test" onChange={onChange} />);
+      expect(wrapper.find('StyledCountdown').exists()).toBe(false);
+    });
   });
 
   it('matches snapshot', () => {
+    const wrapper = mount(<CountdownTextArea value="Test" maxLength={2} onChange={onChange} />);
     expect(wrapper).toMatchSnapshot();
   });
 });

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

65619

increased by26.74%

Lines of code

794

increased by17.98%

Number of low supply chain risk alerts

1

decreased by-66.67%

No dependency changes