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.

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

#2497 - supply callback for handleRouteChanged on SkillsDisplayJS #2505

Merged
merged 1 commit into from
Dec 14, 2023
Merged
Changes from all commits
Commits
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
3 changes: 2 additions & 1 deletion dashboard/src/components/inception/InceptionSkills.vue
Original file line number Diff line number Diff line change
@@ -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>

@@ -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;
3 changes: 2 additions & 1 deletion dashboard/src/components/myProgress/MyProjectSkillsPage.vue
Original file line number Diff line number Diff line change
@@ -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"/>
@@ -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'));
3 changes: 2 additions & 1 deletion dashboard/src/components/users/ClientDisplayPreview.vue
Original file line number Diff line number Diff line change
@@ -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">
@@ -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;
184 changes: 183 additions & 1 deletion e2e-tests/cypress/e2e/my-progress_breadcrumb_spec.js
Original file line number Diff line number Diff line change
@@ -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(() => {
@@ -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');
});

});