How to use toHaveAttribute method in Playwright Internal

1describe("Ext.panel.Header", function() {
2    var header;
3    
4    function makeHeader(cfg) {
5        cfg = Ext.apply({
6            title: 'foo',
7            renderTo: Ext.getBody()
8        }, cfg);
9        
10        return header = new Ext.panel.Header(cfg);
11    }
12    
13    afterEach(function() {
14        Ext.destroy(header);
15        header = null;
16    });
17
18    describe('Title value', function() {
19        it('should set it as configured', function() {
20            makeHeader({
21                title: 10
22            });
23            expect(header.title.getText()).toBe(10);
24        });
25    });
26    
27    describe("setTitlePosition", function() {
28        beforeEach(function() {
29            makeHeader({
30                tools: [
31                    { type: 'close' },
32                    { type: 'pin' }
33                ]
34            });
35        });
36
37        it("should insert the header at the new title position", function() {
38            header.setTitlePosition(2);
39            expect(header.items.getAt(2)).toBe(header.getTitle());
40        });
41
42        it("should update the titlePosition property", function() {
43            header.setTitlePosition(2);
44            expect(header.titlePosition).toBe(2);
45        });
46
47        it("should not allow a titlePosition greater than the max item index", function() {
48            header.setTitlePosition(3);
49            expect(header.items.getAt(2)).toBe(header.getTitle());
50            expect(header.titlePosition).toBe(2);
51        });
52    });
53    
54    describe("ARIA", function() {
55        it("should have el as ariaEl", function() {
56            makeHeader();
57            
58            expect(header.ariaEl).toBe(header.el);
59        });
60        
61        describe("no tools", function() {
62            describe("ordinary header", function() {
63                beforeEach(function() {
64                    makeHeader();
65                });
66                
67                it("should have presentation ariaRole", function() {
68                    expect(header.ariaRole).toBe('presentation');
69                });
70                
71                it("should have presentation role on header el", function() {
72                    expect(header).toHaveAttribute('role', 'presentation');
73                });
74                
75                it("should have presentation role on titleCmp el", function() {
76                    expect(header.titleCmp).toHaveAttribute('role', 'presentation');
77                });
78                
79                it("should have presentation role on titleCmp textEl", function() {
80                    expect(header.titleCmp.textEl).toHaveAttribute('role', 'presentation');
81                });
82                
83                it("should have FocusableContainer disabled", function() {
84                    expect(header.enableFocusableContainer).toBe(false);
85                });
86                
87                describe("after adding tools", function() {
88                    beforeEach(function() {
89                        header.addTool({ type: 'expand' });
90                    });
91                    
92                    it("should change ariaRole to toolbar", function() {
93                        expect(header.ariaRole).toBe('toolbar');
94                    });
95                    
96                    it("should change header el role to toolbar", function() {
97                        expect(header).toHaveAttribute('role', 'toolbar');
98                    });
99                    
100                    it("should not change titleCmp el role", function() {
101                        expect(header.titleCmp).toHaveAttribute('role', 'presentation');
102                    });
103                    
104                    it("should not change titleCmp textEl role", function() {
105                        expect(header.titleCmp.textEl).toHaveAttribute('role', 'presentation');
106                    });
107                    
108                    it("should enable FocusableContainer", function() {
109                        expect(header.enableFocusableContainer).toBe(true);
110                    });
111                });
112            });
113            
114            describe("accordion header", function() {
115                beforeEach(function() {
116                    makeHeader({ isAccordionHeader: true });
117                });
118                
119                it("should have presentation ariaRole", function() {
120                    expect(header.ariaRole).toBe('presentation');
121                });
122                
123                it("should have presentation role on header el", function() {
124                    expect(header).toHaveAttribute('role', 'presentation');
125                });
126                
127                it("should have tab role on titleCmp el", function() {
128                    expect(header.titleCmp).toHaveAttribute('role', 'tab');
129                });
130                
131                it("should have no role on titleCmp textEl", function() {
132                    expect(header.titleCmp.textEl).not.toHaveAttribute('role');
133                });
134                
135                it("should have FocusableContainer disabled", function() {
136                    expect(header.enableFocusableContainer).toBe(false);
137                });
138                
139                describe("after adding tools", function() {
140                    beforeEach(function() {
141                        header.addTool({ type: 'pin' });
142                    });
143                    
144                    it("should not change ariaRole", function() {
145                        expect(header.ariaRole).toBe('presentation');
146                    });
147                    
148                    it("should not change header el role", function() {
149                        expect(header).toHaveAttribute('role', 'presentation');
150                    });
151                    
152                    it("should not change titleCmp el role", function() {
153                        expect(header.titleCmp).toHaveAttribute('role', 'tab');
154                    });
155                    
156                    it("should not change titleCmp textEl role", function() {
157                        expect(header.titleCmp.textEl).not.toHaveAttribute('role');
158                    });
159                    
160                    it("should not enable FocusableContainer", function() {
161                        expect(header.enableFocusableContainer).toBe(false);
162                    });
163                });
164            });
165        });
166        
167        describe("with tools", function() {
168            describe("ordinary header", function() {
169                describe("with focusable tool(s)", function() {
170                    beforeEach(function() {
171                        makeHeader({
172                            tools: [{
173                                type: 'collapse'
174                            }]
175                        });
176                    });
177                    
178                    it("should have toolbar ariaRole", function() {
179                        expect(header.ariaRole).toBe('toolbar');
180                    });
181                    
182                    it("should have toolbar role on header el", function() {
183                        expect(header).toHaveAttribute('role', 'toolbar');
184                    });
185                    
186                    it("should have presentation role on titleCmp", function() {
187                        expect(header.titleCmp).toHaveAttribute('role', 'presentation');
188                    });
189                    
190                    it("should have presentation role on titleCmp textEl", function() {
191                        expect(header.titleCmp.textEl).toHaveAttribute('role', 'presentation');
192                    });
193                    
194                    it("should have FocusableContainer enabled", function() {
195                        expect(header.enableFocusableContainer).toBe(true);
196                    });
197                });
198                
199                describe("with non-focusable tools", function() {
200                    beforeEach(function() {
201                        makeHeader({
202                            tools: [{
203                                type: 'close',
204                                focusable: false,
205                                tabIndex: null
206                            }]
207                        });
208                    });
209                    
210                    it("should have presentation role", function() {
211                        expect(header.ariaRole).toBe('presentation');
212                    });
213                    
214                    it("should have presentation role on header el", function() {
215                        expect(header).toHaveAttribute('role', 'presentation');
216                    });
217                    
218                    it("should have presentation role on titleCmp", function() {
219                        expect(header.titleCmp).toHaveAttribute('role', 'presentation');
220                    });
221                    
222                    it("should have presentation role on titleCmp textEl", function() {
223                        expect(header.titleCmp.textEl).toHaveAttribute('role', 'presentation');
224                    });
225                    
226                    it("should have FocusableContainer disabled", function() {
227                        expect(header.enableFocusableContainer).toBe(false);
228                    });
229                });
230            });
231            
232            describe("accordion header", function() {
233                beforeEach(function() {
234                    makeHeader({
235                        isAccordionHeader: true,
236                        tools: [{
237                            type: 'collapse'
238                        }]
239                    });
240                });
241                
242                it("should have presentation ariaRole", function() {
243                    expect(header.ariaRole).toBe('presentation');
244                });
245                
246                it("should have presentation role on header el", function() {
247                    expect(header).toHaveAttribute('role', 'presentation');
248                });
249                
250                it("should have tab role on titleCmp el", function() {
251                    expect(header.titleCmp).toHaveAttribute('role', 'tab');
252                });
253                
254                it("should have no role on titleCmp textEl", function() {
255                    expect(header.titleCmp.textEl).not.toHaveAttribute('role');
256                });
257                
258                it("should have FocusableContainer disabled", function() {
259                    expect(header.enableFocusableContainer).toBe(false);
260                });
261            });
262        });
263    });
264});
265

Source: Header.js

describe("Ext.panel.Header", function() {
    var header;
    
    function makeHeader(cfg) {
        cfg = Ext.apply({
            title: 'foo',
            renderTo: Ext.getBody()
        }, cfg);
        
        return header = new Ext.panel.Header(cfg);
    }
    
    afterEach(function() {
        Ext.destroy(header);
        header = null;
    });

    describe('Title value', function() {
        it('should set it as configured', function() {
            makeHeader({
                title: 10
            });
            expect(header.title.getText()).toBe(10);
        });
    });
    
    describe("setTitlePosition", function() {
        beforeEach(function() {
            makeHeader({
                tools: [
                    { type: 'close' },
                    { type: 'pin' }
                ]
            });
        });

        it("should insert the header at the new title position", function() {
            header.setTitlePosition(2);
            expect(header.items.getAt(2)).toBe(header.getTitle());
        });

        it("should update the titlePosition property", function() {
            header.setTitlePosition(2);
            expect(header.titlePosition).toBe(2);
        });

        it("should not allow a titlePosition greater than the max item index", function() {
            header.setTitlePosition(3);
            expect(header.items.getAt(2)).toBe(header.getTitle());
            expect(header.titlePosition).toBe(2);
        });
    });
    
    describe("ARIA", function() {
        it("should have el as ariaEl", function() {
            makeHeader();
            
            expect(header.ariaEl).toBe(header.el);
        });
        
        describe("no tools", function() {
            describe("ordinary header", function() {
                beforeEach(function() {
                    makeHeader();
                });
                
                it("should have presentation ariaRole", function() {
                    expect(header.ariaRole).toBe('presentation');
                });
                
                it("should have presentation role on header el", function() {
                    expect(header).toHaveAttribute('role', 'presentation');
                });
                
                it("should have presentation role on titleCmp el", function() {
                    expect(header.titleCmp).toHaveAttribute('role', 'presentation');
                });
                
                it("should have presentation role on titleCmp textEl", function() {
                    expect(header.titleCmp.textEl).toHaveAttribute('role', 'presentation');
                });
                
                it("should have FocusableContainer disabled", function() {
                    expect(header.enableFocusableContainer).toBe(false);
                });
                
                describe("after adding tools", function() {
                    beforeEach(function() {
                        header.addTool({ type: 'expand' });
                    });
                    
                    it("should change ariaRole to toolbar", function() {
                        expect(header.ariaRole).toBe('toolbar');
                    });
                    
                    it("should change header el role to toolbar", function() {
                        expect(header).toHaveAttribute('role', 'toolbar');
                    });
                    
                    it("should not change titleCmp el role", function() {
                        expect(header.titleCmp).toHaveAttribute('role', 'presentation');
                    });
                    
                    it("should not change titleCmp textEl role", function() {
                        expect(header.titleCmp.textEl).toHaveAttribute('role', 'presentation');
                    });
                    
                    it("should enable FocusableContainer", function() {
                        expect(header.enableFocusableContainer).toBe(true);
                    });
                });
            });
            
            describe("accordion header", function() {
                beforeEach(function() {
                    makeHeader({ isAccordionHeader: true });
                });
                
                it("should have presentation ariaRole", function() {
                    expect(header.ariaRole).toBe('presentation');
                });
                
                it("should have presentation role on header el", function() {
                    expect(header).toHaveAttribute('role', 'presentation');
                });
                
                it("should have tab role on titleCmp el", function() {
                    expect(header.titleCmp).toHaveAttribute('role', 'tab');
                });
                
                it("should have no role on titleCmp textEl", function() {
                    expect(header.titleCmp.textEl).not.toHaveAttribute('role');
                });
                
                it("should have FocusableContainer disabled", function() {
                    expect(header.enableFocusableContainer).toBe(false);
                });
                
                describe("after adding tools", function() {
                    beforeEach(function() {
                        header.addTool({ type: 'pin' });
                    });
                    
                    it("should not change ariaRole", function() {
                        expect(header.ariaRole).toBe('presentation');
                    });
                    
                    it("should not change header el role", function() {
                        expect(header).toHaveAttribute('role', 'presentation');
                    });
                    
                    it("should not change titleCmp el role", function() {
                        expect(header.titleCmp).toHaveAttribute('role', 'tab');
                    });
                    
                    it("should not change titleCmp textEl role", function() {
                        expect(header.titleCmp.textEl).not.toHaveAttribute('role');
                    });
                    
                    it("should not enable FocusableContainer", function() {
                        expect(header.enableFocusableContainer).toBe(false);
                    });
                });
            });
        });
        
        describe("with tools", function() {
            describe("ordinary header", function() {
                describe("with focusable tool(s)", function() {
                    beforeEach(function() {
                        makeHeader({
                            tools: [{
                                type: 'collapse'
                            }]
                        });
                    });
                    
                    it("should have toolbar ariaRole", function() {
                        expect(header.ariaRole).toBe('toolbar');
                    });
                    
                    it("should have toolbar role on header el", function() {
                        expect(header).toHaveAttribute('role', 'toolbar');
                    });
                    
                    it("should have presentation role on titleCmp", function() {
                        expect(header.titleCmp).toHaveAttribute('role', 'presentation');
                    });
                    
                    it("should have presentation role on titleCmp textEl", function() {
                        expect(header.titleCmp.textEl).toHaveAttribute('role', 'presentation');
                    });
                    
                    it("should have FocusableContainer enabled", function() {
                        expect(header.enableFocusableContainer).toBe(true);
                    });
                });
                
                describe("with non-focusable tools", function() {
                    beforeEach(function() {
                        makeHeader({
                            tools: [{
                                type: 'close',
                                focusable: false,
                                tabIndex: null
                            }]
                        });
                    });
                    
                    it("should have presentation role", function() {
                        expect(header.ariaRole).toBe('presentation');
                    });
                    
                    it("should have presentation role on header el", function() {
                        expect(header).toHaveAttribute('role', 'presentation');
                    });
                    
                    it("should have presentation role on titleCmp", function() {
                        expect(header.titleCmp).toHaveAttribute('role', 'presentation');
                    });
                    
                    it("should have presentation role on titleCmp textEl", function() {
                        expect(header.titleCmp.textEl).toHaveAttribute('role', 'presentation');
                    });
                    
                    it("should have FocusableContainer disabled", function() {
                        expect(header.enableFocusableContainer).toBe(false);
                    });
                });
            });
            
            describe("accordion header", function() {
                beforeEach(function() {
                    makeHeader({
                        isAccordionHeader: true,
                        tools: [{
                            type: 'collapse'
                        }]
                    });
                });
                
                it("should have presentation ariaRole", function() {
                    expect(header.ariaRole).toBe('presentation');
                });
                
                it("should have presentation role on header el", function() {
                    expect(header).toHaveAttribute('role', 'presentation');
                });
                
                it("should have tab role on titleCmp el", function() {
                    expect(header.titleCmp).toHaveAttribute('role', 'tab');
                });
                
                it("should have no role on titleCmp textEl", function() {
                    expect(header.titleCmp.textEl).not.toHaveAttribute('role');
                });
                
                it("should have FocusableContainer disabled", function() {
                    expect(header.enableFocusableContainer).toBe(false);
                });
            });
        });
    });
});

1import { render, screen } from '@testing-library/react';
2import '@testing-library/jest-dom/extend-expect';
3import ClusterGraph from './ClusterGraph';
4import {
5    dragAndDropItem,
6    getItemPosition,
7    getScale,
8    hoverAway,
9    hoverItem,
10    hoverLink,
11    patchGraphViewBox,
12    patchLayersContainerBBox,
13    scrollDown,
14    waitForItemPositionStable,
15    waitForTime
16} from '../utils/testutils';
17import { ZOOM_ANIMATION_DELAY, ZOOM_ANIMATION_DURATION } from './d3/D3Constants';
18
19describe('ClusterGraph component', () => {
20
21    const testTimeout = 10000;
22    const waitTimeout = 5000;
23
24    const noOpHandler = () => null;
25    let mockFocusHandler;
26    let pod1, pod2, pod3, pod4, pod5, pod6;
27    let podRef1, podRef2, podRef3, podRef4, podRef5, podRef6;
28    let service1, service1_2, service1_2_3, service1_2_3_4, service2, service3, service4;
29    let serviceRef1, serviceRef1_2, serviceRef1_2_3, serviceRef2, serviceRef3, serviceRef4;
30    let ingress1, ingress1_2, ingress12, ingress12_3, ingress123, ingress2, ingress3, ingress4;
31    let replicaSet1, replicaSet1_2, replicaSet1_2_3, replicaSet2, replicaSet3, replicaSet4;
32    let replicaSetRef1, replicaSetRef1_2, replicaSetRef1_2_3, replicaSetRef2, replicaSetRef3, replicaSetRef4;
33    let statefulSet1, statefulSet1_2, statefulSet2, statefulSet3, statefulSet4, statefulSet5;
34    let daemonSet1, daemonSet1_2, daemonSet2, daemonSet3, daemonSet5, daemonSet6;
35    let deployment1, deployment1_2, deployment12, deployment12_3, deployment123, deployment2, deployment3, deployment4;
36
37    beforeEach(() => {
38        mockFocusHandler = jest.fn();
39        pod1 = { namespace: 'ns', name: 'pod1', displayName: 'ns/pod1' };
40        pod2 = { namespace: 'ns', name: 'pod2', displayName: 'ns/pod2' };
41        pod3 = { namespace: 'ns', name: 'pod3', displayName: 'ns/pod3' };
42        pod4 = { namespace: 'ns', name: 'pod4', displayName: 'ns/pod4' };
43        pod5 = { namespace: 'ns', name: 'pod5', displayName: 'ns/pod5' };
44        pod6 = { namespace: 'ns', name: 'pod6', displayName: 'ns/pod6' };
45        podRef1 = { namespace: 'ns', name: 'pod1' };
46        podRef2 = { namespace: 'ns', name: 'pod2' };
47        podRef3 = { namespace: 'ns', name: 'pod3' };
48        podRef4 = { namespace: 'ns', name: 'pod4' };
49        podRef5 = { namespace: 'ns', name: 'pod5' };
50        podRef6 = { namespace: 'ns', name: 'pod6' };
51        service1 = { namespace: 'ns', name: 'svc1', displayName: 'ns/svc1', targetPods: [podRef1] };
52        service1_2 = { namespace: 'ns', name: 'svc1_2', displayName: 'ns/svc1_2', targetPods: [podRef1, podRef2] };
53        service1_2_3 = {
54            namespace: 'ns', name: 'svc1_2_3', displayName: 'ns/svc1_2_3',
55            targetPods: [podRef1, podRef2, podRef3]
56        };
57        service1_2_3_4 = {
58            namespace: 'ns', name: 'svc1_2_3', displayName: 'ns/svc1_2_3',
59            targetPods: [podRef1, podRef2, podRef3, podRef4]
60        };
61        service2 = { namespace: 'ns', name: 'svc2', displayName: 'ns/svc2', targetPods: [podRef2] };
62        service3 = { namespace: 'ns', name: 'svc3', displayName: 'ns/svc3', targetPods: [podRef3] };
63        service4 = { namespace: 'ns', name: 'svc4', displayName: 'ns/svc4', targetPods: [podRef4] };
64        serviceRef1 = { namespace: 'ns', name: 'svc1' };
65        serviceRef1_2 = { namespace: 'ns', name: 'svc1_2' };
66        serviceRef1_2_3 = { namespace: 'ns', name: 'svc1_2_3' };
67        serviceRef2 = { namespace: 'ns', name: 'svc2' };
68        serviceRef3 = { namespace: 'ns', name: 'svc3' };
69        serviceRef4 = { namespace: 'ns', name: 'svc4' };
70        ingress1 = { namespace: 'ns', name: 'ing1', displayName: 'ns/ing1', targetServices: [serviceRef1] };
71        ingress1_2 = {
72            namespace: 'ns', name: 'ing1_2', displayName: 'ns/ing1_2',
73            targetServices: [serviceRef1, serviceRef2]
74        };
75        ingress12 = { namespace: 'ns', name: 'ing12', displayName: 'ns/ing12', targetServices: [serviceRef1_2] };
76        ingress12_3 = {
77            namespace: 'ns', name: 'ing12_3', displayName: 'ns/ing12_3',
78            targetServices: [serviceRef1_2, serviceRef3]
79        };
80        ingress123 = {
81            namespace: 'ns', name: 'ing123', displayName: 'ns/ing123',
82            targetServices: [serviceRef1_2_3]
83        };
84        ingress2 = { namespace: 'ns', name: 'ing2', displayName: 'ns/ing2', targetServices: [serviceRef2] };
85        ingress3 = { namespace: 'ns', name: 'ing3', displayName: 'ns/ing3', targetServices: [serviceRef3] };
86        ingress4 = { namespace: 'ns', name: 'ing4', displayName: 'ns/ing4', targetServices: [serviceRef4] };
87        replicaSet1 = { namespace: 'ns', name: 'rs1', displayName: 'ns/rs1', targetPods: [podRef1] };
88        replicaSet1_2 = { namespace: 'ns', name: 'rs1_2', displayName: 'ns/rs1_2', targetPods: [podRef1, podRef2] };
89        replicaSet1_2_3 = {
90            namespace: 'ns', name: 'rs1_2_3', displayName: 'ns/rs1_2_3',
91            targetPods: [podRef1, podRef2, podRef3]
92        };
93        replicaSet2 = { namespace: 'ns', name: 'rs2', displayName: 'ns/rs2', targetPods: [podRef2] };
94        replicaSet3 = { namespace: 'ns', name: 'rs3', displayName: 'ns/rs3', targetPods: [podRef3] };
95        replicaSet4 = { namespace: 'ns', name: 'rs4', displayName: 'ns/rs4', targetPods: [podRef4] };
96        replicaSetRef1 = { namespace: 'ns', name: 'rs1' };
97        replicaSetRef1_2 = { namespace: 'ns', name: 'rs1_2' };
98        replicaSetRef1_2_3 = { namespace: 'ns', name: 'rs1_2_3' };
99        replicaSetRef2 = { namespace: 'ns', name: 'rs2' };
100        replicaSetRef3 = { namespace: 'ns', name: 'rs3' };
101        replicaSetRef4 = { namespace: 'ns', name: 'rs4' };
102        statefulSet1 = { namespace: 'ns', name: 'ss1', displayName: 'ns/ss1', targetPods: [podRef1] };
103        statefulSet1_2 = { namespace: 'ns', name: 'ss1_2', displayName: 'ns/ss1_2', targetPods: [podRef1, podRef2] };
104        statefulSet2 = { namespace: 'ns', name: 'ss2', displayName: 'ns/ss2', targetPods: [podRef2] };
105        statefulSet3 = { namespace: 'ns', name: 'ss3', displayName: 'ns/ss3', targetPods: [podRef3] };
106        statefulSet4 = { namespace: 'ns', name: 'ss4', displayName: 'ns/ss4', targetPods: [podRef4] };
107        statefulSet5 = { namespace: 'ns', name: 'ss5', displayName: 'ns/ss5', targetPods: [podRef5] };
108        daemonSet1 = { namespace: 'ns', name: 'ds1', displayName: 'ns/ds1', targetPods: [podRef1] };
109        daemonSet1_2 = { namespace: 'ns', name: 'ds1_2', displayName: 'ns/ds1_2', targetPods: [podRef1, podRef2] };
110        daemonSet2 = { namespace: 'ns', name: 'ds2', displayName: 'ns/ds2', targetPods: [podRef2] };
111        daemonSet3 = { namespace: 'ns', name: 'ds3', displayName: 'ns/ds3', targetPods: [podRef3] };
112        daemonSet5 = { namespace: 'ns', name: 'ds5', displayName: 'ns/ds5', targetPods: [podRef5] };
113        daemonSet6 = { namespace: 'ns', name: 'ds6', displayName: 'ns/ds6', targetPods: [podRef6] };
114        deployment1 = { namespace: 'ns', name: 'dep1', displayName: 'ns/dep1', targetReplicaSets: [replicaSetRef1] };
115        deployment1_2 = {
116            namespace: 'ns', name: 'dep1_2', displayName: 'ns/dep1_2',
117            targetReplicaSets: [replicaSetRef1, replicaSetRef2]
118        };
119        deployment12 = {
120            namespace: 'ns', name: 'dep12', displayName: 'ns/dep12', targetReplicaSets: [replicaSetRef1_2]
121        };
122        deployment12_3 = {
123            namespace: 'ns', name: 'dep12_3', displayName: 'ns/dep12_3',
124            targetReplicaSets: [replicaSetRef1_2, replicaSetRef3]
125        };
126        deployment123 = {
127            namespace: 'ns', name: 'dep123', displayName: 'ns/dep123',
128            targetReplicaSets: [replicaSetRef1_2_3]
129        };
130        deployment2 = { namespace: 'ns', name: 'dep2', displayName: 'ns/dep2', targetReplicaSets: [replicaSetRef2] };
131        deployment3 = { namespace: 'ns', name: 'dep3', displayName: 'ns/dep3', targetReplicaSets: [replicaSetRef3] };
132        deployment4 = { namespace: 'ns', name: 'dep4', displayName: 'ns/dep4', targetReplicaSets: [replicaSetRef4] };
133    });
134
135    it('displays pods', () => {
136        const dataSet = {
137            pods: [pod1, pod2],
138            services: [],
139            ingresses: [],
140            replicaSets: [],
141            statefulSets: [],
142            daemonSets: [],
143            deployments: []
144        };
145        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
146                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
147                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
148                             autoZoom={false}/>);
149
150        expect(screen.queryAllByLabelText('pod')).toHaveLength(2);
151        expect(screen.queryByText(pod1.displayName)).toBeInTheDocument();
152        expect(screen.queryByText(pod2.displayName)).toBeInTheDocument();
153    });
154
155    it('displays services with links to pods', () => {
156        const dataSet = {
157            pods: [pod1, pod2, pod3],
158            services: [service1_2, service3],
159            replicaSets: [],
160            ingresses: [],
161            statefulSets: [],
162            daemonSets: [],
163            deployments: []
164        };
165        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
166                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
167                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
168                             autoZoom={false}/>);
169
170        expect(screen.queryAllByLabelText('service')).toHaveLength(2);
171        expect(screen.queryByText(service1_2.displayName)).toBeInTheDocument();
172        expect(screen.queryByText(service3.displayName)).toBeInTheDocument();
173        expect(screen.queryAllByLabelText('service link')).toHaveLength(3);
174    });
175
176    it('displays ingresses with links to services', () => {
177        const dataSet = {
178            pods: [pod1, pod2, pod3],
179            services: [service1, service2, service3],
180            ingresses: [ingress1_2, ingress3],
181            replicaSets: [],
182            statefulSets: [],
183            daemonSets: [],
184            deployments: []
185        };
186        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
187                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
188                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
189                             autoZoom={false}/>);
190
191        expect(screen.queryAllByLabelText('ingress')).toHaveLength(2);
192        expect(screen.queryByText(ingress1_2.displayName)).toBeInTheDocument();
193        expect(screen.queryByText(ingress3.displayName)).toBeInTheDocument();
194        expect(screen.queryAllByLabelText('ingress link')).toHaveLength(3);
195    });
196
197    it('displays replicaSets with links to pods', () => {
198        const dataSet = {
199            pods: [pod1, pod2, pod3],
200            services: [],
201            ingresses: [],
202            replicaSets: [replicaSet1_2, replicaSet3],
203            statefulSets: [],
204            daemonSets: [],
205            deployments: []
206        };
207        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
208                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
209                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
210                             autoZoom={false}/>);
211
212        expect(screen.queryAllByLabelText('replicaset')).toHaveLength(2);
213        expect(screen.queryByText(replicaSet1_2.displayName)).toBeInTheDocument();
214        expect(screen.queryByText(replicaSet3.displayName)).toBeInTheDocument();
215        expect(screen.queryAllByLabelText('replicaset link')).toHaveLength(3);
216    });
217
218    it('displays statefulSets with links to pods', () => {
219        const dataSet = {
220            pods: [pod1, pod2, pod3],
221            services: [],
222            ingresses: [],
223            replicaSets: [],
224            statefulSets: [statefulSet1_2, statefulSet3],
225            daemonSets: [],
226            deployments: []
227        };
228        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
229                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
230                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
231                             autoZoom={false}/>);
232
233        expect(screen.queryAllByLabelText('statefulset')).toHaveLength(2);
234        expect(screen.queryByText(statefulSet1_2.displayName)).toBeInTheDocument();
235        expect(screen.queryByText(statefulSet3.displayName)).toBeInTheDocument();
236        expect(screen.queryAllByLabelText('statefulset link')).toHaveLength(3);
237    });
238
239    it('displays daemonSets with links to pods', () => {
240        const dataSet = {
241            pods: [pod1, pod2, pod3],
242            services: [],
243            ingresses: [],
244            replicaSets: [],
245            statefulSets: [],
246            daemonSets: [daemonSet1_2, daemonSet3],
247            deployments: []
248        };
249        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
250                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
251                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
252                             autoZoom={false}/>);
253
254        expect(screen.queryAllByLabelText('daemonset')).toHaveLength(2);
255        expect(screen.queryByText(daemonSet1_2.displayName)).toBeInTheDocument();
256        expect(screen.queryByText(daemonSet3.displayName)).toBeInTheDocument();
257        expect(screen.queryAllByLabelText('daemonset link')).toHaveLength(3);
258    });
259
260    it('displays deployments with links to replicaSets', () => {
261        const dataSet = {
262            pods: [pod1, pod2, pod3],
263            services: [],
264            ingresses: [],
265            replicaSets: [replicaSet1, replicaSet2, replicaSet3],
266            statefulSets: [],
267            daemonSets: [],
268            deployments: [deployment1_2, deployment3]
269        };
270        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
271                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
272                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
273                             autoZoom={false}/>);
274
275        expect(screen.queryAllByLabelText('deployment')).toHaveLength(2);
276        expect(screen.queryByText(deployment1_2.displayName)).toBeInTheDocument();
277        expect(screen.queryByText(deployment3.displayName)).toBeInTheDocument();
278        expect(screen.queryAllByLabelText('deployment link')).toHaveLength(3);
279    });
280
281    it('sorts pods by service index then replicaSet index then statefulSet index then daemonSet index', () => {
282        const dataSet = {
283            pods: [pod5, pod4, pod3, pod2, pod1],
284            services: [service1_2, service3],
285            ingresses: [],
286            replicaSets: [replicaSet1, replicaSet2],
287            statefulSets: [statefulSet4],
288            daemonSets: [daemonSet5],
289            deployments: []
290        };
291        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
292                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
293                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
294                             autoZoom={false}/>);
295
296        const allPodLabels = screen.queryAllByText(/ns\/pod\d/);
297        expect(allPodLabels[0].textContent).toEqual(pod1.displayName);
298        expect(allPodLabels[1].textContent).toEqual(pod2.displayName);
299        expect(allPodLabels[2].textContent).toEqual(pod3.displayName);
300        expect(allPodLabels[3].textContent).toEqual(pod4.displayName);
301        expect(allPodLabels[4].textContent).toEqual(pod5.displayName);
302    });
303
304    it('sorts services by their name', () => {
305        const dataSet = {
306            pods: [pod1, pod2],
307            services: [service2, service1],
308            ingresses: [],
309            replicaSets: [],
310            statefulSets: [],
311            daemonSets: [],
312            deployments: []
313        };
314        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
315                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
316                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
317                             autoZoom={false}/>);
318
319        const allServiceLabels = screen.queryAllByText(/ns\/svc\d/);
320        expect(allServiceLabels[0].textContent).toEqual(service1.displayName);
321        expect(allServiceLabels[1].textContent).toEqual(service2.displayName);
322    });
323
324    it('sorts ingresses by index of their first target service', () => {
325        const dataSet = {
326            pods: [pod2, pod1],
327            services: [service2, service1],
328            ingresses: [ingress1, ingress2],
329            replicaSets: [],
330            statefulSets: [],
331            daemonSets: [],
332            deployments: []
333        };
334        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
335                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
336                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
337                             autoZoom={false}/>);
338
339        const allIngressLabels = screen.queryAllByText(/ns\/ing\d/);
340        expect(allIngressLabels[0].textContent).toEqual(ingress1.displayName);
341        expect(allIngressLabels[1].textContent).toEqual(ingress2.displayName);
342    });
343
344    it('sorts replicaSets by index of their first target pod', () => {
345        const dataSet = {
346            pods: [pod2, pod1],
347            services: [service1, service2],
348            ingresses: [],
349            replicaSets: [replicaSet2, replicaSet1],
350            statefulSets: [],
351            daemonSets: [],
352            deployments: []
353        };
354        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
355                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
356                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
357                             autoZoom={false}/>);
358
359        const allReplicaSetLabels = screen.queryAllByText(/ns\/rs\d/);
360        expect(allReplicaSetLabels[0].textContent).toEqual(replicaSet1.displayName);
361        expect(allReplicaSetLabels[1].textContent).toEqual(replicaSet2.displayName);
362    });
363
364    it('sorts statefulSets by index of their first target pod', () => {
365        const dataSet = {
366            pods: [pod2, pod1],
367            services: [service1, service2],
368            ingresses: [],
369            replicaSets: [],
370            statefulSets: [statefulSet2, statefulSet1],
371            daemonSets: [],
372            deployments: []
373        };
374        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
375                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
376                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
377                             autoZoom={false}/>);
378
379        const allStatefulSetLabels = screen.queryAllByText(/ns\/ss\d/);
380        expect(allStatefulSetLabels[0].textContent).toEqual(statefulSet1.displayName);
381        expect(allStatefulSetLabels[1].textContent).toEqual(statefulSet2.displayName);
382    });
383
384    it('sorts daemonSets by index of their first target pod', () => {
385        const dataSet = {
386            pods: [pod2, pod1],
387            services: [service1, service2],
388            ingresses: [],
389            replicaSets: [],
390            statefulSets: [],
391            daemonSets: [daemonSet2, daemonSet1],
392            deployments: []
393        };
394        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
395                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
396                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
397                             autoZoom={false}/>);
398
399        const allDaemonSetLabels = screen.queryAllByText(/ns\/ds\d/);
400        expect(allDaemonSetLabels[0].textContent).toEqual(daemonSet1.displayName);
401        expect(allDaemonSetLabels[1].textContent).toEqual(daemonSet2.displayName);
402    });
403
404    it('sorts deployments by index of their first target replicaSet', () => {
405        const dataSet = {
406            pods: [pod2, pod1],
407            services: [service1, service2],
408            ingresses: [],
409            replicaSets: [replicaSet2, replicaSet1],
410            statefulSets: [],
411            daemonSets: [],
412            deployments: [deployment2, deployment1]
413        };
414        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
415                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
416                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
417                             autoZoom={false}/>);
418
419        const allDeploymentLabels = screen.queryAllByText(/ns\/dep\d/);
420        expect(allDeploymentLabels[0].textContent).toEqual(deployment1.displayName);
421        expect(allDeploymentLabels[1].textContent).toEqual(deployment2.displayName);
422    });
423
424    it('calls handler on pod focus', async () => {
425        const dataSet = {
426            pods: [pod1],
427            services: [],
428            ingresses: [],
429            replicaSets: [],
430            statefulSets: [],
431            daemonSets: [],
432            deployments: []
433        };
434        render(<ClusterGraph onPodFocus={mockFocusHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
435                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
436                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
437                             autoZoom={false}/>);
438        await waitForItemPositionStable(screen.getAllByLabelText('pod')[0], waitTimeout);
439
440        hoverItem(screen.getAllByLabelText('pod')[0]);
441
442        expect(mockFocusHandler).toHaveBeenCalledWith(pod1);
443    }, testTimeout);
444
445    it('calls handler on service or service link focus', async () => {
446        const dataSet = {
447            pods: [pod1],
448            services: [service1],
449            ingresses: [],
450            replicaSets: [],
451            statefulSets: [],
452            daemonSets: [],
453            deployments: []
454        };
455        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={mockFocusHandler} onIngressFocus={noOpHandler}
456                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
457                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
458                             autoZoom={false}/>);
459        await waitForItemPositionStable(screen.getAllByLabelText('service')[0], waitTimeout);
460
461        hoverItem(screen.getAllByLabelText('service')[0]);
462
463        expect(mockFocusHandler).toHaveBeenCalledWith(service1);
464
465        hoverAway();
466        mockFocusHandler.mockClear();
467        hoverLink(screen.getAllByLabelText('service link')[0]);
468
469        expect(mockFocusHandler).toHaveBeenCalledWith(service1);
470    }, testTimeout);
471
472    it('calls handler on ingress or ingress link focus', async () => {
473        const dataSet = {
474            pods: [pod1],
475            services: [service1],
476            ingresses: [ingress1],
477            replicaSets: [],
478            statefulSets: [],
479            daemonSets: [],
480            deployments: []
481        };
482        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={mockFocusHandler}
483                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
484                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
485                             autoZoom={false}/>);
486        await waitForItemPositionStable(screen.getAllByLabelText('ingress')[0], waitTimeout);
487
488        hoverItem(screen.getAllByLabelText('ingress')[0]);
489
490        expect(mockFocusHandler).toHaveBeenCalledWith(ingress1);
491
492        hoverAway();
493        mockFocusHandler.mockClear();
494        hoverLink(screen.getAllByLabelText('ingress link')[0]);
495
496        expect(mockFocusHandler).toHaveBeenCalledWith(ingress1);
497    }, testTimeout);
498
499    it('calls handler on replicaSet or replicaSet link focus', async () => {
500        const dataSet = {
501            pods: [pod1],
502            services: [],
503            ingresses: [],
504            replicaSets: [replicaSet1],
505            statefulSets: [],
506            daemonSets: [],
507            deployments: []
508        };
509        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
510                             onReplicaSetFocus={mockFocusHandler} onStatefulSetFocus={noOpHandler}
511                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
512                             autoZoom={false}/>);
513        await waitForItemPositionStable(screen.getAllByLabelText('replicaset')[0], waitTimeout);
514
515        hoverItem(screen.getAllByLabelText('replicaset')[0]);
516
517        expect(mockFocusHandler).toHaveBeenCalledWith(replicaSet1);
518
519        hoverAway();
520        mockFocusHandler.mockClear();
521        hoverLink(screen.getAllByLabelText('replicaset link')[0]);
522
523        expect(mockFocusHandler).toHaveBeenCalledWith(replicaSet1);
524    }, testTimeout);
525
526    it('calls handler on statefulSet or statefulSet link focus', async () => {
527        const dataSet = {
528            pods: [pod1],
529            services: [],
530            ingresses: [],
531            replicaSets: [],
532            statefulSets: [statefulSet1],
533            daemonSets: [],
534            deployments: []
535        };
536        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
537                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={mockFocusHandler}
538                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
539                             autoZoom={false}/>);
540        await waitForItemPositionStable(screen.getAllByLabelText('statefulset')[0], waitTimeout);
541
542        hoverItem(screen.getAllByLabelText('statefulset')[0]);
543
544        expect(mockFocusHandler).toHaveBeenCalledWith(statefulSet1);
545
546        hoverAway();
547        mockFocusHandler.mockClear();
548        hoverLink(screen.getAllByLabelText('statefulset link')[0]);
549
550        expect(mockFocusHandler).toHaveBeenCalledWith(statefulSet1);
551    }, testTimeout);
552
553    it('calls handler on daemonSet or daemonSet link focus', async () => {
554        const dataSet = {
555            pods: [pod1],
556            services: [],
557            ingresses: [],
558            replicaSets: [],
559            statefulSets: [],
560            daemonSets: [daemonSet1],
561            deployments: []
562        };
563        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
564                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
565                             onDaemonSetFocus={mockFocusHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
566                             autoZoom={false}/>);
567        await waitForItemPositionStable(screen.getAllByLabelText('daemonset')[0], waitTimeout);
568
569        hoverItem(screen.getAllByLabelText('daemonset')[0]);
570
571        expect(mockFocusHandler).toHaveBeenCalledWith(daemonSet1);
572
573        hoverAway();
574        mockFocusHandler.mockClear();
575        hoverLink(screen.getAllByLabelText('daemonset link')[0]);
576
577        expect(mockFocusHandler).toHaveBeenCalledWith(daemonSet1);
578    }, testTimeout);
579
580    it('calls handler on deployment or deployment link focus', async () => {
581        const dataSet = {
582            pods: [pod1],
583            services: [],
584            ingresses: [],
585            replicaSets: [replicaSet1],
586            statefulSets: [],
587            daemonSets: [],
588            deployments: [deployment1]
589        };
590        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
591                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
592                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={mockFocusHandler} dataSet={dataSet}
593                             autoZoom={false}/>);
594        await waitForItemPositionStable(screen.getAllByLabelText('deployment')[0], waitTimeout);
595
596        hoverItem(screen.getAllByLabelText('deployment')[0]);
597
598        expect(mockFocusHandler).toHaveBeenCalledWith(deployment1);
599
600        hoverAway();
601        mockFocusHandler.mockClear();
602        hoverLink(screen.getAllByLabelText('deployment link')[0]);
603
604        expect(mockFocusHandler).toHaveBeenCalledWith(deployment1);
605    }, testTimeout);
606
607    it('updates local state properly', () => {
608        const pod1WithoutNamespaceDisplay = { ...pod1, displayName: 'pod1' };
609        const pod2WithoutNamespaceDisplay = { ...pod2, displayName: 'pod2' };
610        const pod3WithoutNamespaceDisplay = { ...pod3, displayName: 'pod3' };
611        const pod4WithoutNamespaceDisplay = { ...pod4, displayName: 'pod4' };
612        const pod5WithoutNamespaceDisplay = { ...pod5, displayName: 'pod5' };
613        const pod6WithoutNamespaceDisplay = { ...pod6, displayName: 'pod6' };
614        const service1_2WithoutNamespaceDisplay = { ...service1_2, displayName: 'svc12' };
615        const service3WithoutNamespaceDisplay = { ...service3, displayName: 'svc3' };
616        const ingress12_3WithoutNamespaceDisplay = { ...ingress12_3, displayName: 'ingress12_3' };
617        const ingress3WithoutNamespaceDisplay = { ...ingress3, displayName: 'ingress3' };
618        const replicaSet1_2WithoutNamespaceDisplay = { ...replicaSet1_2, displayName: 'replicaSet12' };
619        const replicaSet3WithoutNamespaceDisplay = { ...replicaSet3, displayName: 'replicaSet3' };
620        const statefulSet2WithoutNamespaceDisplay = { ...statefulSet2, displayName: 'statefulSet2' };
621        const statefulSet5WithoutNamespaceDisplay = { ...statefulSet5, displayName: 'statefulSet5' };
622        const daemonSet3WithoutNamespaceDisplay = { ...daemonSet3, displayName: 'daemonSet3' };
623        const daemonSet6WithoutNamespaceDisplay = { ...daemonSet6, displayName: 'daemonSet6' };
624        const deployment12_3WithoutNamespaceDisplay = { ...deployment12_3, displayName: 'deployment12_3' };
625        const deployment3WithoutNamespaceDisplay = { ...deployment3, displayName: 'deployment3' };
626        const dataSet1 = {
627            pods: [pod1, pod2, pod3],
628            services: [service1],
629            ingresses: [ingress1],
630            replicaSets: [replicaSet1],
631            statefulSets: [statefulSet2],
632            daemonSets: [daemonSet3],
633            deployments: [deployment1]
634        };
635        const dataSet2 = {
636            pods: [pod1WithoutNamespaceDisplay, pod2WithoutNamespaceDisplay, pod3WithoutNamespaceDisplay,
637                pod4WithoutNamespaceDisplay, pod5WithoutNamespaceDisplay, pod6WithoutNamespaceDisplay],
638            services: [service1_2WithoutNamespaceDisplay, service3WithoutNamespaceDisplay],
639            ingresses: [ingress12_3WithoutNamespaceDisplay, ingress3WithoutNamespaceDisplay],
640            replicaSets: [replicaSet1_2WithoutNamespaceDisplay, replicaSet3WithoutNamespaceDisplay],
641            statefulSets: [statefulSet2WithoutNamespaceDisplay, statefulSet5WithoutNamespaceDisplay],
642            daemonSets: [daemonSet3WithoutNamespaceDisplay, daemonSet6WithoutNamespaceDisplay],
643            deployments: [deployment12_3WithoutNamespaceDisplay, deployment3WithoutNamespaceDisplay]
644        };
645
646        const { rerender } = render(
647            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
648                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
649                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet1}
650                          autoZoom={false}/>
651        );
652        rerender(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
653                               onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
654                               onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet2}
655                               autoZoom={false}/>);
656
657        expect(screen.queryAllByLabelText('pod')).toHaveLength(6);
658        expect(screen.queryByText(pod1.displayName)).not.toBeInTheDocument();
659        expect(screen.queryByText(pod2.displayName)).not.toBeInTheDocument();
660        expect(screen.queryByText(pod3.displayName)).not.toBeInTheDocument();
661        expect(screen.queryByText(pod1WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
662        expect(screen.queryByText(pod2WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
663        expect(screen.queryByText(pod3WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
664        expect(screen.queryByText(pod4WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
665        expect(screen.queryByText(pod5WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
666        expect(screen.queryByText(pod6WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
667        expect(screen.queryAllByLabelText('service')).toHaveLength(2);
668        expect(screen.queryByText(service1.displayName)).not.toBeInTheDocument();
669        expect(screen.queryByText(service1_2WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
670        expect(screen.queryByText(service3WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
671        expect(screen.queryAllByLabelText('service link')).toHaveLength(3);
672        expect(screen.queryAllByLabelText('ingress')).toHaveLength(2);
673        expect(screen.queryByText(ingress1.displayName)).not.toBeInTheDocument();
674        expect(screen.queryByText(ingress12_3WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
675        expect(screen.queryByText(ingress3WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
676        expect(screen.queryAllByLabelText('ingress link')).toHaveLength(3);
677        expect(screen.queryAllByLabelText('replicaset')).toHaveLength(2);
678        expect(screen.queryByText(replicaSet1.displayName)).not.toBeInTheDocument();
679        expect(screen.queryByText(replicaSet1_2WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
680        expect(screen.queryByText(replicaSet3WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
681        expect(screen.queryAllByLabelText('replicaset link')).toHaveLength(3);
682        expect(screen.queryAllByLabelText('statefulset')).toHaveLength(2);
683        expect(screen.queryByText(statefulSet2.displayName)).not.toBeInTheDocument();
684        expect(screen.queryByText(statefulSet2WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
685        expect(screen.queryByText(statefulSet5WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
686        expect(screen.queryAllByLabelText('statefulset link')).toHaveLength(2);
687        expect(screen.queryAllByLabelText('daemonset')).toHaveLength(2);
688        expect(screen.queryByText(daemonSet3.displayName)).not.toBeInTheDocument();
689        expect(screen.queryByText(daemonSet3WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
690        expect(screen.queryByText(daemonSet6WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
691        expect(screen.queryAllByLabelText('daemonset link')).toHaveLength(2);
692        expect(screen.queryAllByLabelText('deployment')).toHaveLength(2);
693        expect(screen.queryByText(deployment1.displayName)).not.toBeInTheDocument();
694        expect(screen.queryByText(deployment12_3WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
695        expect(screen.queryByText(deployment3WithoutNamespaceDisplay.displayName)).toBeInTheDocument();
696        expect(screen.queryAllByLabelText('deployment link')).toHaveLength(3);
697    });
698
699    it('focused pods have a different appearance', async () => {
700        const dataSet = {
701            pods: [pod1, pod2],
702            services: [],
703            ingresses: [],
704            replicaSets: [],
705            statefulSets: [],
706            daemonSets: [],
707            deployments: []
708        };
709        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
710                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
711                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
712                             autoZoom={false}/>);
713        await waitForItemPositionStable(screen.getAllByLabelText('pod')[0], waitTimeout);
714
715        hoverItem(screen.getAllByLabelText('pod')[0]);
716
717        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');
718        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');
719    }, testTimeout);
720
721    it('focused services and service links have a different appearance', async () => {
722        const dataSet = {
723            pods: [pod1, pod2],
724            services: [service1, service2],
725            ingresses: [],
726            replicaSets: [],
727            statefulSets: [],
728            daemonSets: [],
729            deployments: []
730        };
731        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
732                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
733                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
734                             autoZoom={false}/>);
735        await waitForItemPositionStable(screen.getAllByLabelText('service')[0], waitTimeout);
736
737        hoverItem(screen.getAllByLabelText('service')[0]);
738
739        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item');
740        expect(screen.getAllByLabelText('service')[1]).toHaveAttribute('class', 'item-faded');
741        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link');
742        expect(screen.getAllByLabelText('service link')[1]).toHaveAttribute('class', 'link-faded');
743    }, testTimeout);
744
745    it('focused ingresses and ingress links have a different appearance', async () => {
746        const dataSet = {
747            pods: [pod1, pod2],
748            services: [service1, service2],
749            ingresses: [ingress1, ingress2],
750            replicaSets: [],
751            statefulSets: [],
752            daemonSets: [],
753            deployments: []
754        };
755        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
756                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
757                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
758                             autoZoom={false}/>);
759        await waitForItemPositionStable(screen.getAllByLabelText('ingress')[0], waitTimeout);
760
761        hoverItem(screen.getAllByLabelText('ingress')[0]);
762
763        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item');
764        expect(screen.getAllByLabelText('ingress')[1]).toHaveAttribute('class', 'item-faded');
765        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link');
766        expect(screen.getAllByLabelText('ingress link')[1]).toHaveAttribute('class', 'link-faded');
767    }, testTimeout);
768
769    it('focused replicaSets and replicaSet links have a different appearance', async () => {
770        const dataSet = {
771            pods: [pod1, pod2],
772            services: [],
773            ingresses: [],
774            replicaSets: [replicaSet1, replicaSet2],
775            statefulSets: [],
776            daemonSets: [],
777            deployments: []
778        };
779        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
780                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
781                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
782                             autoZoom={false}/>);
783        await waitForItemPositionStable(screen.getAllByLabelText('replicaset')[0], waitTimeout);
784
785        hoverItem(screen.getAllByLabelText('replicaset')[0]);
786
787        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item');
788        expect(screen.getAllByLabelText('replicaset')[1]).toHaveAttribute('class', 'item-faded');
789        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link');
790        expect(screen.getAllByLabelText('replicaset link')[1]).toHaveAttribute('class', 'link-faded');
791    }, testTimeout);
792
793    it('focused statefulSets and statefulSet links have a different appearance', async () => {
794        const dataSet = {
795            pods: [pod1, pod2],
796            services: [],
797            ingresses: [],
798            replicaSets: [],
799            statefulSets: [statefulSet1, statefulSet2],
800            daemonSets: [],
801            deployments: []
802        };
803        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
804                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
805                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
806                             autoZoom={false}/>);
807        await waitForItemPositionStable(screen.getAllByLabelText('statefulset')[0], waitTimeout);
808
809        hoverItem(screen.getAllByLabelText('statefulset')[0]);
810
811        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item');
812        expect(screen.getAllByLabelText('statefulset')[1]).toHaveAttribute('class', 'item-faded');
813        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link');
814        expect(screen.getAllByLabelText('statefulset link')[1]).toHaveAttribute('class', 'link-faded');
815    }, testTimeout);
816
817    it('focused daemonSets and daemonSet links have a different appearance', async () => {
818        const dataSet = {
819            pods: [pod1, pod2],
820            services: [],
821            ingresses: [],
822            replicaSets: [],
823            statefulSets: [],
824            daemonSets: [daemonSet1, daemonSet2],
825            deployments: []
826        };
827        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
828                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
829                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
830                             autoZoom={false}/>);
831        await waitForItemPositionStable(screen.getAllByLabelText('daemonset')[0], waitTimeout);
832
833        hoverItem(screen.getAllByLabelText('daemonset')[0]);
834
835        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item');
836        expect(screen.getAllByLabelText('daemonset')[1]).toHaveAttribute('class', 'item-faded');
837        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link');
838        expect(screen.getAllByLabelText('daemonset link')[1]).toHaveAttribute('class', 'link-faded');
839    }, testTimeout);
840
841    it('focused deployments and deployment links have a different appearance', async () => {
842        const dataSet = {
843            pods: [pod1, pod2],
844            services: [],
845            ingresses: [],
846            replicaSets: [replicaSet1, replicaSet2],
847            statefulSets: [],
848            daemonSets: [],
849            deployments: [deployment1, deployment2]
850        };
851        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
852                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
853                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
854                             autoZoom={false}/>);
855        await waitForItemPositionStable(screen.getAllByLabelText('deployment')[0], waitTimeout);
856
857        hoverItem(screen.getAllByLabelText('deployment')[0]);
858
859        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item');
860        expect(screen.getAllByLabelText('deployment')[1]).toHaveAttribute('class', 'item-faded');
861        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link');
862        expect(screen.getAllByLabelText('deployment link')[1]).toHaveAttribute('class', 'link-faded');
863    }, testTimeout);
864
865    it('focusing a pod also focuses connected services and ingresses and replicaSets and statefulSets and ' +
866        'daemonSets and deployments', async () => {
867        const dataSet = {
868            pods: [pod1, pod2, pod3, pod4],
869            services: [service1_2, service3, service4],
870            ingresses: [ingress12_3, ingress4],
871            replicaSets: [replicaSet1_2, replicaSet3, replicaSet4],
872            statefulSets: [statefulSet1_2, daemonSet3],
873            daemonSets: [daemonSet1_2, daemonSet3],
874            deployments: [deployment12_3, deployment4]
875        };
876        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
877                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
878                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
879                             autoZoom={false}/>);
880        await waitForItemPositionStable(screen.getAllByLabelText('pod')[0], waitTimeout);
881
882        hoverItem(screen.getAllByLabelText('pod')[0]);
883
884        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');
885        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');
886        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');
887        expect(screen.getAllByLabelText('pod')[3]).toHaveAttribute('class', 'item-faded');
888        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item');
889        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link');
890        expect(screen.getAllByLabelText('service')[1]).toHaveAttribute('class', 'item-faded');
891        expect(screen.getAllByLabelText('service link')[1]).toHaveAttribute('class', 'link-faded');
892        expect(screen.getAllByLabelText('service')[2]).toHaveAttribute('class', 'item-faded');
893        expect(screen.getAllByLabelText('service link')[2]).toHaveAttribute('class', 'link-faded');
894        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item');
895        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link');
896        expect(screen.getAllByLabelText('ingress')[1]).toHaveAttribute('class', 'item-faded');
897        expect(screen.getAllByLabelText('ingress link')[1]).toHaveAttribute('class', 'link-faded');
898        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item');
899        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link');
900        expect(screen.getAllByLabelText('replicaset')[1]).toHaveAttribute('class', 'item-faded');
901        expect(screen.getAllByLabelText('replicaset link')[1]).toHaveAttribute('class', 'link-faded');
902        expect(screen.getAllByLabelText('replicaset')[2]).toHaveAttribute('class', 'item-faded');
903        expect(screen.getAllByLabelText('replicaset link')[2]).toHaveAttribute('class', 'link-faded');
904        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item');
905        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link');
906        expect(screen.getAllByLabelText('statefulset')[1]).toHaveAttribute('class', 'item-faded');
907        expect(screen.getAllByLabelText('statefulset link')[1]).toHaveAttribute('class', 'link-faded');
908        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item');
909        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link');
910        expect(screen.getAllByLabelText('daemonset')[1]).toHaveAttribute('class', 'item-faded');
911        expect(screen.getAllByLabelText('daemonset link')[1]).toHaveAttribute('class', 'link-faded');
912        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item');
913        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link');
914        expect(screen.getAllByLabelText('deployment')[1]).toHaveAttribute('class', 'item-faded');
915        expect(screen.getAllByLabelText('deployment link')[1]).toHaveAttribute('class', 'link-faded');
916    }, testTimeout);
917
918    it('focusing a service also focuses its target pods and its ingress', async () => {
919        const dataSet = {
920            pods: [pod1, pod2, pod3],
921            services: [service1_2, service3],
922            ingresses: [ingress12, ingress3],
923            replicaSets: [replicaSet1_2_3],
924            statefulSets: [statefulSet1],
925            daemonSets: [daemonSet1],
926            deployments: [deployment123]
927        };
928        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
929                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
930                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
931                             autoZoom={false}/>);
932        await waitForItemPositionStable(screen.getAllByLabelText('replicaset')[0], waitTimeout);
933
934        hoverItem(screen.getAllByLabelText('service')[0]);
935
936        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');
937        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item');
938        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');
939        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item');
940        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link');
941        expect(screen.getAllByLabelText('service link')[1]).toHaveAttribute('class', 'link');
942        expect(screen.getAllByLabelText('service')[1]).toHaveAttribute('class', 'item-faded');
943        expect(screen.getAllByLabelText('service link')[2]).toHaveAttribute('class', 'link-faded');
944        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item');
945        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link');
946        expect(screen.getAllByLabelText('ingress')[1]).toHaveAttribute('class', 'item-faded');
947        expect(screen.getAllByLabelText('ingress link')[1]).toHaveAttribute('class', 'link-faded');
948        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item-faded');
949        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link-faded');
950        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item-faded');
951        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link-faded');
952        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');
953        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');
954        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');
955        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');
956    }, testTimeout);
957
958    it('focusing a service link also focuses its service and target pod', async () => {
959        const dataSet = {
960            pods: [pod1, pod2, pod3],
961            services: [service1_2, service3],
962            ingresses: [ingress12, ingress3],
963            replicaSets: [replicaSet1_2],
964            statefulSets: [statefulSet1],
965            daemonSets: [daemonSet1],
966            deployments: [deployment12]
967        };
968        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
969                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
970                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
971                             autoZoom={false}/>);
972        await waitForItemPositionStable(screen.getAllByLabelText('service')[0], waitTimeout);
973
974        hoverLink(screen.getAllByLabelText('service link')[0]);
975
976        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');
977        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');
978        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');
979        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item');
980        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link');
981        expect(screen.getAllByLabelText('service link')[1]).toHaveAttribute('class', 'link-faded');
982        expect(screen.getAllByLabelText('service')[1]).toHaveAttribute('class', 'item-faded');
983        expect(screen.getAllByLabelText('service link')[2]).toHaveAttribute('class', 'link-faded');
984        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');
985        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');
986        expect(screen.getAllByLabelText('ingress')[1]).toHaveAttribute('class', 'item-faded');
987        expect(screen.getAllByLabelText('ingress link')[1]).toHaveAttribute('class', 'link-faded');
988        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item-faded');
989        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link-faded');
990        expect(screen.getAllByLabelText('replicaset link')[1]).toHaveAttribute('class', 'link-faded');
991        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item-faded');
992        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link-faded');
993        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');
994        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');
995        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');
996        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');
997    }, testTimeout);
998
999    it('focusing a replicaSet also focuses its target pods and its deployment', async () => {
1000        const dataSet = {
1001            pods: [pod1, pod2, pod3],
1002            services: [service1_2_3],
1003            ingresses: [ingress123],
1004            replicaSets: [replicaSet1_2, replicaSet3],
1005            statefulSets: [statefulSet1],
1006            daemonSets: [daemonSet1],
1007            deployments: [deployment12, deployment3]
1008        };
1009        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1010                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1011                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
1012                             autoZoom={false}/>);
1013        await waitForItemPositionStable(screen.getAllByLabelText('replicaset')[0], waitTimeout);
1014
1015        hoverItem(screen.getAllByLabelText('replicaset')[0]);
1016
1017        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');
1018        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item');
1019        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');
1020        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');
1021        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');
1022        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');
1023        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');
1024        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item');
1025        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link');
1026        expect(screen.getAllByLabelText('replicaset link')[1]).toHaveAttribute('class', 'link');
1027        expect(screen.getAllByLabelText('replicaset')[1]).toHaveAttribute('class', 'item-faded');
1028        expect(screen.getAllByLabelText('replicaset link')[2]).toHaveAttribute('class', 'link-faded');
1029        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item-faded');
1030        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link-faded');
1031        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');
1032        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');
1033        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item');
1034        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link');
1035        expect(screen.getAllByLabelText('deployment')[1]).toHaveAttribute('class', 'item-faded');
1036        expect(screen.getAllByLabelText('deployment link')[1]).toHaveAttribute('class', 'link-faded');
1037    }, testTimeout);
1038
1039    it('focusing a replicaSet link also focuses its replicaSet and target pod', async () => {
1040        const dataSet = {
1041            pods: [pod1, pod2, pod3],
1042            services: [service1_2_3],
1043            ingresses: [ingress123],
1044            replicaSets: [replicaSet1_2, replicaSet3],
1045            statefulSets: [statefulSet1],
1046            daemonSets: [daemonSet1],
1047            deployments: [deployment12, deployment3]
1048        };
1049        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1050                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1051                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
1052                             autoZoom={false}/>);
1053        await waitForItemPositionStable(screen.getAllByLabelText('replicaset')[0], waitTimeout);
1054
1055        hoverLink(screen.getAllByLabelText('replicaset link')[0]);
1056
1057        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');
1058        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');
1059        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');
1060        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');
1061        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');
1062        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');
1063        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');
1064        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item');
1065        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link');
1066        expect(screen.getAllByLabelText('replicaset link')[1]).toHaveAttribute('class', 'link-faded');
1067        expect(screen.getAllByLabelText('replicaset')[1]).toHaveAttribute('class', 'item-faded');
1068        expect(screen.getAllByLabelText('replicaset link')[2]).toHaveAttribute('class', 'link-faded');
1069        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item-faded');
1070        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link-faded');
1071        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');
1072        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');
1073        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');
1074        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');
1075        expect(screen.getAllByLabelText('deployment')[1]).toHaveAttribute('class', 'item-faded');
1076        expect(screen.getAllByLabelText('deployment link')[1]).toHaveAttribute('class', 'link-faded');
1077    }, testTimeout);
1078
1079    it('focusing a statefulSet also focuses its target pods', async () => {
1080        const dataSet = {
1081            pods: [pod1, pod2, pod3],
1082            services: [service1_2_3],
1083            ingresses: [ingress123],
1084            replicaSets: [replicaSet1],
1085            statefulSets: [statefulSet1_2, statefulSet3],
1086            daemonSets: [daemonSet1],
1087            deployments: [deployment1]
1088        };
1089        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1090                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1091                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
1092                             autoZoom={false}/>);
1093        await waitForItemPositionStable(screen.getAllByLabelText('statefulset')[0], waitTimeout);
1094
1095        hoverItem(screen.getAllByLabelText('statefulset')[0]);
1096
1097        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');
1098        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item');
1099        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');
1100        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');
1101        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');
1102        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');
1103        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');
1104        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item-faded');
1105        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link-faded');
1106        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item');
1107        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link');
1108        expect(screen.getAllByLabelText('statefulset link')[1]).toHaveAttribute('class', 'link');
1109        expect(screen.getAllByLabelText('statefulset')[1]).toHaveAttribute('class', 'item-faded');
1110        expect(screen.getAllByLabelText('statefulset link')[2]).toHaveAttribute('class', 'link-faded');
1111        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');
1112        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');
1113        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');
1114        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');
1115    }, testTimeout);
1116
1117    it('focusing a statefulSet link also focuses its statefulSet and target pod', async () => {
1118        const dataSet = {
1119            pods: [pod1, pod2, pod3],
1120            services: [service1_2_3],
1121            ingresses: [ingress123],
1122            replicaSets: [replicaSet1],
1123            statefulSets: [statefulSet1_2, statefulSet3],
1124            daemonSets: [daemonSet1],
1125            deployments: [deployment1]
1126        };
1127        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1128                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1129                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
1130                             autoZoom={false}/>);
1131        await waitForItemPositionStable(screen.getAllByLabelText('statefulset')[0], waitTimeout);
1132
1133        hoverLink(screen.getAllByLabelText('statefulset link')[0]);
1134
1135        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');
1136        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');
1137        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');
1138        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');
1139        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');
1140        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');
1141        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');
1142        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item-faded');
1143        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link-faded');
1144        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item');
1145        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link');
1146        expect(screen.getAllByLabelText('statefulset link')[1]).toHaveAttribute('class', 'link-faded');
1147        expect(screen.getAllByLabelText('statefulset')[1]).toHaveAttribute('class', 'item-faded');
1148        expect(screen.getAllByLabelText('statefulset link')[2]).toHaveAttribute('class', 'link-faded');
1149        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');
1150        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');
1151        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');
1152        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');
1153    }, testTimeout);
1154
1155    it('focusing a daemonSet also focuses its target pods', async () => {
1156        const dataSet = {
1157            pods: [pod1, pod2, pod3],
1158            services: [service1_2_3],
1159            ingresses: [ingress123],
1160            replicaSets: [replicaSet1],
1161            statefulSets: [statefulSet1],
1162            daemonSets: [daemonSet1_2, daemonSet3],
1163            deployments: [deployment1]
1164        };
1165        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1166                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1167                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
1168                             autoZoom={false}/>);
1169        await waitForItemPositionStable(screen.getAllByLabelText('daemonset')[0], waitTimeout);
1170
1171        hoverItem(screen.getAllByLabelText('daemonset')[0]);
1172
1173        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');
1174        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item');
1175        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');
1176        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');
1177        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');
1178        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');
1179        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');
1180        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item-faded');
1181        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link-faded');
1182        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item-faded');
1183        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link-faded');
1184        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item');
1185        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link');
1186        expect(screen.getAllByLabelText('daemonset link')[1]).toHaveAttribute('class', 'link');
1187        expect(screen.getAllByLabelText('daemonset')[1]).toHaveAttribute('class', 'item-faded');
1188        expect(screen.getAllByLabelText('daemonset link')[2]).toHaveAttribute('class', 'link-faded');
1189        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');
1190        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');
1191    }, testTimeout);
1192
1193    it('focusing a daemonSet link also focuses its statefulSet and target pod', async () => {
1194        const dataSet = {
1195            pods: [pod1, pod2, pod3],
1196            services: [service1_2_3],
1197            ingresses: [ingress123],
1198            replicaSets: [replicaSet1],
1199            statefulSets: [statefulSet1],
1200            daemonSets: [daemonSet1_2, daemonSet3],
1201            deployments: [deployment1]
1202        };
1203        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1204                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1205                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
1206                             autoZoom={false}/>);
1207        await waitForItemPositionStable(screen.getAllByLabelText('daemonset')[0], waitTimeout);
1208
1209        hoverLink(screen.getAllByLabelText('daemonset link')[0]);
1210
1211        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');
1212        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');
1213        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');
1214        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');
1215        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');
1216        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');
1217        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');
1218        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item-faded');
1219        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link-faded');
1220        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item-faded');
1221        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link-faded');
1222        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item');
1223        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link');
1224        expect(screen.getAllByLabelText('daemonset link')[1]).toHaveAttribute('class', 'link-faded');
1225        expect(screen.getAllByLabelText('daemonset')[1]).toHaveAttribute('class', 'item-faded');
1226        expect(screen.getAllByLabelText('daemonset link')[2]).toHaveAttribute('class', 'link-faded');
1227        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');
1228        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');
1229    }, testTimeout);
1230
1231    it('focusing a deployment also focuses its target replicaSets and their target pods', async () => {
1232        const dataSet = {
1233            pods: [pod1, pod2, pod3, pod4],
1234            services: [service1_2_3_4],
1235            ingresses: [ingress123],
1236            replicaSets: [replicaSet1_2, replicaSet3, replicaSet4],
1237            statefulSets: [statefulSet1],
1238            daemonSets: [daemonSet1],
1239            deployments: [deployment12_3, deployment4]
1240        };
1241        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1242                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1243                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
1244                             autoZoom={false}/>);
1245        await waitForItemPositionStable(screen.getAllByLabelText('deployment')[0], waitTimeout);
1246
1247        hoverItem(screen.getAllByLabelText('deployment')[0]);
1248
1249        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');
1250        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item');
1251        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item');
1252        expect(screen.getAllByLabelText('pod')[3]).toHaveAttribute('class', 'item-faded');
1253        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');
1254        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');
1255        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');
1256        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');
1257        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item');
1258        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link');
1259        expect(screen.getAllByLabelText('replicaset link')[1]).toHaveAttribute('class', 'link');
1260        expect(screen.getAllByLabelText('replicaset')[1]).toHaveAttribute('class', 'item');
1261        expect(screen.getAllByLabelText('replicaset link')[2]).toHaveAttribute('class', 'link');
1262        expect(screen.getAllByLabelText('replicaset')[2]).toHaveAttribute('class', 'item-faded');
1263        expect(screen.getAllByLabelText('replicaset link')[3]).toHaveAttribute('class', 'link-faded');
1264        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item-faded');
1265        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link-faded');
1266        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');
1267        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');
1268        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item');
1269        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link');
1270        expect(screen.getAllByLabelText('deployment link')[1]).toHaveAttribute('class', 'link');
1271        expect(screen.getAllByLabelText('deployment')[1]).toHaveAttribute('class', 'item-faded');
1272        expect(screen.getAllByLabelText('deployment link')[2]).toHaveAttribute('class', 'link-faded');
1273    }, testTimeout);
1274
1275    it('focusing a deployment link also focuses its deployment and target replicaSet', async () => {
1276        const dataSet = {
1277            pods: [pod1, pod2, pod3],
1278            services: [service1_2_3],
1279            ingresses: [ingress123],
1280            replicaSets: [replicaSet1, replicaSet2, replicaSet3],
1281            statefulSets: [statefulSet1],
1282            daemonSets: [daemonSet1],
1283            deployments: [deployment1_2, deployment3]
1284        };
1285        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1286                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1287                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
1288                             autoZoom={false}/>);
1289        await waitForItemPositionStable(screen.getAllByLabelText('deployment')[0], waitTimeout);
1290
1291        hoverLink(screen.getAllByLabelText('deployment link')[0]);
1292
1293        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item-faded');
1294        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');
1295        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');
1296        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');
1297        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');
1298        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');
1299        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');
1300        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item');
1301        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link-faded');
1302        expect(screen.getAllByLabelText('replicaset')[1]).toHaveAttribute('class', 'item-faded');
1303        expect(screen.getAllByLabelText('replicaset link')[1]).toHaveAttribute('class', 'link-faded');
1304        expect(screen.getAllByLabelText('replicaset')[2]).toHaveAttribute('class', 'item-faded');
1305        expect(screen.getAllByLabelText('replicaset link')[2]).toHaveAttribute('class', 'link-faded');
1306        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item-faded');
1307        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link-faded');
1308        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');
1309        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');
1310        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item');
1311        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link');
1312        expect(screen.getAllByLabelText('deployment link')[1]).toHaveAttribute('class', 'link-faded');
1313        expect(screen.getAllByLabelText('deployment')[1]).toHaveAttribute('class', 'item-faded');
1314        expect(screen.getAllByLabelText('deployment link')[2]).toHaveAttribute('class', 'link-faded');
1315    }, testTimeout);
1316
1317    it('unfocusing an element should remove all fades', async () => {
1318        const dataSet = {
1319            pods: [pod1],
1320            services: [service1],
1321            ingresses: [ingress1],
1322            replicaSets: [replicaSet1],
1323            statefulSets: [statefulSet1],
1324            daemonSets: [daemonSet1],
1325            deployments: [deployment1]
1326        };
1327        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1328                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1329                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
1330                             autoZoom={false}/>);
1331        await waitForItemPositionStable(screen.getAllByLabelText('service')[0], waitTimeout);
1332
1333        hoverItem(screen.getAllByLabelText('pod')[0]);
1334        hoverAway();
1335
1336        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');
1337        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item');
1338        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link');
1339        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item');
1340        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link');
1341        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item');
1342        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link');
1343        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item');
1344        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link');
1345        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item');
1346        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link');
1347        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item');
1348        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link');
1349    }, testTimeout);
1350
1351    it('focused element should stay focused after component update', async () => {
1352        const dataSet1 = {
1353            pods: [pod1, pod2],
1354            services: [service1],
1355            ingresses: [ingress1],
1356            replicaSets: [replicaSet1],
1357            statefulSets: [],
1358            daemonSets: [],
1359            deployments: [deployment1]
1360        };
1361        const dataSet2 = {
1362            pods: [pod1, pod2],
1363            services: [service1, service2],
1364            ingresses: [ingress1_2],
1365            replicaSets: [replicaSet1],
1366            statefulSets: [],
1367            daemonSets: [],
1368            deployments: [deployment1]
1369        };
1370        const { rerender } = render(
1371            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1372                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1373                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet1}
1374                          autoZoom={false}/>
1375        );
1376        await waitForItemPositionStable(screen.getAllByLabelText('service')[0], waitTimeout);
1377
1378        hoverItem(screen.getAllByLabelText('service')[0]);
1379        rerender(
1380            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1381                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1382                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet2}
1383                          autoZoom={false}/>
1384        );
1385
1386        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');
1387        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');
1388        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item');
1389        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link');
1390        expect(screen.getAllByLabelText('service')[1]).toHaveAttribute('class', 'item-faded');
1391        expect(screen.getAllByLabelText('service link')[1]).toHaveAttribute('class', 'link-faded');
1392        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item');
1393        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link');
1394        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item-faded');
1395        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link-faded');
1396        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');
1397        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');
1398    }, testTimeout);
1399
1400    it('drag and dropped services do not move anymore', async () => {
1401        const dataSet1 = {
1402            pods: [pod1, pod2],
1403            services: [service1, service2],
1404            ingresses: [],
1405            replicaSets: [],
1406            statefulSets: [],
1407            daemonSets: [],
1408            deployments: []
1409        };
1410        const dataSet2 = {
1411            pods: [pod1, pod2, pod3],
1412            services: [service1, service2, service3],
1413            ingresses: [ingress1],
1414            replicaSets: [],
1415            statefulSets: [],
1416            daemonSets: [],
1417            deployments: []
1418        };
1419        const { rerender } = render(
1420            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1421                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1422                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet1}
1423                          autoZoom={false}/>
1424        );
1425        await waitForItemPositionStable(screen.getAllByLabelText('service')[1], waitTimeout);
1426
1427        dragAndDropItem(screen.getAllByLabelText('service')[1], { clientX: 20, clientY: 10 });
1428        await waitForItemPositionStable(screen.getAllByLabelText('service')[1], waitTimeout);
1429        const oldService1Position = getItemPosition(screen.getAllByLabelText('service')[0]);
1430        const oldService2Position = getItemPosition(screen.getAllByLabelText('service')[1]);
1431        rerender(
1432            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1433                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1434                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet2}
1435                          autoZoom={false}/>
1436        );
1437        await waitForItemPositionStable(screen.getAllByLabelText('service')[2], waitTimeout);
1438        const newService1Position = getItemPosition(screen.getAllByLabelText('service')[0]);
1439        const newService2Position = getItemPosition(screen.getAllByLabelText('service')[1]);
1440
1441        expect(newService1Position).not.toEqual(oldService1Position);
1442        expect(newService2Position).toEqual(oldService2Position);
1443    }, testTimeout);
1444
1445    it('drag and dropped ingresses do not move anymore', async () => {
1446        const dataSet1 = {
1447            pods: [pod1, pod2],
1448            services: [service1, service2],
1449            ingresses: [ingress1, ingress2],
1450            replicaSets: [],
1451            statefulSets: [],
1452            daemonSets: [],
1453            deployments: []
1454        };
1455        const dataSet2 = {
1456            pods: [pod1, pod2, pod3],
1457            services: [service1, service2, service3],
1458            ingresses: [ingress1, ingress2, ingress3],
1459            replicaSets: [],
1460            statefulSets: [],
1461            daemonSets: [],
1462            deployments: []
1463        };
1464        const { rerender } = render(
1465            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1466                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1467                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet1}
1468                          autoZoom={false}/>
1469        );
1470        await waitForItemPositionStable(screen.getAllByLabelText('ingress')[1], waitTimeout);
1471
1472        dragAndDropItem(screen.getAllByLabelText('ingress')[1], { clientX: 40, clientY: 10 });
1473        await waitForItemPositionStable(screen.getAllByLabelText('ingress')[1], waitTimeout);
1474        const oldIngress1Position = getItemPosition(screen.getAllByLabelText('ingress')[0]);
1475        const oldIngress2Position = getItemPosition(screen.getAllByLabelText('ingress')[1]);
1476        rerender(
1477            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1478                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1479                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet2}
1480                          autoZoom={false}/>
1481        );
1482        await waitForItemPositionStable(screen.getAllByLabelText('ingress')[2], waitTimeout);
1483        const newIngress1Position = getItemPosition(screen.getAllByLabelText('ingress')[0]);
1484        const newIngress2Position = getItemPosition(screen.getAllByLabelText('ingress')[1]);
1485
1486        expect(newIngress1Position).not.toEqual(oldIngress1Position);
1487        expect(newIngress2Position).toEqual(oldIngress2Position);
1488    }, testTimeout);
1489
1490    it('drag and dropped replicaSets do not move anymore', async () => {
1491        const dataSet1 = {
1492            pods: [pod1, pod2],
1493            services: [],
1494            ingresses: [],
1495            replicaSets: [replicaSet1, replicaSet2],
1496            statefulSets: [],
1497            daemonSets: [],
1498            deployments: []
1499        };
1500        const dataSet2 = {
1501            pods: [pod1, pod2, pod3],
1502            services: [],
1503            ingresses: [],
1504            replicaSets: [replicaSet1, replicaSet2, replicaSet3],
1505            statefulSets: [],
1506            daemonSets: [],
1507            deployments: [deployment1]
1508        };
1509        const { rerender } = render(
1510            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1511                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1512                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet1}
1513                          autoZoom={false}/>
1514        );
1515        await waitForItemPositionStable(screen.getAllByLabelText('replicaset')[1], waitTimeout);
1516
1517        dragAndDropItem(screen.getAllByLabelText('replicaset')[1], { clientX: 20, clientY: 10 });
1518        await waitForItemPositionStable(screen.getAllByLabelText('replicaset')[1], waitTimeout);
1519        const oldReplicaSet1Position = getItemPosition(screen.getAllByLabelText('replicaset')[0]);
1520        const oldReplicaSet2Position = getItemPosition(screen.getAllByLabelText('replicaset')[1]);
1521        rerender(
1522            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1523                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1524                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet2}
1525                          autoZoom={false}/>
1526        );
1527        await waitForItemPositionStable(screen.getAllByLabelText('replicaset')[2], waitTimeout);
1528        const newReplicaSet1Position = getItemPosition(screen.getAllByLabelText('replicaset')[0]);
1529        const newReplicaSet2Position = getItemPosition(screen.getAllByLabelText('replicaset')[1]);
1530
1531        expect(newReplicaSet1Position).not.toEqual(oldReplicaSet1Position);
1532        expect(newReplicaSet2Position).toEqual(oldReplicaSet2Position);
1533    }, testTimeout);
1534
1535    it('drag and dropped statefulSets do not move anymore', async () => {
1536        const dataSet1 = {
1537            pods: [pod1, pod2],
1538            services: [],
1539            ingresses: [],
1540            replicaSets: [],
1541            statefulSets: [statefulSet1, statefulSet2],
1542            daemonSets: [],
1543            deployments: []
1544        };
1545        const dataSet2 = {
1546            pods: [pod1, pod2, pod3],
1547            services: [],
1548            ingresses: [],
1549            replicaSets: [],
1550            statefulSets: [statefulSet1, statefulSet2, statefulSet3],
1551            daemonSets: [],
1552            deployments: []
1553        };
1554        const { rerender } = render(
1555            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1556                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1557                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet1}
1558                          autoZoom={false}/>
1559        );
1560        await waitForItemPositionStable(screen.getAllByLabelText('statefulset')[1], waitTimeout);
1561
1562        dragAndDropItem(screen.getAllByLabelText('statefulset')[1], { clientX: 20, clientY: 10 });
1563        await waitForItemPositionStable(screen.getAllByLabelText('statefulset')[1], waitTimeout);
1564        const oldStatefulSet1Position = getItemPosition(screen.getAllByLabelText('statefulset')[0]);
1565        const oldStatefulSet2Position = getItemPosition(screen.getAllByLabelText('statefulset')[1]);
1566        rerender(
1567            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1568                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1569                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet2}
1570                          autoZoom={false}/>
1571        );
1572        await waitForItemPositionStable(screen.getAllByLabelText('statefulset')[2], waitTimeout);
1573        const newStatefulSet1Position = getItemPosition(screen.getAllByLabelText('statefulset')[0]);
1574        const newStatefulSet2Position = getItemPosition(screen.getAllByLabelText('statefulset')[1]);
1575
1576        expect(newStatefulSet1Position).not.toEqual(oldStatefulSet1Position);
1577        expect(newStatefulSet2Position).toEqual(oldStatefulSet2Position);
1578    }, testTimeout);
1579
1580    it('drag and dropped daemonSets do not move anymore', async () => {
1581        const dataSet1 = {
1582            pods: [pod1, pod2],
1583            services: [],
1584            ingresses: [],
1585            replicaSets: [],
1586            statefulSets: [],
1587            daemonSets: [daemonSet1, daemonSet2],
1588            deployments: []
1589        };
1590        const dataSet2 = {
1591            pods: [pod1, pod2, pod3],
1592            services: [],
1593            ingresses: [],
1594            replicaSets: [],
1595            statefulSets: [],
1596            daemonSets: [daemonSet1, daemonSet2, daemonSet3],
1597            deployments: []
1598        };
1599        const { rerender } = render(
1600            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1601                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1602                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet1}
1603                          autoZoom={false}/>
1604        );
1605        await waitForItemPositionStable(screen.getAllByLabelText('daemonset')[1], waitTimeout);
1606
1607        dragAndDropItem(screen.getAllByLabelText('daemonset')[1], { clientX: 20, clientY: 10 });
1608        await waitForItemPositionStable(screen.getAllByLabelText('daemonset')[1], waitTimeout);
1609        const oldDaemonSet1Position = getItemPosition(screen.getAllByLabelText('daemonset')[0]);
1610        const oldDaemonSet2Position = getItemPosition(screen.getAllByLabelText('daemonset')[1]);
1611        rerender(
1612            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1613                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1614                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet2}
1615                          autoZoom={false}/>
1616        );
1617        await waitForItemPositionStable(screen.getAllByLabelText('daemonset')[2], waitTimeout);
1618        const newDaemonSet1Position = getItemPosition(screen.getAllByLabelText('daemonset')[0]);
1619        const newDaemonSet2Position = getItemPosition(screen.getAllByLabelText('daemonset')[1]);
1620
1621        expect(newDaemonSet1Position).not.toEqual(oldDaemonSet1Position);
1622        expect(newDaemonSet2Position).toEqual(oldDaemonSet2Position);
1623    }, testTimeout);
1624
1625    it('drag and dropped deployments do not move anymore', async () => {
1626        const dataSet1 = {
1627            pods: [pod1, pod2],
1628            services: [],
1629            ingresses: [],
1630            replicaSets: [replicaSet1, replicaSet2],
1631            statefulSets: [],
1632            daemonSets: [],
1633            deployments: [deployment1, deployment2]
1634        };
1635        const dataSet2 = {
1636            pods: [pod1, pod2, pod3],
1637            services: [],
1638            ingresses: [],
1639            replicaSets: [replicaSet1, replicaSet2, replicaSet3],
1640            statefulSets: [],
1641            daemonSets: [],
1642            deployments: [deployment1, deployment2, deployment3]
1643        };
1644        const { rerender } = render(
1645            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1646                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1647                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet1}
1648                          autoZoom={false}/>
1649        );
1650        await waitForItemPositionStable(screen.getAllByLabelText('deployment')[1], waitTimeout);
1651
1652        dragAndDropItem(screen.getAllByLabelText('deployment')[1], { clientX: 40, clientY: 10 });
1653        await waitForItemPositionStable(screen.getAllByLabelText('deployment')[1], waitTimeout);
1654        const oldDeployment1Position = getItemPosition(screen.getAllByLabelText('deployment')[0]);
1655        const oldDeployment2Position = getItemPosition(screen.getAllByLabelText('deployment')[1]);
1656        rerender(
1657            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1658                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1659                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet2}
1660                          autoZoom={false}/>
1661        );
1662        await waitForItemPositionStable(screen.getAllByLabelText('deployment')[2], waitTimeout);
1663        const newDeployment1Position = getItemPosition(screen.getAllByLabelText('deployment')[0]);
1664        const newDeployment2Position = getItemPosition(screen.getAllByLabelText('deployment')[1]);
1665
1666        expect(newDeployment1Position).not.toEqual(oldDeployment1Position);
1667        expect(newDeployment2Position).toEqual(oldDeployment2Position);
1668    }, testTimeout);
1669
1670    it('all items and their labels keep same apparent size despite zoom', async () => {
1671        const dataSet = {
1672            pods: [pod1],
1673            services: [service1],
1674            ingresses: [ingress1],
1675            replicaSets: [replicaSet1],
1676            statefulSets: [statefulSet1],
1677            daemonSets: [daemonSet1],
1678            deployments: [deployment1]
1679        };
1680        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1681                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1682                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
1683                             autoZoom={false}/>);
1684        patchGraphViewBox();
1685        await waitForItemPositionStable(screen.getAllByLabelText('service')[0], waitTimeout);
1686        const oldPodFontSize = parseFloat(screen.getByText(pod1.displayName).getAttribute('font-size'));
1687        const oldServiceFontSize = parseFloat(screen.getByText('ns/svc1').getAttribute('font-size'));
1688        const oldIngressFontSize = parseFloat(screen.getByText('ns/ing1').getAttribute('font-size'));
1689        const oldReplicaSetFontSize = parseFloat(screen.getByText('ns/rs1').getAttribute('font-size'));
1690        const oldStatefulSetFontSize = parseFloat(screen.getByText('ns/ss1').getAttribute('font-size'));
1691        const oldDaemonSetFontSize = parseFloat(screen.getByText('ns/ds1').getAttribute('font-size'));
1692        const oldDeploymentFontSize = parseFloat(screen.getByText('ns/dep1').getAttribute('font-size'));
1693
1694        scrollDown();
1695        const containerScale = getScale(screen.queryByLabelText('layers container'));
1696        const podScale = getScale(screen.getAllByLabelText('pod')[0]);
1697        const serviceScale = getScale(screen.getAllByLabelText('service')[0]);
1698        const ingressScale = getScale(screen.getAllByLabelText('ingress')[0]);
1699        const replicaSetScale = getScale(screen.getAllByLabelText('replicaset')[0]);
1700        const statefulSetScale = getScale(screen.getAllByLabelText('statefulset')[0]);
1701        const daemonSetScale = getScale(screen.getAllByLabelText('daemonset')[0]);
1702        const deploymentScale = getScale(screen.getAllByLabelText('deployment')[0]);
1703        const newPodFontSize = parseFloat(screen.getByText(pod1.displayName).getAttribute('font-size'));
1704        const newServiceFontSize = parseFloat(screen.getByText('ns/svc1').getAttribute('font-size'));
1705        const newIngressFontSize = parseFloat(screen.getByText('ns/ing1').getAttribute('font-size'));
1706        const newReplicaSetFontSize = parseFloat(screen.getByText('ns/rs1').getAttribute('font-size'));
1707        const newStatefulSetFontSize = parseFloat(screen.getByText('ns/ss1').getAttribute('font-size'));
1708        const newDaemonSetFontSize = parseFloat(screen.getByText('ns/ds1').getAttribute('font-size'));
1709        const newDeploymentFontSize = parseFloat(screen.getByText('ns/dep1').getAttribute('font-size'));
1710        const podFontScale = newPodFontSize / oldPodFontSize;
1711        const serviceFontScale = newServiceFontSize / oldServiceFontSize;
1712        const ingressFontScale = newIngressFontSize / oldIngressFontSize;
1713        const replicaSetFontScale = newReplicaSetFontSize / oldReplicaSetFontSize;
1714        const statefulSetFontScale = newStatefulSetFontSize / oldStatefulSetFontSize;
1715        const daemonSetFontScale = newDaemonSetFontSize / oldDaemonSetFontSize;
1716        const deploymentFontScale = newDeploymentFontSize / oldDeploymentFontSize;
1717
1718        expect(containerScale).toBeGreaterThan(1);
1719        expect(podScale).toEqual(1 / containerScale);
1720        expect(serviceScale).toEqual(1 / containerScale);
1721        expect(ingressScale).toEqual(1 / containerScale);
1722        expect(replicaSetScale).toEqual(1 / containerScale);
1723        expect(statefulSetScale).toEqual(1 / containerScale);
1724        expect(daemonSetScale).toEqual(1 / containerScale);
1725        expect(deploymentScale).toEqual(1 / containerScale);
1726        expect(podFontScale).toEqual(1 / containerScale);
1727        expect(serviceFontScale).toEqual(1 / containerScale);
1728        expect(ingressFontScale).toEqual(1 / containerScale);
1729        expect(replicaSetFontScale).toEqual(1 / containerScale);
1730        expect(statefulSetFontScale).toEqual(1 / containerScale);
1731        expect(daemonSetFontScale).toEqual(1 / containerScale);
1732        expect(deploymentFontScale).toEqual(1 / containerScale);
1733    });
1734
1735    it('all links keep same apparent size despite zoom', async () => {
1736        const dataSet = {
1737            pods: [pod1],
1738            services: [service1],
1739            ingresses: [ingress1],
1740            replicaSets: [replicaSet1],
1741            statefulSets: [statefulSet1],
1742            daemonSets: [daemonSet1],
1743            deployments: [deployment1]
1744        };
1745        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1746                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1747                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
1748                             autoZoom={false}/>);
1749        patchGraphViewBox();
1750        await waitForItemPositionStable(screen.getAllByLabelText('service')[0], waitTimeout);
1751        const oldServiceLinkWidth = parseFloat(
1752            screen.getAllByLabelText('service link')[0].getAttribute('stroke-width'));
1753        const oldIngressLinkWidth = parseFloat(
1754            screen.getAllByLabelText('ingress link')[0].getAttribute('stroke-width'));
1755        const oldReplicaSetLinkWidth = parseFloat(
1756            screen.getAllByLabelText('replicaset link')[0].getAttribute('stroke-width'));
1757        const oldStatefulSetLinkWidth = parseFloat(
1758            screen.getAllByLabelText('statefulset link')[0].getAttribute('stroke-width'));
1759        const oldDaemonSetLinkWidth = parseFloat(
1760            screen.getAllByLabelText('daemonset link')[0].getAttribute('stroke-width'));
1761        const oldDeploymentLinkWidth = parseFloat(
1762            screen.getAllByLabelText('deployment link')[0].getAttribute('stroke-width'));
1763
1764        scrollDown();
1765        const newServiceLinkWidth = parseFloat(
1766            screen.getAllByLabelText('service link')[0].getAttribute('stroke-width'));
1767        const newIngressLinkWidth = parseFloat(
1768            screen.getAllByLabelText('ingress link')[0].getAttribute('stroke-width'));
1769        const newReplicaSetLinkWidth = parseFloat(
1770            screen.getAllByLabelText('replicaset link')[0].getAttribute('stroke-width'));
1771        const newStatefulSetLinkWidth = parseFloat(
1772            screen.getAllByLabelText('statefulset link')[0].getAttribute('stroke-width'));
1773        const newDaemonSetLinkWidth = parseFloat(
1774            screen.getAllByLabelText('daemonset link')[0].getAttribute('stroke-width'));
1775        const newDeploymentLinkWidth = parseFloat(
1776            screen.getAllByLabelText('deployment link')[0].getAttribute('stroke-width'));
1777        const containerScale = getScale(screen.queryByLabelText('layers container'));
1778        const serviceLinkScale = newServiceLinkWidth / oldServiceLinkWidth;
1779        const ingressLinkScale = newIngressLinkWidth / oldIngressLinkWidth;
1780        const replicasetLinkScale = newReplicaSetLinkWidth / oldReplicaSetLinkWidth;
1781        const statefulsetLinkScale = newStatefulSetLinkWidth / oldStatefulSetLinkWidth;
1782        const daemonsetLinkScale = newDaemonSetLinkWidth / oldDaemonSetLinkWidth;
1783        const deploymentLinkScale = newDeploymentLinkWidth / oldDeploymentLinkWidth;
1784
1785        expect(containerScale).toBeGreaterThan(1);
1786        expect(serviceLinkScale).toEqual(1 / containerScale);
1787        expect(ingressLinkScale).toEqual(1 / containerScale);
1788        expect(replicasetLinkScale).toEqual(1 / containerScale);
1789        expect(statefulsetLinkScale).toEqual(1 / containerScale);
1790        expect(daemonsetLinkScale).toEqual(1 / containerScale);
1791        expect(deploymentLinkScale).toEqual(1 / containerScale);
1792    });
1793
1794    it('zooms to fit displayed elements with autoZoom', async () => {
1795        const dataSet = {
1796            pods: [pod1, pod2],
1797            services: [service1, service2],
1798            ingresses: [],
1799            replicaSets: [],
1800            statefulSets: [],
1801            daemonSets: [],
1802            deployments: []
1803        };
1804        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1805                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1806                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
1807                             autoZoom={true}/>);
1808        patchGraphViewBox();
1809        patchLayersContainerBBox();
1810        await waitForItemPositionStable(screen.getAllByLabelText('service')[0], waitTimeout);
1811        await waitForTime(ZOOM_ANIMATION_DELAY + ZOOM_ANIMATION_DURATION);
1812
1813        const containerScale = getScale(screen.queryByLabelText('layers container'));
1814        expect(containerScale).not.toEqual(1);
1815    });
1816
1817    it('does not zoom to fit displayed elements without autoZoom', async () => {
1818        const dataSet = {
1819            pods: [pod1, pod2],
1820            services: [service1, service2],
1821            ingresses: [],
1822            replicaSets: [],
1823            statefulSets: [],
1824            daemonSets: [],
1825            deployments: []
1826        };
1827        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}
1828                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}
1829                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}
1830                             autoZoom={false}/>);
1831        patchGraphViewBox();
1832        patchLayersContainerBBox();
1833        await waitForItemPositionStable(screen.getAllByLabelText('service')[0], waitTimeout);
1834        await waitForTime(ZOOM_ANIMATION_DELAY + ZOOM_ANIMATION_DURATION);
1835
1836        const containerScale = getScale(screen.queryByLabelText('layers container'));
1837        expect(containerScale).toEqual(1);
1838    });
1839});
1840