Skip to content

update: Refine cypress interceptors #810

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

Merged
ashotnazaryan merged 1 commit into from
Jan 11, 2025
Merged

update: Refine cypress interceptors #810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
20 changes: 16 additions & 4 deletions cypress/e2e/BranchManagement.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,10 @@ describe('Branch Management Tests', () => {
getTestSelectorByModule(Module.branchManagement, SubModule.branchDetails, 'form-action-button').should('contain.text', 'Save');
getTestSelectorByModule(Module.branchManagement, SubModule.branchDetails, 'form-action-button').click();

interceptFetchBranchesRequest(1, 5, '', 'fetchMultipleBranchesRequest', 'branches-multiple');
interceptFetchBranchesRequest(
{ pageNumber: 1, pageSize: 5, search: '' },
{ alias: 'fetchMultipleBranchesRequest', fixture: 'branches-multiple' }
);
cy.wait('@createBranchRequest');
cy.wait('@fetchMultipleBranchesRequest');

Expand Down Expand Up @@ -157,9 +160,15 @@ describe('Branch Management Tests', () => {
getTestSelectorByModule(Module.branchManagement, SubModule.branchDetails, 'form-action-button').should('have.attr', 'disabled');
getLoadingButtonLoadingIcon(Module.branchManagement, SubModule.branchDetails, 'form-action-button').should('be.visible');

interceptFetchBranchesRequest(1, 5, '', 'fetchMultipleBranchesRequest', 'branches-multiple');
interceptFetchBranchesRequest(
{ pageNumber: 1, pageSize: 5, search: '' },
{ alias: 'fetchMultipleBranchesRequest', fixture: 'branches-multiple' }
);
cy.wait('@editBranchRequest');
interceptFetchBranchesRequest(1, 5, '', 'fetchMultipleUpdatedBranchesRequest', 'branches-multiple-updated');
interceptFetchBranchesRequest(
{ pageNumber: 1, pageSize: 5, search: '' },
{ alias: 'fetchMultipleUpdatedBranchesRequest', fixture: 'branches-multiple-updated' }
);

cy.url().should('include', '/manage/branches');

Expand All @@ -176,7 +185,10 @@ describe('Branch Management Tests', () => {
});

it('should be able to navigate back when the back button is clicked', () => {
interceptFetchBranchesRequest(1, 5, '', 'fetchMultipleBranchesRequest', 'branches');
interceptFetchBranchesRequest(
{ pageNumber: 1, pageSize: 5, search: '' },
{ alias: 'fetchMultipleBranchesRequest', fixture: 'branches' }
);
interceptFetchBranchByIdRequest('222222222222');
cy.visit('/manage/branches');

Expand Down
59 changes: 46 additions & 13 deletions cypress/e2e/Branches.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ describe('Branches Tests', () => {
cy.get('.MuiMenu-paper').find('.MuiTablePagination-menuItem').eq(0).should('have.text', '5');
cy.get('.MuiMenu-paper').find('.MuiTablePagination-menuItem').eq(1).should('have.text', '10');

interceptFetchBranchesRequest(1, 10, '', 'fetch10BranchesRequest');
interceptFetchBranchesRequest({ pageNumber: 1, pageSize: 10, search: '' }, { alias: 'fetch10BranchesRequest' });
cy.get('.MuiMenu-paper').find('.MuiTablePagination-menuItem[data-value="10"]').click();

cy.wait('@fetch10BranchesRequest').its('request.url').should('include', 'Branches?pageNumber=1&pageSize=10');
Expand All @@ -81,7 +81,10 @@ describe('Branches Tests', () => {
});

it('should send correct request when search changes', () => {
interceptFetchBranchesRequest(1, 5, '', 'fetchMultipleBranchesRequest', 'branches-multiple');
interceptFetchBranchesRequest(
{ pageNumber: 1, pageSize: 5, search: '' },
{ alias: 'fetchMultipleBranchesRequest', fixture: 'branches-multiple' }
);

cy.wait('@fetchMultipleBranchesRequest').its('request.url').should('include', 'Branches?pageNumber=1&pageSize=5');

Expand All @@ -90,7 +93,10 @@ describe('Branches Tests', () => {
cy.get('[data-cy="search-branches"]').find('input').clear();
cy.get('[data-cy="search-branches"]').find('input').type('New');

interceptFetchBranchesRequest(1, 5, 'New', 'fetchSearchedBranchesRequest', 'branches');
interceptFetchBranchesRequest(
{ pageNumber: 1, pageSize: 5, search: 'New' },
{ alias: 'fetchSearchedBranchesRequest', fixture: 'branches' }
);

getLinearLoader(Module.branchManagement, SubModule.branchTable, 'table').should('exist');
cy.wait('@fetchSearchedBranchesRequest').its('request.url').should('include', 'Branches?pageNumber=1&pageSize=5&search=New');
Expand All @@ -99,15 +105,21 @@ describe('Branches Tests', () => {
cy.get('[data-cy="search-branches"]').find('input').clear();
cy.get('[data-cy="search-branches"]').find('input').type('Old');

interceptFetchBranchesRequest(1, 5, 'Old', 'fetchSearchedNoBranchesRequest', 'branches-empty');
interceptFetchBranchesRequest(
{ pageNumber: 1, pageSize: 5, search: 'Old' },
{ alias: 'fetchSearchedNoBranchesRequest', fixture: 'branches-empty' }
);

getLinearLoader(Module.branchManagement, SubModule.branchTable, 'table').should('exist');
cy.wait('@fetchSearchedNoBranchesRequest').its('request.url').should('include', 'Branches?pageNumber=1&pageSize=5&search=Old');
getTestSelectorByModule(Module.branchManagement, SubModule.branchTable, 'table-body-row').should('have.length', 0);

cy.get('[data-cy="search-branches"]').find('input').clear();

interceptFetchBranchesRequest(1, 5, '', 'fetchMultipleBranchesRequest', 'branches-multiple');
interceptFetchBranchesRequest(
{ pageNumber: 1, pageSize: 5, search: '' },
{ alias: 'fetchMultipleBranchesRequest', fixture: 'branches-multiple' }
);

getLinearLoader(Module.branchManagement, SubModule.branchTable, 'table').should('exist');
cy.wait('@fetchMultipleBranchesRequest').its('request.url').should('include', 'Branches?pageNumber=1&pageSize=5');
Expand Down Expand Up @@ -165,7 +177,10 @@ describe('Branches Tests', () => {
});

it('should not display the loader if the request resolves quickly', () => {
interceptFetchBranchesRequest(1, 5, '', 'fetchBranchesQuickRequest', 'branches', 200, 50);
interceptFetchBranchesRequest(
{ pageNumber: 1, pageSize: 5, search: '' },
{ alias: 'fetchBranchesQuickRequest', fixture: 'branches', statusCode: 200, delay: 50 }
);

getLinearLoader(Module.branchManagement, SubModule.branchTable, 'table').should('not.exist');
});
Expand Down Expand Up @@ -196,7 +211,7 @@ describe('Branches Tests', () => {
cy.get('.MuiMenu-paper').find('.MuiTablePagination-menuItem').eq(0).should('have.text', '5');
cy.get('.MuiMenu-paper').find('.MuiTablePagination-menuItem').eq(1).should('have.text', '10');

interceptFetchBranchesRequest(1, 10, '', 'fetch10BranchesRequest');
interceptFetchBranchesRequest({ pageNumber: 1, pageSize: 10, search: '' }, { alias: 'fetch10BranchesRequest' });
cy.get('.MuiMenu-paper').find('.MuiTablePagination-menuItem[data-value="10"]').click();

cy.wait('@fetch10BranchesRequest').its('request.url').should('include', 'Branches?pageNumber=1&pageSize=10');
Expand All @@ -205,7 +220,10 @@ describe('Branches Tests', () => {
});

it('should send correct request when search changes', () => {
interceptFetchBranchesRequest(1, 5, '', 'fetchMultipleBranchesRequest', 'branches-multiple');
interceptFetchBranchesRequest(
{ pageNumber: 1, pageSize: 5, search: '' },
{ alias: 'fetchMultipleBranchesRequest', fixture: 'branches-multiple' }
);

cy.wait('@fetchMultipleBranchesRequest');

Expand All @@ -214,7 +232,10 @@ describe('Branches Tests', () => {
cy.get('[data-cy="search-branches"]').find('input').clear();
cy.get('[data-cy="search-branches"]').find('input').type('New');

interceptFetchBranchesRequest(1, 5, 'New', 'fetchSearchedBranchesRequest', 'branches');
interceptFetchBranchesRequest(
{ pageNumber: 1, pageSize: 5, search: 'New' },
{ alias: 'fetchSearchedBranchesRequest', fixture: 'branches' }
);

getLinearLoader(Module.branchManagement, SubModule.branchTable, 'table').should('exist');
cy.wait('@fetchSearchedBranchesRequest').its('request.url').should('include', 'Branches?pageNumber=1&pageSize=5&search=New');
Expand All @@ -223,15 +244,21 @@ describe('Branches Tests', () => {
cy.get('[data-cy="search-branches"]').find('input').clear();
cy.get('[data-cy="search-branches"]').find('input').type('Old');

interceptFetchBranchesRequest(1, 5, 'Old', 'fetchSearchedNoBranchesRequest', 'branches-empty');
interceptFetchBranchesRequest(
{ pageNumber: 1, pageSize: 5, search: 'Old' },
{ alias: 'fetchSearchedNoBranchesRequest', fixture: 'branches-empty' }
);

getLinearLoader(Module.branchManagement, SubModule.branchTable, 'table').should('exist');
cy.wait('@fetchSearchedNoBranchesRequest').its('request.url').should('include', 'Branches?pageNumber=1&pageSize=5&search=Old');
getTestSelectorByModule(Module.branchManagement, SubModule.branchTable, 'table-body-row').should('have.length', 0);

cy.get('[data-cy="search-branches"]').find('input').clear();

interceptFetchBranchesRequest(1, 5, '', 'fetchMultipleBranchesRequest', 'branches-multiple');
interceptFetchBranchesRequest(
{ pageNumber: 1, pageSize: 5, search: '' },
{ alias: 'fetchMultipleBranchesRequest', fixture: 'branches-multiple' }
);

getLinearLoader(Module.branchManagement, SubModule.branchTable, 'table').should('exist');
cy.wait('@fetchMultipleBranchesRequest').its('request.url').should('include', 'Branches?pageNumber=1&pageSize=5');
Expand Down Expand Up @@ -285,7 +312,10 @@ describe('Branches Tests', () => {
});

it('should not be able to delete a branch if the branch deletion failed', () => {
interceptFetchBranchesRequest(1, 5, '', 'fetchMultipleBranchesRequest', 'branches-multiple');
interceptFetchBranchesRequest(
{ pageNumber: 1, pageSize: 5, search: '' },
{ alias: 'fetchMultipleBranchesRequest', fixture: 'branches-multiple' }
);
cy.visit('/manage/branches');

interceptDeleteBranchFailedRequest('222222222223');
Expand All @@ -300,7 +330,10 @@ describe('Branches Tests', () => {
});

it('should be able to delete a branch if the branch deletion succeeded', () => {
interceptFetchBranchesRequest(1, 5, '', 'fetchMultipleBranchesRequest', 'branches-multiple');
interceptFetchBranchesRequest(
{ pageNumber: 1, pageSize: 5, search: '' },
{ alias: 'fetchMultipleBranchesRequest', fixture: 'branches-multiple' }
);
cy.visit('/manage/branches');

interceptDeleteBranchRequest('222222222223');
Expand Down
32 changes: 25 additions & 7 deletions cypress/e2e/Employees.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,19 @@ describe('Employees Tests', () => {
});

it('should not display the loader if the request resolves quickly', () => {
interceptFetchEmployeesRequest(1, 5, '', 'fetchEmployeesQuickRequest', 'employees', 200, 50);
interceptFetchEmployeesRequest(
{ pageNumber: 1, pageSize: 5 },
{ alias: 'fetchEmployeesQuickRequest', fixture: 'employees', statusCode: 200, delay: 50 }
);

getLinearLoader(Module.employeeManagement, SubModule.employeeTable, 'table').should('not.exist');
});

it('should render employees table if there are fetched employees', () => {
interceptFetchEmployeesRequest(1, 5, '', 'fetchMultipleEmployeesRequest', 'employees-multiple');
interceptFetchEmployeesRequest(
{ pageNumber: 1, pageSize: 5 },
{ alias: 'fetchMultipleEmployeesRequest', fixture: 'employees-multiple' }
);

getLinearLoader(Module.employeeManagement, SubModule.employeeTable, 'table').should('exist');
cy.wait('@fetchMultipleEmployeesRequest').its('request.url').should('include', 'Employees?pageNumber=1&pageSize=5');
Expand Down Expand Up @@ -85,7 +91,7 @@ describe('Employees Tests', () => {
cy.get('.MuiMenu-paper').find('.MuiTablePagination-menuItem').eq(0).should('have.text', '5');
cy.get('.MuiMenu-paper').find('.MuiTablePagination-menuItem').eq(1).should('have.text', '10');

interceptFetchEmployeesRequest(1, 10, '', 'fetch10EmployeesRequest');
interceptFetchEmployeesRequest({ pageNumber: 1, pageSize: 10 }, { alias: 'fetch10EmployeesRequest' });

cy.get('.MuiMenu-paper').find('.MuiTablePagination-menuItem[data-value="10"]').click();

Expand All @@ -95,7 +101,10 @@ describe('Employees Tests', () => {
});

it('should send correct request when search changes', () => {
interceptFetchEmployeesRequest(1, 5, '', 'fetchMultipleEmployeesRequest', 'employees-multiple');
interceptFetchEmployeesRequest(
{ pageNumber: 1, pageSize: 5 },
{ alias: 'fetchMultipleEmployeesRequest', fixture: 'employees-multiple' }
);

cy.wait('@fetchMultipleEmployeesRequest').its('request.url').should('include', 'Employees?pageNumber=1&pageSize=5');

Expand All @@ -104,7 +113,10 @@ describe('Employees Tests', () => {
cy.get('[data-cy="search-employees"]').find('input').clear();
cy.get('[data-cy="search-employees"]').find('input').type('Anthony');

interceptFetchEmployeesRequest(1, 5, 'Anthony', 'fetchSearchedEmployeesRequest', 'employees');
interceptFetchEmployeesRequest(
{ pageNumber: 1, pageSize: 5, search: 'Anthony' },
{ alias: 'fetchSearchedEmployeesRequest', fixture: 'employees' }
);

getLinearLoader(Module.employeeManagement, SubModule.employeeTable, 'table').should('exist');

Expand All @@ -114,7 +126,10 @@ describe('Employees Tests', () => {
cy.get('[data-cy="search-employees"]').find('input').clear();
cy.get('[data-cy="search-employees"]').find('input').type('Joe');

interceptFetchEmployeesRequest(1, 5, 'Joe', 'fetchSearchedNoEmployeesRequest', 'employees-empty');
interceptFetchEmployeesRequest(
{ pageNumber: 1, pageSize: 5, search: 'Joe' },
{ alias: 'fetchSearchedNoEmployeesRequest', fixture: 'employees-empty' }
);

getLinearLoader(Module.employeeManagement, SubModule.employeeTable, 'table').should('exist');

Expand All @@ -123,7 +138,10 @@ describe('Employees Tests', () => {

cy.get('[data-cy="search-employees"]').find('input').clear();

interceptFetchEmployeesRequest(1, 5, '', 'fetchMultipleEmployeesRequest', 'employees-multiple');
interceptFetchEmployeesRequest(
{ pageNumber: 1, pageSize: 5 },
{ alias: 'fetchMultipleEmployeesRequest', fixture: 'employees-multiple' }
);

getLinearLoader(Module.employeeManagement, SubModule.employeeTable, 'table').should('exist');
cy.wait('@fetchMultipleEmployeesRequest').its('request.url').should('include', 'Employees?pageNumber=1&pageSize=5');
Expand Down
20 changes: 4 additions & 16 deletions cypress/support/interceptors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,15 +87,9 @@ export const interceptCreateCompanyFailedRequest = () => {
cy.interceptWithAuth('POST', `${serverBaseUrl}/Company`, null, 'createCompanyFailedRequest', 404);
};

// TODO: change params structure, combine pagination and configs separately
export const interceptFetchBranchesRequest = (
pageNumber = 1,
pageSize = 5,
search = '',
alias = 'fetchBranchesRequest',
fixture = 'branches',
statusCode = 200,
delay = 300
{ pageNumber = 1, pageSize = 5, search = '' } = {},
{ alias = 'fetchBranchesRequest', fixture = 'branches', statusCode = 200, delay = 300 } = {}
) => {
cy.fixture(fixture).then((branches) => {
const searchParam = search ? `&search=${search}` : '';
Expand Down Expand Up @@ -178,15 +172,9 @@ export const interceptCreateEmployeeFailedRequest = () => {
cy.interceptWithAuth('POST', `${serverBaseUrl}/Employee`, null, 'createEmployeeFailedRequest', 404);
};

// TODO: change params structure, combine pagination and configs separately
export const interceptFetchEmployeesRequest = (
pageNumber = 1,
pageSize = 5,
search = '',
alias = 'fetchEmployeesRequest',
fixture = 'employees',
statusCode = 200,
delay = 300
{ pageNumber = 1, pageSize = 5, search = '' } = {},
{ alias = 'fetchEmployeesRequest', fixture = 'employees', statusCode = 200, delay = 300 } = {}
) => {
cy.fixture(fixture).then((employees) => {
const searchParam = search ? `&search=${search}` : '';
Expand Down
2 changes: 1 addition & 1 deletion src/layout/Sidebar/components/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const Menu: React.FC<MenuProps> = ({ onCloseSideBar }) => {
<Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
<List>
{MENU_ITEMS.map((item) => {
const isActive = location.pathname === item.path;
const isActive = location.pathname.includes(item.path);
const buttonStyles = getButtonStyles(isActive);

return (
Expand Down