diff --git a/packages/gatsby-theme/src/components/presenter-footer.js b/packages/gatsby-theme/src/components/presenter-footer.js
index 0369656..5f950f7 100644
--- a/packages/gatsby-theme/src/components/presenter-footer.js
+++ b/packages/gatsby-theme/src/components/presenter-footer.js
@@ -9,6 +9,7 @@ import { presenterModes } from '../constants'
 
 const NormalIcon = () => (
   <svg
+    data-testid="normalIcon"
     width="24"
     height="16"
     viewBox="0 0 24 16"
@@ -40,6 +41,7 @@ const NormalIcon = () => (
 
 const TallIcon = () => (
   <svg
+    data-testid="tallIcon"
     width="24"
     height="16"
     viewBox="0 0 24 16"
@@ -73,6 +75,7 @@ const TallIcon = () => (
 
 const NotesIcon = () => (
   <svg
+    data-testid="notesIcon"
     width="24"
     height="16"
     viewBox="0 0 24 16"
@@ -89,6 +92,7 @@ const NotesIcon = () => (
 
 const WideIcon = () => (
   <svg
+    data-testid="wideIcon"
     width="24"
     height="16"
     viewBox="0 0 24 16"
@@ -128,7 +132,7 @@ const icons = {
 const arrayPresenterModes = Object.values(presenterModes)
 const lengthPresenterModes = arrayPresenterModes.length
 
-const getNextItem = presenterMode => {
+export const getNextPresenterMode = presenterMode => {
   const index = arrayPresenterModes.findIndex(el => el === presenterMode)
   const nextIndex = (index + 1) % lengthPresenterModes
   return arrayPresenterModes[nextIndex]
@@ -140,7 +144,7 @@ export default props => {
 
   const onSwitchPresenterMode = () =>
     setState({
-      presenterMode: getNextItem(presenterMode),
+      presenterMode: getNextPresenterMode(presenterMode),
     })
 
   const IconComponent = icons[presenterMode]
diff --git a/packages/gatsby-theme/test/presenter-footer.js b/packages/gatsby-theme/test/presenter-footer.js
new file mode 100644
index 0000000..5f589ac
--- /dev/null
+++ b/packages/gatsby-theme/test/presenter-footer.js
@@ -0,0 +1,54 @@
+import React from 'react'
+import { render, fireEvent, cleanup } from '@testing-library/react'
+import PresenterFooter, {
+  getNextPresenterMode,
+} from '../src/components/presenter-footer'
+import { presenterModes } from '../src/constants'
+import DeckContext from '../src/context'
+
+describe('present-footer', () => {
+  afterEach(cleanup)
+
+  describe('getNextPresenterMode', () => {
+    it.each`
+      currentPresenterMode     | expectedPresenterMode
+      ${presenterModes.normal} | ${presenterModes.tall}
+      ${presenterModes.tall}   | ${presenterModes.wide}
+      ${presenterModes.wide}   | ${presenterModes.notes}
+      ${presenterModes.notes}  | ${presenterModes.normal}
+    `(
+      'should return $expectedPresenterMode when presenter mode is $currentPresenterMode',
+      ({ currentPresenterMode, expectedPresenterMode }) => {
+        const nextPresenterMode = getNextPresenterMode(currentPresenterMode)
+        expect(nextPresenterMode).toBe(expectedPresenterMode)
+      }
+    )
+  })
+
+  describe('<PresenterFooter />', () => {
+    const PresenterFooterWithContext = ({ context }) => (
+      <DeckContext.Provider value={context}>
+        <PresenterFooter />
+      </DeckContext.Provider>
+    )
+
+    it('should update the presenter mode when user click on persenter mode icon', () => {
+      const context = {
+        index: 0,
+        length: 2,
+        presenterMode: presenterModes.normal,
+        setState: jest.fn(),
+      }
+      const { getByTestId } = render(
+        <PresenterFooterWithContext context={context} />
+      )
+
+      fireEvent.click(getByTestId('normalIcon'))
+
+      expect(context.setState).toBeCalledTimes(1)
+      expect(context.setState).toBeCalledWith({
+        presenterMode: presenterModes.tall,
+      })
+    })
+  })
+})