diff --git a/package.json b/package.json
index f69aaa0..602f630 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "@storybook/react-webpack5": "^7.1.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^28.1.7",
     "@types/react": "^17.0.15",
     "@types/styled-components": "^5.1.11",
diff --git a/src/hooks/click-outside/index.tsx b/src/hooks/click-outside/index.tsx
index 04d4c0d..2ebfd3e 100644
--- a/src/hooks/click-outside/index.tsx
+++ b/src/hooks/click-outside/index.tsx
@@ -9,7 +9,7 @@ const useOnClickOutside = <T extends HTMLElement = HTMLElement>(
   useEffect(() => {
     const listener = (event: Event) => {
       const el = ref?.current
-      if (!el || el.contains((event?.target as Node) || null)) {
+      if (!el || el.contains(event?.target as Node)) {
         return
       }
 
diff --git a/src/hooks/click-outside/test.tsx b/src/hooks/click-outside/test.tsx
new file mode 100644
index 0000000..c56c5bf
--- /dev/null
+++ b/src/hooks/click-outside/test.tsx
@@ -0,0 +1,42 @@
+import { renderHook } from '@testing-library/react-hooks'
+import { fireEvent } from '../../utils/testUtils'
+import useOnClickOutside from '.'
+import { RefObject } from 'react'
+
+describe('click-outside', () => {
+  it('should test that the callback passed is called when the user clicks outside', () => {
+    const callbackToBeCalled = jest.fn()
+    const refObject = { current: document.head }
+    renderHook(() => useOnClickOutside(refObject, callbackToBeCalled))
+
+    expect(callbackToBeCalled).not.toHaveBeenCalled()
+
+    fireEvent.mouseDown(document.body)
+
+    expect(callbackToBeCalled).toHaveBeenCalled()
+  })
+
+  it('should test that the callback passed is not called when the user clicks inside', () => {
+    const callbackToBeCalled = jest.fn()
+    const refObject = { current: document.head }
+    renderHook(() => useOnClickOutside(refObject, callbackToBeCalled))
+
+    expect(callbackToBeCalled).not.toHaveBeenCalled()
+
+    fireEvent.mouseDown(document.head)
+
+    expect(callbackToBeCalled).not.toHaveBeenCalled()
+  })
+
+  it('should test that the callback passed is not called when ref object is undefined', () => {
+    const callbackToBeCalled = jest.fn()
+    const refObject = undefined as unknown as RefObject<HTMLElement>
+    renderHook(() => useOnClickOutside(refObject, callbackToBeCalled))
+
+    expect(callbackToBeCalled).not.toHaveBeenCalled()
+
+    fireEvent.mouseDown(document.head)
+
+    expect(callbackToBeCalled).not.toHaveBeenCalled()
+  })
+})
diff --git a/src/hooks/key-press/test.tsx b/src/hooks/key-press/test.tsx
new file mode 100644
index 0000000..7172153
--- /dev/null
+++ b/src/hooks/key-press/test.tsx
@@ -0,0 +1,29 @@
+import { renderHook } from '@testing-library/react-hooks'
+import { fireEvent } from '../../utils/testUtils'
+import useOnKeyPress from '.'
+
+describe('key-press', () => {
+  it('should test that when the key specified by the user is pressed, the callback function is invoked', () => {
+    const callbackToBeCalled = jest.fn()
+    renderHook(() => useOnKeyPress('Enter', callbackToBeCalled))
+
+    expect(callbackToBeCalled).not.toHaveBeenCalled()
+
+    fireEvent.keyUp(document.body, {
+      key: 'Enter'
+    })
+
+    expect(callbackToBeCalled).toHaveBeenCalled()
+  })
+
+  it('should test that when the callback is not called when a different key is pressed by the user', () => {
+    const callbackToBeCalled = jest.fn()
+    renderHook(() => useOnKeyPress('Enter', callbackToBeCalled))
+
+    fireEvent.keyUp(document.body, {
+      key: 'Escape'
+    })
+
+    expect(callbackToBeCalled).not.toHaveBeenCalled()
+  })
+})
diff --git a/src/hooks/window-near-bottom/test.tsx b/src/hooks/window-near-bottom/test.tsx
new file mode 100644
index 0000000..ab9644a
--- /dev/null
+++ b/src/hooks/window-near-bottom/test.tsx
@@ -0,0 +1,38 @@
+import { renderHook } from '@testing-library/react-hooks'
+import { fireEvent } from '../../utils/testUtils'
+import useWindowOnNearBottom from '.'
+
+const setScrollHeight = (height: number) => {
+  Object.defineProperty(document.body, 'scrollHeight', {
+    configurable: true,
+    value: height
+  })
+}
+
+describe('window-near-bottom', () => {
+  it('should test that the callback function is invoked when user scrolls to the bottom', () => {
+    setScrollHeight(768)
+
+    const callbackToBeCalled = jest.fn()
+    renderHook(() => useWindowOnNearBottom(callbackToBeCalled))
+
+    expect(callbackToBeCalled).not.toHaveBeenCalled()
+
+    fireEvent.scroll(window)
+
+    expect(callbackToBeCalled).toHaveBeenCalled()
+  })
+
+  it('should test that the callback function is not invoked if user if not near the bottom', () => {
+    setScrollHeight(1000)
+
+    const callbackToBeCalled = jest.fn()
+    renderHook(() => useWindowOnNearBottom(callbackToBeCalled))
+
+    expect(callbackToBeCalled).not.toHaveBeenCalled()
+
+    fireEvent.scroll(window)
+
+    expect(callbackToBeCalled).not.toHaveBeenCalled()
+  })
+})
diff --git a/src/packages/Alert/__snapshots__/test.tsx.snap b/src/packages/Alert/__snapshots__/test.tsx.snap
new file mode 100644
index 0000000..c3753ca
--- /dev/null
+++ b/src/packages/Alert/__snapshots__/test.tsx.snap
@@ -0,0 +1,304 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Alert /> should match snapshot for error scenario 1`] = `
+.c3 {
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  font-weight: 700;
+  border-radius: 0.4rem;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+  font-size: 1.2rem;
+  padding: 0.8rem;
+  border-color: #022B54;
+  color: #022B54;
+}
+
+.c3:hover {
+  border-color: #53C3D0;
+  color: #53C3D0;
+}
+
+.c3:active {
+  border-color: #34AEBC;
+  color: #34AEBC;
+}
+
+.c0 {
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  border-radius: 0.4rem;
+  position: relative;
+  -webkit-transition: box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  background-color: #f443361f;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 1.6rem 2.4rem 1.6rem 1.6rem;
+}
+
+.c4 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c5 {
+  color: #4D4D4D;
+  font-size: 1.4rem;
+}
+
+.c2 {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2rem;
+  line-height: 1;
+  outline: none;
+  padding-top: 0.4rem;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+<div>
+  <div
+    class="c0"
+    role="alert"
+  >
+    <div
+      class="c1"
+    >
+      <div
+        class="c2"
+      >
+        <button
+          class="c3"
+        >
+          X
+        </button>
+      </div>
+      <div
+        class="c4"
+      >
+        <div
+          class="c5"
+        >
+          <div>
+            This is an alert
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Alert /> should match snapshot for success scenario 1`] = `
+.c3 {
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  font-weight: 700;
+  border-radius: 0.4rem;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+  font-size: 1.2rem;
+  padding: 0.8rem;
+  border-color: #022B54;
+  color: #022B54;
+}
+
+.c3:hover {
+  border-color: #53C3D0;
+  color: #53C3D0;
+}
+
+.c3:active {
+  border-color: #34AEBC;
+  color: #34AEBC;
+}
+
+.c0 {
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  border-radius: 0.4rem;
+  position: relative;
+  -webkit-transition: box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  background-color: #4caf501f;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 1.6rem 2.4rem 1.6rem 1.6rem;
+}
+
+.c4 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c5 {
+  color: #4D4D4D;
+  font-size: 1.4rem;
+}
+
+.c2 {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2rem;
+  line-height: 1;
+  outline: none;
+  padding-top: 0.4rem;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+<div>
+  <div
+    class="c0"
+    role="alert"
+  >
+    <div
+      class="c1"
+    >
+      <div
+        class="c2"
+      >
+        <button
+          class="c3"
+        >
+          X
+        </button>
+      </div>
+      <div
+        class="c4"
+      >
+        <div
+          class="c5"
+        >
+          <div>
+            This is an alert
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Alert /> should match snapshot for warning scenario 1`] = `
+.c3 {
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  font-weight: 700;
+  border-radius: 0.4rem;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+  font-size: 1.2rem;
+  padding: 0.8rem;
+  border-color: #022B54;
+  color: #022B54;
+}
+
+.c3:hover {
+  border-color: #53C3D0;
+  color: #53C3D0;
+}
+
+.c3:active {
+  border-color: #34AEBC;
+  color: #34AEBC;
+}
+
+.c0 {
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  border-radius: 0.4rem;
+  position: relative;
+  -webkit-transition: box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: box-shadow 300ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  background-color: #ffb3001f;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 1.6rem 2.4rem 1.6rem 1.6rem;
+}
+
+.c4 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c5 {
+  color: #4D4D4D;
+  font-size: 1.4rem;
+}
+
+.c2 {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2rem;
+  line-height: 1;
+  outline: none;
+  padding-top: 0.4rem;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+<div>
+  <div
+    class="c0"
+    role="alert"
+  >
+    <div
+      class="c1"
+    >
+      <div
+        class="c2"
+      >
+        <button
+          class="c3"
+        >
+          X
+        </button>
+      </div>
+      <div
+        class="c4"
+      >
+        <div
+          class="c5"
+        >
+          <div>
+            This is an alert
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/packages/Alert/test.tsx b/src/packages/Alert/test.tsx
index c317483..4f0c992 100644
--- a/src/packages/Alert/test.tsx
+++ b/src/packages/Alert/test.tsx
@@ -39,4 +39,34 @@ describe('<Alert />', () => {
 
     expect(onCloseMockFn).toBeCalled()
   })
+
+  it('should match snapshot for error scenario', () => {
+    const { container } = render(
+      <Alert severity="error" closable>
+        <div>This is an alert</div>
+      </Alert>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should match snapshot for success scenario', () => {
+    const { container } = render(
+      <Alert severity="success" closable>
+        <div>This is an alert</div>
+      </Alert>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should match snapshot for warning scenario', () => {
+    const { container } = render(
+      <Alert severity="warning" closable>
+        <div>This is an alert</div>
+      </Alert>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
 })
diff --git a/src/packages/Badge/__snapshots__/test.tsx.snap b/src/packages/Badge/__snapshots__/test.tsx.snap
index fcfbb9b..65f6886 100644
--- a/src/packages/Badge/__snapshots__/test.tsx.snap
+++ b/src/packages/Badge/__snapshots__/test.tsx.snap
@@ -40,3 +40,24 @@ exports[`<Badge /> should render Badge with default props 1`] = `
   </div>
 </div>
 `;
+
+exports[`<Badge /> should render a medium small circle badge 1`] = `
+.c0 {
+  display: inline-block;
+  border-radius: 50%;
+  font-size: 1.4rem;
+  padding: 0.4rem;
+  background-color: red;
+  color: #F8F7FB;
+}
+
+<div>
+  <div
+    class="c0"
+    color="red"
+    shape="circle"
+  >
+    New
+  </div>
+</div>
+`;
diff --git a/src/packages/Badge/test.tsx b/src/packages/Badge/test.tsx
index 5e6db05..7d6a688 100644
--- a/src/packages/Badge/test.tsx
+++ b/src/packages/Badge/test.tsx
@@ -15,6 +15,14 @@ describe('<Badge />', () => {
     )
     expect(container).toMatchSnapshot()
   })
+
+  it('should render a medium small circle badge', () => {
+    const { container } = render(
+      <Badge content="New" size="small" shape="circle" color="red" />
+    )
+    expect(container).toMatchSnapshot()
+  })
+
   it('should render Badge by handling custom props correctly', () => {
     const { getByTestId } = render(
       <Badge data-testid="custom-badge" title="Custom Title" content="Custom" />
diff --git a/src/packages/Heading/__snapshots__/test.tsx.snap b/src/packages/Heading/__snapshots__/test.tsx.snap
new file mode 100644
index 0000000..648c2c5
--- /dev/null
+++ b/src/packages/Heading/__snapshots__/test.tsx.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Heading/> should render the huge heading with lineLeft and lineBottom 1`] = `
+.c0 {
+  color: #222222;
+  padding-left: 1.6rem;
+  border-left: 0.7rem solid #022B54;
+  position: relative;
+  margin-bottom: 3.2rem;
+  font-size: 5.2rem;
+}
+
+.c0::after {
+  position: absolute;
+  left: 0;
+  bottom: -1rem;
+  content: '';
+  width: 5rem;
+  border-bottom: 0.5rem solid #022B54;
+}
+
+<div>
+  <h2
+    class="c0"
+    color="black"
+  >
+    <span>
+      This is the heading
+    </span>
+  </h2>
+</div>
+`;
+
+exports[`<Heading/> should render the small heading with lineLeft and lineBottom 1`] = `
+.c0 {
+  color: #222222;
+  padding-left: 1.6rem;
+  border-left: 0.7rem solid #022B54;
+  position: relative;
+  margin-bottom: 3.2rem;
+  font-size: 1.6rem;
+}
+
+.c0::after {
+  position: absolute;
+  left: 0;
+  bottom: -1rem;
+  content: '';
+  width: 5rem;
+  border-bottom: 0.5rem solid #022B54;
+}
+
+.c0::after {
+  width: 3rem;
+}
+
+<div>
+  <h2
+    class="c0"
+    color="black"
+  >
+    <span>
+      This is the heading
+    </span>
+  </h2>
+</div>
+`;
diff --git a/src/packages/Heading/test.tsx b/src/packages/Heading/test.tsx
index ef4df08..2fb9d65 100644
--- a/src/packages/Heading/test.tsx
+++ b/src/packages/Heading/test.tsx
@@ -13,4 +13,24 @@ describe('<Heading/>', () => {
 
     expect(screen.getByText('This is the heading')).toBeInTheDocument()
   })
+
+  it('should render the small heading with lineLeft and lineBottom', () => {
+    const { container } = render(
+      <Heading size={'small'} lineLeft lineBottom>
+        <span>This is the heading</span>
+      </Heading>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should render the huge heading with lineLeft and lineBottom', () => {
+    const { container } = render(
+      <Heading size={'huge'} lineLeft lineBottom>
+        <span>This is the heading</span>
+      </Heading>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
 })
diff --git a/src/packages/NumberField/test.tsx b/src/packages/NumberField/test.tsx
index aa6a867..6991a19 100644
--- a/src/packages/NumberField/test.tsx
+++ b/src/packages/NumberField/test.tsx
@@ -1,4 +1,4 @@
-import { render } from '../../utils/testUtils'
+import { render, screen, fireEvent } from '../../utils/testUtils'
 import React from 'react'
 import NumberField from './'
 
@@ -72,5 +72,48 @@ describe('<NumberField />', () => {
       decrementButton!.click()
       expect(input).toHaveValue(42)
     })
+
+    it('should be able to change the value by typing into the input box if its between min and max', () => {
+      render(<NumberField initialValue={55} min={42} max={56} />)
+      const input = screen.getByDisplayValue('55')
+
+      fireEvent.change(input, { target: { value: 43 } })
+
+      expect(input).toHaveValue(43)
+    })
+
+    it('should not be able to change the value above max value or below min value', () => {
+      render(<NumberField initialValue={55} min={42} max={56} />)
+      const input = screen.getByDisplayValue('55')
+
+      fireEvent.change(input, { target: { value: 57 } })
+      expect(input).toHaveValue(56)
+
+      fireEvent.change(input, { target: { value: 10 } })
+      expect(input).toHaveValue(42)
+    })
+
+    it('should call on update function if provided whenever the input value gets updated', () => {
+      const onUpdate = jest.fn()
+      render(
+        <NumberField initialValue={55} min={42} max={56} onUpdate={onUpdate} />
+      )
+      const input = screen.getByDisplayValue('55')
+
+      fireEvent.change(input, { target: { value: 57 } })
+      expect(input).toHaveValue(56)
+      expect(onUpdate).toHaveBeenCalledWith(56)
+
+      fireEvent.change(input, { target: { value: 10 } })
+      expect(input).toHaveValue(42)
+      expect(onUpdate).toHaveBeenCalledWith(42)
+
+      const [decrementButton, incrementButton] = screen.getAllByRole('button')
+      fireEvent.click(incrementButton)
+      expect(onUpdate).toHaveBeenCalledWith(43)
+
+      fireEvent.click(decrementButton)
+      expect(onUpdate).toHaveBeenCalledWith(42)
+    })
   })
 })
diff --git a/src/packages/Range/test.tsx b/src/packages/Range/test.tsx
index 9c4083d..9b9ce36 100644
--- a/src/packages/Range/test.tsx
+++ b/src/packages/Range/test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '../../utils/testUtils'
+import { render, fireEvent } from '../../utils/testUtils'
 import Range from '.'
 
 describe('<Range />', () => {
@@ -30,4 +30,33 @@ describe('<Range />', () => {
     )
     expect(container).toBeInTheDocument()
   })
+
+  it('Should call on change function passed to the range component for multiple range selection', () => {
+    const onChangeMock = jest.fn()
+    const { container } = render(
+      <Range onChange={onChangeMock} min={0} max={100} value={[25, 75]} />
+    )
+    const firstRangeSelection = container.querySelectorAll(
+      'input[type="range"]'
+    )[0]
+    const secondRangeSelection = container.querySelectorAll(
+      'input[type="range"]'
+    )[1]
+
+    fireEvent.change(firstRangeSelection, { target: { value: 30 } })
+    fireEvent.change(secondRangeSelection, { target: { value: 60 } })
+
+    expect(onChangeMock).toHaveBeenCalledWith([30, 60])
+  })
+
+  it('Should call on change function passed to the range component for simple range selection', () => {
+    const onChangeMock = jest.fn()
+    const { container } = render(
+      <Range onChange={onChangeMock} min={0} max={100} value={50} />
+    )
+    const rangeSelection = container.querySelectorAll('input[type="range"]')[0]
+    fireEvent.change(rangeSelection, { target: { value: 60 } })
+
+    expect(onChangeMock).toHaveBeenCalledWith(60)
+  })
 })
diff --git a/src/packages/Slider/Dot.tsx b/src/packages/Slider/Dot.tsx
index 925ee3b..e0efc38 100644
--- a/src/packages/Slider/Dot.tsx
+++ b/src/packages/Slider/Dot.tsx
@@ -7,7 +7,7 @@ export type DotType = {
 } & BaseHTMLAttributes<HTMLDivElement>
 
 const Dot = ({ onClick, active }: DotType) => {
-  return <S.Dot onClick={onClick} active={active} />
+  return <S.Dot data-testid={'dot'} onClick={onClick} active={active} />
 }
 
 export default Dot
diff --git a/src/packages/Slider/__snapshots__/test.tsx.snap b/src/packages/Slider/__snapshots__/test.tsx.snap
new file mode 100644
index 0000000..8ec9619
--- /dev/null
+++ b/src/packages/Slider/__snapshots__/test.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Slider /> Buttons should render loading placeholder if loading is set to true 1`] = `
+.c0 {
+  max-width: 40rem;
+  height: 20rem;
+  color: #EFF0F9;
+  background-image: linear-gradient( to right, currentColor 0%, #E6E6E6 20%, currentColor 40%, currentColor 100% );
+  background-size: 80rem 14rem;
+  -webkit-animation: placeholder 1s linear infinite forwards;
+  animation: placeholder 1s linear infinite forwards;
+}
+
+<div>
+  <div
+    class="c0"
+  />
+</div>
+`;
diff --git a/src/packages/Slider/test.tsx b/src/packages/Slider/test.tsx
index bfb3a88..8346140 100644
--- a/src/packages/Slider/test.tsx
+++ b/src/packages/Slider/test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '../../utils/testUtils'
+import { render, screen, fireEvent } from '../../utils/testUtils'
 import Slider from './'
 import { mock } from './mock'
 
@@ -66,5 +66,31 @@ describe('<Slider />', () => {
       expect(prevButton).not.toHaveAttribute('disabled')
       expect(nextButton).toHaveAttribute('disabled')
     })
+
+    it('should be able to change the images by clicking on the dots', () => {
+      render(<Slider images={mock} dots />)
+      const [prevButton, nextButton] = screen.getAllByRole('button')
+      expect(prevButton).toHaveAttribute('disabled')
+      expect(nextButton).not.toHaveAttribute('disabled')
+
+      const dots = screen.getAllByTestId('dot')
+      const dotForLastImage = dots[9]
+      fireEvent.click(dotForLastImage)
+
+      expect(prevButton).not.toHaveAttribute('disabled')
+      expect(nextButton).toHaveAttribute('disabled')
+
+      fireEvent.click(prevButton)
+
+      expect(prevButton).not.toHaveAttribute('disabled')
+      expect(nextButton).not.toHaveAttribute('disabled')
+    })
+
+    it('should render loading placeholder if loading is set to true', () => {
+      const { container } = render(<Slider images={mock} loading />)
+
+      expect(screen.queryAllByRole('img')).toHaveLength(0)
+      expect(container).toMatchSnapshot()
+    })
   })
 })
diff --git a/src/packages/Switch/test.tsx b/src/packages/Switch/test.tsx
index 5f3c443..2a4e16c 100644
--- a/src/packages/Switch/test.tsx
+++ b/src/packages/Switch/test.tsx
@@ -33,4 +33,15 @@ describe('<Switch />', () => {
 
     expect(switchComponent).not.toBeChecked()
   })
+
+  it('Should not be checked or disabled by default if props are not passed in explicitly', () => {
+    render(<Switch size="medium" />)
+
+    const switchComponent = screen.getByRole('checkbox')
+    expect(switchComponent).not.toBeChecked()
+
+    switchComponent.click()
+
+    expect(switchComponent).toBeChecked()
+  })
 })
diff --git a/src/packages/Tag/__snapshots__/test.tsx.snap b/src/packages/Tag/__snapshots__/test.tsx.snap
new file mode 100644
index 0000000..d28f884
--- /dev/null
+++ b/src/packages/Tag/__snapshots__/test.tsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Tag/> should render slashed bold tag 1`] = `
+.c0 {
+  padding: 0.4rem 0.8rem;
+  background: #1C5D9F;
+  color: #F8F7FB;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  border-radius: 0.4rem;
+  font-size: 1.4rem;
+  font-weight: 400;
+  text-transform: uppercase;
+  -webkit-text-decoration: line-through;
+  text-decoration: line-through;
+  font-weight: 700;
+}
+
+.c0:hover {
+  background: #1C5D9F;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    coffee
+  </div>
+</div>
+`;
diff --git a/src/packages/Tag/test.tsx b/src/packages/Tag/test.tsx
index f02fbc5..4b87e94 100644
--- a/src/packages/Tag/test.tsx
+++ b/src/packages/Tag/test.tsx
@@ -15,4 +15,12 @@ describe('<Tag/>', () => {
 
     expect(dom.getByText(/COFFEE/i)).toBeInTheDocument()
   })
+
+  it('should render slashed bold tag', async () => {
+    const { container } = render(
+      <Tag value="coffee" isUppercase={true} isBold isSlashed />
+    )
+
+    expect(container).toMatchSnapshot()
+  })
 })
diff --git a/src/packages/Toaster/index.tsx b/src/packages/Toaster/index.tsx
index 6e87437..918cad1 100644
--- a/src/packages/Toaster/index.tsx
+++ b/src/packages/Toaster/index.tsx
@@ -8,7 +8,6 @@ export type ToasterProps = {
 
 const Toaster = ({ duration, closable = true, ...props }: ToasterProps) => {
   const [isVisible, setIsVisible] = useState(true)
-
   useEffect(() => {
     if (typeof duration === 'number') {
       const timer = setTimeout(() => {
diff --git a/src/packages/Toaster/test.tsx b/src/packages/Toaster/test.tsx
index ea21566..2d8cb71 100644
--- a/src/packages/Toaster/test.tsx
+++ b/src/packages/Toaster/test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen } from '../../utils/testUtils'
+import { render, screen, waitFor } from '../../utils/testUtils'
 
 import Toaster from '.'
 
@@ -13,10 +13,23 @@ describe('<Toaster />', () => {
 
   it('Should make the toaster disappear when clicking the close button', async () => {
     render(<Toaster> Toast message </Toaster>)
-    const button = screen.getByRole('button')
 
-    button.click()
+    const closeButton = screen.getByRole('button')
+    closeButton.click()
+
+    expect(screen.queryByText('Toast message')).not.toBeInTheDocument()
+  })
+
+  it('Should ensure that toast message should disappear after specified duration', async () => {
+    jest.useFakeTimers()
+
+    render(<Toaster duration={3000}>Toast message</Toaster>)
+    expect(screen.queryByText('Toast message')).toBeInTheDocument()
+
+    jest.advanceTimersByTime(3000)
 
-    expect(screen.queryByText('Toast Message')).not.toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.queryByText('Toast message')).toBeNull()
+    })
   })
 })
diff --git a/src/packages/ToolTip/__snapshots__/test.tsx.snap b/src/packages/ToolTip/__snapshots__/test.tsx.snap
new file mode 100644
index 0000000..b9d991d
--- /dev/null
+++ b/src/packages/ToolTip/__snapshots__/test.tsx.snap
@@ -0,0 +1,124 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ToolTip/> should render bottom positioned ToolTip 1`] = `
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
+.c3 {
+  visibility: hidden;
+  max-width: calc(60rem / 2);
+  background-color: #222222;
+  color: #F8F7FB;
+  text-align: center;
+  border-radius: 0.4rem;
+  padding: 1.6rem 2.4rem;
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 1.6rem);
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+.c0:hover .c2 {
+  visibility: visible;
+}
+
+<div>
+  <div
+    class="c0 c1"
+  >
+    Hover me
+    <span
+      class="c2 c3"
+    >
+      Tooltip text here
+    </span>
+  </div>
+</div>
+`;
+
+exports[`<ToolTip/> should render left positioned ToolTip 1`] = `
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
+.c3 {
+  visibility: hidden;
+  max-width: calc(60rem / 2);
+  background-color: #222222;
+  color: #F8F7FB;
+  text-align: center;
+  border-radius: 0.4rem;
+  padding: 1.6rem 2.4rem;
+  position: absolute;
+  z-index: 20;
+  top: 50%;
+  right: calc(100% + 2.4rem);
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.c0:hover .c2 {
+  visibility: visible;
+}
+
+<div>
+  <div
+    class="c0 c1"
+  >
+    Hover me
+    <span
+      class="c2 c3"
+    >
+      Tooltip text here
+    </span>
+  </div>
+</div>
+`;
+
+exports[`<ToolTip/> should render right positioned ToolTip 1`] = `
+.c1 {
+  position: relative;
+  display: inline-block;
+}
+
+.c3 {
+  visibility: hidden;
+  max-width: calc(60rem / 2);
+  background-color: #222222;
+  color: #F8F7FB;
+  text-align: center;
+  border-radius: 0.4rem;
+  padding: 1.6rem 2.4rem;
+  position: absolute;
+  z-index: 20;
+  top: 50%;
+  left: calc(100% + 2.4rem);
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.c0:hover .c2 {
+  visibility: visible;
+}
+
+<div>
+  <div
+    class="c0 c1"
+  >
+    Hover me
+    <span
+      class="c2 c3"
+    >
+      Tooltip text here
+    </span>
+  </div>
+</div>
+`;
diff --git a/src/packages/ToolTip/test.tsx b/src/packages/ToolTip/test.tsx
index e427c30..366f93b 100644
--- a/src/packages/ToolTip/test.tsx
+++ b/src/packages/ToolTip/test.tsx
@@ -23,4 +23,19 @@ describe('<ToolTip/>', () => {
 
     await screen.findByText('Tooltip text here')
   })
+
+  it('should render left positioned ToolTip', () => {
+    const { container } = render(<ToolTip {...tooltipArgs} position="left" />)
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should render bottom positioned ToolTip', () => {
+    const { container } = render(<ToolTip {...tooltipArgs} position="bottom" />)
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should render right positioned ToolTip', () => {
+    const { container } = render(<ToolTip {...tooltipArgs} position="right" />)
+    expect(container).toMatchSnapshot()
+  })
 })