Skip to content

Commit

Permalink
chore(Canvas): Add missing unit test for Canvas.tsx
Browse files Browse the repository at this point in the history 
Add missing test for delete flow functionality through the canvas.

relates: #974
  • Loading branch information
@lordrip
lordrip committed Apr 23, 2024
1 parent 08f0763 commit 8959e4b
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 52 deletions.
87 changes: 56 additions & 31 deletions packages/ui/src/components/Visualization/Canvas/Canvas.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { render, waitFor, fireEvent, screen} from '@testing-library/react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
import { CamelRouteResource, KameletResource } from '../../../models/camel';
import { CamelRouteVisualEntity } from '../../../models/visualization/flows';
import { EntitiesContext } from '../../../providers';
import { CatalogModalContext } from '../../../providers/catalog-modal.provider';
import { VisibleFLowsContextResult } from '../../../providers/visible-flows.provider';
import { CamelRouteResource, KameletResource } from '../../../models/camel';
import { VisibleFLowsContextResult, VisibleFlowsContext } from '../../../providers/visible-flows.provider';
import { TestProvidersWrapper } from '../../../stubs';
import { camelRouteJson } from '../../../stubs/camel-route';
import { kameletJson } from '../../../stubs/kamelet-route';
import { TestProvidersWrapper } from '../../../stubs';
import { act } from 'react-dom/test-utils';
import { Canvas } from './Canvas';

describe('Canvas', () => {
Expand Down Expand Up @@ -43,32 +44,44 @@ describe('Canvas', () => {
});

it('should be able to delete the routes', async () => {
const camelRouteResource = new CamelRouteResource(camelRouteJson);
const routeEntity = camelRouteResource.getVisualEntities();
const removeSpy = jest.spyOn(camelRouteResource, 'removeEntity');
const camelResource = new CamelRouteResource(camelRouteJson);
const routeEntity = camelResource.getVisualEntities();
const removeSpy = jest.spyOn(camelResource, 'removeEntity');
const setCurrentSchemaTypeSpy = jest.fn();
const updateEntitiesFromCamelResourceSpy = jest.fn();
const updateSourceCodeFromEntitiesSpy = jest.fn();

render(
<TestProvidersWrapper
visibleFlows={
{ visibleFlows: { ['route-8888']: true } } as unknown as VisibleFLowsContextResult
}
>
<Canvas entities={routeEntity} />
</TestProvidersWrapper>,
<EntitiesContext.Provider
value={{
camelResource,
entities: camelResource.getEntities(),
visualEntities: camelResource.getVisualEntities(),
currentSchemaType: camelResource.getType(),
setCurrentSchemaType: setCurrentSchemaTypeSpy,
updateEntitiesFromCamelResource: updateEntitiesFromCamelResourceSpy,
updateSourceCodeFromEntities: updateSourceCodeFromEntitiesSpy,
}}
>
<VisibleFlowsContext.Provider
value={{ visibleFlows: { ['route-8888']: true } } as unknown as VisibleFLowsContextResult}
>
<Canvas entities={routeEntity} />
</VisibleFlowsContext.Provider>
</EntitiesContext.Provider>,
);

// Right click anywhere on the container label
const route = screen.getByText('route-8888');
// const route = document.querySelectorAll('.pf-topology__group');
await act(async() => {
await act(async () => {
fireEvent.contextMenu(route);
});

// click the Delete ContextMenuItem
const deleteRoute = screen.getByRole('menuitem', {name: 'Delete'});
// Click the Delete ContextMenuItem
const deleteRoute = screen.getByRole('menuitem', { name: 'Delete' });
expect(deleteRoute).toBeInTheDocument();

await act(() => {
await act(async () => {
fireEvent.click(deleteRoute);
});

Expand All @@ -81,33 +94,45 @@ describe('Canvas', () => {
const kameletResource = new KameletResource(kameletJson);
const kameletEntity = kameletResource.getVisualEntities();
const removeSpy = jest.spyOn(kameletResource, 'removeEntity');
const setCurrentSchemaTypeSpy = jest.fn();
const updateEntitiesFromCamelResourceSpy = jest.fn();
const updateSourceCodeFromEntitiesSpy = jest.fn();

render(
<TestProvidersWrapper
visibleFlows={
{ visibleFlows: { ['user-source']: true } } as unknown as VisibleFLowsContextResult
}
>
<Canvas entities={kameletEntity} />
</TestProvidersWrapper>,
<EntitiesContext.Provider
value={{
camelResource: kameletResource,
entities: kameletResource.getEntities(),
visualEntities: kameletResource.getVisualEntities(),
currentSchemaType: kameletResource.getType(),
setCurrentSchemaType: setCurrentSchemaTypeSpy,
updateEntitiesFromCamelResource: updateEntitiesFromCamelResourceSpy,
updateSourceCodeFromEntities: updateSourceCodeFromEntitiesSpy,
}}
>
<VisibleFlowsContext.Provider
value={{ visibleFlows: { ['user-source']: true } } as unknown as VisibleFLowsContextResult}
>
<Canvas entities={kameletEntity} />
</VisibleFlowsContext.Provider>
</EntitiesContext.Provider>,
);

// Right click anywhere on the container label
const kamelet = screen.getByText('user-source');
// const route = document.querySelectorAll('.pf-topology__group');
await act(async() => {
await act(async () => {
fireEvent.contextMenu(kamelet);
});

// click the Delete ContextMenuItem
const deleteKamelet = screen.getByRole('menuitem', {name: 'Delete'});
const deleteKamelet = screen.getByRole('menuitem', { name: 'Delete' });
expect(deleteKamelet).toBeInTheDocument();

await act(() => {
await act(async () => {
fireEvent.click(deleteKamelet);
});

screen.debug();
// Check if the remove function is called
expect(removeSpy).toHaveBeenCalled();
});
Expand Down
42 changes: 21 additions & 21 deletions packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,10 @@ exports[`Canvas Empty state should render empty state when there is no visible f
>
<div
class="pf-v5-c-toolbar"
data-ouia-component-id="OUIA-Generated-Toolbar-5"
data-ouia-component-id="OUIA-Generated-Toolbar-7"
data-ouia-component-type="PF5/Toolbar"
data-ouia-safe="true"
id="pf-topology-control-bar-4"
id="pf-topology-control-bar-8"
style="background-color: transparent; padding: 0px;"
>
<div
Expand All @@ -108,7 +108,7 @@ exports[`Canvas Empty state should render empty state when there is no visible f
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
data-ouia-component-id="OUIA-Generated-Button-tertiary-20"
data-ouia-component-id="OUIA-Generated-Button-tertiary-28"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="zoom-in"
Expand Down Expand Up @@ -144,7 +144,7 @@ exports[`Canvas Empty state should render empty state when there is no visible f
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
data-ouia-component-id="OUIA-Generated-Button-tertiary-21"
data-ouia-component-id="OUIA-Generated-Button-tertiary-29"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="zoom-out"
Expand Down Expand Up @@ -180,7 +180,7 @@ exports[`Canvas Empty state should render empty state when there is no visible f
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
data-ouia-component-id="OUIA-Generated-Button-tertiary-22"
data-ouia-component-id="OUIA-Generated-Button-tertiary-30"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="fit-to-screen"
Expand Down Expand Up @@ -216,7 +216,7 @@ exports[`Canvas Empty state should render empty state when there is no visible f
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
data-ouia-component-id="OUIA-Generated-Button-tertiary-23"
data-ouia-component-id="OUIA-Generated-Button-tertiary-31"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="reset-view"
Expand Down Expand Up @@ -413,10 +413,10 @@ exports[`Canvas Empty state should render empty state when there is no visual en
>
<div
class="pf-v5-c-toolbar"
data-ouia-component-id="OUIA-Generated-Toolbar-4"
data-ouia-component-id="OUIA-Generated-Toolbar-6"
data-ouia-component-type="PF5/Toolbar"
data-ouia-safe="true"
id="pf-topology-control-bar-3"
id="pf-topology-control-bar-7"
style="background-color: transparent; padding: 0px;"
>
<div
Expand All @@ -437,7 +437,7 @@ exports[`Canvas Empty state should render empty state when there is no visual en
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
data-ouia-component-id="OUIA-Generated-Button-tertiary-16"
data-ouia-component-id="OUIA-Generated-Button-tertiary-24"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="zoom-in"
Expand Down Expand Up @@ -473,7 +473,7 @@ exports[`Canvas Empty state should render empty state when there is no visual en
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
data-ouia-component-id="OUIA-Generated-Button-tertiary-17"
data-ouia-component-id="OUIA-Generated-Button-tertiary-25"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="zoom-out"
Expand Down Expand Up @@ -509,7 +509,7 @@ exports[`Canvas Empty state should render empty state when there is no visual en
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
data-ouia-component-id="OUIA-Generated-Button-tertiary-18"
data-ouia-component-id="OUIA-Generated-Button-tertiary-26"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="fit-to-screen"
Expand Down Expand Up @@ -545,7 +545,7 @@ exports[`Canvas Empty state should render empty state when there is no visual en
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
data-ouia-component-id="OUIA-Generated-Button-tertiary-19"
data-ouia-component-id="OUIA-Generated-Button-tertiary-27"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="reset-view"
Expand Down Expand Up @@ -2462,10 +2462,10 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
>
<div
class="pf-v5-c-toolbar"
data-ouia-component-id="OUIA-Generated-Toolbar-3"
data-ouia-component-id="OUIA-Generated-Toolbar-5"
data-ouia-component-type="PF5/Toolbar"
data-ouia-safe="true"
id="pf-topology-control-bar-2"
id="pf-topology-control-bar-6"
style="background-color: transparent; padding: 0px;"
>
<div
Expand All @@ -2486,7 +2486,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
data-ouia-component-id="OUIA-Generated-Button-tertiary-9"
data-ouia-component-id="OUIA-Generated-Button-tertiary-17"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="zoom-in"
Expand Down Expand Up @@ -2522,7 +2522,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
data-ouia-component-id="OUIA-Generated-Button-tertiary-10"
data-ouia-component-id="OUIA-Generated-Button-tertiary-18"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="zoom-out"
Expand Down Expand Up @@ -2558,7 +2558,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
data-ouia-component-id="OUIA-Generated-Button-tertiary-11"
data-ouia-component-id="OUIA-Generated-Button-tertiary-19"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="fit-to-screen"
Expand Down Expand Up @@ -2594,7 +2594,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
data-ouia-component-id="OUIA-Generated-Button-tertiary-12"
data-ouia-component-id="OUIA-Generated-Button-tertiary-20"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="reset-view"
Expand Down Expand Up @@ -2630,7 +2630,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
data-ouia-component-id="OUIA-Generated-Button-tertiary-13"
data-ouia-component-id="OUIA-Generated-Button-tertiary-21"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="topology-control-bar-h_layout-button"
Expand Down Expand Up @@ -2664,7 +2664,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
data-ouia-component-id="OUIA-Generated-Button-tertiary-14"
data-ouia-component-id="OUIA-Generated-Button-tertiary-22"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="topology-control-bar-v_layout-button"
Expand Down Expand Up @@ -2698,7 +2698,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
data-ouia-component-id="OUIA-Generated-Button-tertiary-15"
data-ouia-component-id="OUIA-Generated-Button-tertiary-23"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="topology-control-bar-catalog-button"
Expand Down

0 comments on commit 8959e4b

Please sign in to comment.