particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

test: only test against content sources

Browse source
This commit is contained in:
Sanne Raymaekers 2024-05-16 12:22:34 +02:00 • committed by Klara Simickova
parent 9b03fa6882
commit 0e74de53fa
4 changed files with 83 additions and 584 deletions
Download patch file Download diff file Expand all files Collapse all files

511
src/test/Components/CreateImageWizard/CreateImageWizard.content.test.js
View file

@ -8,18 +8,12 @@ import userEvent from '@testing-library/user-event';
import api from '../../../api.js'; import api from '../../../api.js';
import CreateImageWizard from '../../../Components/CreateImageWizard/CreateImageWizard'; import CreateImageWizard from '../../../Components/CreateImageWizard/CreateImageWizard';
import ShareImageModal from '../../../Components/ShareImageModal/ShareImageModal'; import ShareImageModal from '../../../Components/ShareImageModal/ShareImageModal';
import { import { mockPkgResultAlphaContentSources } from '../../fixtures/packages';
mockPkgResultAlpha,
mockPkgResultAlphaContentSources,
mockPkgResultAll,
mockPkgResultPartial,
} from '../../fixtures/packages';
import { import {
clickBack, clickBack,
clickNext, clickNext,
renderCustomRoutesWithReduxRouter, renderCustomRoutesWithReduxRouter,
renderWithReduxRouter, renderWithReduxRouter,
verifyCancelButton,
} from '../../testUtils'; } from '../../testUtils';
const routes = [ const routes = [
@ -37,8 +31,6 @@ const routes = [
}, },
]; ];
let router = undefined;
jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({ jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({
useChrome: () => ({ useChrome: () => ({
auth: { auth: {
@ -99,19 +91,15 @@ afterEach(() => {
}); });
describe('Step Packages', () => { describe('Step Packages', () => {
describe('without Content Sources', () => { describe('with Content Sources', () => {
const user = userEvent.setup(); const user = userEvent.setup();
const setUp = async () => { const setUp = async () => {
mockContentSourcesEnabled = false; renderCustomRoutesWithReduxRouter('imagewizard', {}, routes);
({ router } = await renderCustomRoutesWithReduxRouter(
'imagewizard',
{},
routes
));
// select aws as upload destination // select aws as upload destination
await user.click(await screen.findByTestId('upload-aws')); await waitFor(
async () => await user.click(await screen.findByTestId('upload-aws'))
);
await clickNext(); await clickNext();
// aws step // aws step
@ -130,63 +118,23 @@ describe('Step Packages', () => {
name: 'Select activation key', name: 'Select activation key',
}); });
await user.click(await screen.findByTestId('registration-radio-later')); const registerLaterRadio = await screen.findByTestId(
'registration-radio-later'
);
await user.click(registerLaterRadio);
await clickNext(); await clickNext();
// skip fsc // skip fsc
await clickNext(); await clickNext();
}; };
test('clicking Next loads Image name', async () => {
await setUp();
await clickNext();
await screen.findByRole('heading', {
name: 'Details',
});
});
test('clicking Back loads file system configuration', async () => {
await setUp();
await clickBack();
await screen.findByRole('heading', {
name: /file system configuration/i,
});
});
test('clicking Cancel loads landing page', async () => {
await setUp();
await verifyCancelButton(router);
});
test('should display search bar and button', async () => {
await setUp();
await user.type(
await screen.findByTestId('search-available-pkgs-input'),
'test'
);
await screen.findByRole('button', {
name: 'Search button for available packages',
});
});
test('should display default state', async () => {
await setUp();
await screen.findByText(
'Search above to add additionalpackages to your image'
);
await screen.findByText('No packages added');
});
test('search results should be sorted with most relevant results first', async () => { test('search results should be sorted with most relevant results first', async () => {
await setUp(); await setUp();
const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref const view = await screen.findByTestId('search-available-pkgs-input');
const searchbox = await within(view).findByRole('textbox', {
name: /search input/i,
});
await waitFor(() => expect(searchbox).toBeEnabled()); await waitFor(() => expect(searchbox).toBeEnabled());
await user.click(searchbox); await user.click(searchbox);
@ -257,14 +205,15 @@ describe('Step Packages', () => {
const availablePackagesList = await screen.findByTestId( const availablePackagesList = await screen.findByTestId(
'available-pkgs-list' 'available-pkgs-list'
); );
const availablePackagesItems = within(availablePackagesList).getAllByRole( const availablePackagesItems = await within(
'option' availablePackagesList
); ).findAllByRole('option');
expect(availablePackagesItems).toHaveLength(3); expect(availablePackagesItems).toHaveLength(3);
const [firstItem, secondItem, thirdItem] = availablePackagesItems; const [firstItem, secondItem, thirdItem] = availablePackagesItems;
expect(firstItem).toHaveTextContent('testsummary for test package'); expect(firstItem).toHaveTextContent('testsummary for test package');
expect(secondItem).toHaveTextContent('testPkgtest package summary'); // TODO
expect(thirdItem).toHaveTextContent('lib-testlib-test package summary'); expect(thirdItem).toHaveTextContent('lib-testlib-test package summary');
expect(secondItem).toHaveTextContent('testPkgtest package summary');
}); });
test('removing a single package updates the state correctly', async () => { test('removing a single package updates the state correctly', async () => {
@ -283,416 +232,6 @@ describe('Step Packages', () => {
await user.click( await user.click(
await screen.findByRole('button', { name: /Remove selected/ }) await screen.findByRole('button', { name: /Remove selected/ })
); );
// skip name page
clickNext();
// review page
clickNext();
let chosen = await screen.findByTestId('chosen-packages-count');
expect(chosen).toHaveTextContent('2');
// remove another package
clickBack();
clickBack();
await screen.findByTestId('search-available-pkgs-input');
await user.click(
await screen.findByRole('option', {
name: /summary for test package/,
})
);
await user.click(
await screen.findByRole('button', { name: /Remove selected/ })
);
// review page
clickNext();
clickNext();
chosen = await screen.findByTestId('chosen-packages-count');
expect(chosen).toHaveTextContent('1');
});
test('should display empty available state on failed search', async () => {
await setUp();
const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref
await waitFor(() => expect(searchbox).toBeEnabled());
await user.click(searchbox);
await searchForAvailablePackages(searchbox, 'asdf');
await screen.findByText('No results found');
});
test('should display empty available state on failed search after a successful search', async () => {
await setUp();
const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref
await waitFor(() => expect(searchbox).toBeEnabled());
await user.click(searchbox);
await searchForAvailablePackages(searchbox, 'test');
await user.click(
await screen.findByRole('button', {
name: /clear available packages search/i,
})
);
await searchForAvailablePackages(searchbox, 'asdf');
await screen.findByText('No results found');
});
test('should display empty chosen state on failed search', async () => {
await setUp();
const searchboxAvailable = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref
const searchboxChosen = screen.getAllByRole('textbox')[1];
await waitFor(() => expect(searchboxAvailable).toBeEnabled());
await user.click(searchboxAvailable);
await searchForAvailablePackages(searchboxAvailable, 'test');
await user.click(await screen.findByRole('button', { name: /Add all/ }));
await user.click(searchboxChosen);
await user.type(searchboxChosen, 'asdf');
expect(await screen.findByText('No packages found')).toBeInTheDocument();
// We need to clear this input in order to not have sideeffects on other tests
await searchForChosenPackages(searchboxChosen, '');
});
test('should display warning when over hundred results were found', async () => {
await setUp();
const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref
await waitFor(() => expect(searchbox).toBeEnabled());
await user.click(searchbox);
const getPackages = jest
.spyOn(api, 'getPackages')
.mockImplementation((distribution, architecture, search, limit) => {
return limit
? Promise.resolve(mockPkgResultAll)
: Promise.resolve(mockPkgResultPartial);
});
await searchForAvailablePackages(searchbox, 'testPkg');
await waitFor(() => expect(getPackages).toHaveBeenCalledTimes(2));
await screen.findByText('Over 100 results found. Refine your search.');
await screen.findByText('Too many results to display');
});
test('should display an exact match if found regardless of too many results', async () => {
await setUp();
const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref
await waitFor(() => expect(searchbox).toBeEnabled());
await user.click(searchbox);
const getPackages = jest
.spyOn(api, 'getPackages')
.mockImplementation((distribution, architecture, search, limit) => {
return limit
? Promise.resolve(mockPkgResultAll)
: Promise.resolve(mockPkgResultPartial);
});
await searchForAvailablePackages(searchbox, 'testPkg-128');
await waitFor(() => expect(getPackages).toHaveBeenCalledTimes(2));
const availablePackagesList = await screen.findByTestId(
'available-pkgs-list'
);
const availablePackagesItems = await within(
availablePackagesList
).findByRole('option');
expect(availablePackagesItems).toBeInTheDocument();
await screen.findByText('Exact match');
await screen.findByText('testPkg-128');
await screen.findByText('Too many results to display');
});
test('search results should be sorted alphabetically', async () => {
await setUp();
const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref
await waitFor(() => expect(searchbox).toBeEnabled());
await user.click(searchbox);
const getPackages = jest
.spyOn(api, 'getPackages')
.mockImplementation(() => Promise.resolve(mockPkgResultAlpha));
await searchForAvailablePackages(searchbox, 'test');
await waitFor(() => expect(getPackages).toHaveBeenCalledTimes(1));
const availablePackagesList = await screen.findByTestId(
'available-pkgs-list'
);
const availablePackagesItems = within(availablePackagesList).getAllByRole(
'option'
);
expect(availablePackagesItems).toHaveLength(3);
const [firstItem, secondItem, thirdItem] = availablePackagesItems;
expect(firstItem).toHaveTextContent('testsummary for test package');
expect(secondItem).toHaveTextContent('lib-testlib-test package summary');
expect(thirdItem).toHaveTextContent('Z-testZ-test package summary');
});
test('available packages can be reset', async () => {
await setUp();
const searchbox = screen.getAllByRole('textbox')[0];
await waitFor(() => expect(searchbox).toBeEnabled());
await user.click(searchbox);
await searchForAvailablePackages(searchbox, 'test');
const availablePackagesList = await screen.findByTestId(
'available-pkgs-list'
);
const availablePackagesItems = await within(
availablePackagesList
).findAllByRole('option');
expect(availablePackagesItems).toHaveLength(3);
await user.click(
await screen.findByRole('button', {
name: /clear available packages search/i,
})
);
await screen.findByText(
'Search above to add additionalpackages to your image'
);
});
test('chosen packages can be reset after filtering', async () => {
await setUp();
const availableSearchbox = screen.getAllByRole('textbox')[0];
await waitFor(() => expect(availableSearchbox).toBeEnabled());
await user.click(availableSearchbox);
await searchForAvailablePackages(availableSearchbox, 'test');
const availablePackagesList = await screen.findByTestId(
'available-pkgs-list'
);
const availablePackagesItems = await within(
availablePackagesList
).findAllByRole('option');
await waitFor(() => expect(availablePackagesItems).toHaveLength(3));
await user.click(await screen.findByRole('button', { name: /Add all/ }));
const chosenPackagesList = await screen.findByTestId('chosen-pkgs-list');
let chosenPackagesItems = await within(chosenPackagesList).findAllByRole(
'option'
);
await waitFor(() => expect(chosenPackagesItems).toHaveLength(3));
const chosenSearchbox = screen.getAllByRole('textbox')[1];
await user.click(chosenSearchbox);
await searchForChosenPackages(chosenSearchbox, 'lib');
chosenPackagesItems = await within(chosenPackagesList).findAllByRole(
'option'
);
expect(chosenPackagesItems).toHaveLength(1);
await user.click(
await screen.findByRole('button', {
name: /clear chosen packages search/i,
})
);
chosenPackagesItems = await within(chosenPackagesList).findAllByRole(
'option'
);
await waitFor(() => expect(chosenPackagesItems).toHaveLength(3));
});
});
describe('with Content Sources', () => {
const user = userEvent.setup();
const setUp = async () => {
({ router } = renderCustomRoutesWithReduxRouter(
'imagewizard',
{},
routes
));
// select aws as upload destination
await waitFor(
async () => await user.click(await screen.findByTestId('upload-aws'))
);
await clickNext();
// aws step
await user.click(
await screen.findByRole('radio', {
name: /manually enter an account id\./i,
})
);
await user.type(
await screen.findByTestId('aws-account-id'),
'012345678901'
);
await clickNext();
// skip registration
await screen.findByRole('textbox', {
name: 'Select activation key',
});
const registerLaterRadio = await screen.findByTestId(
'registration-radio-later'
);
await user.click(registerLaterRadio);
await clickNext();
// skip fsc
await clickNext();
};
test('search results should be sorted with most relevant results first', async () => {
await setUp();
const view = await screen.findByTestId('search-available-pkgs-input');
const searchbox = await within(view).findByRole('textbox', {
name: /search input/i,
});
await waitFor(() => expect(searchbox).toBeEnabled());
await user.click(searchbox);
await searchForAvailablePackages(searchbox, 'test');
const availablePackagesList = await screen.findByTestId(
'available-pkgs-list'
);
const availablePackagesItems = await within(
availablePackagesList
).findAllByRole('option');
expect(availablePackagesItems).toHaveLength(3);
const [firstItem, secondItem, thirdItem] = availablePackagesItems;
expect(firstItem).toHaveTextContent(
'test-sourcessummary for test package'
);
expect(secondItem).toHaveTextContent(
'testPkg-sourcestest package summary'
);
expect(thirdItem).toHaveTextContent(
'lib-test-sourceslib-test package summary'
);
});
test('search results should be sorted after selecting them and then deselecting them', async () => {
await setUp();
const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref
await waitFor(() => expect(searchbox).toBeEnabled());
await user.click(searchbox);
await searchForAvailablePackages(searchbox, 'test');
await user.click(
await screen.findByTestId('available-pkgs-testPkg-sources')
);
await user.click(
await screen.findByRole('button', { name: /Add selected/ })
);
await user.click(
await screen.findByTestId('selected-pkgs-testPkg-sources')
);
await user.click(
await screen.findByRole('button', { name: /Remove selected/ })
);
const availablePackagesList = await screen.findByTestId(
'available-pkgs-list'
);
const availablePackagesItems = within(availablePackagesList).getAllByRole(
'option'
);
expect(availablePackagesItems).toHaveLength(3);
const [firstItem, secondItem, thirdItem] = availablePackagesItems;
expect(firstItem).toHaveTextContent(
'test-sourcessummary for test package'
);
expect(secondItem).toHaveTextContent(
'testPkg-sourcestest package summary'
);
expect(thirdItem).toHaveTextContent(
'lib-test-sourceslib-test package summary'
);
});
test('search results should be sorted after adding and then removing all packages', async () => {
await setUp();
const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref
await waitFor(() => expect(searchbox).toBeEnabled());
await user.click(searchbox);
await searchForAvailablePackages(searchbox, 'test');
await user.click(await screen.findByRole('button', { name: /Add all/ }));
await user.click(
await screen.findByRole('button', { name: /Remove all/ })
);
const availablePackagesList = await screen.findByTestId(
'available-pkgs-list'
);
const availablePackagesItems = await within(
availablePackagesList
).findAllByRole('option');
expect(availablePackagesItems).toHaveLength(3);
const [firstItem, secondItem, thirdItem] = availablePackagesItems;
expect(firstItem).toHaveTextContent(
'test-sourcessummary for test package'
);
expect(secondItem).toHaveTextContent(
'testPkg-sourcestest package summary'
);
expect(thirdItem).toHaveTextContent(
'lib-test-sourceslib-test package summary'
);
});
test('removing a single package updates the state correctly', async () => {
await setUp();
const searchbox = screen.getAllByRole('textbox')[0]; // searching by id doesn't update the input ref
await waitFor(() => expect(searchbox).toBeEnabled());
await user.click(searchbox);
await searchForAvailablePackages(searchbox, 'test');
await user.click(await screen.findByRole('button', { name: /Add all/ }));
// remove a single package
await user.click(
await screen.findByTestId('selected-pkgs-lib-test-sources')
);
await user.click(
await screen.findByRole('button', { name: /Remove selected/ })
);
// skip Custom repositories page // skip Custom repositories page
clickNext(); clickNext();
@ -847,7 +386,7 @@ describe('Step Packages', () => {
describe('Step Custom repositories', () => { describe('Step Custom repositories', () => {
const user = userEvent.setup(); const user = userEvent.setup();
const setUp = async () => { const setUp = async () => {
({ router } = renderCustomRoutesWithReduxRouter('imagewizard', {}, routes)); renderCustomRoutesWithReduxRouter('imagewizard', {}, routes);
// select aws as upload destination // select aws as upload destination
await user.click(await screen.findByTestId('upload-aws')); await user.click(await screen.findByTestId('upload-aws'));
@ -1056,15 +595,11 @@ describe('Step Custom repositories', () => {
describe('On Recreate', () => { describe('On Recreate', () => {
const user = userEvent.setup(); const user = userEvent.setup();
const setUp = async () => { const setUp = async () => {
({ router } = renderWithReduxRouter( renderWithReduxRouter('imagewizard/hyk93673-8dcc-4a61-ac30-e9f4940d8346');
'imagewizard/hyk93673-8dcc-4a61-ac30-e9f4940d8346'
));
}; };
const setUpUnavailableRepo = async () => { const setUpUnavailableRepo = async () => {
({ router } = renderWithReduxRouter( renderWithReduxRouter('imagewizard/b7193673-8dcc-4a5f-ac30-e9f4940d8346');
'imagewizard/b7193673-8dcc-4a5f-ac30-e9f4940d8346'
));
}; };
test('with valid repositories', async () => { test('with valid repositories', async () => {

4
src/test/Components/CreateImageWizard/CreateImageWizard.test.js
View file

@ -1219,7 +1219,7 @@ describe('Click through all steps', () => {
await searchForAvailablePackages(searchbox, 'test'); await searchForAvailablePackages(searchbox, 'test');
await user.click( await user.click(
await screen.findByRole('option', { await screen.findByRole('option', {
name: /test-sources summary for test package/, name: /test summary for test package/,
}) })
); );
await user.click( await user.click(
@ -1360,7 +1360,7 @@ describe('Click through all steps', () => {
], ],
custom_repositories: custom_repos, custom_repositories: custom_repos,
payload_repositories: payload_repos, payload_repositories: payload_repos,
packages: ['test-sources'], packages: ['test'],
subscription: { subscription: {
'activation-key': 'name0', 'activation-key': 'name0',
insights: true, insights: true,

145
src/test/fixtures/packages.ts vendored
View file

@ -2,65 +2,19 @@ import {
ApiRepositoryRpm, ApiRepositoryRpm,
ApiSearchRpmResponse, ApiSearchRpmResponse,
} from '../../store/contentSourcesApi'; } from '../../store/contentSourcesApi';
import { import { RecommendPackageApiResponse } from '../../store/imageBuilderApi';
PackagesResponse,
RecommendPackageApiResponse,
} from '../../store/imageBuilderApi';
export const mockPackagesResults = (search: string): PackagesResponse => {
if (search === 'te' || search === 'testPkg-123') {
return mockPkgResultAll;
} else if (search === 'test') {
return {
data: [
{
name: 'testPkg',
summary: 'test package summary',
},
{
name: 'lib-test',
summary: 'lib-test package summary',
},
{
name: 'test',
summary: 'summary for test package',
},
],
links: { first: '', last: '' },
meta: {
count: 3,
},
};
} else if (search === 'mock') {
return {
data: [
{
name: 'mockPkg',
summary: 'test package summary',
},
{
name: 'lib-mock',
summary: 'lib-test package summary',
},
{
name: 'mock',
summary: 'summary for test package',
},
],
links: { first: '', last: '' },
meta: {
count: 3,
},
};
} else {
return { data: [], links: { first: '', last: '' }, meta: { count: 0 } };
}
};
export const mockSourcesPackagesResults = ( export const mockSourcesPackagesResults = (
search: string search: string,
urls: string[]
): ApiSearchRpmResponse[] => { ): ApiSearchRpmResponse[] => {
if (search === 'test') { const isDistroPkgSearch =
urls.filter((u) => u.includes('cdn.redhat.com')).length > 0;
if (search === 'te' || search === 'testPkg-123') {
return mockPkgResultAll;
}
if (!isDistroPkgSearch) {
return [ return [
{ {
package_name: 'testPkg-sources', package_name: 'testPkg-sources',
@ -75,28 +29,41 @@ export const mockSourcesPackagesResults = (
summary: 'summary for test package', summary: 'summary for test package',
}, },
]; ];
} else {
return [];
} }
};
export const mockPkgResultAlpha: PackagesResponse = { if (search === 'test') {
meta: { count: 3 }, return [
links: { first: '', last: '' }, {
data: [ package_name: 'testPkg',
{ summary: 'test package summary',
name: 'lib-test', },
summary: 'lib-test package summary', {
}, package_name: 'lib-test',
{ summary: 'lib-test package summary',
name: 'Z-test', },
summary: 'Z-test package summary', {
}, package_name: 'test',
{ summary: 'summary for test package',
name: 'test', },
summary: 'summary for test package', ];
}, }
], if (search === 'mock' && isDistroPkgSearch) {
return [
{
package_name: 'mockPkg',
summary: 'test package summary',
},
{
package_name: 'lib-mock',
summary: 'lib-test package summary',
},
{
package_name: 'mock',
summary: 'summary for test package',
},
];
}
return [];
}; };
export const mockPkgResultAlphaContentSources: ApiRepositoryRpm[] = [ export const mockPkgResultAlphaContentSources: ApiRepositoryRpm[] = [
@ -117,29 +84,23 @@ export const mockPkgResultAlphaContentSources: ApiRepositoryRpm[] = [
}, },
]; ];
export const mockPkgResultPartial: PackagesResponse = { export const mockPkgResultPartial: ApiSearchRpmResponse[] = new Array(100)
meta: { count: 132 }, .fill(undefined)
links: { first: '', last: '' }, .map((_, i) => {
data: new Array(100).fill(undefined).map((_, i) => {
return { return {
name: 'testPkg-' + i, package_name: 'testPkg-' + i,
summary: 'test package summary', summary: 'test package summary',
version: '1.0',
}; };
}), });
};
export const mockPkgResultAll: PackagesResponse = { export const mockPkgResultAll: ApiSearchRpmResponse[] = new Array(132)
meta: { count: 132 }, .fill(undefined)
links: { first: '', last: '' }, .map((_, i) => {
data: new Array(132).fill(undefined).map((_, i) => {
return { return {
name: 'testPkg-' + i, package_name: 'testPkg-' + i,
summary: 'test package summary', summary: 'test package summary',
version: '1.0',
}; };
}), });
};
export const mockPkgRecommendations: RecommendPackageApiResponse = { export const mockPkgRecommendations: RecommendPackageApiResponse = {
packages: [ packages: [

7
src/test/mocks/handlers.js
View file

@ -58,8 +58,11 @@ export const handlers = [
} }
), ),
rest.post(`${CONTENT_SOURCES_API}/rpms/names`, async (req, res, ctx) => { rest.post(`${CONTENT_SOURCES_API}/rpms/names`, async (req, res, ctx) => {
const { search } = await req.json(); const { search, urls } = await req.json();
return res(ctx.status(200), ctx.json(mockSourcesPackagesResults(search))); return res(
ctx.status(200),
ctx.json(mockSourcesPackagesResults(search, urls))
);
}), }),
rest.get(`${CONTENT_SOURCES_API}/features/`, async (req, res, ctx) => { rest.get(`${CONTENT_SOURCES_API}/features/`, async (req, res, ctx) => {
return res(ctx.status(200), ctx.json(mockedFeatureResponse)); return res(ctx.status(200), ctx.json(mockedFeatureResponse));