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

[LANDGRIF-1533] analysis: grouped categories selector #1185

Merged
merged 4 commits into from
May 20, 2024
Merged

[LANDGRIF-1533] analysis: grouped categories selector #1185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bd47730
analysis: grouped categories selector
andresgnlez May 7, 2024
5e06609
updates tests
andresgnlez May 13, 2024
3b495a8
applies feedback
andresgnlez May 14, 2024
b24aaaa
updates tests
andresgnlez May 14, 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
2 changes: 1 addition & 1 deletion client/.eslintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ module.exports = {
],
plugins: ['prettier'],
rules: {
'@typescript-eslint/no-unused-vars': ['warn'],
'@typescript-eslint/no-unused-vars': ['warn', { ignoreRestSiblings: true }],
'import/order': [
'warn',
{
Expand Down
2 changes: 1 addition & 1 deletion client/cypress/e2e/analysis/charts.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ describe('Analysis charts', () => {
cy.wait(['@fetchIndicators', '@fetchChartRanking']).then(() => {
cy.get('[data-testid="analysis-chart"]').as('chart');
cy.get('@chart').should('be.visible');
cy.get('@chart').find('.recharts-responsive-container').and('have.length', 5);
cy.get('@chart').find('.recharts-responsive-container').and('have.length', 6);
});
});
});
54 changes: 14 additions & 40 deletions client/cypress/e2e/analysis/filters-map.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
describe('Analysis filters', () => {
beforeEach(() => {
cy.intercept('GET', '/api/v1/indicators?sort=name', {
fixture: 'indicators/index',
}).as('fetchIndicators');
cy.intercept('GET', '/api/v1/indicators?filter[status]=active', {
cy.intercept('GET', '/api/v1/indicators*', {
fixture: 'indicators/index',
}).as('fetchActiveIndicators');
cy.intercept('GET', '/api/v1/h3/years*', {
Expand All @@ -27,47 +24,24 @@ describe('Analysis filters', () => {
});

// Indicators
it('not to filter by a disabled indicator', () => {
cy.intercept('GET', '/api/v1/indicators*', {
statusCode: 200,
fixture: 'indicators/index',
}).as('fetchIndicators');

cy.wait('@fetchIndicators').then((interception) => {
const firstDisabledIndicator = interception.response.body?.data.find(
({ attributes }) => attributes.status === 'inactive',
it('arriving to /analysis/map without params will load the first active indicator available and reflect it in the URL', () => {
cy.wait('@fetchActiveIndicators').then((interception) => {
const firstIndicator = interception.response.body?.data[0];
cy.get('[data-testid="select-indicators-filter"]').should(
'contain',
firstIndicator?.attributes.metadata.short_name,
);
// opens the select
cy.get('[data-testid="select-indicators-filter"]').find('button').click();
cy.get('[data-testid="select-indicators-filter"]')
.find('li[data-headlessui-state="disabled"]')
.first()
.should('contain', firstDisabledIndicator?.attributes.name)
.should('have.attr', 'aria-disabled', 'true');
// url should not include the disabled indicator
cy.url().should('not.include', `indicator=${firstDisabledIndicator?.id}`); // Land use
cy.url().should('include', `indicators=${firstIndicator?.id}`);
});
});

it('filter by an active indicator', () => {
cy.intercept('GET', '/api/v1/indicators*', {
statusCode: 200,
fixture: 'indicators/index',
}).as('fetchIndicators');

cy.wait('@fetchIndicators').then((interception) => {
const activeIndicators = interception.response.body?.data.filter(
({ attributes }) => attributes.status === 'active',
);
// opens the select
cy.get('[data-testid="select-indicators-filter"]').find('button').click();
it('in analysis map, selecting an indicator will update the URL accordingly ', () => {
cy.wait('@fetchActiveIndicators').then((interception) => {
const thirdIndicator = interception.response.body?.data[2];
cy.get('[data-testid="select-indicators-filter"]')
.find('li:not([data-headlessui-state="disabled"])')
.eq(1)
.should('contain', activeIndicators[1]?.attributes.name)
.click();
// url should include the active indicator
cy.url().should('include', `indicator=${activeIndicators[1]?.id}`);
.type('{downarrow}{downarrow}{enter}')
.should('contain', thirdIndicator?.attributes.metadata.short_name);
cy.url().should('include', `indicators=${thirdIndicator?.id}`);
});
});

Expand Down
122 changes: 83 additions & 39 deletions client/cypress/e2e/analysis/filters-table.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,116 @@
describe('Analysis filters', () => {
beforeEach(() => {
cy.intercept('GET', '/api/v1/indicators?sort=name').as('fetchIndicators');
cy.intercept('GET', '/api/v1/indicators?filter[status]=active').as('fetchActiveIndicators');
cy.intercept('GET', '/api/v1/indicators?filter[status]=active', {
statusCode: 200,
fixture: 'indicators/index',
}).as('fetchActiveIndicators');
cy.intercept('GET', '/api/v1/h3/years*', {
statusCode: 200,
fixture: 'years/index',
}).as('fetchYears');
cy.intercept('GET', '/api/v1/materials/trees*').as('fetchMaterialsTrees');

cy.intercept('GET', '/api/v1/impact/table*').as('fetchTableData');

cy.login();
cy.visit('/analysis/table');
});

afterEach(() => {
cy.logout();
});

// Indicators
it('filter by All indicator', () => {
// select indicator
cy.get('[data-testid="select-indicators-filter"]').find('button').click();
cy.get('[data-testid="select-indicators-filter"] ul li:first').click();
it('/analysis/table page without indicators in URL displays all active indicators', () => {
cy.visit('/analysis/table');

cy.wait(['@fetchActiveIndicators', '@fetchTableData']).then((interception) => {
const allIndicators = interception[0].response.body?.data?.length;
const dataTableRequest = interception[1];

expect(dataTableRequest.request.query.indicatorIds).to.deep.eq(
interception[0].response.body?.data.map(({ id }) => id),
);

cy.get('[data-testid="analysis-table"]')
.find('table > tbody > tr[class="group"]')
.should('have.length', allIndicators);

cy.url().should('include', 'indicator=all');
cy.url().should('not.include', 'indicator=all');
});
});

it('not to filter by a disabled indicator', () => {
cy.intercept('GET', '/api/v1/indicators*', {
fixture: 'indicators/index',
}).as('fetchIndicators');
it('selecting multiple indicators will filter the data of the table', () => {
cy.visit('/analysis/table');

cy.wait('@fetchIndicators').then((interception) => {
const firstDisabledIndicator = interception.response.body?.data.find(
({ attributes }) => attributes.status === 'inactive',
cy.wait(['@fetchActiveIndicators', '@fetchTableData']).then((interception) => {
const indicators = interception[0].response.body?.data;
const waterQuality = indicators.filter(
({ attributes }) => attributes.category === 'Water quality',
);
// opens the select
cy.get('[data-testid="select-indicators-filter"]').find('button').click();
cy.get('[data-testid="select-indicators-filter"]')
.find('li[data-headlessui-state="disabled"]')
.first()
.should('contain', firstDisabledIndicator?.attributes.name)
.should('have.attr', 'aria-disabled', 'true');
// url should not include the disabled indicator
cy.url().should('not.include', `indicator=${firstDisabledIndicator?.id}`); // Land use

const $indicatorSelector = cy.get('[data-testid="tree-select-indicators"]');
$indicatorSelector.click().type('Water quality');

$indicatorSelector
.find('[data-testid="tree-select-search-results"]')
.contains('Water quality')
.click();

cy.url().should('include', `indicators=${waterQuality.map(({ id }) => id).join(',')}`);

cy.get('[data-testid="analysis-table"]')
.find('table > tbody > tr[class="group"]')
.should('have.length', waterQuality?.length);
});
});

it('filter by an active indicator', () => {
cy.intercept('GET', '/api/v1/indicators*', {
fixture: 'indicators/index',
}).as('fetchIndicators');
it('an user inspects one of the indicators in detail', () => {
cy.visit('/analysis/table');

cy.wait('@fetchIndicators').then((interception) => {
const firstActiveIndicator = interception.response.body?.data.find(
({ attributes }) => attributes.status === 'active',
cy.wait(['@fetchActiveIndicators', '@fetchTableData']).then((interception) => {
const indicators = interception[0].response.body?.data;
const waterQuality = indicators.filter(
({ attributes }) => attributes.category === 'Water quality',
);
// opens the select
cy.get('[data-testid="select-indicators-filter"]').find('button').click();
cy.get('[data-testid="select-indicators-filter"]')
.find('li:not([data-headlessui-state="disabled"])')
.eq(1)
.should('contain', firstActiveIndicator?.attributes.name)

const $indicatorSelector = cy.get('[data-testid="tree-select-indicators"]');

const $tableHeader = cy
.get('[data-testid="analysis-table"]')
.find('table > thead > tr')
.first();

const $tableRows = cy
.get('[data-testid="analysis-table"]')
.find('table > tbody > tr[class="group"]');

$indicatorSelector.click().type('Water quality');

$indicatorSelector
.find('[data-testid="tree-select-search-results"]')
.contains('Water quality')
.click();
// url should include the active indicator
cy.url().should('include', `indicator=${firstActiveIndicator?.id}`);

cy.wait('@fetchTableData');

$tableRows.should('have.length', waterQuality?.length);

$tableRows.first().find('button').contains('View detail').click();

$tableHeader.contains(waterQuality[0].attributes.name);

cy.url().should(
'include',
`indicators=${waterQuality.map(({ id }) => id).join(',')}&detail=${waterQuality[0].id}`,
);
});
});

// Group by filters
// // Group by filters
it('filter by a group', () => {
cy.visit('/analysis/table');

cy.get('[data-testid="select-group-filters"]').find('button').click();
cy.get('[data-testid="select-group-filters"]')
.find('li')
Expand All @@ -80,6 +122,8 @@ describe('Analysis filters', () => {

// Years
it('filter by a range of years', () => {
cy.visit('/analysis/table');

cy.wait('@fetchYears').then((interception) => {
const firstYear = interception.response.body?.data[0];
const lastYear =
Expand Down
4 changes: 4 additions & 0 deletions client/cypress/e2e/intervention-creation.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
beforeEach(() => {
cy.interceptAllRequests();

cy.intercept('GET', '/api/v1/indicators?filter[status]=active&include=unit&sort=name', {
fixture: 'indicators/withUnits',
}).as('fetchIndicatorsWithUnits');

cy.intercept('GET', '/api/v1/admin-regions/trees*', {
statusCode: 200,
fixture: 'scenario/scenario-location-countries',
Expand Down
Loading
Loading