fix(SelectableTile): sync selected prop and state (#8279)

* docs(Tile): update deprecation warning * fix(Tile): sync props and state when uncontrolled * test(Tile): update SelectableTile tests * chore: update snapshots * docs(Tile): add temp example story * refactor(Tile): use hoisted functions instead of expressions * docs(Tile): remove test story Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Apr 12, 2021 · 8ba9ce4 · 8ba9ce4
1 parent c4114f1
commit 8ba9ce4
Show file tree

Hide file tree

Showing 3 changed files with 227 additions and 226 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5836,10 +5836,7 @@ Map {
   },
   "SelectableTile" => Object {
     "defaultProps": Object {
-      "handleClick": [Function],
-      "handleKeyDown": [Function],
       "light": false,
-      "onChange": [Function],
       "selected": false,
       "tabIndex": 0,
       "title": "title",
@@ -5855,12 +5852,8 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
-      "handleClick": Object {
-        "type": "func",
-      },
-      "handleKeyDown": Object {
-        "type": "func",
-      },
+      "handleClick": [Function],
+      "handleKeyDown": [Function],
       "iconDescription": [Function],
       "id": Object {
         "type": "string",
@@ -5874,6 +5867,12 @@ Map {
       "onChange": Object {
         "type": "func",
       },
+      "onClick": Object {
+        "type": "func",
+      },
+      "onKeyDown": Object {
+        "type": "func",
+      },
       "selected": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/Tile/Tile-test.js b/packages/react/src/components/Tile/Tile-test.js
@@ -134,11 +134,10 @@ describe('Tile', () => {
 
     beforeEach(() => {
       wrapper = mount(
-        <SelectableTile className="extra-class">
+        <SelectableTile className="extra-class" onClick={jest.fn()}>
           <div className="child">Test</div>
         </SelectableTile>
       );
-      wrapper.state().selected = false;
       label = wrapper.find('label');
     });
 
@@ -155,42 +154,51 @@ describe('Tile', () => {
     });
 
     it('toggles the selectable state on click', () => {
-      expect(wrapper.state().selected).toEqual(false);
+      expect(wrapper.hasClass(`${prefix}--tile--is-selected`)).toEqual(false);
       label.simulate('click');
-      expect(wrapper.state().selected).toEqual(true);
+      expect(wrapper.props().onClick).toHaveBeenCalledTimes(1);
+      expect(wrapper.render().hasClass(`${prefix}--tile--is-selected`)).toEqual(
+        true
+      );
     });
 
     it('toggles the selectable state when using enter or space', () => {
-      expect(wrapper.state().selected).toEqual(false);
+      expect(wrapper.hasClass(`${prefix}--tile--is-selected`)).toEqual(false);
       label.simulate('keydown', { which: 32 });
-      expect(wrapper.state().selected).toEqual(true);
+      expect(wrapper.render().hasClass(`${prefix}--tile--is-selected`)).toEqual(
+        true
+      );
       label.simulate('keydown', { which: 13 });
-      expect(wrapper.state().selected).toEqual(false);
+      expect(wrapper.render().hasClass(`${prefix}--tile--is-selected`)).toEqual(
+        false
+      );
     });
 
     it('the input should be checked when state is selected', () => {
-      wrapper.setState({ selected: true });
+      label.simulate('click');
       expect(wrapper.find('input').props().checked).toEqual(true);
     });
 
     it('supports setting initial selected state from props', () => {
-      expect(shallow(<SelectableTile selected />).state().selected).toEqual(
-        true
-      );
+      expect(
+        shallow(<SelectableTile selected />)
+          .render()
+          .hasClass(`${prefix}--tile--is-selected`)
+      ).toEqual(true);
     });
 
     it('supports setting selected state from props', () => {
       wrapper.setProps({ selected: true });
-      wrapper.setState({ selected: true });
-      wrapper.setProps({ selected: false });
-      expect(wrapper.state().selected).toEqual(false);
+      expect(wrapper.render().hasClass(`${prefix}--tile--is-selected`)).toEqual(
+        true
+      );
     });
 
     it('avoids changing selected state upon setting props, unless actual value change is detected', () => {
       wrapper.setProps({ selected: true });
-      wrapper.setState({ selected: false });
+      label.simulate('click');
       wrapper.setProps({ selected: true });
-      expect(wrapper.state().selected).toEqual(false);
+      expect(wrapper.hasClass(`${prefix}--tile--is-selected`)).toEqual(false);
     });
 
     it('supports light version', () => {