Merge pull request #64 from vtex-apps/feature/tests

Upgrade test suite adding more tests

react/__tests__/Carousel.test.js

@@ -1,11 +1,12 @@
 /* eslint-env jest */
 import React from 'react'
+import { range, map, forEach, pluck } from 'ramda'
 import { render } from '@vtex/test-tools/react'
 
 import Carousel from '../Carousel'
 
 describe('Carousel component', () => {
-  const renderComponent = () => {
+  const renderComponent = customProps => {
     const props = {
       height: 440,
       mobileHeight: 339,
@@ -19,47 +20,76 @@ describe('Carousel component', () => {
           image:
             'https://raw.githubusercontent.com/vtex-apps/carousel/master/images/banners-01.png',
           externalRoute: true,
-          description: 'banner',
-          url:
-            'https://raw.githubusercontent.com/vtex-apps/carousel/master/images/banners-01.png',
+          description: 'banner1',
+          url: 'banner1-url',
         },
         {
           image:
             'https://raw.githubusercontent.com/vtex-apps/carousel/master/images/banners-02.png',
           externalRoute: true,
-          description: 'david',
-          url:
-            'https://raw.githubusercontent.com/vtex-apps/carousel/master/images/banners-01.png',
+          description: 'banner2',
+          url: 'banner2-url',
         },
         {
           image:
             'https://raw.githubusercontent.com/vtex-apps/carousel/master/images/banners-03.png',
           externalRoute: true,
-          description: 'banner',
-          url:
-            'https://raw.githubusercontent.com/vtex-apps/carousel/master/images/banners-01.png',
+          description: 'banner3',
+          url: 'banner3-url',
         },
       ],
+      ...customProps,
     }
 
     return render(<Carousel {...props} />)
   }
 
   it('should be rendered', () => {
-    expect(renderComponent()).toBeDefined()
+    const { asFragment } = renderComponent()
+    expect(asFragment()).toBeDefined()
   })
 
   it('should match snapshot', () => {
-    expect(renderComponent().asFragment()).toMatchSnapshot()
+    const { asFragment } = renderComponent()
+    expect(asFragment()).toMatchSnapshot()
   })
 
   it('should render items', () => {
-    expect(
-      renderComponent().container.querySelectorAll('.slider-container-mock')
-        .length
-    ).toBe(1)
-    expect(
-      renderComponent().container.querySelectorAll('.slide-mock').length
-    ).toBe(3) // set to be infinite
+    const banner = id => ({
+      image: `image${id}`,
+      externalRoute: true,
+      description: `description${id}`,
+      url: `url${id}`,
+    })
+    const banners = map(banner, range(0, 10))
+
+    const { container, getByAltText } = renderComponent({
+      numberOfBanners: banners.length,
+      banners,
+    })
+
+    const itensContainer = container.querySelectorAll('.slider-container-mock')
+    expect(itensContainer.length).toBe(1)
+
+    const items = container.querySelectorAll('.slide-mock')
+    expect(items.length).toBe(banners.length)
+
+    // The URLs rendered should be the ones in the banners
+    const urls = [...container.querySelectorAll('a')].map(a =>
+      a.getAttribute('href')
+    )
+    expect(urls).toEqual(pluck('url', banners))
+
+    // The Images URLs rendered should be the ones in the banners
+    const images = [...container.querySelectorAll('img')].map(img =>
+      img.getAttribute('src')
+    )
+    expect(images).toEqual(pluck('image', banners))
+
+    // The alts rendered should be the ones in the banners
+    const descriptions = pluck('description', banners)
+    forEach(description => {
+      getByAltText(description)
+    }, descriptions)
   })
 })

react/__tests__/__snapshots__/Carousel.test.js.snap

@@ -13,7 +13,7 @@ exports[`Carousel component should match snapshot 1`] = `
       >
         <a
           class="bannerLink w-100"
-          href="https://raw.githubusercontent.com/vtex-apps/carousel/master/images/banners-01.png"
+          href="banner1-url"
           target="_blank"
         >
           <div
@@ -24,7 +24,7 @@ exports[`Carousel component should match snapshot 1`] = `
               style="max-height: 440px;"
             >
               <img
-                alt="banner"
+                alt="banner1"
                 class="img w-100 h-100"
                 src="https://raw.githubusercontent.com/vtex-apps/carousel/master/images/banners-01.png"
               />
@@ -37,7 +37,7 @@ exports[`Carousel component should match snapshot 1`] = `
       >
         <a
           class="bannerLink w-100"
-          href="https://raw.githubusercontent.com/vtex-apps/carousel/master/images/banners-01.png"
+          href="banner2-url"
           target="_blank"
         >
           <div
@@ -48,7 +48,7 @@ exports[`Carousel component should match snapshot 1`] = `
               style="max-height: 440px;"
             >
               <img
-                alt="david"
+                alt="banner2"
                 class="img w-100 h-100"
                 src="https://raw.githubusercontent.com/vtex-apps/carousel/master/images/banners-02.png"
               />
@@ -61,7 +61,7 @@ exports[`Carousel component should match snapshot 1`] = `
       >
         <a
           class="bannerLink w-100"
-          href="https://raw.githubusercontent.com/vtex-apps/carousel/master/images/banners-01.png"
+          href="banner3-url"
           target="_blank"
         >
           <div
@@ -72,7 +72,7 @@ exports[`Carousel component should match snapshot 1`] = `
               style="max-height: 440px;"
             >
               <img
-                alt="banner"
+                alt="banner3"
                 class="img w-100 h-100"
                 src="https://raw.githubusercontent.com/vtex-apps/carousel/master/images/banners-03.png"
               />

react/package.json

@@ -14,8 +14,7 @@
   "dependencies": {
     "@vtex/styleguide": "~2.0.0-rc.39",
     "classnames": "^2.2.6",
-    "jest-environment-jsdom": "^23.4.0",
-    "lodash": "^4.17.10",
+    "ramda": "^0.26.1",
     "shortid": "2.2.8"
   },
   "devDependencies": {