image tests working

Author: annamullike

.eslintrc.js

@@ -27,7 +27,7 @@ module.exports = {
     indent: ['warn', 2],
     'no-unused-vars': ['off', { vars: 'local' }],
     'prefer-const': 'warn',
-    quotes: ['warn', 'single'],
+    'quotes': [2, 'single', { 'avoidEscape': true }],
     semi: ['warn', 'always'],
     'space-infix-ops': 'warn',
     'no-console': 'off',

__tests__/ContainersTab.test.js

@@ -5,6 +5,7 @@ import ContainersCard from "../src/components/ContainersCard/ContainersCard";
 import { describe, beforeEach, expect, test, jest } from "@jest/globals";
 import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
+import fetchMock from "jest-fetch-mock";
 import store from "../src/store";
 
 const props = {
@@ -32,26 +33,57 @@ const props = {
   stop: jest.fn(),
   remove: jest.fn(),
   runStopped: jest.fn(),
+  status: 'running'
 };
 
+fetchMock.enableMocks();
+
 describe("Containers", () => {
-  beforeEach(() => {
-    render(
-      <Provider store={store}>
-        <Containers {...props}/>
-      </Provider>
-    );
+  test("Containers component should render", () => {
+     render(
+       <Provider store={store}>
+         <Containers />
+       </Provider>
+     );
+   });
+
+  describe('ContainersCard', () => {
+    test('renders correctly', () => {
+      render(
+        <ContainersCard
+          containerList={props.runningList}
+          stopContainer={props.stop}
+          runContainer={props.runStopped}
+          removeContainer={props.remove}
+          status={props.status}
+        />
+      );
+    });
   });
 
   describe("Running List containers", () => {
+    beforeEach(() => {
+      render(<Provider store={store}>
+        <Containers {...props} />
+      </Provider>
+      )
+      render(
+        <ContainersCard
+          containerList={props.runningList}
+          stopContainer={props.stop}
+          runContainer={props.runStopped}
+          removeContainer={props.remove}
+          status={props.status}
+        />
+      );
+    });
+
     test("Should have render correct amount of running containers", () => {
-      const runningContainers = screen.getByText("RUNNING CONTAINERS");
-      
-      console.log(runningContainers);
+      expect(screen.getByText(/1/i)).toBeInTheDocument();
     });
 
     xtest("Name of container should properly display", () => {
-      const h3 = screen.getAllByRole("heading", { level: 3 });
+      const h3 = div.querySelectorAll(h3);
       const name = h3[0].innerHTML;
       expect(name).toEqual("blissful_matsumoto");
     });
@@ -65,10 +97,7 @@ describe("Containers", () => {
 
   describe("Stopped List Containers", () => {
     xtest("Should have render correct amount of containers", () => {
-      const exitedContainers = screen.getByText("EXITED CONTAINERS");
-      expect(exitedContainers.nextSibling.innerText).toBe(
-        `Count: ${props.stoppedList.length}`
-      );
+      expect(div.querySelectorAll("p")[1].textContent).toBe("Count: 1");
     });
 
     xtest("Name of container should properly display", () => {

__tests__/ImageTab.test.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import store from '../src/store';
 import { Provider } from 'react-redux';
-import * as helper from '../src/helpers/commands';
+//import useHelper, * as helper from '../src/helpers/commands';
+import {useHelper} from "../src/helpers/commands"
 import { describe, beforeEach, expect, test, jest } from '@jest/globals';
 import Images from '../src/components/Images/Images';
 import "@testing-library/jest-dom";
@@ -10,7 +11,10 @@ import {
   render,
   screen,
 } from '@testing-library/react';
+import { isJSDocSeeTag } from 'typescript';
+import ReactDOM from "react-dom";
 
+  /* ----- fake data  ------ */
 const props = {
   imagesList: [
     {
@@ -26,75 +30,68 @@ const props = {
 };
 
 describe('Images', () => {
+  const div = document.createElement("div");
   beforeEach(() => {
-    render(      
+
+    render(
       <Provider store={store}>
-        <Images {...props} />
+        <Images imagesList={props.imagesList[0]} />
       </Provider>
-    )
+    );
   });
 
-  // beforeEach(() => {
-  //   render(<Images {...props} />);
-  //   screen.debug();
-  // });
-  xdescribe("text rendering", () => {
-    test("if image repsository text renders", async () => {
-      //const text = screen.getByText('IMAGE REPOSITORY')
+    /* ----- heading ------ */
+  describe("Text renders on page", () => {
+    test("Image repository is present on screen", async () => {
+      const text = screen.getByText('IMAGE REPOSITORY')
       expect(screen.getByText("IMAGE REPOSITORY")).toBeInTheDocument();
     });
   })
 
   /* ----- search bar ----- */
-  xdescribe('Seach bar testing', () => {
+  describe('Seach bar testing', () => {
     test('Search accepts input', async () => {
       const search = screen.getByRole('textbox');
       await fireEvent.change(search, { target: { value: 'search' } });
       expect(search.value).toBe('search');
     });
   });
 
-  /* ----- button testing ------ */
-
-  describe('Run button on click', () => {
-    test('Fires run button functionality', () => {
-      const runButton = screen.getByRole("button", { name: "RUN" });
-      fireEvent.click(runButton);
-      // expect(pullButton).toBeCalled
-      expect(props.runIm).toBeCalled;
-    });
-  });
-
-
-  describe('Remove button on click', () => {
-    test('Fires remove button functionality', async () => {
-      const removeButton = screen.getByRole('button', { name: 'REMOVE' });
-      await fireEvent.click(removeButton);
-      expect(removeButton).toBeCalled;
-    });
-  });
-
-  // currently gets stuck at window.runExec method --> reads undefined
+  /* ----- pull button click  ------ */
   describe('pull button on click', () => {
     test('fires pull button functionality', () => {
-      // const { container } = render(<Images {...props} />);
       const pullButton = screen.getByRole('button', { name: 'PULL' });
       fireEvent.click(pullButton);
       expect(pullButton).toBeCalled;
       expect(Images.handleClick).toBeCalled;
     });
   });
 
-  describe('Images', () => {
-    test('Renders an image if one is found', () => {
-      const name = screen.getByText('Redis');
-      const id = screen.getByText('2718634043dc');
-      const size = screen.getByText('111 MB');
-      const tag = screen.getByText(16.4);
-      expect(name).toBeDefined;
-      expect(id).toBeDefined;
-      expect(size).toBeDefined;
-      expect(tag).toBeDefined;
+  /* -----  image cards render  ------ */
+  describe('Images Card Testing', () => {
+    //render(<Provider store={store}><Images imagesList={props.imagesList[0]} /></Provider>);
+    test("Run images button clicks", () => {
+      const runButton = screen.getByRole('button', { name: 'RUN' });
+      expect(runButton).toBeInTheDocument()
+      fireEvent.click(runButton);
+      expect(Images.runIm).toBeCalled;
     });
-  });
-});
+    test('Remove image button clicks', () => {
+      const removeButton = screen.getByRole('button', { name: 'REMOVE' });
+      expect(removeButton).toBeInTheDocument()
+      fireEvent.click(removeButton);
+      expect(Images.removeIm).toBeCalled;
+    })
+    test("Renders an image if one is found", () => {
+      const redisImage = screen.getByText(/Redis/i);
+      const imageId = screen.getByText(/Image ID: 2718634043dc/i);
+      const imageSize = screen.getByText(/Image Size: 111 MB/i);
+      const imageTag = screen.getByText(/16.4/i);
+
+      expect(redisImage).toBeInTheDocument();
+      expect(imageId).toBeInTheDocument();
+      expect(imageSize).toBeInTheDocument();
+      expect(imageTag).toBeInTheDocument();
+    });
+    });
+  });

__tests__/MetricsTab.test.js

@@ -1,20 +1,11 @@
 import React, { Component } from 'react';
 import Metrics from '../src/components/Metrics/Metrics';
-import {
-  describe,
-  expect,
-  test,
-  beforeEach,
-  afterEach,
-  jest,
-} from '@jest/globals';
+import { describe, expect, test, beforeEach } from '@jest/globals';
 import '@testing-library/jest-dom';
 import { Provider } from 'react-redux';
 import store from '../src/store';
-import { act } from 'react-test-renderer';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import fetchMock from 'jest-fetch-mock';
-import { async } from 'regenerator-runtime';
 
 fetchMock.enableMocks();