test : Adds test for Highlight and Ribbon component (#129)

Co-authored-by: sowmya198 <sowmya.ayilam.s@gmail.com>
vczb · Oct 31, 2023 · 8f75d3c · 8f75d3c
1 parent b29a542
commit 8f75d3c
Show file tree

Hide file tree

Showing 3 changed files with 246 additions and 0 deletions.
diff --git a/src/packages/Highlight/test.tsx b/src/packages/Highlight/test.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { ThemeProvider } from 'styled-components'
+import theme from '../../styles/theme'
+import Highlight from '.'
+
+describe('Highlight Component', () => {
+  const title = 'Sample Title'
+  const subtitle = 'Sample subtitle'
+
+  it('should render the Highlight component with default helper text', () => {
+    const { getByText } = render(
+      <ThemeProvider theme={theme}>
+        <Highlight title={title} subtitle={subtitle} />
+      </ThemeProvider>
+    )
+
+    expect(getByText('your stay in one of')).toBeInTheDocument()
+
+    expect(getByText(title.toString())).toBeInTheDocument()
+    expect(getByText(subtitle)).toBeInTheDocument()
+  })
+
+  it('should render the Highlight component with custom helper text', () => {
+    const customHelperText = 'Custom helper text'
+    const { getByText } = render(
+      <ThemeProvider theme={theme}>
+        <Highlight
+          helperText={customHelperText}
+          title={title}
+          subtitle={subtitle}
+        />
+      </ThemeProvider>
+    )
+
+    expect(getByText(customHelperText)).toBeInTheDocument()
+    expect(getByText(title.toString())).toBeInTheDocument()
+    expect(getByText(subtitle)).toBeInTheDocument()
+  })
+
+  it('should render the Highlight component when title is a number ', () => {
+    const numberTitle = 42
+
+    const { getByText } = render(
+      <ThemeProvider theme={theme}>
+        <Highlight title={numberTitle} subtitle={subtitle} />
+      </ThemeProvider>
+    )
+
+    expect(getByText(numberTitle.toString())).toBeInTheDocument()
+  })
+})
diff --git a/src/packages/Ribbon/__snapshots__/test.tsx.snap b/src/packages/Ribbon/__snapshots__/test.tsx.snap
@@ -0,0 +1,164 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Ribbon /> should render Ribbon correctly with default props 1`] = `
+.c0 {
+  position: absolute;
+  top: 1.6rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-weight: 700;
+  color: #F8F7FB;
+  z-index: 10;
+  background-color: #01172E;
+  font-size: 1.4rem;
+  padding: 0 2.4rem;
+  height: 3.6rem;
+  right: -2rem;
+}
+
+.c0::before {
+  content: '';
+  position: absolute;
+  right: 0;
+  border-style: solid;
+  border-left-width: 0rem;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-bottom-width: 1rem;
+}
+
+.c0::before {
+  border-left-color: #01172E;
+  border-top-color: #01172E;
+}
+
+.c0::before {
+  top: 3.6rem;
+  border-top-width: 1rem;
+  border-right-width: 2rem;
+}
+
+<div>
+  <div
+    class="c0"
+    color="primary"
+  >
+    <div>
+      Ribbon
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Ribbon /> should render Ribbon with given size and color 1`] = `
+.c0 {
+  position: absolute;
+  top: 1.6rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-weight: 700;
+  color: #F8F7FB;
+  z-index: 10;
+  background-color: #34AEBC;
+  font-size: 1.2rem;
+  padding: 0 1.6rem;
+  height: 2.6rem;
+  right: -1.5rem;
+}
+
+.c0::before {
+  content: '';
+  position: absolute;
+  right: 0;
+  border-style: solid;
+  border-left-width: 0rem;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-bottom-width: 1rem;
+}
+
+.c0::before {
+  border-left-color: #34AEBC;
+  border-top-color: #34AEBC;
+}
+
+.c0::before {
+  top: 2.6rem;
+  border-top-width: 0.7rem;
+  border-right-width: 1.5rem;
+}
+
+.c1 {
+  position: absolute;
+  top: 1.6rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-weight: 700;
+  color: #F8F7FB;
+  z-index: 10;
+  background-color: #01172E;
+  font-size: 1.4rem;
+  padding: 0 2.4rem;
+  height: 3.6rem;
+  right: -2rem;
+}
+
+.c1::before {
+  content: '';
+  position: absolute;
+  right: 0;
+  border-style: solid;
+  border-left-width: 0rem;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-bottom-width: 1rem;
+}
+
+.c1::before {
+  border-left-color: #01172E;
+  border-top-color: #01172E;
+}
+
+.c1::before {
+  top: 3.6rem;
+  border-top-width: 1rem;
+  border-right-width: 2rem;
+}
+
+<div>
+  <div
+    class="c0"
+    color="secondary"
+  >
+    <div>
+      Ribbon
+    </div>
+  </div>
+  <div
+    class="c1"
+    color="primary"
+  >
+    <div>
+      Ribbon
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/packages/Ribbon/test.tsx b/src/packages/Ribbon/test.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { render } from '../../utils/testUtils'
+import Ribbon from '.'
+
+describe('<Ribbon />', () => {
+  it('should render Ribbon correctly with default props', () => {
+    const { container } = render(
+      <Ribbon>
+        <div>Ribbon</div>
+      </Ribbon>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should render Ribbon with given size and color', () => {
+    const { container } = render(
+      <>
+        <Ribbon size="small" color="secondary">
+          <div>Ribbon</div>
+        </Ribbon>
+        <Ribbon size="normal" color="primary">
+          <div>Ribbon</div>
+        </Ribbon>
+      </>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+})