diff --git a/packages/netlify-cms-widget-string/src/__tests__/string.spec.js b/packages/netlify-cms-widget-string/src/__tests__/string.spec.js
index 5fb1dc8d9f75..3744cac3d528 100644
--- a/packages/netlify-cms-widget-string/src/__tests__/string.spec.js
+++ b/packages/netlify-cms-widget-string/src/__tests__/string.spec.js
@@ -5,53 +5,29 @@ import { NetlifyCmsWidgetString } from '../';
const StringControl = NetlifyCmsWidgetString.controlComponent;
-class StringController extends React.Component {
- state = {
- value: this.props.defaultValue,
- };
-
- handleOnChange = jest.fn(value => {
- this.setState({ value });
- });
-
- render() {
- return this.props.children({
- value: this.state.value,
- handleOnChange: this.handleOnChange,
- });
- }
-}
-
function setup({ defaultValue } = {}) {
- let renderArgs;
const setActiveSpy = jest.fn();
const setInactiveSpy = jest.fn();
+ const onChangeSpy = jest.fn();
const helpers = render(
-
- {({ value, handleOnChange }) => {
- renderArgs = { value, onChangeSpy: handleOnChange };
- return (
-
- );
- }}
- ,
+ ,
);
const input = helpers.container.querySelector('input');
return {
...helpers,
- ...renderArgs,
setActiveSpy,
setInactiveSpy,
+ onChangeSpy,
input,
};
}
diff --git a/packages/netlify-cms-widget-text/src/__tests__/text.spec.js b/packages/netlify-cms-widget-text/src/__tests__/text.spec.js
new file mode 100644
index 000000000000..b1ff6888dd87
--- /dev/null
+++ b/packages/netlify-cms-widget-text/src/__tests__/text.spec.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+
+import { NetlifyCmsWidgetText } from '../';
+
+const TextControl = NetlifyCmsWidgetText.controlComponent;
+
+function setup({ defaultValue } = {}) {
+ const setActiveSpy = jest.fn();
+ const setInactiveSpy = jest.fn();
+ const onChangeSpy = jest.fn();
+
+ const helpers = render(
+ ,
+ );
+
+ const textarea = helpers.container.querySelector('textarea');
+
+ return {
+ ...helpers,
+ setActiveSpy,
+ setInactiveSpy,
+ onChangeSpy,
+ textarea,
+ };
+}
+
+describe('String widget', () => {
+ it('calls setActiveStyle when textarea focused', () => {
+ const { textarea, setActiveSpy } = setup();
+
+ fireEvent.focus(textarea);
+
+ expect(setActiveSpy).toBeCalledTimes(1);
+ });
+
+ it('calls setInactiveSpy when textarea blurred', () => {
+ const { textarea, setInactiveSpy } = setup();
+
+ fireEvent.focus(textarea);
+ fireEvent.blur(textarea);
+
+ expect(setInactiveSpy).toBeCalledTimes(1);
+ });
+
+ it('renders with default value', () => {
+ const testValue = 'bar';
+ const { textarea } = setup({ defaultValue: testValue });
+ expect(textarea.value).toEqual(testValue);
+ });
+
+ it('calls onChange when textarea changes', () => {
+ jest.useFakeTimers();
+ const testValue = 'foo';
+ const { textarea, onChangeSpy } = setup();
+
+ fireEvent.focus(textarea);
+ fireEvent.change(textarea, { target: { value: testValue } });
+
+ jest.runAllTimers();
+
+ expect(onChangeSpy).toBeCalledTimes(1);
+ expect(onChangeSpy).toBeCalledWith(testValue);
+ });
+});