1- import React , { Component } from 'react' ;
1+ import React from 'react' ;
22import Containers from '../src/components/tabs/Containers' ;
3-
4- // Started to migrate to React-Testing-Library...
5- import { create } from 'react-test-renderer ' ;
3+ import { describe , beforeEach , expect , test , jest } from '@jest/globals' ;
4+ import '@testing-library/jest-dom' ;
5+ import ToggleDisplay from '../src/components/display/ToggleDisplay ' ;
66import { fireEvent , render , screen } from '@testing-library/react' ;
7- import * as actions from '@testing-library/jest-dom' ;
87
98const props = {
109 runningList : [
@@ -22,136 +21,77 @@ const props = {
2221 stoppedList : [
2322 {
2423 Names : 'zealous' ,
25- ID : 'c902ec744095' ,
26- Img : '84c5f6e03bf0' ,
27- Created : '2 days ago' ,
28- name : 'zealous_pare'
24+ ID : 'c902ec744095' ,
25+ Image : '84c5f6e03bf0' ,
26+ RunningFor : '2 days ago' ,
2927 }
30- ]
28+ ] ,
29+ container : { MemUsage :1 } ,
30+ stop : jest . fn ( ) ,
31+ remove : jest . fn ( ) ,
32+ runStopped : jest . fn ( )
3133} ;
32- /** Docketeer 7.0
33- * This was the previous groups code, we left commented just incase it became useful down the road.
34- */
35-
36- // Debug test
37- // describe('Containers', () => {
38- // test('Renders the Container Component', () => {
39- // render(<Containers {...props} />);
40- // // Screening the component
41- // screen.debug();
42- // });
43- // });
44-
45- // function shallowSetup() {
46- // const props = {
47- // runningList: [
48- // {
49- // block: '0B/0B',
50- // ID: 'a802306eeac3',
51- // CPUPerc: '0.17%',
52- // MemPerc: '0.11%',
53- // MemUsage: '2.195MiB/1.944GiB',
54- // Name: 'blissful_matsumoto',
55- // NetIO: '796B/0B',
56- // PIDs: '5'
57- // }
58- // ],
59- // stoppedList: [
60- // {
61- // Name: 'zealous',
62- // ID: 'c902ec744095',
63- // Img: '84c5f6e03bf0',
64- // Created: '2 days ago',
65- // name: 'zealous_pare'
66- // }
67- // ]
68- // };
69- // const reactWrapper = create(<Containers {...props} />);
70-
71- // return {
72- // props,
73- // reactWrapper
74- // };
75- // }
76-
77- // describe('Running containers are being rendered', () => {
78- // test('Should render <div> tag that has title renderContainers in Running', () => {
79- // // Testing for if there is a container with the title of renderContainer
80- // render(<Containers {...props} />);
81-
82- // const renderContainer = screen.getByTitle('renderContainers');
83- // expect(renderContainer).toHaveClass('renderContainers');
84- // });
85-
86- // test('Should render the correct number of containers', () => {
87- // const { container } = render(<Containers {...props} />);
88- // const containers = container.getElementsByClassName('containers');
89- // expect(containers.length).toBe(1);
90- // });
91- // });
92-
93- // describe('It should render the exited containers', () => {
94- // test('Should have a className run-btn in Stopped component', () => {
95- // render(<Containers {...props} />);
96-
97- // const runBtnRender = screen.getByTestId('run-btn');
98-
99- // expect(runBtnRender).toHaveClass('run-btn');
100- // });
10134
102- /** Docketeer 7.0
103- * These are all preliminary tests that were not veted out. Could be useful as a starting point.
104- */
10535
106- //! NEED TO FIGURE OUT HOW TO ADD ONCLICK TEST
107- // test('ClassName run-btn in stopped component have onClick function', () => {
108- // const handleOnClick = jest.fn();
109-
110- // render(<Containers {...props} runStopped={handleOnClick} />);
111-
112- // const runBtnRender = screen.queryByText('RUN');
113- // // screen.queryByText('RUN');
114-
115- // fireEvent.click(runBtnRender);
116-
117- // expect(runBtnRender).toHaveBeenCalledTimes(1);
118- // });
119- // });
120-
121- // describe('It should render the exited containers', () => {
122- // const { reactWrapper } = shallowSetup();
123- //! test('Should render <div> tag in Stopped', () => {
124- //! expect(reactWrapper.type()).toEqual('div');
125- //! });
126-
127- //* test('Should have className run-btn in Stopped component', () => {
128- //* expect(
129- //* reactWrapper.find('.stopped-button').props().children[0].props.className
130- //* ).toEqual('run-btn');
131- //* });
132-
133- // test('ClassName run-btn in Stopped component have onClick function', () => {
134- // expect(
135- // reactWrapper.find('.stopped-button').props().children[0].props.onClick
136- // ).toBeDefined();
137- // });
138-
139- // test('Should have className stop-btn in Stopped component', () => {
140- // expect(
141- // reactWrapper.find('.stopped-button').props().children[1].props.className
142- // ).toEqual('stop-btn');
143- // });
36+ describe ( 'Containers' , ( ) => {
37+
38+ beforeEach ( ( ) => {
39+ render ( < Containers { ...props } /> ) ;
40+ } ) ;
14441
145- // test('ClassName stop-btn in Stopped component have onClick function', () => {
146- // expect(
147- // reactWrapper.find('.stopped-button').props().children[1].props.onClick
148- // ).toBeDefined();
149- // });
150- // });
42+ describe ( 'Running List containers' , ( ) => {
43+
44+ test ( 'Should have render correct amount of running containers' , ( ) => {
45+ const runningContainers = screen . getByText ( 'Running Containers' , { exact :false } ) ;
46+ const text = runningContainers . innerHTML ;
47+ expect ( text ) . toEqual ( `Running Containers: ${ props . runningList . length } ) ;
48+ } ) ;
49+
50+ test ( 'Name of container should properly display' , ( ) => {
51+ const h3 = screen . getAllByRole ( 'heading' , { level : 3 } ) ;
52+ const name = h3 [ 0 ] . innerHTML ;
53+ expect ( name ) . toEqual ( 'Name: blissful_matsumoto' ) ;
54+ } ) ;
55+
56+ test ( 'Stop button is called' , async ( ) => {
57+ const stopButton = document . querySelector ( '.stop-btn' ) ;
58+ await fireEvent . click ( stopButton ) ;
59+ } ) ;
60+
61+ test ( 'Toggle Display button works' , ( ) => {
62+ render ( < ToggleDisplay { ...props } /> ) ;
63+ const button = screen . getAllByRole ( 'button' ) ;
64+ expect ( button [ 4 ] ) . toHaveTextContent ( 'Show Details' ) ;
65+ fireEvent . click ( button [ 4 ] ) ;
66+ expect ( button [ 4 ] ) . toHaveTextContent ( 'Hide Details' ) ;
67+
68+ } ) ;
69+ } ) ;
15170
152- //* Dummy Test
153- describe ( 'dummy test' , ( ) => {
154- test ( 'dummy test' , ( ) => {
155- expect ( 2 + 2 ) . toBe ( 4 ) ;
71+ describe ( 'Stopped List Containers' , ( ) => {
72+
73+ test ( 'Should have render correct amount of containers' , ( ) => {
74+ const exitedContainers = screen . getByText ( 'Exited Containers' , { exact :false } ) ;
75+ const text = exitedContainers . innerHTML ;
76+ expect ( text ) . toEqual ( `Exited Containers: ${ props . stoppedList . length } ) ;
77+ } ) ;
78+
79+ test ( 'Name of container should properly display' , ( ) => {
80+ const name = screen . getAllByText ( 'zealous' ) ;
81+ expect ( name ) . toHaveLength ( 2 ) ;
82+ } ) ;
83+
84+ test ( 'Run and remove button should fire' , async ( ) => {
85+ const buttons = screen . getAllByRole ( 'button' ) ;
86+ const runButton = buttons [ 2 ] ;
87+ const removeButton = buttons [ 3 ] ;
88+ await fireEvent . click ( runButton ) ;
89+ await fireEvent . click ( removeButton ) ;
90+ expect ( runButton ) . toBeCalled ;
91+ expect ( removeButton ) . toBeCalled ;
92+
93+ } ) ;
94+
15695 } ) ;
157- } ) ;
96+ } ) ;
97+
0 commit comments