@hashicorp/react-vertical-text-block-list - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/index.js

@@ -10,2 +10,20 @@ 'use strict';
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function VerticalTextBlockList(_ref) {
@@ -16,5 +34,7 @@ var data = _ref.data,
   return React.createElement("div", {
-    className: "g-vertical-text-block-list"
+    className: "g-vertical-text-block-list",
+    "data-testid": "root"
   }, React.createElement("ul", {
-    className: "list".concat(centerText ? ' centered-text' : '')
+    className: "list".concat(centerText ? ' centered-text' : ''),
+    "data-testid": "item-list"
   }, data.map(function (item) {
@@ -25,10 +45,16 @@ return React.createElement("li", {
       link: item.linkUrl,
-      Link: Link
+      LinkComponent: Link
     }, React.createElement("div", {
-      className: "header"
-    }, item.logo ? React.createElement(Image, item.logo) : React.createElement("h6", null, item.header)), React.createElement("div", {
+      className: "header",
+      "data-testid": "header-".concat(item.header)
+    }, item.logo ? React.createElement(Image, _extends({}, item.logo, {
+      "data-testid": "img"
+    })) : React.createElement("h6", {
+      "data-testid": "text"
+    }, item.header)), React.createElement("div", {
       className: "body-text",
       dangerouslySetInnerHTML: {
         __html: marked.inlineLexer(item.body, [])
-      }
+      },
+      "data-testid": "body-text-".concat(item.header)
     })));
@@ -45,5 +71,7 @@ })));
     href: link,
-    className: "wrapper"
+    className: "wrapper",
+    "data-testid": "link"
   }, children) : React.createElement("div", {
-    className: "wrapper"
+    className: "wrapper",
+    "data-testid": "div"
   }, children);
@@ -50,0 +78,0 @@ }

index.js

@@ -8,9 +8,17 @@ import React from 'react'
   return (
-    <div className="g-vertical-text-block-list">
-      <ul className={`list${centerText ? ' centered-text' : ''}`}>
+    <div className="g-vertical-text-block-list" data-testid="root">
+      <ul
+        className={`list${centerText ? ' centered-text' : ''}`}
+        data-testid="item-list"
+      >
         {data.map(item => (
           <li key={item.body}>
-            <MaybeLink link={item.linkUrl} Link={Link}>
-              <div className="header">
-                {item.logo ? <Image {...item.logo} /> : <h6>{item.header}</h6>}
+            <MaybeLink link={item.linkUrl} LinkComponent={Link}>
+              <div className="header" data-testid={`header-${item.header}`}>
+                {/* TODO: use image component? */}
+                {item.logo ? (
+                  <Image {...item.logo} data-testid="img" />
+                ) : (
+                  <h6 data-testid="text">{item.header}</h6>
+                )}
               </div>
@@ -22,2 +30,3 @@ <div
                 }}
+                data-testid={`body-text-${item.header}`}
               />
@@ -34,8 +43,15 @@ </MaybeLink>
   return link ? (
-    <LinkWrap Link={LinkComponent} href={link} className="wrapper">
+    <LinkWrap
+      Link={LinkComponent}
+      href={link}
+      className="wrapper"
+      data-testid="link"
+    >
       {children}
     </LinkWrap>
   ) : (
-    <div className="wrapper">{children}</div>
+    <div className="wrapper" data-testid="div">
+      {children}
+    </div>
   )
 }

index.test.js

@@ -1,46 +0,64 @@
-import { expect } from 'chai'
+import React from 'react'
+import { render, cleanup } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
 import VerticalTextBlockList from './dist/index'
-import propsSpec from './props'
+import propsSpec from './props.js'
 
-testComponent(
-  () => VerticalTextBlockList,
-  { props: propsSpec },
-  ({ renderDeep, testTagAndClass, propValue }) => {
-    testTagAndClass('div', 'g-vertical-text-block-list')
+const defaultProps = global.propSpecToObj(propsSpec.default)
+afterEach(cleanup)
 
-    it('should render the correct number of list items', () => {
-      const wrapper = renderDeep()
+describe('<VerticalTextBlockList />', () => {
+  it('should render correctly with default props', () => {
+    const { getByTestId } = render(<VerticalTextBlockList {...defaultProps} />)
+    expect(getByTestId('root').className).toBe('g-vertical-text-block-list')
 
-      expect(wrapper.find('.list').find('li').length).to.equal(
-        propValue('data').length
-      )
-    })
+    // all items in the data list render
+    expect(getByTestId('item-list').children.length).toBe(
+      defaultProps.data.length
+    )
 
-    it('should render a list item with a wrapping link if linkUrl is present', () => {
-      const wrapper = renderDeep()
-      expect(
-        wrapper
-          .find('li')
-          .find('a')
-          .first()
-          .prop('href')
-      ).to.equal(propValue('data').find(x => x.linkUrl).linkUrl)
+    defaultProps.data.map(item => {
+      // item.logo presence/absense changes render
+      const headerFirstChild = getByTestId(`header-${item.header}`).children[0]
+      if (item.logo) {
+        expect(headerFirstChild).toHaveAttribute('data-testid', 'img')
+      } else {
+        expect(headerFirstChild).toHaveAttribute('data-testid', 'text')
+      }
     })
+  })
 
-    it('should render a list item with a wrapping div if linkUrl is NOT present', () => {
-      const wrapper = renderDeep(
-        {
-          data: [
-            {
-              header: 'Header',
-              body: 'Body'
-            }
-          ]
-        },
-        true
-      )
+  it('should render body text as markdown', () => {
+    const { getByTestId } = render(
+      <VerticalTextBlockList data={[{ header: 'test', body: '**foo**' }]} />
+    )
+    expect(
+      getByTestId(`body-text-test`).querySelector('strong')
+    ).toBeInTheDocument()
+  })
 
-      expect(wrapper.find('.wrapper').render()[0].name).to.equal('div')
+  it('should have a class with the "centerText" prop active', () => {
+    const { getByTestId } = render(
+      <VerticalTextBlockList {...defaultProps} centerText={true} />
+    )
+    expect(getByTestId('item-list')).toHaveClass('centered-text')
+  })
+
+  it('should render links correctly when a "Link" prop is passed', () => {
+    const { getByTestId } = render(
+      <VerticalTextBlockList {...defaultProps} Link={noopComponent} />
+    )
+    Array.from(getByTestId('item-list').children).map((child, i) => {
+      const hasLink = defaultProps.data[i].linkUrl
+      if (hasLink) {
+        expect(child.querySelector('[data-testid="link"]')).toBeInTheDocument()
+      } else {
+        expect(child.querySelector('[data-testid="div"]')).toBeInTheDocument()
+      }
     })
-  }
-)
+  })
+})
+
+function noopComponent({ children }) {
+  return children
+}

package.json

 {
   "name": "@hashicorp/react-vertical-text-block-list",
   "description": "Vertical block list of links",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "author": "Hashicorp - Mike Wickett",
@@ -22,3 +22,3 @@ "dependencies": {
   },
-  "gitHead": "2820c17206084ce62de83b43a65d4f407418e519"
+  "gitHead": "ac093238d66d6ba4136b691c0d6b7975d9919679"
 }

props.js

@@ -25,3 +25,3 @@ const props = {}
       {
-        header: 'This is a header',
+        header: 'This is a header 2',
         body: 'This is some [body text](http://www.google.com) to display'
@@ -35,3 +35,3 @@ },
         },
-        header: 'This is a header',
+        header: 'This is a header 3',
         body:
@@ -52,3 +52,3 @@ 'This is some body text to display. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut **arcu justo**, et convallis lectus. Sed commodo massa eget risus [feugiat suscipit](https://www.hashicorp.com). Nulla velit lectus, imperdiet cursus tempor at, adipiscing sit amet nisi. Aliquam vitae egestas erat. Aliquam erat volutpat. Aliquam iaculis facilisis elit, sed vulputate sem cursus ut. Morbi elit lacus, varius at porttitor nec, gravida in sapien. Aliquam erat volutpat. Nulla ut lorem libero, in lacinia velit.',
         },
-        header: 'This is a header',
+        header: 'This is a header 4',
         body: 'This is some body text to display wow'
@@ -55,0 +55,0 @@ }

readme.md

@@ -15,2 +15,2 @@ # Vertical Text Block List
 - `centerText` _[optional]_ (boolean) - sets text alignment to centered on mobile view if true (defaults to left-aligned)
-- `LinkWrapper` _[optional]_ (component) - if using nextjs, you can pass the `Link` component and it will be used for rendering links
+- `Link` _[optional]_ (component) - if using nextjs, you can pass the `Link` component and it will be used for rendering links

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31086

increased by7.24%

Lines of code

425

increased by15.18%

No dependency changes