Merge pull request #313 from TykTechnologies/UI-28/navbar-tests

tests for the NavBar component
TykTechnologies · Nov 13, 2023 · bd17cca · bd17cca
2 parents 94e6be2 + 4c443d7
commit bd17cca
Show file tree

Hide file tree

Showing 2 changed files with 154 additions and 79 deletions.
diff --git a/src/components/NavBar/NavBar.test.js b/src/components/NavBar/NavBar.test.js
@@ -1,7 +1,93 @@
+import React from 'react';
 import NavBar from './index';
 
 describe('NavBar', () => {
-  it('TODO', () => {
-    expect(true).to.equal(true);
+  const classes = {
+    tabs: 'tyk-nav-bar__with-tabs',
+    alignCenter: 'tyk-nav-bar--align-center',
+    alignTop: 'tyk-nav-bar--align-top',
+  };
+  const selectors = {
+    navbar: '.tyk-nav-bar',
+    wrapper: '.tyk-nav-bar__wrapper',
+    container: '.tyk-nav-bar__container',
+    pre: '.tyk-nav-bar__pre',
+    title: '.tyk-nav-bar__wrapper h1',
+    subtitle: '.tyk-nav-bar__wrapper p',
+    containerLeft: '.tyk-nav-bar__left',
+    containerRight: '.tyk-nav-bar__right',
+  };
+
+  it('renders the component, a wrapper, and a container', () => {
+    cy.mount(<NavBar />)
+      .get(selectors.navbar)
+      .should('exist')
+      .get(selectors.wrapper)
+      .should('exist')
+      .get(selectors.container)
+      .should('exist');
+  });
+
+  it('adds the tabs class if withTabs prop is used', () => {
+    cy.mount(<NavBar withTabs />)
+      .get(selectors.navbar)
+      .should('have.class', classes.tabs);
+  });
+
+  it('the wrapper can be aligned with the "align" prop, "center" by default', () => {
+    cy.mount(<NavBar />)
+      .get(selectors.wrapper)
+      .should('have.class', classes.alignCenter);
+
+    cy.mount(<NavBar align="top" />)
+      .get(selectors.wrapper)
+      .should('have.class', classes.alignTop);
+  });
+
+  it('prepends content if "pre" prop is used', () => {
+    const pre = 'something';
+    cy.mount(<NavBar pre={pre} />)
+      .get(selectors.pre)
+      .should('exist')
+      .and('have.text', pre);
+  });
+
+  it('can render a title', () => {
+    const title = 'my title';
+    cy.mount(<NavBar title={title} />)
+      .get(selectors.title)
+      .should('exist')
+      .and('have.text', title);
+  });
+
+  it('can render a subtitle', () => {
+    const subtitle = 'my subtitle';
+    cy.mount(<NavBar subtitle={subtitle} />)
+      .get(selectors.subtitle)
+      .should('exist')
+      .and('have.text', subtitle);
+  });
+
+  it('can render content on the left side of the container', () => {
+    const content = 'my content';
+    cy.mount(<NavBar left={content} />)
+      .get(selectors.containerLeft)
+      .should('exist')
+      .and('have.text', content);
+  });
+
+  it('can render content on the right side of the container', () => {
+    const content = 'my content';
+    cy.mount(<NavBar right={content} />)
+      .get(selectors.containerRight)
+      .should('exist')
+      .and('have.text', content);
+  });
+
+  it('can have children', () => {
+    const content = 'component content';
+    cy.mount(<NavBar>{content}</NavBar>)
+      .get(selectors.navbar)
+      .and('have.text', content);
   });
 });
diff --git a/src/components/NavBar/index.js b/src/components/NavBar/index.js
@@ -1,81 +1,70 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-export default class NavBar extends PureComponent {
-  static propTypes = {
-    align: PropTypes.string,
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node,
-      PropTypes.element,
-      PropTypes.string,
-    ]),
-    title: PropTypes.string,
-    subtitle: PropTypes.string,
-    pre: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.node,
-    ]),
-    left: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.node,
-    ]),
-    right: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.node,
-    ]),
-    withTabs: PropTypes.bool,
-  }
-
-  render() {
-    const {
-      align = 'center',
-      children,
-      left,
-      right,
-      title,
-      pre,
-      subtitle,
-      withTabs,
-    } = this.props;
-
-    return (
-      <section className={`tyk-nav-bar  ${withTabs ? 'tyk-nav-bar__with-tabs' : ''}`}>
-        <div className={`tyk-nav-bar__wrapper tyk-nav-bar--align-${align}`}>
-          {
-            pre
-              ? <div className="tyk-nav-bar__pre">{pre}</div>
-              : null
-          }
-          {
-            title
-              ? (
-                <div>
-                  <h1>{ title }</h1>
-                  {
-                    subtitle
-                      ? <p className="font-family-medium">{subtitle}</p>
-                      : null
-                  }
-                </div>
-              )
-              : subtitle && <p className="font-family-medium">{subtitle}</p>
-          }
-          <div className="tyk-nav-bar__container">
-            {
-              left
-                ? <div className="tyk-nav-bar__left">{ left }</div>
-                : ''
-            }
-            {
-              right
-                ? <div className="tyk-nav-bar__right">{ right }</div>
-                : ''
-            }
-          </div>
+function NavBar({
+  align = 'center',
+  children,
+  left,
+  right,
+  title,
+  pre,
+  subtitle,
+  withTabs,
+}) {
+  const subtitleContent = subtitle ? <p className="font-family-medium">{ subtitle }</p> : null;
+  return (
+    <section className={`tyk-nav-bar ${withTabs ? 'tyk-nav-bar__with-tabs' : ''}`}>
+      <div className={`tyk-nav-bar__wrapper tyk-nav-bar--align-${align}`}>
+        {pre && (
+          <div className="tyk-nav-bar__pre">{pre}</div>
+        )}
+        {
+          title
+            ? (
+              <div>
+                <h1>{ title }</h1>
+                { subtitleContent }
+              </div>
+            )
+            : subtitleContent
+        }
+        <div className="tyk-nav-bar__container">
+          {left && (
+            <div className="tyk-nav-bar__left">{ left }</div>
+          )}
+          {right && (
+            <div className="tyk-nav-bar__right">{ right }</div>
+          )}
         </div>
-        { children }
-      </section>
-    );
-  }
+      </div>
+      { children }
+    </section>
+  );
 }
+
+NavBar.propTypes = {
+  align: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.element,
+    PropTypes.string,
+  ]),
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  pre: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.node,
+  ]),
+  left: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.node,
+  ]),
+  right: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.node,
+  ]),
+  withTabs: PropTypes.bool,
+};
+
+export default NavBar;