From e31cf236cc804294ec9e12025da0440a4d4153ba Mon Sep 17 00:00:00 2001
From: Vlad Ifrim <ifrimvlad@gmail.com>
Date: Sat, 4 Nov 2023 17:30:49 +0200
Subject: [PATCH] unit tests for the loader component

---
 src/components/Loader/Loader.test.js | 27 ++++++++-
 src/components/Loader/index.js       | 86 ++++++++++------------------
 2 files changed, 55 insertions(+), 58 deletions(-)

diff --git a/src/components/Loader/Loader.test.js b/src/components/Loader/Loader.test.js
index bf8f6541..ab2bc1b6 100644
--- a/src/components/Loader/Loader.test.js
+++ b/src/components/Loader/Loader.test.js
@@ -1,7 +1,30 @@
+import React from 'react';
 import Loader from './index';
 
 describe('Loader', () => {
-  it('TODO', () => {
-    expect(true).to.equal(true);
+  const selectors = {
+    loader: '.loading',
+    wrapper: '.tyk-loading__wrapper',
+  };
+
+  it('renders the loader component, by default with position relative and no wrapper', () => {
+    cy.mount(<Loader />)
+      .get(selectors.loader)
+      .should('exist')
+      .and('have.css', 'position', 'relative')
+      .get(selectors.wrapper)
+      .should('not.exist');
+  });
+
+  it('the position can be configured', () => {
+    cy.mount(<Loader position="absolute" />)
+      .get(selectors.loader)
+      .should('have.css', 'position', 'absolute');
+  });
+
+  it('the wrapper can be displayed with the "withbackground" prop', () => {
+    cy.mount(<Loader withbackground />)
+      .get(selectors.wrapper)
+      .should('exist');
   });
 });
diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js
index 1be8f02e..3ba025b4 100644
--- a/src/components/Loader/index.js
+++ b/src/components/Loader/index.js
@@ -1,60 +1,34 @@
-import React, { Component, Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-export default class Loader extends Component {
-  static propTypes = {
-    /** add a class to loader */
-    className: PropTypes.string,
-    /** position of loader (absolute / relative) */
-    position: PropTypes.string,
-    /** defines weather loader should be renders with / without background */
-    withbackground: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    position: 'relative',
-    withbackground: false,
-  }
-
-  getCssClasses() {
-    let cssClasses = ['loading'];
-    const { className, position } = this.props;
-
-    cssClasses.push(position || 'absolute');
-
-    if (className) {
-      cssClasses = cssClasses.concat(className.split(' '));
-    }
-
-    return cssClasses.join(' ');
-  }
-
-  getLoaderComponent() {
-    return (
-      <div className={this.getCssClasses()}>
-        <div className="loading-bar" />
-        <div className="loading-bar" />
-        <div className="loading-bar" />
-        <div className="loading-bar" />
-      </div>
-    );
-  }
+function Loader({ className, position = 'relative', withbackground = false }) {
+  const classes = [
+    'loading',
+    position,
+    className,
+  ].filter(Boolean).join(' ');
+
+  const loader = (
+    <div className={classes}>
+      <div className="loading-bar" />
+      <div className="loading-bar" />
+      <div className="loading-bar" />
+      <div className="loading-bar" />
+    </div>
+  );
+
+  return withbackground
+    ? <div className="tyk-loading__wrapper">{loader}</div>
+    : loader;
+}
 
-  render() {
-    const { withbackground } = this.props;
+Loader.propTypes = {
+  /** add a class to loader */
+  className: PropTypes.string,
+  /** position of loader (absolute / relative) */
+  position: PropTypes.string,
+  /** defines weather loader should be renders with or without background */
+  withbackground: PropTypes.bool,
+};
 
-    return (
-      <Fragment>
-        {
-          withbackground
-            ? (
-              <div className="tyk-loading__wrapper">
-                {this.getLoaderComponent()}
-              </div>
-            )
-            : this.getLoaderComponent()
-        }
-      </Fragment>
-    );
-  }
-}
+export default Loader;