TT-10495 added tests for text ellipsis (#317)

* TT-10495 added tests for text ellipsis

.github/workflows/run-tests.yml

@@ -17,6 +17,8 @@ jobs:
 
     steps:
     - uses: actions/checkout@v2
+      with:
+        fetch-depth: 0
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
       with:
@@ -42,10 +44,13 @@ jobs:
         args: >
           -Dsonar.organization=tyktechnologies
           -Dsonar.projectKey=TykTechnologies_tyk-ui
+          -Dsonar.sources=./src
+          -Dsonar.coverage.exclusions=**/*.test.js
+          -Dsonar.test.inclusions=**/*.test.js
+          -Dsonar.tests=./src
           -Dsonar.javascript.lcov.reportPaths=coverage/lcov.info
           -Dsonar.eslint.eslintconfigpath=.eslintrc
-
     env:
       CI: true
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+      SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

src/components/TextEllipsis/TextEllipsis.test.js

@@ -1,7 +1,33 @@
+import React from 'react';
 import TextEllipsis from './index';
 
+function Component() {
+  return (
+    <div className="text-ellipsis" style={{ marginTop: '200px', textAlign: 'center' }}>
+      <TextEllipsis
+        text="alpha, bravo, charlie, delta, forgot the rest"
+        limit={10}
+      />
+    </div>
+  );
+}
+
 describe('TextEllipsis', () => {
-  it('TODO', () => {
-    expect(true).to.equal(true);
+  const classes = {
+    floatingContainer: 'floating-container',
+  };
+  it('should show just first 10 chars followed by "..."', () => {
+    cy.mount(<Component />)
+      .get('.text-ellipsis')
+      .should('have.text', 'alpha, bra...');
+  });
+  it('when hovering the shrinked texts, shows the tooltip with full text', () => {
+    cy.mount(<Component />);
+    cy.get(`.${classes.floatingContainer}`)
+      .should('not.exist')
+      .get('.text-ellipsis')
+      .trigger('mouseover')
+      .get(`.${classes.floatingContainer}`)
+      .should('exist');
   });
 });

src/components/TextEllipsis/index.js

@@ -7,22 +7,26 @@ import Tooltip from '../Tooltip';
  * The entire text is displayed with the help of Tooltip component
  */
 
-const TextEllipsis = ({ text, limit, position }) => (
-  text.length > limit
-    ? (
-      <Tooltip render={text} position={position}>
-        {text.substring(0, limit)}
-        ...
-      </Tooltip>
-    )
-    : text
-);
+function TextEllipsis({ text, limit, position }) {
+  return (
+    text.length > limit
+      ? (
+        <Tooltip render={text} position={position}>
+          {text.substring(0, limit)}
+          ...
+        </Tooltip>
+      )
+      : text
+  );
+}
 
 TextEllipsis.propTypes = {
   /** Text to be shrinked by TextEllipsis */
   text: PropTypes.string,
   /** Number of characters that TextEllipsis would leave visible */
   limit: PropTypes.number,
+  /** tooltip position */
+  position: PropTypes.string,
 };
 
 export default TextEllipsis;