Add tests and documentation for TopButtonsPanel prop

Author: jonmbake

README.md

@@ -28,34 +28,41 @@ a smart, controller component that controls terminal state. For example:
 import React from 'react';
 import Terminal, { ColorMode, TerminalOutput } from 'react-terminal-ui';
 
-const TerminalController = (props = {}) => {
+const TerminalController = () => {
   const [terminalLineData, setTerminalLineData] = useState([
     <TerminalOutput>Welcome to the React Terminal UI Demo!</TerminalOutput>
   ]);
-  // Terminal has 100% width by default so it should usually be wrapped in a container div
+
   return (
     <div className="container">
-      <Terminal name='React Terminal Usage Example' colorMode={ ColorMode.Light }  onInput={ terminalInput => console.log(`New terminal input received: '${ terminalInput }'`) }>
-        { terminalLineData }
+      <Terminal
+        name='React Terminal Usage Example'
+        colorMode={ColorMode.Light}
+        onInput={terminalInput => console.log(`New terminal input received: '${terminalInput}'`)}
+      >
+        {terminalLineData}
       </Terminal>
     </div>
-  )
+  );
 };
+
 ```
 
 ## Component Props
 
-| Name                | Description |
-| ------------------- | ------------- |
-| name                | Name of the terminal. Displays at the top of the rendered component. In the demo, the name is set to _React Terminal UI_. |
-| colorMode           | Terminal color mode - either Light or Dark. Defaults to Dark. |
-| onInput             | An optional callback function that is invoked when a user presses enter on the prompt. The function is passed the current prompt input. If the `onInput` prop is not passed, the prompt input line will not display in the terminal. |
-| startingInputValue  | Starting input value. If this prop changes, any user-entered input will be overridden by this value. Defaults to the empty string (""). |
-| prompt              | The prompt character. Defaults to '$'. |
-| height              | Height of the terminal. Defaults to 600px. |
-| redBtnCallback      | Optional callback function for the red button. If provided, the function will be invoked when the red button is clicked. |
-| yellowBtnCallback   | Optional callback function for the yellow button. If provided, the function will be invoked when the yellow button is clicked. |
-| greenBtnCallback    | Optional callback function for the green button. If provided, the function will be invoked when the green button is clicked. |
+| Name             | Description                                                                                                                                                                                                                     |
+|------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `name`           | Name of the terminal. Displays at the top of the rendered component. In the demo, the name is set to React Terminal UI.                                                                                                          |
+| `colorMode`      | Terminal color mode - either Light or Dark. Defaults to Dark.                                                                                                                                                                    |
+| `onInput`        | An optional callback function that is invoked when a user presses enter on the prompt. The function is passed the current prompt input. If the onInput prop is not passed, the prompt input line will not display in the terminal. |
+| `startingInputValue` | Starting input value. If this prop changes, any user-entered input will be overridden by this value. Defaults to the empty string ("").                                                                                         |
+| `prompt`         | The prompt character. Defaults to '$'.                                                                                                                                                                                           |
+| `height`         | Height of the terminal. Defaults to 600px.                                                                                                                                                                                       |
+| `redBtnCallback` | Optional callback function for the red button. If provided, the function will be invoked when the red button is clicked.                                                                                                         |
+| `yellowBtnCallback` | Optional callback function for the yellow button. If provided, the function will be invoked when the yellow button is clicked.                                                                                                     |
+| `greenBtnCallback` | Optional callback function for the green button. If provided, the function will be invoked when the green button is clicked.                                                                                                       |
+| `TopButtonsPanel`  | Optional - way to control which buttons are displays in top buttons panel. Pass `TopButtonsPanel={()=> null}` to hide top buttons panel. |
+
 
 ### Development
 

src/index.tsx

@@ -5,7 +5,6 @@ import React, {
   KeyboardEvent,
   ChangeEvent,
   ReactNode,
-  ReactNodeArray,
   ReactElement
 } from 'react';
 import TerminalInput from './linetypes/TerminalInput';

tests/index.spec.tsx

@@ -89,4 +89,14 @@ describe('Terminal component', () => {
     const renderedLine = screen.getByText('cat file.txt');
     expect(renderedLine.className).toContain('react-terminal-line');
   });
+
+  test('Should render top button panel by default', () => {
+    const { container } = render(<Terminal />);
+    expect(container.querySelector('.react-terminal-window-buttons')).not.toBeNull();
+  });
+
+  test('Should not render top button panel if null props passed', () => {
+    const { container } = render(<Terminal TopButtonsPanel={()=> null} />);
+    expect(container.querySelector('.react-terminal-window-buttons')).toBeNull();
+  });
 });