diff --git a/src/components/Sidebar/SidebarContext.js b/src/components/Sidebar/SidebarContext.js
index 435d7bb02f..ef7ffa1bff 100644
--- a/src/components/Sidebar/SidebarContext.js
+++ b/src/components/Sidebar/SidebarContext.js
@@ -16,7 +16,10 @@
import React, { createContext } from 'react';
import PropTypes from 'prop-types';
-const SidebarContext = createContext();
+const SidebarContext = createContext({
+ isSidebarOpen: false,
+ toggleSidebar: () => {}
+});
const SidebarContextConsumer = SidebarContext.Consumer;
@@ -48,4 +51,4 @@ SidebarContextProvider.propTypes = {
children: PropTypes.node
};
-export { SidebarContextProvider, SidebarContextConsumer };
+export { SidebarContext, SidebarContextProvider, SidebarContextConsumer };
diff --git a/src/components/Sidebar/SidebarContext.spec.js b/src/components/Sidebar/SidebarContext.spec.js
index 84850f1602..9064be6675 100644
--- a/src/components/Sidebar/SidebarContext.spec.js
+++ b/src/components/Sidebar/SidebarContext.spec.js
@@ -13,12 +13,25 @@
* limitations under the License.
*/
-import React from 'react';
+import React, { useContext } from 'react';
import {
+ SidebarContext,
SidebarContextProvider,
SidebarContextConsumer
} from './SidebarContext';
+const ToggleSidebarButton = () => {
+ const { toggleSidebar, isSidebarOpen } = useContext(SidebarContext);
+
+ return (
+
+ );
+};
+
describe('SidebarContext', () => {
it('should change Provider open state when using toggleSidebar', () => {
const { getByTestId } = render(
@@ -45,4 +58,22 @@ describe('SidebarContext', () => {
expect(buttonEl).toHaveAttribute('data-open', 'true');
});
+
+ it('should be able to consume context, along with useContext hook', () => {
+ const { getByTestId } = render(
+
+
+
+ );
+
+ const buttonElement = getByTestId('button');
+
+ expect(buttonElement).toHaveAttribute('data-open', 'false');
+
+ act(() => {
+ fireEvent.click(buttonElement);
+ });
+
+ expect(buttonElement).toHaveAttribute('data-open', 'true');
+ });
});
diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js
index ab6345b96f..54521c7873 100644
--- a/src/components/Sidebar/index.js
+++ b/src/components/Sidebar/index.js
@@ -15,9 +15,10 @@
import Sidebar from './Sidebar';
import {
+ SidebarContext,
SidebarContextProvider,
SidebarContextConsumer
} from './SidebarContext';
export default Sidebar;
-export { SidebarContextProvider, SidebarContextConsumer };
+export { SidebarContext, SidebarContextProvider, SidebarContextConsumer };