Adding tests and simplified a bit the code

webapp/src/components/content/__snapshots__/checkboxElement.test.tsx.snap

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/content/CheckboxElement should match snapshot 1`] = `
+<div>
+  <div
+    class="CheckboxElement"
+  >
+    <input
+      id="checkbox-test-id"
+      type="checkbox"
+      value="off"
+    />
+    <div
+      class="octo-editable"
+      contenteditable="true"
+      placeholder="Edit text..."
+    >
+      test-title
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/content/CheckboxElement should match snapshot on change title 1`] = `
+<div>
+  <div
+    class="CheckboxElement"
+  >
+    <input
+      id="checkbox-test-id"
+      type="checkbox"
+      value="off"
+    />
+    <div
+      class="octo-editable"
+      contenteditable="true"
+      placeholder="Edit text..."
+    >
+      changed name
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/content/CheckboxElement should match snapshot on read only 1`] = `
+<div>
+  <div
+    class="CheckboxElement"
+  >
+    <input
+      disabled=""
+      id="checkbox-test-id"
+      type="checkbox"
+      value="off"
+    />
+    <div
+      class="octo-editable"
+      contenteditable="false"
+      placeholder="Edit text..."
+    >
+      test-title
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/content/CheckboxElement should match snapshot on toggle 1`] = `
+<div>
+  <div
+    class="CheckboxElement"
+  >
+    <input
+      id="checkbox-test-id"
+      type="checkbox"
+      value="on"
+    />
+    <div
+      class="octo-editable"
+      contenteditable="true"
+      placeholder="Edit text..."
+    >
+      test-title
+    </div>
+  </div>
+</div>
+`;

webapp/src/components/content/checkboxElement.test.tsx

@@ -0,0 +1,77 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+import {fireEvent, render} from '@testing-library/react'
+import '@testing-library/jest-dom'
+import {IntlProvider} from 'react-intl'
+
+import {IContentBlock} from '../../blocks/contentBlock'
+
+import CheckboxElement from './checkboxElement'
+
+const wrapIntl = (children: any) => <IntlProvider locale='en'>{children}</IntlProvider>
+
+describe('components/content/CheckboxElement', () => {
+    const defaultBlock: IContentBlock = {
+        id: 'test-id',
+        parentId: '',
+        rootId: '',
+        modifiedBy: 'test-user-id',
+        schema: 0,
+        type: 'checkbox',
+        title: 'test-title',
+        fields: {},
+        createAt: 0,
+        updateAt: 0,
+        deleteAt: 0,
+    }
+
+    test('should match snapshot', () => {
+        const component = wrapIntl(
+            <CheckboxElement
+                block={defaultBlock}
+                readonly={false}
+            />,
+        )
+        const {container} = render(component)
+        expect(container).toMatchSnapshot()
+    })
+
+    test('should match snapshot on read only', () => {
+        const component = wrapIntl(
+            <CheckboxElement
+                block={defaultBlock}
+                readonly={true}
+            />,
+        )
+        const {container} = render(component)
+        expect(container).toMatchSnapshot()
+    })
+
+    test('should match snapshot on change title', () => {
+        const component = wrapIntl(
+            <CheckboxElement
+                block={defaultBlock}
+                readonly={false}
+            />,
+        )
+        const {container, getByText} = render(component)
+        const input = getByText(/test-title/i)
+        fireEvent.blur(input, {target: {textContent: 'changed name'}})
+        expect(container).toMatchSnapshot()
+    })
+
+    test('should match snapshot on toggle', () => {
+        const component = wrapIntl(
+            <CheckboxElement
+                block={defaultBlock}
+                readonly={false}
+            />,
+        )
+        const {container, getByRole} = render(component)
+        const input = getByRole('checkbox')
+        fireEvent.change(input, {target: {value: 'on'}})
+        expect(container).toMatchSnapshot()
+    })
+})

webapp/src/components/content/checkboxElement.tsx

@@ -26,7 +26,7 @@ type State = {
 class CheckboxElement extends React.PureComponent<Props, State> {
     constructor(props: Props) {
         super(props)
-        this.state = {active: props.block.fields?.value, title: props.block.title}
+        this.state = {active: Boolean(props.block.fields.value), title: props.block.title}
     }
 
     render(): JSX.Element {
@@ -39,13 +39,11 @@ class CheckboxElement extends React.PureComponent<Props, State> {
                     id={`checkbox-${block.id}`}
                     disabled={readonly}
                     checked={this.state.active}
-                    onChange={() => {
+                    value={this.state.active ? 'on' : 'off'}
+                    onChange={(e) => {
+                        e.preventDefault()
                         const newBlock = new MutableCheckboxBlock(block)
-                        if (newBlock.fields) {
-                            newBlock.fields.value = !this.state.active
-                        } else {
-                            newBlock.fields = {value: !this.state.active}
-                        }
+                        newBlock.fields.value = !this.state.active
                         newBlock.title = this.state.title
                         this.setState({active: newBlock.fields.value})
                         mutator.updateBlock(newBlock, block, intl.formatMessage({id: 'ContentBlock.editCardCheckbox', defaultMessage: 'toggled-checkbox'}))
@@ -58,11 +56,7 @@ class CheckboxElement extends React.PureComponent<Props, State> {
                         this.setState({title: text})
                         const newBlock = new MutableCheckboxBlock(block)
                         newBlock.title = text
-                        if (newBlock.fields) {
-                            newBlock.fields.value = this.state.active
-                        } else {
-                            newBlock.fields = {value: this.state.active}
-                        }
+                        newBlock.fields.value = this.state.active
                         mutator.updateBlock(newBlock, block, intl.formatMessage({id: 'ContentBlock.editCardCheckboxText', defaultMessage: 'edit card text'}))
                     }}
                     readonly={readonly}