Skip to content

Commit

Permalink
Merge pull request #2505 from NationalSecurityAgency/t#2497/skill-dis…
Browse files Browse the repository at this point in the history 
…play-breadcrumb

#2497 - supply callback for `handleRouteChanged` on `SkillsDisplayJS`
  • Loading branch information
@sudo-may
sudo-may authored Dec 14, 2023
2 parents e059067 + 71c1368 commit 43fc7f0
Show file tree
Hide file tree
Showing 4 changed files with 189 additions and 4 deletions.
3 changes: 2 additions & 1 deletion dashboard/src/components/inception/InceptionSkills.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ limitations under the License.
*/
<template>
<div class="inception-container pb-4">
<div id="skills-client-container" ref="skillsDisplayRef" @route-changed="skillsDisplayRouteChanged"></div>
<div id="skills-client-container"></div>
</div>
</template>

Expand Down Expand Up @@ -47,6 +47,7 @@ limitations under the License.
version: this.skillsVersion,
options: this.options,
theme: this.theme,
handleRouteChanged: (newPath) => { this.skillsDisplayRouteChanged(newPath); },
});
clientDisplay.attachTo(document.querySelector('#skills-client-container'));
this.clientDisplay = clientDisplay;
Expand Down
3 changes: 2 additions & 1 deletion dashboard/src/components/myProgress/MyProjectSkillsPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ limitations under the License.
Contact Project <i aria-hidden="true" class="fas fas fa-mail-bulk"/>
</b-button>
</div>
<div v-if="!isLoadingSettings" id="skills-client-container" ref="skillsDisplayRef" @route-changed="skillsDisplayRouteChanged">
<div v-if="!isLoadingSettings" id="skills-client-container">
</div>
</div>
<contact-owners-dialog v-if="showContact" :project-name="projectName" v-model="showContact" :project-id="projectId"/>
Expand Down Expand Up @@ -149,6 +149,7 @@ limitations under the License.
version: this.skillsVersion,
options: this.options,
theme: this.themeObj,
handleRouteChanged: (newPath) => { this.skillsDisplayRouteChanged(newPath); },
});
this.$nextTick(() => {
clientDisplay.attachTo(document.querySelector('#skills-client-container'));
Expand Down
3 changes: 2 additions & 1 deletion dashboard/src/components/users/ClientDisplayPreview.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ limitations under the License.
</b-form>
</sub-page-header>
<loading-container :is-loading="checkingAccess">
<div id="skills-client-container" ref="skillsDisplayRef" @route-changed="skillsDisplayRouteChanged"></div>
<div id="skills-client-container"></div>
<div v-if="!canAccess" class="container">
<div class="row justify-content-center">
<div class="col-md-6 mt-3">
Expand Down Expand Up @@ -171,6 +171,7 @@ limitations under the License.
options: this.configuration,
theme: this.theme,
userId: this.userIdParam,
handleRouteChanged: (newPath) => { this.skillsDisplayRouteChanged(newPath); },
});
clientDisplay.attachTo(document.querySelector('#skills-client-container'));
this.clientDisplay = clientDisplay;
Expand Down
184 changes: 183 additions & 1 deletion e2e-tests/cypress/e2e/my-progress_breadcrumb_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,18 @@ const timeFromNowFormatter = (value) => dayjs(value)

const testTime = new Date().getTime();
const yesterday = new Date().getTime() - (1000 * 60 * 60 * 24);

const getIframeBody = () => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get('iframe')
.its('0.contentDocument.body')
.should('not.be.empty')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap);
};
describe('My Progress Breadcrumb Tests', () => {

beforeEach(() => {
Expand Down Expand Up @@ -1041,5 +1052,176 @@ describe('My Progress Breadcrumb Tests', () => {

});

it('navigate through and validate breadcrumbs', function () {

cy.visit('/');

cy.get('[data-cy=project-link-proj1]')
.click();
cy.wait('@pointHistoryChart');

cy.dashboardCd()
.contains('Overall Points');
cy.get('[data-cy="breadcrumb-Progress And Rankings"]')
.should('be.visible');
cy.get('[data-cy=breadcrumb-proj1]')
.should('be.visible');
cy.get('[data-cy=breadcrumb-proj1]')
.should('exist');
cy.get('[data-cy=breadcrumb-proj1]')
.should('not.have.attr', 'href');
cy.get('[data-cy=breadcrumb-bar]')
.contains('Project: proj1')
.should('be.visible');

// click on subject
getIframeBody()
.find('.user-skill-subject-tile:nth-child(1)')
.click();
getIframeBody()
.find('[data-cy=title]')
.contains('Subject 1');
cy.get('[data-cy=breadcrumb-item]')
.its('length')
.should('eq', 3);
cy.get('[data-cy=breadcrumb-item]')
.eq(0)
.should('contain.text', 'Progress And Rankings');
cy.get('[data-cy=breadcrumb-item]')
.eq(1)
.should('contain.text', 'Project: proj1');
cy.get('[data-cy=breadcrumb-item]')
.eq(2)
.should('contain.text', 'Subject: subj1');

// click on skill
getIframeBody()
.find('[data-cy="skillProgress_index-0"] [data-cy="skillProgressBar"]')
.click();
getIframeBody()
.find('[data-cy=title]')
.contains('Skill Overview');
cy.get('[data-cy=breadcrumb-item]')
.its('length')
.should('eq', 4);
cy.get('[data-cy=breadcrumb-item]')
.eq(0)
.should('contain.text', 'Progress And Rankings');
cy.get('[data-cy=breadcrumb-item]')
.eq(1)
.should('contain.text', 'Project: proj1');
cy.get('[data-cy=breadcrumb-item]')
.eq(2)
.should('contain.text', 'Subject: subj1');
cy.get('[data-cy=breadcrumb-item]')
.eq(3)
.should('contain.text', 'Skill: skill1');

// back to subject page
cy.get('[data-cy=breadcrumb-subj1]')
.click();
getIframeBody()
.find('[data-cy=title]')
.contains('Subject 1');

// click on rank
getIframeBody()
.find('[data-cy=myRank]')
.click();
getIframeBody()
.find('[data-cy=title]')
.contains('My Rank');
cy.get('[data-cy=breadcrumb-item]')
.its('length')
.should('eq', 4);
cy.get('[data-cy=breadcrumb-item]')
.eq(0)
.should('contain.text', 'Progress And Rankings');
cy.get('[data-cy=breadcrumb-item]')
.eq(1)
.should('contain.text', 'Project: proj1');
cy.get('[data-cy=breadcrumb-item]')
.eq(2)
.should('contain.text', 'Subject: subj1');
cy.get('[data-cy=breadcrumb-item]')
.eq(3)
.should('contain.text', 'Rank');


// back to home page
cy.get('[data-cy=breadcrumb-proj1]')
.click();
cy.dashboardCd()
.contains('Overall Points');
// click on rank
getIframeBody()
.find('[data-cy=myRank]')
.click();
getIframeBody()
.find('[data-cy=title]')
.contains('My Rank');
cy.get('[data-cy=breadcrumb-item]')
.its('length')
.should('eq', 3);
cy.get('[data-cy=breadcrumb-item]')
.eq(0)
.should('contain.text', 'Progress And Rankings');
cy.get('[data-cy=breadcrumb-item]')
.eq(1)
.should('contain.text', 'Project: proj1');
cy.get('[data-cy=breadcrumb-item]')
.eq(2)
.should('contain.text', 'Rank');

// back to home page
cy.get('[data-cy=breadcrumb-proj1]')
.click();
cy.dashboardCd()
.contains('Overall Points');

// click on my badges
getIframeBody()
.find('[data-cy=myBadges]')
.click();
getIframeBody()
.find('[data-cy=title]')
.contains('My Badges');
cy.get('[data-cy=breadcrumb-item]')
.its('length')
.should('eq', 3);
cy.get('[data-cy=breadcrumb-item]')
.eq(0)
.should('contain.text', 'Progress And Rankings');
cy.get('[data-cy=breadcrumb-item]')
.eq(1)
.should('contain.text', 'Project: proj1');
cy.get('[data-cy=breadcrumb-item]')
.eq(2)
.should('contain.text', 'Badges');

// click on badge
getIframeBody()
.find('[data-cy=earnedBadgeLink_badge1]')
.click();
getIframeBody()
.find('[data-cy=title]')
.contains('Badge Details');
cy.get('[data-cy=breadcrumb-item]')
.its('length')
.should('eq', 4);
cy.get('[data-cy=breadcrumb-item]')
.eq(0)
.should('contain.text', 'Progress And Rankings');
cy.get('[data-cy=breadcrumb-item]')
.eq(1)
.should('contain.text', 'Project: proj1');
cy.get('[data-cy=breadcrumb-item]')
.eq(2)
.should('contain.text', 'Badges');
cy.get('[data-cy=breadcrumb-item]')
.eq(3)
.should('contain.text', 'Badge: badge1');
});

});

0 comments on commit 43fc7f0

Please sign in to comment.