[ADD]🚀 getGifs with Fetch tests added

Author: joalbertg

src/tests/components/GifGridItem.test.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import GifGridItem from '../../components/GifGridItem';
+
+describe('Tests GifGridItem component', () => {
+  const url = 'https://localhost:8080/something.gif';
+  const title = 'something';
+
+  let wrapper = shallow(<GifGridItem url={url} title={title} />);
+
+  beforeEach(() => {
+    wrapper = shallow(<GifGridItem url={url} title={title} />);
+  });
+
+  test('Should display correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe('Tests className attribute', () => {
+    test('Should have card in className', () => {
+      const text = wrapper.find('div').prop('className');
+      expect(text.includes('card')).toBe(true);
+    });
+
+    test('Should have animate__animated and animate__fadeIn in className', () => {
+      const text = wrapper.find('.card').prop('className');
+      expect(text.includes('animate__animated')).toBe(true);
+      expect(text.includes('animate__fadeIn')).toBe(true);
+    });
+  });
+
+  describe('Tests url attribute', () => {
+    const text = wrapper.find('.card img').prop('src');
+
+    test('Should have a sub-string with https:// text', () => {
+      expect(text.includes('https://')).toBe(true);
+    });
+
+    test('Should have a something with .gif', () => {
+      expect(text.includes('.gif')).toBe(true);
+    });
+
+    test('Should have a alt with something text', () => {
+      const text = wrapper.find('.card img').prop('alt');
+      expect(text).toBe(title);
+    });
+  });
+
+  test('Should have a title with something text', () => {
+    const text = wrapper.find('.card p').text();
+    expect(text).toBe(title);
+  });
+});
+
+

src/tests/components/__snapshots__/GifGridItem.test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tests GifGridItem component Should display correctly 1`] = `
+<div
+  className="card animate__animated animate__fadeIn"
+>
+  <img
+    alt="something"
+    src="https://localhost:8080/something.gif"
+  />
+  <p>
+    something
+  </p>
+</div>
+`;

src/tests/helpers/getGifs.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { getGifs } from '../../helpers';
+
+describe('Tests getGifs with Fetch', () => {
+  test('Should return a length of 15', async () => {
+    const gifs = await getGifs('Dragon Ball');
+    expect(gifs.length).toBe(15);
+  });
+
+  test('Should return a length of 0', async () => {
+    const gifs = await getGifs('');
+    expect(gifs.length).toBe(0);
+  });
+
+  test('Should not have " GIF" text string in the title', async () => {
+    const gifs = await getGifs('Dragon Ball');
+    const allTitle = gifs.reduce((acc, gif) => `${acc} ${gif.title}`, '');
+
+    expect(allTitle.includes(' GIF')).not.toBe(true);
+  });
+});
+