Skip to content

Commit

Permalink
Merge pull request #2571 from NationalSecurityAgency/t#2490/accessibi…
Browse files Browse the repository at this point in the history 
…lity_fix

#2490 - changed EventHistoryChart to use MultiSelect vs AutoComplete …
  • Loading branch information
@sudo-may
sudo-may authored Jun 11, 2024
2 parents 16eac27 + f801648 commit 6611e86
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 66 deletions.
32 changes: 11 additions & 21 deletions dashboard-prime/src/components/myProgress/usage/EventHistoryChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,21 +132,12 @@ const beforeListSlotText = computed(() => {
watch(() => projects.value.selected, () => {
timeProps.value.projIds = projects.value.selected.map((project) => project.projectId);
loadData();
projects.value.available = props.availableProjects.map((proj) => ({ ...proj })).filter((el) => !projects.value.selected.some((sel) => sel.projectId === el.projectId));
})
const filter = (event) => {
if(projects.value.selected.length < 5) {
const query = event.query.toLowerCase();
projects.value.available = props.availableProjects.map((proj) => ({...proj}));
projects.value.available = projects.value.available.filter((el) => !projects.value.selected.some((sel) => sel.projectId === el.projectId));
if (query) {
projects.value.available = projects.value.available.filter((el) => el.projectName.toLowerCase().includes(query));
}
projects.value.available = props.availableProjects.map((proj) => ({...proj})).filter((el) => !projects.value.selected.some((sel) => sel.projectId === el.projectId));
} else {
projects.value.available = [];
}
}
})
const updateTimeRange = (timeEvent) => {
if (appConfig.maxDailyUserEvents) {
Expand Down Expand Up @@ -202,19 +193,18 @@ const notAllZeros = (data) => {
</template>
<template #content>
<div class="flex w-full mb-2">
<AutoComplete
<MultiSelect
v-model="projects.selected"
:suggestions="projects.available"
:delay="500"
:completeOnFocus="true"
dropdown
multiple
:options="projects.available"
display="chip"
optionLabel="projectName"
aria-label="Select projects"
class="w-full"
@complete="filter"
data-cy="eventHistoryChartProjectSelector"
placeholder="Select option">
:selection-limit="5"
data-cy="eventHistoryChartProjectSelector">
<template #chip="slotProps">
{{ slotProps.value.projectName }}
</template>
<template #empty>
<div v-if="projects.selected.length === 5" class="ml-4" data-cy="trainingProfileMaximumReached">
Maximum of 5 options selected. First remove a selected option to select another.
Expand All @@ -223,7 +213,7 @@ const notAllZeros = (data) => {
No results found
</div>
</template>
</AutoComplete>
</MultiSelect>
</div>
<MetricsOverlay :loading="loading" :has-data="hasData" :no-data-msg="noDataMessage">
<apexchart type="line" height="350"
Expand Down
2 changes: 1 addition & 1 deletion e2e-tests/cypress/e2e/accessibility/accessibility_specs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -463,7 +463,7 @@ describe('Accessibility Tests', () => {
cy.customA11y();
});

it.skip('my usage page', () => {
it('my usage page', () => {
cy.fixture('vars.json')
.then((vars) => {
cy.request('POST', '/logout');
Expand Down
88 changes: 44 additions & 44 deletions e2e-tests/cypress/e2e/my-usage_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,29 +49,29 @@ describe('My Usage Tests', () => {
.click();

// validate 4 projects are loaded by default
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-autocomplete-token')
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-multiselect-token')
.contains('project 2')
.should('be.visible');
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-autocomplete-token')
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-multiselect-token')
.contains('project 3')
.should('be.visible');
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-autocomplete-token')
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-multiselect-token')
.contains('project 4')
.should('be.visible');
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-autocomplete-token')
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-multiselect-token')
.contains('project 5')
.should('be.visible');
cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-name="dropdownbutton"]')
cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-section="dropdownicon"]')
.click();
cy.get('.p-autocomplete-item').contains('project 6')
cy.get('.p-autocomplete-item').contains('project 7')
cy.get('.p-multiselect-item').contains('project 6')
cy.get('.p-multiselect-item').contains('project 7')
});

it('point history chart - remove project', () => {
cy.visit('/progress-and-rankings');
cy.get('[data-cy="viewUsageBtn"]') .click();

cy.get('[data-cy=eventHistoryChartProjectSelector] .p-autocomplete-token')
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-multiselect-token')
.should('have.length', 4)
.as('selected');
cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-section="removetokenicon"]')
Expand All @@ -80,32 +80,32 @@ describe('My Usage Tests', () => {
cy.get('@removeBtns')
.eq(2)
.click();
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-autocomplete-token')
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-multiselect-token')
.contains('project 2')
.should('be.visible');
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-autocomplete-token')
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-multiselect-token')
.contains('project 3')
.should('be.visible');
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-autocomplete-token')
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-multiselect-token')
.contains('project 5')
.should('be.visible');

cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-name="dropdownbutton"]')
cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-section="dropdownicon"]')
.click();
cy.get('.p-autocomplete-item').should('contain.text', 'project 4')
cy.get('.p-autocomplete-item').should('contain.text', 'project 6')
cy.get('.p-autocomplete-item').should('not.contain.text', 'project 2')
cy.get('.p-autocomplete-item').should('not.contain.text', 'project 3')
cy.get('.p-autocomplete-item').should('not.contain.text', 'project 5')
cy.get('.p-multiselect-item').should('contain.text', 'project 4')
cy.get('.p-multiselect-item').should('contain.text', 'project 6')
cy.get('.p-multiselect-item').should('not.contain.text', 'project 2')
cy.get('.p-multiselect-item').should('not.contain.text', 'project 3')
cy.get('.p-multiselect-item').should('not.contain.text', 'project 5')
});

it('point history chart - add project', () => {
cy.visit('/progress-and-rankings/my-usage');

cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-name="dropdownbutton"]')
cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-section="dropdownicon"]')
.click();
// cy.get('.p-autocomplete-item').should('contain.text', 'project 6')
cy.get('.p-autocomplete-items > [aria-label="This is project 6"]')
// cy.get('.p-multiselect-item').should('contain.text', 'project 6')
cy.get('.p-multiselect-items > [aria-label="This is project 6"]')
.as('project6');
cy.get('@project6')
.click();
Expand Down Expand Up @@ -141,28 +141,28 @@ describe('My Usage Tests', () => {
it('point history chart - only up to 5 projects can be selected', () => {
cy.visit('/progress-and-rankings/my-usage');

cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-name="dropdownbutton"]')
cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-section="dropdownicon"]')
.click();

cy.get('.p-autocomplete-item').should('contain.text', 'project 6')
cy.get('.p-autocomplete-items > [aria-label="This is project 6"]').click()
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-autocomplete-token')
cy.get('.p-multiselect-item').should('contain.text', 'project 6')
cy.get('.p-multiselect-items > [aria-label="This is project 6"]').click()
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-multiselect-token')
.contains('project 2')
.should('be.visible');
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-autocomplete-token')
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-multiselect-token')
.contains('project 3')
.should('be.visible');
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-autocomplete-token')
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-multiselect-token')
.contains('project 4')
.should('be.visible');
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-autocomplete-token')
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-multiselect-token')
.contains('project 5')
.should('be.visible');
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-autocomplete-token')
cy.get('[data-cy=eventHistoryChartProjectSelector] .p-multiselect-token')
.contains('project 6')
.should('be.visible');
cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-name="dropdownbutton"]')
.click();
// cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-section="dropdownicon"]')
// .click();
cy.get('[data-cy=trainingProfileMaximumReached]')
.contains('Maximum of 5 options selected')
.should('be.visible');
Expand All @@ -171,10 +171,10 @@ describe('My Usage Tests', () => {
it('point history chart - all projects removed', () => {
cy.visit('/progress-and-rankings/my-usage');

cy.get('[data-cy="eventHistoryChartProjectSelector"] [aria-label="This is project 2"] [data-pc-section="removetokenicon"]').click()
cy.get('[data-cy="eventHistoryChartProjectSelector"] [aria-label="This is project 3"] [data-pc-section="removetokenicon"]').click()
cy.get('[data-cy="eventHistoryChartProjectSelector"] [aria-label="This is project 4"] [data-pc-section="removetokenicon"]').click()
cy.get('[data-cy="eventHistoryChartProjectSelector"] [aria-label="This is project 5"] [data-pc-section="removetokenicon"]').click()
cy.get('[data-cy="eventHistoryChartProjectSelector"]').contains("This is project 2").find('[data-pc-section="removetokenicon"]').click()
cy.get('[data-cy="eventHistoryChartProjectSelector"]').contains("This is project 3").find('[data-pc-section="removetokenicon"]').click()
cy.get('[data-cy="eventHistoryChartProjectSelector"]').contains("This is project 4").find('[data-pc-section="removetokenicon"]').click()
cy.get('[data-cy="eventHistoryChartProjectSelector"]').contains("This is project 5").find('[data-pc-section="removetokenicon"]').click()
cy.get('[data-cy=eventHistoryChart]')
.contains('Please select at least one project from the list above.');

Expand All @@ -183,26 +183,26 @@ describe('My Usage Tests', () => {
it('point history chart - projects with no user events', () => {
cy.visit('/progress-and-rankings/my-usage');

cy.get('[data-cy="eventHistoryChartProjectSelector"] [aria-label="This is project 2"] [data-pc-section="removetokenicon"]').click()
cy.get('[data-cy="eventHistoryChartProjectSelector"] [aria-label="This is project 3"] [data-pc-section="removetokenicon"]').click()
cy.get('[data-cy="eventHistoryChartProjectSelector"] [aria-label="This is project 4"] [data-pc-section="removetokenicon"]').click()
cy.get('[data-cy="eventHistoryChartProjectSelector"] [aria-label="This is project 5"] [data-pc-section="removetokenicon"]').click()
cy.get('[data-cy="eventHistoryChartProjectSelector"]').contains("This is project 2").find('[data-pc-section="removetokenicon"]').click()
cy.get('[data-cy="eventHistoryChartProjectSelector"]').contains("This is project 3").find('[data-pc-section="removetokenicon"]').click()
cy.get('[data-cy="eventHistoryChartProjectSelector"]').contains("This is project 4").find('[data-pc-section="removetokenicon"]').click()
cy.get('[data-cy="eventHistoryChartProjectSelector"]').contains("This is project 5").find('[data-pc-section="removetokenicon"]').click()
cy.get('[data-cy=eventHistoryChart]')
.contains('Please select at least one project from the list above.');

// select just project 2 (which has no user events yet)
cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-name="dropdownbutton"]').click();
cy.get('.p-autocomplete-items > [aria-label="This is project 2"]').click()
cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-section="dropdownicon"]').click();
cy.get('.p-multiselect-items > [aria-label="This is project 2"]').click()

cy.get('[data-cy=eventHistoryChartProjectSelector]')
.contains('project 2')
.should('be.visible');
cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-name="dropdownbutton"]').click();
cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-section="dropdownicon"]').click();
cy.get('[data-cy=eventHistoryChartProjectSelector]')
cy.get('.p-autocomplete-item').should('contain.text', 'project 3')
cy.get('.p-autocomplete-item').should('contain.text', 'project 4')
cy.get('.p-multiselect-item').should('contain.text', 'project 3')
cy.get('.p-multiselect-item').should('contain.text', 'project 4')
cy.get('[data-cy=eventHistoryChartProjectSelector]')
cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-name="dropdownbutton"]')
cy.get('[data-cy=eventHistoryChartProjectSelector] [data-pc-section="dropdownicon"]')
.click();
cy.get('[data-cy=eventHistoryChart]')
.contains('There are no events for the selected project(s) and time period.');
Expand Down

0 comments on commit 6611e86

Please sign in to comment.