Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(pci-load-balancer): [Load Balancer 3AZ] - Configuration page - Add 3-AZ tag #14692

Merged
merged 3 commits into from
Dec 20, 2024
+86 −437
Merged

feat(pci-load-balancer): [Load Balancer 3AZ] - Configuration page - Add 3-AZ tag #14692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
101e460
feat(pci.load-balancer): use regionselector for loadbalancer
Tsiorifamonjena Dec 19, 2024
15eefe1
feat(pci.load-balancer): clean useless code
Tsiorifamonjena Dec 20, 2024
b44cfeb
feat(pci.load-balancer): fix unit test
Tsiorifamonjena Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/manager/apps/pci-load-balancer/src/api/hook/useNetwork.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ export const useGetPrivateNetworkSubnets = (
],
queryFn: () => getPrivateNetworkSubnets(projectId, region, networkId),
enabled: !!projectId && !!region && !!networkId,
throwOnError: true,
});

const list = useMemo(() => {
Expand Down
3 changes: 0 additions & 3 deletions packages/manager/apps/pci-load-balancer/src/pages/create/Create.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { useTranslation } from 'react-i18next';
import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import { useEffect } from 'react';
import { useMedia } from 'react-use';
import { useCreateStore } from './store';
import {
useGetPrivateNetworkSubnets,
Expand All @@ -32,7 +31,6 @@ import { useGetFloatingIps } from '@/api/hook/useFloatingIps';
export default function CreatePage(): JSX.Element {
const { me } = useMe();
const { data: addons, isPending: isAddonsPending } = useGetAddons();
const isMobile = useMedia(`(max-width: 768px)`);

const projectHref = useProjectUrl('public-cloud');

Expand Down Expand Up @@ -161,7 +159,6 @@ export default function CreatePage(): JSX.Element {
isLoading={isRegionsPending}
regions={regions}
ovhSubsidiary={me?.ovhSubsidiary}
isMobile={isMobile}
/>
<IpStep
floatingIps={filteredFloatingIps}
Expand Down
263 changes: 11 additions & 252 deletions packages/manager/apps/pci-load-balancer/src/pages/create/steps/region/RegionStep.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,15 @@ import { StepComponent, TStepProps } from '@ovh-ux/manager-react-components';
import { render, renderHook } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
import { OsdsLink, OsdsSpinner } from '@ovhcloud/ods-components/react';
import {
ShapesInputComponent,
TShapesInputProps,
} from '@ovh-ux/manager-pci-common';
import { wrapper } from '@/wrapperRenders';
import { RegionStep, TRegionStepProps } from './RegionStep';
import { StepsEnum, TAddon, useCreateStore } from '@/pages/create/store';
import { StepsEnum, useCreateStore } from '@/pages/create/store';
import { REGION_AVAILABILITY_LINK } from '@/constants';
import { TRegion } from '@/api/hook/useRegions';
import { useTracking } from '../../hooks/useTracking';
import { LabelComponent } from '@/pages/create/steps/region/components/Label.component';
import { StackLabelComponent } from '@/pages/create/steps/region/components/StackLabel.component';
import { StackTitleComponent } from '@/pages/create/steps/region/components/StackTitle.component';
import { GroupLabelComponent } from '@/pages/create/steps/region/components/GroupLabel.component';

vi.mock('@ovh-ux/manager-pci-common', () => ({
useProject: vi.fn().mockReturnValue({ data: { project_id: 'project_id' } }),
RegionSelector: () => <div />,
}));

vi.mock('react-i18next', async () => {
const { ...rest } = await vi.importActual('react-i18next');
Expand Down Expand Up @@ -68,38 +63,21 @@ vi.mock('@ovh-ux/manager-react-components', async () => {
.mockImplementation(ActualStepComponent as typeof StepComponent),
};
});
vi.mock('@ovh-ux/manager-pci-common', async () => {
const {
ShapesInputComponent: ActualShapesInputComponent,
...rest
} = await vi.importActual('@ovh-ux/manager-pci-common');
return {
...rest,
ShapesInputComponent: vi
.fn()
.mockImplementation(
ActualShapesInputComponent as typeof ShapesInputComponent,
),
};
});

const renderStep = (
{
isLoading = false,
isMobile = false,
regions = undefined,
ovhSubsidiary = undefined,
}: Partial<TRegionStepProps> = {
isLoading: false,
isMobile: false,
regions: undefined,
ovhSubsidiary: undefined,
},
) =>
render(
<RegionStep
isLoading={isLoading}
isMobile={isMobile}
regions={regions}
ovhSubsidiary={ovhSubsidiary}
/>,
Expand Down Expand Up @@ -128,7 +106,7 @@ describe('RegionStep', () => {
const call = calls[calls.length - 1][0] as TStepProps;

expect(call.title).toBe(
'load-balancer/create | octavia_load_balancer_create_region_title',
'load-balancer/create,pci-common | octavia_load_balancer_create_region_title',
);

expect(call.isOpen).toBe(true);
Expand All @@ -140,25 +118,25 @@ describe('RegionStep', () => {
expect(call.order).toBe(2);

expect(call.next.label).toBe(
'pci-common | common_stepper_next_button_label',
'load-balancer/create,pci-common | pci-common:common_stepper_next_button_label',
);
expect(call.next.isDisabled).toBe(true);

expect(call.edit.label).toBe(
'pci-common | common_stepper_modify_this_step',
'load-balancer/create,pci-common | pci-common:common_stepper_modify_this_step',
);
});

it('should render intro', () => {
const { getByText } = renderStep();
expect(
getByText(
'load-balancer/create | octavia_load_balancer_create_region_intro',
'load-balancer/create,pci-common | octavia_load_balancer_create_region_intro',
),
).toBeInTheDocument();
expect(
getByText(
'load-balancer/create | octavia_load_balancer_create_region_link',
'load-balancer/create,pci-common | octavia_load_balancer_create_region_link',
),
).toBeInTheDocument();
});
Expand Down Expand Up @@ -199,225 +177,6 @@ describe('RegionStep', () => {

expect(getByTestId('spinner')).toBeInTheDocument();
});

describe('isLoading is false', () => {
beforeAll(() => {
((ShapesInputComponent as unknown) as Mock).mockImplementationOnce(
() => <div data-testid="input"></div>,
);
});
it('should show input if regions are not pending and data is defined', () => {
const regions: TRegion[] = [
{ name: 'test', isEnabled: true, continent: 'Europe' },
{ name: 'test2', isEnabled: true, continent: 'Asia' },
] as Array<TRegion>;

const { result } = renderStore();

act(() => result.current.set.addon({ code: 's' } as TAddon));

renderStep({ regions: new Map([['s', regions]]) });

const { calls } = (ShapesInputComponent as Mock).mock;
const call = calls[calls.length - 1][0] as TShapesInputProps<TRegion>;

expect(call.items).toEqual(regions);
expect(call.value).toBe(null);

expect(call.item.LabelComponent).toEqual(LabelComponent);
expect(call.item.getId({ name: 'test' } as TRegion)).toBe('test');
expect(call.item.isDisabled({ isEnabled: true } as TRegion)).toBe(
false,
);

expect(call.stack.by({ macroName: 'test' } as TRegion)).toBe('test');
expect(call.stack.by({} as TRegion)).toBe('');
expect(call.stack.LabelComponent).toEqual(StackLabelComponent);
expect(call.stack.TitleComponent).toEqual(StackTitleComponent);

expect(call.group.by({ continent: 'Europe' } as TRegion)).toBe(
'Europe',
);
expect(call.group.LabelComponent).toEqual(GroupLabelComponent);
});
});
});
});

describe('Actions', () => {
beforeAll(() => {
(ShapesInputComponent as Mock).mockImplementationOnce(() => (
<div data-testid="input"></div>
));
});

describe('next', () => {
describe('render', () => {
test('Next button should be disabled if region is not set', () => {
const { getByText } = renderStep();

const nextButton = getByText(
'pci-common | common_stepper_next_button_label',
);
expect(
nextButton.attributes.getNamedItem('disabled').value,
).toBeTruthy();
});

test('Next button should be enabled if region is set', () => {
(ShapesInputComponent as Mock).mockImplementationOnce(() => (
<div data-testid="input"></div>
));

const { result } = renderStore();
act(() => result.current.set.region({} as TRegion));

const { getByText } = renderStep();
const nextButton = getByText(
'pci-common | common_stepper_next_button_label',
);
expect(
nextButton.attributes.getNamedItem('disabled')?.value,
).toBeFalsy();
});
});
describe('click', () => {
beforeEach(() => {
const { result } = renderStore();
act(() => {
result.current.set.region({} as TRegion);
});
});
it('Should track on next click', async () => {
(ShapesInputComponent as Mock).mockImplementationOnce(() => (
<div data-testid="input"></div>
));
const trackStepSpy = vi.fn();

(useTracking as Mock).mockImplementationOnce(() => ({
trackStep: trackStepSpy,
}));

const { result } = renderStore();

act(() => {
result.current.set.region({} as TRegion);
});

const { getByText } = renderStep();

const nextButton = getByText(
'pci-common | common_stepper_next_button_label',
);

act(() => nextButton.click());

expect(trackStepSpy).toHaveBeenCalledWith(2);
});

it('Should prepare next step on next click', async () => {
(ShapesInputComponent as Mock).mockImplementationOnce(() => (
<div data-testid="input"></div>
));

const { result } = renderStore();

act(() => {
result.current.set.region({} as TRegion);
});

const { getByText } = renderStep();

const nextButton = getByText(
'pci-common | common_stepper_next_button_label',
);

const { check, lock, open } = { ...result.current };

result.current.check = vi.fn();
result.current.lock = vi.fn();
result.current.open = vi.fn();

act(() => nextButton.click());

expect(result.current.check).toHaveBeenCalledWith(StepsEnum.REGION);
expect(result.current.lock).toHaveBeenCalledWith(StepsEnum.REGION);
expect(result.current.open).toHaveBeenCalledWith(StepsEnum.IP);

result.current.check = check;
result.current.lock = lock;
result.current.open = open;
});
});
});

describe('edit', () => {
describe('render', () => {
it('should not display if step is not checked', () => {
const { queryByText } = renderStep();

const editButton = queryByText(
'pci-common | common_stepper_modify_this_step',
);
expect(editButton).not.toBeInTheDocument();
});
it('should have the right label', () => {
const { result } = renderStore();
act(() => result.current.lock(StepsEnum.REGION));

((OsdsLink as unknown) as Mock).mockImplementation(
({ href, ...props }) => (
<a href={href} data-testid="link" {...props}></a>
),
);

const { queryByText } = renderStep();

const editButton = queryByText(
'pci-common | common_stepper_modify_this_step',
);

expect(editButton).toBeInTheDocument();
});
});

describe('click', () => {
it('should prepare steps on click', () => {
const { result } = renderStore();

const { unlock, uncheck, open, reset } = { ...result.current };

act(() => result.current.lock(StepsEnum.REGION));

result.current.unlock = vi.fn();
result.current.uncheck = vi.fn();
result.current.open = vi.fn();
result.current.reset = vi.fn();

const { getByText } = renderStep();

const editButton = getByText(
'pci-common | common_stepper_modify_this_step',
);

act(() => editButton.click());

expect(result.current.unlock).toHaveBeenCalledWith(StepsEnum.REGION);
expect(result.current.uncheck).toHaveBeenCalledWith(StepsEnum.REGION);
expect(result.current.open).toHaveBeenCalledWith(StepsEnum.REGION);
expect(result.current.reset).toHaveBeenCalledWith(
StepsEnum.IP,
StepsEnum.NETWORK,
StepsEnum.INSTANCE,
StepsEnum.NAME,
);

result.current.unlock = unlock;
result.current.uncheck = uncheck;
result.current.open = open;
result.current.reset = reset;
});
});
});
});
});
Loading
Loading