How to use toHaveAttribute method in Playwright Internal

Best JavaScript code snippet using playwright-internal

ClusterGraph.test.js

Source:ClusterGraph.test.js

...642                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}643                             autoZoom={false}/>);644        await waitForItemPositionStable(screen.getAllByLabelText('pod')[0], waitTimeout);645        hoverItem(screen.getAllByLabelText('pod')[0]);646        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');647        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');648    }, testTimeout);649    it('focused services and service links have a different appearance', async () => {650        const dataSet = {651            pods: [pod1, pod2],652            services: [service1, service2],653            ingresses: [],654            replicaSets: [],655            statefulSets: [],656            daemonSets: [],657            deployments: []658        };659        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}660                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}661                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}662                             autoZoom={false}/>);663        await waitForItemPositionStable(screen.getAllByLabelText('service')[0], waitTimeout);664        hoverItem(screen.getAllByLabelText('service')[0]);665        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item');666        expect(screen.getAllByLabelText('service')[1]).toHaveAttribute('class', 'item-faded');667        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link');668        expect(screen.getAllByLabelText('service link')[1]).toHaveAttribute('class', 'link-faded');669    }, testTimeout);670    it('focused ingresses and ingress links have a different appearance', async () => {671        const dataSet = {672            pods: [pod1, pod2],673            services: [service1, service2],674            ingresses: [ingress1, ingress2],675            replicaSets: [],676            statefulSets: [],677            daemonSets: [],678            deployments: []679        };680        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}681                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}682                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}683                             autoZoom={false}/>);684        await waitForItemPositionStable(screen.getAllByLabelText('ingress')[0], waitTimeout);685        hoverItem(screen.getAllByLabelText('ingress')[0]);686        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item');687        expect(screen.getAllByLabelText('ingress')[1]).toHaveAttribute('class', 'item-faded');688        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link');689        expect(screen.getAllByLabelText('ingress link')[1]).toHaveAttribute('class', 'link-faded');690    }, testTimeout);691    it('focused replicaSets and replicaSet links have a different appearance', async () => {692        const dataSet = {693            pods: [pod1, pod2],694            services: [],695            ingresses: [],696            replicaSets: [replicaSet1, replicaSet2],697            statefulSets: [],698            daemonSets: [],699            deployments: []700        };701        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}702                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}703                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}704                             autoZoom={false}/>);705        await waitForItemPositionStable(screen.getAllByLabelText('replicaset')[0], waitTimeout);706        hoverItem(screen.getAllByLabelText('replicaset')[0]);707        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item');708        expect(screen.getAllByLabelText('replicaset')[1]).toHaveAttribute('class', 'item-faded');709        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link');710        expect(screen.getAllByLabelText('replicaset link')[1]).toHaveAttribute('class', 'link-faded');711    }, testTimeout);712    it('focused statefulSets and statefulSet links have a different appearance', async () => {713        const dataSet = {714            pods: [pod1, pod2],715            services: [],716            ingresses: [],717            replicaSets: [],718            statefulSets: [statefulSet1, statefulSet2],719            daemonSets: [],720            deployments: []721        };722        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}723                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}724                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}725                             autoZoom={false}/>);726        await waitForItemPositionStable(screen.getAllByLabelText('statefulset')[0], waitTimeout);727        hoverItem(screen.getAllByLabelText('statefulset')[0]);728        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item');729        expect(screen.getAllByLabelText('statefulset')[1]).toHaveAttribute('class', 'item-faded');730        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link');731        expect(screen.getAllByLabelText('statefulset link')[1]).toHaveAttribute('class', 'link-faded');732    }, testTimeout);733    it('focused daemonSets and daemonSet links have a different appearance', async () => {734        const dataSet = {735            pods: [pod1, pod2],736            services: [],737            ingresses: [],738            replicaSets: [],739            statefulSets: [],740            daemonSets: [daemonSet1, daemonSet2],741            deployments: []742        };743        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}744                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}745                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}746                             autoZoom={false}/>);747        await waitForItemPositionStable(screen.getAllByLabelText('daemonset')[0], waitTimeout);748        hoverItem(screen.getAllByLabelText('daemonset')[0]);749        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item');750        expect(screen.getAllByLabelText('daemonset')[1]).toHaveAttribute('class', 'item-faded');751        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link');752        expect(screen.getAllByLabelText('daemonset link')[1]).toHaveAttribute('class', 'link-faded');753    }, testTimeout);754    it('focused deployments and deployment links have a different appearance', async () => {755        const dataSet = {756            pods: [pod1, pod2],757            services: [],758            ingresses: [],759            replicaSets: [replicaSet1, replicaSet2],760            statefulSets: [],761            daemonSets: [],762            deployments: [deployment1, deployment2]763        };764        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}765                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}766                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}767                             autoZoom={false}/>);768        await waitForItemPositionStable(screen.getAllByLabelText('deployment')[0], waitTimeout);769        hoverItem(screen.getAllByLabelText('deployment')[0]);770        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item');771        expect(screen.getAllByLabelText('deployment')[1]).toHaveAttribute('class', 'item-faded');772        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link');773        expect(screen.getAllByLabelText('deployment link')[1]).toHaveAttribute('class', 'link-faded');774    }, testTimeout);775    it('focusing a pod also focuses connected services and ingresses and replicaSets and statefulSets and ' +776        'daemonSets and deployments', async () => {777        const dataSet = {778            pods: [pod1, pod2, pod3, pod4],779            services: [service1_2, service3, service4],780            ingresses: [ingress12_3, ingress4],781            replicaSets: [replicaSet1_2, replicaSet3, replicaSet4],782            statefulSets: [statefulSet1_2, daemonSet3],783            daemonSets: [daemonSet1_2, daemonSet3],784            deployments: [deployment12_3, deployment4]785        };786        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}787                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}788                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}789                             autoZoom={false}/>);790        await waitForItemPositionStable(screen.getAllByLabelText('pod')[0], waitTimeout);791        hoverItem(screen.getAllByLabelText('pod')[0]);792        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');793        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');794        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');795        expect(screen.getAllByLabelText('pod')[3]).toHaveAttribute('class', 'item-faded');796        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item');797        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link');798        expect(screen.getAllByLabelText('service')[1]).toHaveAttribute('class', 'item-faded');799        expect(screen.getAllByLabelText('service link')[1]).toHaveAttribute('class', 'link-faded');800        expect(screen.getAllByLabelText('service')[2]).toHaveAttribute('class', 'item-faded');801        expect(screen.getAllByLabelText('service link')[2]).toHaveAttribute('class', 'link-faded');802        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item');803        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link');804        expect(screen.getAllByLabelText('ingress')[1]).toHaveAttribute('class', 'item-faded');805        expect(screen.getAllByLabelText('ingress link')[1]).toHaveAttribute('class', 'link-faded');806        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item');807        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link');808        expect(screen.getAllByLabelText('replicaset')[1]).toHaveAttribute('class', 'item-faded');809        expect(screen.getAllByLabelText('replicaset link')[1]).toHaveAttribute('class', 'link-faded');810        expect(screen.getAllByLabelText('replicaset')[2]).toHaveAttribute('class', 'item-faded');811        expect(screen.getAllByLabelText('replicaset link')[2]).toHaveAttribute('class', 'link-faded');812        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item');813        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link');814        expect(screen.getAllByLabelText('statefulset')[1]).toHaveAttribute('class', 'item-faded');815        expect(screen.getAllByLabelText('statefulset link')[1]).toHaveAttribute('class', 'link-faded');816        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item');817        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link');818        expect(screen.getAllByLabelText('daemonset')[1]).toHaveAttribute('class', 'item-faded');819        expect(screen.getAllByLabelText('daemonset link')[1]).toHaveAttribute('class', 'link-faded');820        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item');821        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link');822        expect(screen.getAllByLabelText('deployment')[1]).toHaveAttribute('class', 'item-faded');823        expect(screen.getAllByLabelText('deployment link')[1]).toHaveAttribute('class', 'link-faded');824    }, testTimeout);825    it('focusing a service also focuses its target pods and its ingress', async () => {826        const dataSet = {827            pods: [pod1, pod2, pod3],828            services: [service1_2, service3],829            ingresses: [ingress12, ingress3],830            replicaSets: [replicaSet1_2_3],831            statefulSets: [statefulSet1],832            daemonSets: [daemonSet1],833            deployments: [deployment123]834        };835        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}836                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}837                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}838                             autoZoom={false}/>);839        await waitForItemPositionStable(screen.getAllByLabelText('replicaset')[0], waitTimeout);840        hoverItem(screen.getAllByLabelText('service')[0]);841        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');842        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item');843        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');844        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item');845        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link');846        expect(screen.getAllByLabelText('service link')[1]).toHaveAttribute('class', 'link');847        expect(screen.getAllByLabelText('service')[1]).toHaveAttribute('class', 'item-faded');848        expect(screen.getAllByLabelText('service link')[2]).toHaveAttribute('class', 'link-faded');849        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item');850        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link');851        expect(screen.getAllByLabelText('ingress')[1]).toHaveAttribute('class', 'item-faded');852        expect(screen.getAllByLabelText('ingress link')[1]).toHaveAttribute('class', 'link-faded');853        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item-faded');854        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link-faded');855        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item-faded');856        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link-faded');857        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');858        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');859        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');860        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');861    }, testTimeout);862    it('focusing a service link also focuses its service and target pod', async () => {863        const dataSet = {864            pods: [pod1, pod2, pod3],865            services: [service1_2, service3],866            ingresses: [ingress12, ingress3],867            replicaSets: [replicaSet1_2],868            statefulSets: [statefulSet1],869            daemonSets: [daemonSet1],870            deployments: [deployment12]871        };872        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}873                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}874                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}875                             autoZoom={false}/>);876        await waitForItemPositionStable(screen.getAllByLabelText('service')[0], waitTimeout);877        hoverLink(screen.getAllByLabelText('service link')[0]);878        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');879        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');880        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');881        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item');882        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link');883        expect(screen.getAllByLabelText('service link')[1]).toHaveAttribute('class', 'link-faded');884        expect(screen.getAllByLabelText('service')[1]).toHaveAttribute('class', 'item-faded');885        expect(screen.getAllByLabelText('service link')[2]).toHaveAttribute('class', 'link-faded');886        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');887        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');888        expect(screen.getAllByLabelText('ingress')[1]).toHaveAttribute('class', 'item-faded');889        expect(screen.getAllByLabelText('ingress link')[1]).toHaveAttribute('class', 'link-faded');890        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item-faded');891        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link-faded');892        expect(screen.getAllByLabelText('replicaset link')[1]).toHaveAttribute('class', 'link-faded');893        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item-faded');894        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link-faded');895        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');896        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');897        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');898        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');899    }, testTimeout);900    it('focusing a replicaSet also focuses its target pods and its deployment', async () => {901        const dataSet = {902            pods: [pod1, pod2, pod3],903            services: [service1_2_3],904            ingresses: [ingress123],905            replicaSets: [replicaSet1_2, replicaSet3],906            statefulSets: [statefulSet1],907            daemonSets: [daemonSet1],908            deployments: [deployment12, deployment3]909        };910        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}911                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}912                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}913                             autoZoom={false}/>);914        await waitForItemPositionStable(screen.getAllByLabelText('replicaset')[0], waitTimeout);915        hoverItem(screen.getAllByLabelText('replicaset')[0]);916        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');917        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item');918        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');919        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');920        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');921        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');922        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');923        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item');924        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link');925        expect(screen.getAllByLabelText('replicaset link')[1]).toHaveAttribute('class', 'link');926        expect(screen.getAllByLabelText('replicaset')[1]).toHaveAttribute('class', 'item-faded');927        expect(screen.getAllByLabelText('replicaset link')[2]).toHaveAttribute('class', 'link-faded');928        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item-faded');929        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link-faded');930        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');931        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');932        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item');933        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link');934        expect(screen.getAllByLabelText('deployment')[1]).toHaveAttribute('class', 'item-faded');935        expect(screen.getAllByLabelText('deployment link')[1]).toHaveAttribute('class', 'link-faded');936    }, testTimeout);937    it('focusing a replicaSet link also focuses its replicaSet and target pod', async () => {938        const dataSet = {939            pods: [pod1, pod2, pod3],940            services: [service1_2_3],941            ingresses: [ingress123],942            replicaSets: [replicaSet1_2, replicaSet3],943            statefulSets: [statefulSet1],944            daemonSets: [daemonSet1],945            deployments: [deployment12, deployment3]946        };947        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}948                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}949                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}950                             autoZoom={false}/>);951        await waitForItemPositionStable(screen.getAllByLabelText('replicaset')[0], waitTimeout);952        hoverLink(screen.getAllByLabelText('replicaset link')[0]);953        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');954        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');955        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');956        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');957        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');958        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');959        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');960        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item');961        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link');962        expect(screen.getAllByLabelText('replicaset link')[1]).toHaveAttribute('class', 'link-faded');963        expect(screen.getAllByLabelText('replicaset')[1]).toHaveAttribute('class', 'item-faded');964        expect(screen.getAllByLabelText('replicaset link')[2]).toHaveAttribute('class', 'link-faded');965        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item-faded');966        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link-faded');967        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');968        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');969        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');970        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');971        expect(screen.getAllByLabelText('deployment')[1]).toHaveAttribute('class', 'item-faded');972        expect(screen.getAllByLabelText('deployment link')[1]).toHaveAttribute('class', 'link-faded');973    }, testTimeout);974    it('focusing a statefulSet also focuses its target pods', async () => {975        const dataSet = {976            pods: [pod1, pod2, pod3],977            services: [service1_2_3],978            ingresses: [ingress123],979            replicaSets: [replicaSet1],980            statefulSets: [statefulSet1_2, statefulSet3],981            daemonSets: [daemonSet1],982            deployments: [deployment1]983        };984        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}985                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}986                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}987                             autoZoom={false}/>);988        await waitForItemPositionStable(screen.getAllByLabelText('statefulset')[0], waitTimeout);989        hoverItem(screen.getAllByLabelText('statefulset')[0]);990        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');991        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item');992        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');993        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');994        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');995        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');996        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');997        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item-faded');998        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link-faded');999        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item');1000        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link');1001        expect(screen.getAllByLabelText('statefulset link')[1]).toHaveAttribute('class', 'link');1002        expect(screen.getAllByLabelText('statefulset')[1]).toHaveAttribute('class', 'item-faded');1003        expect(screen.getAllByLabelText('statefulset link')[2]).toHaveAttribute('class', 'link-faded');1004        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');1005        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');1006        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');1007        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');1008    }, testTimeout);1009    it('focusing a statefulSet link also focuses its statefulSet and target pod', async () => {1010        const dataSet = {1011            pods: [pod1, pod2, pod3],1012            services: [service1_2_3],1013            ingresses: [ingress123],1014            replicaSets: [replicaSet1],1015            statefulSets: [statefulSet1_2, statefulSet3],1016            daemonSets: [daemonSet1],1017            deployments: [deployment1]1018        };1019        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}1020                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}1021                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}1022                             autoZoom={false}/>);1023        await waitForItemPositionStable(screen.getAllByLabelText('statefulset')[0], waitTimeout);1024        hoverLink(screen.getAllByLabelText('statefulset link')[0]);1025        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');1026        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');1027        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');1028        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');1029        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');1030        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');1031        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');1032        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item-faded');1033        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link-faded');1034        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item');1035        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link');1036        expect(screen.getAllByLabelText('statefulset link')[1]).toHaveAttribute('class', 'link-faded');1037        expect(screen.getAllByLabelText('statefulset')[1]).toHaveAttribute('class', 'item-faded');1038        expect(screen.getAllByLabelText('statefulset link')[2]).toHaveAttribute('class', 'link-faded');1039        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');1040        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');1041        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');1042        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');1043    }, testTimeout);1044    it('focusing a daemonSet also focuses its target pods', async () => {1045        const dataSet = {1046            pods: [pod1, pod2, pod3],1047            services: [service1_2_3],1048            ingresses: [ingress123],1049            replicaSets: [replicaSet1],1050            statefulSets: [statefulSet1],1051            daemonSets: [daemonSet1_2, daemonSet3],1052            deployments: [deployment1]1053        };1054        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}1055                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}1056                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}1057                             autoZoom={false}/>);1058        await waitForItemPositionStable(screen.getAllByLabelText('daemonset')[0], waitTimeout);1059        hoverItem(screen.getAllByLabelText('daemonset')[0]);1060        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');1061        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item');1062        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');1063        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');1064        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');1065        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');1066        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');1067        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item-faded');1068        expect(screen.getAllByLabelText('replicaset link')[0]).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');1072        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link');1073        expect(screen.getAllByLabelText('daemonset link')[1]).toHaveAttribute('class', 'link');1074        expect(screen.getAllByLabelText('daemonset')[1]).toHaveAttribute('class', 'item-faded');1075        expect(screen.getAllByLabelText('daemonset link')[2]).toHaveAttribute('class', 'link-faded');1076        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');1077        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');1078    }, testTimeout);1079    it('focusing a daemonSet link also focuses its statefulSet and target pod', async () => {1080        const dataSet = {1081            pods: [pod1, pod2, pod3],1082            services: [service1_2_3],1083            ingresses: [ingress123],1084            replicaSets: [replicaSet1],1085            statefulSets: [statefulSet1],1086            daemonSets: [daemonSet1_2, daemonSet3],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('daemonset')[0], waitTimeout);1094        hoverLink(screen.getAllByLabelText('daemonset link')[0]);1095        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');1096        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');1097        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');1098        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');1099        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');1100        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');1101        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');1102        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item-faded');1103        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link-faded');1104        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item-faded');1105        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link-faded');1106        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item');1107        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link');1108        expect(screen.getAllByLabelText('daemonset link')[1]).toHaveAttribute('class', 'link-faded');1109        expect(screen.getAllByLabelText('daemonset')[1]).toHaveAttribute('class', 'item-faded');1110        expect(screen.getAllByLabelText('daemonset link')[2]).toHaveAttribute('class', 'link-faded');1111        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');1112        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');1113    }, testTimeout);1114    it('focusing a deployment also focuses its target replicaSets and their target pods', async () => {1115        const dataSet = {1116            pods: [pod1, pod2, pod3, pod4],1117            services: [service1_2_3_4],1118            ingresses: [ingress123],1119            replicaSets: [replicaSet1_2, replicaSet3, replicaSet4],1120            statefulSets: [statefulSet1],1121            daemonSets: [daemonSet1],1122            deployments: [deployment12_3, deployment4]1123        };1124        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}1125                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}1126                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}1127                             autoZoom={false}/>);1128        await waitForItemPositionStable(screen.getAllByLabelText('deployment')[0], waitTimeout);1129        hoverItem(screen.getAllByLabelText('deployment')[0]);1130        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');1131        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item');1132        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item');1133        expect(screen.getAllByLabelText('pod')[3]).toHaveAttribute('class', 'item-faded');1134        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');1135        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');1136        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');1137        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');1138        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item');1139        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link');1140        expect(screen.getAllByLabelText('replicaset link')[1]).toHaveAttribute('class', 'link');1141        expect(screen.getAllByLabelText('replicaset')[1]).toHaveAttribute('class', 'item');1142        expect(screen.getAllByLabelText('replicaset link')[2]).toHaveAttribute('class', 'link');1143        expect(screen.getAllByLabelText('replicaset')[2]).toHaveAttribute('class', 'item-faded');1144        expect(screen.getAllByLabelText('replicaset link')[3]).toHaveAttribute('class', 'link-faded');1145        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item-faded');1146        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link-faded');1147        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');1148        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');1149        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item');1150        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link');1151        expect(screen.getAllByLabelText('deployment link')[1]).toHaveAttribute('class', 'link');1152        expect(screen.getAllByLabelText('deployment')[1]).toHaveAttribute('class', 'item-faded');1153        expect(screen.getAllByLabelText('deployment link')[2]).toHaveAttribute('class', 'link-faded');1154    }, testTimeout);1155    it('focusing a deployment link also focuses its deployment and target replicaSet', async () => {1156        const dataSet = {1157            pods: [pod1, pod2, pod3],1158            services: [service1_2_3],1159            ingresses: [ingress123],1160            replicaSets: [replicaSet1, replicaSet2, replicaSet3],1161            statefulSets: [statefulSet1],1162            daemonSets: [daemonSet1],1163            deployments: [deployment1_2, deployment3]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('deployment')[0], waitTimeout);1170        hoverLink(screen.getAllByLabelText('deployment link')[0]);1171        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item-faded');1172        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');1173        expect(screen.getAllByLabelText('pod')[2]).toHaveAttribute('class', 'item-faded');1174        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item-faded');1175        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link-faded');1176        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item-faded');1177        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link-faded');1178        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item');1179        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link-faded');1180        expect(screen.getAllByLabelText('replicaset')[1]).toHaveAttribute('class', 'item-faded');1181        expect(screen.getAllByLabelText('replicaset link')[1]).toHaveAttribute('class', 'link-faded');1182        expect(screen.getAllByLabelText('replicaset')[2]).toHaveAttribute('class', 'item-faded');1183        expect(screen.getAllByLabelText('replicaset link')[2]).toHaveAttribute('class', 'link-faded');1184        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item-faded');1185        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link-faded');1186        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item-faded');1187        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link-faded');1188        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item');1189        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link');1190        expect(screen.getAllByLabelText('deployment link')[1]).toHaveAttribute('class', 'link-faded');1191        expect(screen.getAllByLabelText('deployment')[1]).toHaveAttribute('class', 'item-faded');1192        expect(screen.getAllByLabelText('deployment link')[2]).toHaveAttribute('class', 'link-faded');1193    }, testTimeout);1194    it('unfocusing an element should remove all fades', async () => {1195        const dataSet = {1196            pods: [pod1],1197            services: [service1],1198            ingresses: [ingress1],1199            replicaSets: [replicaSet1],1200            statefulSets: [statefulSet1],1201            daemonSets: [daemonSet1],1202            deployments: [deployment1]1203        };1204        render(<ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}1205                             onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}1206                             onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet}1207                             autoZoom={false}/>);1208        await waitForItemPositionStable(screen.getAllByLabelText('service')[0], waitTimeout);1209        hoverItem(screen.getAllByLabelText('pod')[0]);1210        hoverAway();1211        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');1212        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item');1213        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link');1214        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item');1215        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link');1216        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item');1217        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link');1218        expect(screen.getAllByLabelText('statefulset')[0]).toHaveAttribute('class', 'item');1219        expect(screen.getAllByLabelText('statefulset link')[0]).toHaveAttribute('class', 'link');1220        expect(screen.getAllByLabelText('daemonset')[0]).toHaveAttribute('class', 'item');1221        expect(screen.getAllByLabelText('daemonset link')[0]).toHaveAttribute('class', 'link');1222        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item');1223        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link');1224    }, testTimeout);1225    it('focused element should stay focused after component update', async () => {1226        const dataSet1 = {1227            pods: [pod1, pod2],1228            services: [service1],1229            ingresses: [ingress1],1230            replicaSets: [replicaSet1],1231            statefulSets: [],1232            daemonSets: [],1233            deployments: [deployment1]1234        };1235        const dataSet2 = {1236            pods: [pod1, pod2],1237            services: [service1, service2],1238            ingresses: [ingress1_2],1239            replicaSets: [replicaSet1],1240            statefulSets: [],1241            daemonSets: [],1242            deployments: [deployment1]1243        };1244        const { rerender } = render(1245            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}1246                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}1247                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet1}1248                          autoZoom={false}/>1249        );1250        await waitForItemPositionStable(screen.getAllByLabelText('service')[0], waitTimeout);1251        hoverItem(screen.getAllByLabelText('service')[0]);1252        rerender(1253            <ClusterGraph onPodFocus={noOpHandler} onServiceFocus={noOpHandler} onIngressFocus={noOpHandler}1254                          onReplicaSetFocus={noOpHandler} onStatefulSetFocus={noOpHandler}1255                          onDaemonSetFocus={noOpHandler} onDeploymentFocus={noOpHandler} dataSet={dataSet2}1256                          autoZoom={false}/>1257        );1258        expect(screen.getAllByLabelText('pod')[0]).toHaveAttribute('class', 'item');1259        expect(screen.getAllByLabelText('pod')[1]).toHaveAttribute('class', 'item-faded');1260        expect(screen.getAllByLabelText('service')[0]).toHaveAttribute('class', 'item');1261        expect(screen.getAllByLabelText('service link')[0]).toHaveAttribute('class', 'link');1262        expect(screen.getAllByLabelText('service')[1]).toHaveAttribute('class', 'item-faded');1263        expect(screen.getAllByLabelText('service link')[1]).toHaveAttribute('class', 'link-faded');1264        expect(screen.getAllByLabelText('ingress')[0]).toHaveAttribute('class', 'item');1265        expect(screen.getAllByLabelText('ingress link')[0]).toHaveAttribute('class', 'link');1266        expect(screen.getAllByLabelText('replicaset')[0]).toHaveAttribute('class', 'item-faded');1267        expect(screen.getAllByLabelText('replicaset link')[0]).toHaveAttribute('class', 'link-faded');1268        expect(screen.getAllByLabelText('deployment')[0]).toHaveAttribute('class', 'item-faded');1269        expect(screen.getAllByLabelText('deployment link')[0]).toHaveAttribute('class', 'link-faded');1270    }, testTimeout);1271    it('drag and dropped services do not move anymore', async () => {1272        const dataSet1 = {1273            pods: [pod1, pod2],1274            services: [service1, service2],1275            ingresses: [],1276            replicaSets: [],1277            statefulSets: [],1278            daemonSets: [],1279            deployments: []1280        };1281        const dataSet2 = {1282            pods: [pod1, pod2, pod3],1283            services: [service1, service2, service3],...

Header.js

Source:Header.js

...64                    expect(header.ariaRole).toBe('presentation');65                });66                67                it("should have presentation role on header el", function() {68                    expect(header).toHaveAttribute('role', 'presentation');69                });70                71                it("should have presentation role on titleCmp el", function() {72                    expect(header.titleCmp).toHaveAttribute('role', 'presentation');73                });74                75                it("should have presentation role on titleCmp textEl", function() {76                    expect(header.titleCmp.textEl).toHaveAttribute('role', 'presentation');77                });78                79                it("should have FocusableContainer disabled", function() {80                    expect(header.enableFocusableContainer).toBe(false);81                });82                83                describe("after adding tools", function() {84                    beforeEach(function() {85                        header.addTool({ type: 'expand' });86                    });87                    88                    it("should change ariaRole to toolbar", function() {89                        expect(header.ariaRole).toBe('toolbar');90                    });91                    92                    it("should change header el role to toolbar", function() {93                        expect(header).toHaveAttribute('role', 'toolbar');94                    });95                    96                    it("should not change titleCmp el role", function() {97                        expect(header.titleCmp).toHaveAttribute('role', 'presentation');98                    });99                    100                    it("should not change titleCmp textEl role", function() {101                        expect(header.titleCmp.textEl).toHaveAttribute('role', 'presentation');102                    });103                    104                    it("should enable FocusableContainer", function() {105                        expect(header.enableFocusableContainer).toBe(true);106                    });107                });108            });109            110            describe("accordion header", function() {111                beforeEach(function() {112                    makeHeader({ isAccordionHeader: true });113                });114                115                it("should have presentation ariaRole", function() {116                    expect(header.ariaRole).toBe('presentation');117                });118                119                it("should have presentation role on header el", function() {120                    expect(header).toHaveAttribute('role', 'presentation');121                });122                123                it("should have tab role on titleCmp el", function() {124                    expect(header.titleCmp).toHaveAttribute('role', 'tab');125                });126                127                it("should have no role on titleCmp textEl", function() {128                    expect(header.titleCmp.textEl).not.toHaveAttribute('role');129                });130                131                it("should have FocusableContainer disabled", function() {132                    expect(header.enableFocusableContainer).toBe(false);133                });134                135                describe("after adding tools", function() {136                    beforeEach(function() {137                        header.addTool({ type: 'pin' });138                    });139                    140                    it("should not change ariaRole", function() {141                        expect(header.ariaRole).toBe('presentation');142                    });143                    144                    it("should not change header el role", function() {145                        expect(header).toHaveAttribute('role', 'presentation');146                    });147                    148                    it("should not change titleCmp el role", function() {149                        expect(header.titleCmp).toHaveAttribute('role', 'tab');150                    });151                    152                    it("should not change titleCmp textEl role", function() {153                        expect(header.titleCmp.textEl).not.toHaveAttribute('role');154                    });155                    156                    it("should not enable FocusableContainer", function() {157                        expect(header.enableFocusableContainer).toBe(false);158                    });159                });160            });161        });162        163        describe("with tools", function() {164            describe("ordinary header", function() {165                describe("with focusable tool(s)", function() {166                    beforeEach(function() {167                        makeHeader({168                            tools: [{169                                type: 'collapse'170                            }]171                        });172                    });173                    174                    it("should have toolbar ariaRole", function() {175                        expect(header.ariaRole).toBe('toolbar');176                    });177                    178                    it("should have toolbar role on header el", function() {179                        expect(header).toHaveAttribute('role', 'toolbar');180                    });181                    182                    it("should have presentation role on titleCmp", function() {183                        expect(header.titleCmp).toHaveAttribute('role', 'presentation');184                    });185                    186                    it("should have presentation role on titleCmp textEl", function() {187                        expect(header.titleCmp.textEl).toHaveAttribute('role', 'presentation');188                    });189                    190                    it("should have FocusableContainer enabled", function() {191                        expect(header.enableFocusableContainer).toBe(true);192                    });193                });194                195                describe("with non-focusable tools", function() {196                    beforeEach(function() {197                        makeHeader({198                            tools: [{199                                type: 'close',200                                focusable: false,201                                tabIndex: null202                            }]203                        });204                    });205                    206                    it("should have presentation role", function() {207                        expect(header.ariaRole).toBe('presentation');208                    });209                    210                    it("should have presentation role on header el", function() {211                        expect(header).toHaveAttribute('role', 'presentation');212                    });213                    214                    it("should have presentation role on titleCmp", function() {215                        expect(header.titleCmp).toHaveAttribute('role', 'presentation');216                    });217                    218                    it("should have presentation role on titleCmp textEl", function() {219                        expect(header.titleCmp.textEl).toHaveAttribute('role', 'presentation');220                    });221                    222                    it("should have FocusableContainer disabled", function() {223                        expect(header.enableFocusableContainer).toBe(false);224                    });225                });226            });227            228            describe("accordion header", function() {229                beforeEach(function() {230                    makeHeader({231                        isAccordionHeader: true,232                        tools: [{233                            type: 'collapse'234                        }]235                    });236                });237                238                it("should have presentation ariaRole", function() {239                    expect(header.ariaRole).toBe('presentation');240                });241                242                it("should have presentation role on header el", function() {243                    expect(header).toHaveAttribute('role', 'presentation');244                });245                246                it("should have tab role on titleCmp el", function() {247                    expect(header.titleCmp).toHaveAttribute('role', 'tab');248                });249                250                it("should have no role on titleCmp textEl", function() {251                    expect(header.titleCmp.textEl).not.toHaveAttribute('role');252                });253                254                it("should have FocusableContainer disabled", function() {255                    expect(header.enableFocusableContainer).toBe(false);256                });257            });258        });259    });...

Menu.test.js

Source:Menu.test.js

...8        <RouterMock>9            <Menu />10        </RouterMock>11    );12    expect(getByText("games")).toHaveAttribute("href", "/");13    expect(getByText("my games")).toHaveAttribute("href", "/my-games/games");14});15test("when user clicks on 'My Games link' it should be redirected to 'my-games' route/component", async () => {16    const RouterMock = ({ children }) => <BrowserRouter>{children}</BrowserRouter>;17    const { container, getByText } = render(18        <RouterMock>19            <Menu />20        </RouterMock>21    );22    act(() => {23        fireEvent.click(getByText("games"));24    });25    expect(container).toHaveTextContent(/games/);26});27test("when user clicks on 'My Games link' it should be redirected to 'my-games' route/component", async () => {28    const RouterMock = ({ children }) => <BrowserRouter>{children}</BrowserRouter>;29    const { container, getByText } = render(30        <RouterMock>31            <Menu />32        </RouterMock>33    );34    act(() => {35        fireEvent.click(getByText("my games"));36    });37    expect(container).toHaveTextContent(/my games/);38});39test("when user clicks on 'Genres' it should appear submenu with Genres", async () => {40    const RouterMock = ({ children }) => <BrowserRouter>{children}</BrowserRouter>;41    const { container, getByText } = render(42        <RouterMock>43            <Menu />44        </RouterMock>45    );46    act(() => {47        fireEvent.click(getByText("genres"));48    });49    50    expect(container).toHaveTextContent(/genres/);51    expect(getByText("Action")).toHaveAttribute("href", "/genre/4/Action");52    expect(getByText("Casual")).toHaveAttribute("href", "/genre/40/Casual");53    expect(getByText("Educational")).toHaveAttribute("href", "/genre/34/Educational");54    expect(getByText("Sports")).toHaveAttribute("href", "/genre/15/Sports");55});56test("when user clicks on 'Platforms' it should appear submenu with Platforms", async () => {57    const RouterMock = ({ children }) => <BrowserRouter>{children}</BrowserRouter>;58    const { container, getByText } = render(59        <RouterMock>60            <Menu />61        </RouterMock>62    );63    act(() => {64        fireEvent.click(getByText("platforms"));65    });66    67    expect(container).toHaveTextContent(/platforms/);68    expect(getByText("PlayStation 5")).toHaveAttribute("href", "/platform/187/PlayStation%205");69    expect(getByText("PSP")).toHaveAttribute("href", "/platform/17/PSP");70    expect(getByText("Linux")).toHaveAttribute("href", "/platform/6/Linux");71    expect(getByText("Xbox Series S/X")).toHaveAttribute("href", "/platform/186/Xbox%20Series%20S%2FX");...

index.test.js

Source:index.test.js

...20  it("renders with the role of an <img/>", () => {21    render(<AmpImg {...imgProps} />);22    const ampImg = screen.getByRole("img");23    expect(ampImg).toBeInTheDocument();24    expect(ampImg).toHaveAttribute("alt", "This is so alt");25    expect(ampImg).toHaveAttribute("src", "useTheSource");26    expect(ampImg).toHaveAttribute("width", "1");27    expect(ampImg).toHaveAttribute("height", "1");28    expect(ampImg).toHaveAttribute("layout", "no");29  });30});31describe("AmpUserNotification", () => {32  it("renders AmpUserNotification with default values", () => {33    render(<AmpUserNotification />);34    const container = document.querySelector("#amp-user-notification1");35    expect(container).toBeInTheDocument();36    expect(container).toHaveAttribute("layout", "nodisplay");37    expect(container).toHaveAttribute("id", "amp-user-notification1");38    // BEWARE: Renderer doesn't recognize classNames as classes on amp components39    expect(container).toHaveAttribute("className", "");40  });41  it("renders AmpUserNotification values from props", () => {42    render(<AmpUserNotification {...notificationProps} />);43    const container = document.querySelector("#justasillynotification");44    expect(container).toBeInTheDocument();45    expect(container).toHaveAttribute("layout", "somedisplay");46    expect(container).toHaveAttribute("id", "justasillynotification");47    // BEWARE: Renderer doesn't recognize classNames as classes on amp components48    expect(container).toHaveAttribute("className", "sillyclassname");49  });50  it("renders AmpUserNotification button with default values", () => {51    render(<AmpUserNotification />);52    const button = screen.getByRole("button");53    expect(button).toBeInTheDocument();54    expect(button).toHaveAttribute("class", "");55  });56  it("renders AmpUserNotification button with custom values", () => {57    render(<AmpUserNotification {...notificationProps} />);58    const button = screen.getByRole("button");59    expect(button).toBeInTheDocument();60    expect(button).toHaveClass("wantcookies");61    expect(button).toHaveTextContent("More cookies?");62  });...

Details.test.js

Source:Details.test.js

...11        </RouterMock>)12    expect(container).toHaveTextContent("Xbox 360");13    expect(container).toHaveTextContent("Linux");14    expect(container).toHaveTextContent("Xbox One");15    expect(getByText("PlayStation 3")).toHaveAttribute("href", "/platform/16/PlayStation%203");16    expect(getByText("PC")).toHaveAttribute("href", "/platform/4/PC");17    expect(getByText("macOS")).toHaveAttribute("href", "/platform/5/macOS");18});19test("Validate Details for Genres", async () => {20    const RouterMock = ({ children }) => <BrowserRouter>{children}</BrowserRouter>;21    const { container, getByText } = render(22        <RouterMock>23            <Details title="Genres" arr={responseById.genres} path="genre" />24        </RouterMock>)25    expect(container).toHaveTextContent("Shooter");26    expect(container).toHaveTextContent("Puzzle");27    expect(getByText("Shooter")).toHaveAttribute("href", "/genre/2/Shooter");28    expect(getByText("Puzzle")).toHaveAttribute("href", "/genre/7/Puzzle");29});30test("Validate Details for Tags", async () => {31    const RouterMock = ({ children }) => <BrowserRouter>{children}</BrowserRouter>;32    const { container, getByText } = render(33        <RouterMock>34            <Details title="Tags" arr={responseById.tags} path="tag" />35        </RouterMock>)36    expect(container).toHaveTextContent("Singleplayer");37    expect(container).toHaveTextContent("Multiplayer");38    expect(container).toHaveTextContent("Steam Cloud");39    expect(container).toHaveTextContent("cooperative");40    expect(getByText("Steam Achievements")).toHaveAttribute("href", "/tag/40847/Steam%20Achievements");41    expect(getByText("Atmospheric")).toHaveAttribute("href", "/tag/13/Atmospheric");42    expect(getByText("Co-op")).toHaveAttribute("href", "/tag/18/Co-op");43    expect(getByText("First-Person")).toHaveAttribute("href", "/tag/8/First-Person");...

to-have-attribute.js

Source:to-have-attribute.js

...5      OK6    </button>7    <svg data-testid="svg-element" width="12"></svg>8  `)9  expect(queryByTestId('ok-button')).toHaveAttribute('disabled')10  expect(queryByTestId('ok-button')).toHaveAttribute('type')11  expect(queryByTestId('ok-button')).not.toHaveAttribute('class')12  expect(queryByTestId('ok-button')).toHaveAttribute('type', 'submit')13  expect(queryByTestId('ok-button')).not.toHaveAttribute('type', 'button')14  expect(queryByTestId('svg-element')).toHaveAttribute('width')15  expect(queryByTestId('svg-element')).toHaveAttribute('width', '12')16  expect(queryByTestId('ok-button')).not.toHaveAttribute('height')17  expect(() =>18    expect(queryByTestId('ok-button')).not.toHaveAttribute('disabled'),19  ).toThrowError()20  expect(() =>21    expect(queryByTestId('ok-button')).not.toHaveAttribute('type'),22  ).toThrowError()23  expect(() =>24    expect(queryByTestId('ok-button')).toHaveAttribute('class'),25  ).toThrowError()26  expect(() =>27    expect(queryByTestId('ok-button')).not.toHaveAttribute('type', 'submit'),28  ).toThrowError()29  expect(() =>30    expect(queryByTestId('ok-button')).toHaveAttribute('type', 'button'),31  ).toThrowError()32  expect(() =>33    expect(queryByTestId('svg-element')).not.toHaveAttribute('width'),34  ).toThrowError()35  expect(() =>36    expect(queryByTestId('svg-element')).not.toHaveAttribute('width', '12'),37  ).toThrowError()38  expect(() =>39    expect({thisIsNot: 'an html element'}).not.toHaveAttribute(),40  ).toThrowError()41  // Asymmetric matchers42  expect(queryByTestId('ok-button')).toHaveAttribute(43    'type',44    expect.stringContaining('sub'),45  )46  expect(queryByTestId('ok-button')).toHaveAttribute(47    'type',48    expect.stringMatching(/sub*/),49  )50  expect(queryByTestId('ok-button')).toHaveAttribute('type', expect.anything())51  expect(() =>52    expect(queryByTestId('ok-button')).toHaveAttribute(53      'type',54      expect.not.stringContaining('sub'),55    ),56  ).toThrowError()...

Using AI Code Generation

1const {chromium} = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.click('input[aria-label="Search"]');7  await page.fill('input[aria-label="Search"]', 'playwright');

Using AI Code Generation

1const { test, expect } = require('@playwright/test');2test('should have attribute', async ({ page }) => {3  await expect(page.locator('a')).toHaveAttribute('href');4});5const { test, expect } = require('@playwright/test');6test('should have attribute', async ({ page }) => {7});8const { test, expect } = require('@playwright/test');9test('should have attribute', async ({ page }) => {10});11I am trying to use the Playwright-Jest API but I am not sure how to import it. Can you please help me with that?12I am trying to use the Playwright-Jest API but I am not sure how to import it. Can you please help me with that?13const { test, expect

Using AI Code Generation

1const { test, expect } = require('@playwright/test');2test('test', async ({ page }) => {3  const element = await page.waitForSelector('text=Get Started');4  await expect(element).toHaveAttribute('href', '/docs/intro');5});6const { test, expect } = require('@playwright/test');7test('test', async ({ page }) => {8  const element = await page.waitForSelector('text=Get Started');9  await expect(element).toHaveAttribute('href', '/docs/intro');10});11const { test, expect } = require('@playwright/test');12test('test', async ({ page }) => {13  const element = await page.waitForSelector('text=Get Started');14  await expect(element).toHaveAttribute('href', '/docs/intro');15});16const { test, expect } = require('@playwright/test');17test('test', async ({ page }) => {18  const element = await page.waitForSelector('text=Get Started');19  await expect(element).toHaveAttribute('href', '/docs/intro');20});21const { test, expect } = require('@playwright/test');22test('test', async ({ page }) => {23  const element = await page.waitForSelector('text=Get Started');24  await expect(element).toHaveAttribute('href', '/docs/intro');25});26const { test, expect } = require('@playwright/test');27test('test', async ({ page }) => {28  const element = await page.waitForSelector('text=Get Started');29  await expect(element).toHaveAttribute('href', '/docs/intro');30});

Using AI Code Generation

1const { test, expect } = require('@playwright/test');2test('test', async ({ page }) => {3  const element = await page.$('text="Get started"');4  expect(element).toHaveAttribute('href', '/docs/intro');5});6const { test, expect } = require('@playwright/test');7test('test', async ({ page }) => {8  expect(page).toHaveAttribute('text="Get started"', 'href', '/docs/intro');9});10const { test, expect } = require('@playwright/test');11test('test', async ({ page }) => {12  const element = await page.$('text="Get started"');13  expect(element).toHaveAttribute('href', '/docs/intro');14});15const { test, expect } = require('@playwright/test');16test('test', async ({ page }) => {17  expect(page).toHaveAttribute('text="Get started"', 'href', '/docs/intro');18});19import { test, expect } from '@playwright/test';20test('test', async ({ page }) => {21  const element = await page.$('text="Get started"');22  expect(element).toHaveAttribute('href', '/docs/intro');23});24import { test, expect } from '@playwright/test';25test('test', async ({ page }) => {26  expect(page).toHaveAttribute('text="Get started"', 'href', '/docs/intro');27});28import { test, expect } from '@playwright/test';29test('test', async ({ page }) => {30  const element = await page.$('

Using AI Code Generation

1const { test, expect } = require('@playwright/test');2test('check if the attribute exists', async ({ page }) => {3const link = await page.locator('text=Docs');4});5test('check if the attribute exists', async ({ page }) => {6const link = await page.locator('text=Docs');7});

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.