Add tests

mui · Feb 26, 2020 · cd99678 · cd99678
1 parent e392b78
commit cd99678
Showing 1 changed file with 53 additions and 34 deletions.
diff --git a/packages/material-ui-lab/src/TreeView/TreeView.test.js b/packages/material-ui-lab/src/TreeView/TreeView.test.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import { expect } from 'chai';
-import { spy } from 'sinon';
-import { createClientRender, fireEvent } from 'test/utils/createClientRender';
+import {expect} from 'chai';
+import {spy} from 'sinon';
+import {createClientRender, fireEvent} from 'test/utils/createClientRender';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
-import { createMount, getClasses } from '@material-ui/core/test-utils';
+import {createMount, getClasses} from '@material-ui/core/test-utils';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import TreeView from './TreeView';
 import TreeItem from '../TreeItem';
@@ -12,14 +12,14 @@ describe('<TreeView />', () => {
   let classes;
   let mount;
   // StrictModeViolation: test uses TreeItem
-  const render = createClientRender({ strict: false });
+  const render = createClientRender({strict: false});
 
   before(() => {
-    mount = createMount({ strict: true });
-    classes = getClasses(<TreeView />);
+    mount = createMount({strict: true});
+    classes = getClasses(<TreeView/>);
   });
 
-  describeConformance(<TreeView />, () => ({
+  describeConformance(<TreeView/>, () => ({
     classes,
     inheritComponent: 'ul',
     mount,
@@ -38,26 +38,26 @@ describe('<TreeView />', () => {
     });
 
     it('should warn when switching from controlled to uncontrolled of the expanded prop', () => {
-      const { setProps } = render(
+      const {setProps} = render(
         <TreeView expanded={[]}>
-          <TreeItem nodeId="1" label="one" />
+          <TreeItem nodeId="1" label="one"/>
         </TreeView>,
       );
 
-      setProps({ expanded: undefined });
+      setProps({expanded: undefined});
       expect(consoleErrorMock.args()[0][0]).to.include(
         'A component is changing a controlled TreeView to be uncontrolled',
       );
     });
 
     it('should warn when switching from controlled to uncontrolled of the selected prop', () => {
-      const { setProps } = render(
+      const {setProps} = render(
         <TreeView selected={[]}>
-          <TreeItem nodeId="1" label="one" />
+          <TreeItem nodeId="1" label="one"/>
         </TreeView>,
       );
 
-      setProps({ selected: undefined });
+      setProps({selected: undefined});
       expect(consoleErrorMock.args()[0][0]).to.include(
         'A component is changing a controlled TreeView to be uncontrolled',
       );
@@ -73,20 +73,20 @@ describe('<TreeView />', () => {
       return (
         <TreeView expanded={expandedState} onNodeToggle={handleNodeToggle}>
           <TreeItem nodeId="1" label="one" data-testid="one">
-            <TreeItem nodeId="2" label="two" />
+            <TreeItem nodeId="2" label="two"/>
           </TreeItem>
         </TreeView>
       );
     }
 
-    const { getByTestId, getByText } = render(<MyComponent />);
+    const {getByTestId, getByText} = render(<MyComponent/>);
 
     expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false');
     fireEvent.click(getByText('one'));
     expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true');
     fireEvent.click(getByText('one'));
     expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false');
-    fireEvent.keyDown(document.activeElement, { key: '*' });
+    fireEvent.keyDown(document.activeElement, {key: '*'});
     expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true');
   });
 
@@ -98,13 +98,13 @@ describe('<TreeView />', () => {
       };
       return (
         <TreeView selected={selectedState} onNodeSelect={handleNodeSelect}>
-          <TreeItem nodeId="1" label="one" data-testid="one" />
-          <TreeItem nodeId="2" label="two" data-testid="two" />
+          <TreeItem nodeId="1" label="one" data-testid="one"/>
+          <TreeItem nodeId="2" label="two" data-testid="two"/>
         </TreeView>
       );
     }
 
-    const { getByTestId, getByText } = render(<MyComponent />);
+    const {getByTestId, getByText} = render(<MyComponent/>);
 
     expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
     expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
@@ -124,20 +124,20 @@ describe('<TreeView />', () => {
       };
       return (
         <TreeView selected={selectedState} onNodeSelect={handleNodeSelect} multiSelect>
-          <TreeItem nodeId="1" label="one" data-testid="one" />
-          <TreeItem nodeId="2" label="two" data-testid="two" />
+          <TreeItem nodeId="1" label="one" data-testid="one"/>
+          <TreeItem nodeId="2" label="two" data-testid="two"/>
         </TreeView>
       );
     }
 
-    const { getByTestId, getByText } = render(<MyComponent />);
+    const {getByTestId, getByText} = render(<MyComponent/>);
 
     expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
     expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
     fireEvent.click(getByText('one'));
     expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
     expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
-    fireEvent.click(getByText('two'), { ctrlKey: true });
+    fireEvent.click(getByText('two'), {ctrlKey: true});
     expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
     expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
   });
@@ -156,32 +156,51 @@ describe('<TreeView />', () => {
               setState(Math.random);
             }}
           >
-            <TreeItem nodeId="two" label="two" data-testid="two" />
+            <TreeItem nodeId="two" label="two" data-testid="two"/>
           </TreeItem>
         </TreeView>
       );
     }
 
-    const { getByText, getByTestId } = render(<MyComponent />);
+    const {getByText, getByTestId} = render(<MyComponent/>);
 
     fireEvent.click(getByText('one'));
     expect(getByTestId('one')).to.have.focus;
-    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' });
+    fireEvent.keyDown(document.activeElement, {key: 'ArrowDown'});
     expect(getByTestId('two')).to.have.focus;
-    fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' });
+    fireEvent.keyDown(document.activeElement, {key: 'ArrowUp'});
     expect(getByTestId('one')).to.have.focus;
-    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' });
+    fireEvent.keyDown(document.activeElement, {key: 'ArrowDown'});
     expect(getByTestId('two')).to.have.focus;
   });
 
+  it('should support conditional rendered tree items', () => {
+    function TestComponent() {
+
+      const [hide, setState] = React.useState(false);
+
+      return <React.Fragment>
+        <button type="button" onClick={() => setState(true)}>Hide</button>
+        <TreeView>
+          {!hide && <TreeItem nodeId="test" label="test"/>}
+        </TreeView></React.Fragment>
+    }
+
+    const {getByText, queryByText} = render(<TestComponent/>);
+
+    expect(getByText("test")).to.not.be.null;
+    fireEvent.click(getByText("Hide"));
+    expect(queryByText("test")).to.be.null;
+  });
+
   describe('onNodeToggle', () => {
     it('should be called when a parent node is clicked', () => {
       const handleNodeToggle = spy();
 
-      const { getByText } = render(
+      const {getByText} = render(
         <TreeView onNodeToggle={handleNodeToggle}>
           <TreeItem nodeId="1" label="outer">
-            <TreeItem nodeId="2" label="inner" />
+            <TreeItem nodeId="2" label="inner"/>
           </TreeItem>
         </TreeView>,
       );
@@ -195,19 +214,19 @@ describe('<TreeView />', () => {
 
   describe('Accessibility', () => {
     it('(TreeView) should have the role `tree`', () => {
-      const { getByRole } = render(<TreeView />);
+      const {getByRole} = render(<TreeView/>);
 
       expect(getByRole('tree')).to.be.ok;
     });
 
     it('(TreeView) should have the attribute `aria-multiselectable=false if using single select`', () => {
-      const { getByRole } = render(<TreeView />);
+      const {getByRole} = render(<TreeView/>);
 
       expect(getByRole('tree')).to.have.attribute('aria-multiselectable', 'false');
     });
 
     it('(TreeView) should have the attribute `aria-multiselectable=true if using multi select`', () => {
-      const { getByRole } = render(<TreeView multiSelect />);
+      const {getByRole} = render(<TreeView multiSelect/>);
 
       expect(getByRole('tree')).to.have.attribute('aria-multiselectable', 'true');
     });