Merge branch 'master' into 2136-highlighting-test

frontend/cypress/tests/chartView/chartView_scrollToActiveRepo.cy.js

@@ -0,0 +1,62 @@
+describe('scroll to active repo', () => {
+ // need to set scrollBehavior to false because the default behavior is to scroll the element into view
+ it('selecting a visible repo should not scroll', { scrollBehavior: false }, () => {
+ // close the error message box
+ cy.get('.error-message-box')
+ .should('be.visible');
+
+ cy.get('#summary-wrapper > #summary > .error-message-box > .error-message-box__close-button')
+ .click();
+
+ cy.get('.error-message-box')
+ .should('not.be.visible');
+
+ cy.get('.icon-button.fa-code')
+ .should('exist')
+ .first();
+
+ let scrollTopOriginal = 0;
+ cy.get('#summary-wrapper')
+ .first()
+ .then(($el) => {
+ scrollTopOriginal = $el.prop('scrollTop');
+ });
+
+ cy.get('.icon-button.fa-code')
+ .should('exist')
+ .first()
+ .click();
+
+ cy.get('#summary-wrapper')
+ .first()
+ .then(($el) => {
+ const scrollTop = $el.prop('scrollTop');
+ expect(scrollTop).to.equal(scrollTopOriginal);
+ });
+ });
+
+ it('selecting a non-visible repo should scroll', () => {
+ cy.get('.icon-button.fa-code')
+ .should('exist')
+ .last()
+ .click();
+
+ cy.get('#summary-wrapper')
+ .first()
+ .then(($el) => {
+ const scrollTop = $el.prop('scrollTop');
+ expect(scrollTop).to.not.equal(0);
+ });
+
+ cy.url()
+ .should('contain', 'tabAuthor=yong24s')
+ .should('contain', 'tabRepo=reposense%2FRepoSense%5Bcypress%5D');
+
+ cy.reload();
+
+ cy.get('.icon-button.fa-code')
+ .should('exist')
+ .last()
+ .should('be.visible');
+ });
+});

frontend/src/components/c-summary-charts.vue

@@ -153,7 +153,8 @@
  .summary-chart(
  v-for="(user, j) in getRepo(repo)",
  v-bind:style="isChartGroupWidgetMode && j === getRepo(repo).length - 1 ? {'marginBottom': 0} : {}",
- v-bind:ref="'summary-chart-' + j"
+ v-bind:ref="'summary-chart-' + j",
+ v-bind:id="user.name === activeUser && user.repoName === activeRepo ? 'selectedChart' : null"
  )
  .summary-chart__title(
  v-if="!isGroupMerged(getGroupName(repo))",
@@ -428,6 +429,15 @@ export default defineComponent({
  this.removeSelectedTab();
  }
  },
+
+ // watching so highlighted only when summary charts are rendered
+ filteredRepos() {
+ this.$nextTick(() => {
+ if (this.activeRepo !== null && this.activeUser !== null) {
+ this.scrollToActiveRepo();
+ }
+ });
+ },
  },
  created(): void {
  this.retrieveSelectedTabHash();
@@ -829,6 +839,8 @@ export default defineComponent({
 
  this.activeTabType = tabType;
  window.encodeHash();
+
+ this.$nextTick(() => this.scrollToActiveRepo());
  },
 
  removeSelectedTab(): void {
@@ -881,6 +893,13 @@ export default defineComponent({
 
  return totalContribution / totalCommits;
  },
+
+ scrollToActiveRepo(): void {
+ const chart = document.getElementById('selectedChart');
+ if (chart) {
+ chart.scrollIntoView({ block: 'nearest' });
+ }
+ },
  },
 });
 </script>