Merge pull request #392 from neontribe/testing

Get CI and Linting working again

.travis.yml

@@ -0,0 +1 @@
+language: node_js

fileTransformer.js

@@ -0,0 +1,8 @@
+// Lets Jest represent imported assets with their filenames
+const path = require('path')
+
+module.exports = {
+  process(src, filename, config, options) {
+    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'
+  },
+}

jest-preprocess.js

@@ -1,6 +1,6 @@
 const babelOptions = {
   presets: ['babel-preset-gatsby'],
-  plugins: ['styled-jsx/babel-test'],
+  plugins: ['styled-jsx/babel'],
 }
 
 module.exports = require('babel-jest').createTransformer(babelOptions)

jest.config.js

@@ -1,17 +1,17 @@
 module.exports = {
   transform: {
     '^.+\\.jsx?$': `<rootDir>/jest-preprocess.js`,
+    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/fileTransformer.js',
   },
   moduleNameMapper: {
     '.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
-    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/__mocks__/file-mock.js`,
   },
   testPathIgnorePatterns: [`node_modules`, `.cache`],
   transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
   globals: {
     __PATH_PREFIX__: ``,
   },
   testURL: `http://localhost`,
-  setupFiles: [`<rootDir>/loadershim.js`],
   setupFilesAfterEnv: ['<rootDir>/setup-test-env.js'],
 }

package.json

@@ -42,26 +42,27 @@
     "start": "yarn run develop",
     "start-prototype": "live-server prototype/",
     "format": "prettier --write \"src/**/*.js\"",
-    "test": "jest",
+    "test": "yarn lint && jest",
+    "lint": "eslint .",
     "now-build": "npm run build"
   },
   "devDependencies": {
-    "@testing-library/react": "8.0.9",
-    "babel-eslint": "10.0.1",
-    "babel-jest": "24.8.0",
-    "eslint": "5.16.0",
-    "eslint-config-react-app": "4.0.1",
-    "eslint-plugin-flowtype": "3.10.1",
-    "eslint-plugin-import": "2.17.3",
-    "eslint-plugin-jsx-a11y": "6.2.1",
-    "eslint-plugin-react": "7.13.0",
-    "eslint-plugin-react-hooks": "1.6.0",
-    "husky": "2.7.0",
-    "jest": "24.8.0",
-    "jest-dom": "3.5.0",
-    "lint-staged": "8.2.0",
+    "@testing-library/jest-dom": "5.1.1",
+    "@testing-library/react": "9.5.0",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "25.1.0",
+    "eslint": "6.8.0",
+    "eslint-config-react-app": "5.2.0",
+    "eslint-plugin-flowtype": "4.6.0",
+    "eslint-plugin-import": "2.20.1",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-react": "7.19.0",
+    "eslint-plugin-react-hooks": "2.5.0",
+    "husky": "4.2.3",
+    "jest": "25.1.0",
+    "lint-staged": "10.0.8",
     "live-server": "1.2.1",
-    "prettier": "1.18.2"
+    "prettier": "1.19.1"
   },
   "engines": {
     "node": "12.x",
@@ -79,12 +80,10 @@
   },
   "lint-staged": {
     "*.{js,json,css,md}": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ],
     "*.js": [
-      "eslint",
-      "git add"
+      "eslint"
     ]
   },
   "homepage": "https://github.com/neontribe/www#readme"

setup-test-env.js

@@ -1,4 +1 @@
-import 'jest-dom/extend-expect'
-
-// this is basically: afterEach(cleanup)
-import '@testing-library/react/cleanup-after-each'
+import '@testing-library/jest-dom'

src/components/Carousel/Carousel.test.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+
+import Carousel from '.'
+
+const TestCarousel = () => (
+  <Carousel>
+    <Carousel.Item image="a" imageTitle="image 1" />
+    <Carousel.Item image="b" imageTitle="image 2" />
+    <Carousel.Item image="c" imageTitle="image 3" />
+  </Carousel>
+)
+
+test('displays the first item by default', () => {
+  const { getByTitle } = render(<TestCarousel />)
+
+  expect(getByTitle('image 1')).toBeInTheDocument()
+})
+
+test('displays second slide after Next is clicked', () => {
+  const { getByTitle, getByLabelText } = render(<TestCarousel />)
+
+  fireEvent.click(getByLabelText('Next Item'))
+
+  expect(getByTitle('image 2')).toBeInTheDocument()
+})
+
+test('loops to last item when Previous is clicked', () => {
+  const { getByTitle, getByLabelText } = render(<TestCarousel />)
+
+  fireEvent.click(getByLabelText('Previous Item'))
+
+  expect(getByTitle('image 3')).toBeInTheDocument()
+})
+
+test('displays correct item after image is clicked', () => {
+  const slideNumber = 3
+
+  const { getByTitle, getByLabelText } = render(<TestCarousel />)
+
+  fireEvent.click(getByLabelText(`Go to item ${slideNumber}`))
+
+  expect(getByTitle(`image ${slideNumber}`)).toBeInTheDocument()
+})

src/components/Carousel/CarouselImages.js

@@ -81,6 +81,7 @@ const CarouselImages = ({ images, activeImage, goToItem }) => (
   <div className="carousel__images">
     {images.map((image, i) => (
       <CarouselImage
+        key={`${image}-${i}`}
         image={image}
         i={i}
         activeImage={activeImage}

src/components/Carousel/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import CarouselControl from './CarouselControl'
 import CarouselImages from './CarouselImages'
 import CarouselItem from './CarouselItem'
-import Arrow from '../../../prototype/global-images/arrow.svg'
+import Arrow from './arrow.svg'
 
 const moduloWithMax = (num, max) => ((num % max) + max) % max
 
@@ -25,7 +25,7 @@ const Carousel = ({ children }) => {
     <div className="carousel">
       <div className="carousel__controls">
         <CarouselControl label="Previous Item" onClick={prevItem}>
-          <img className="arrow previous-arrow" src={Arrow} />
+          <img className="arrow previous-arrow" src={Arrow} alt="" />
         </CarouselControl>
         <CarouselImages
           images={React.Children.map(children, child => ({
@@ -36,7 +36,7 @@ const Carousel = ({ children }) => {
           goToItem={setActiveItem}
         />
         <CarouselControl label="Next Item" onClick={nextItem}>
-          <img className="arrow next-arrow" src={Arrow} />
+          <img className="arrow next-arrow" src={Arrow} alt="" />
         </CarouselControl>
       </div>