From 16cec7d93d04048947f64c14e40c46ce9cd337d1 Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne@forem.com>
Date: Wed, 7 Jul 2021 09:41:35 +0100
Subject: [PATCH] [15 min fix] Add aria-current attribute to current dashboard
 link (#14128)

* add aria-current attribute to current dashboard link

* Update app/views/dashboards/_actions.html.erb

Co-authored-by: rhymes <github@rhymes.dev>

* Update app/views/dashboards/_actions.html.erb

Co-authored-by: rhymes <github@rhymes.dev>

* Update app/views/dashboards/_actions.html.erb

Co-authored-by: rhymes <github@rhymes.dev>

* Update app/views/dashboards/_actions.html.erb

Co-authored-by: rhymes <github@rhymes.dev>

* Update app/views/dashboards/_actions.html.erb

Co-authored-by: rhymes <github@rhymes.dev>

* Update app/views/dashboards/_actions.html.erb

Co-authored-by: rhymes <github@rhymes.dev>

* stub network request

* fix typo in stub

* always guard against lack of entries

Co-authored-by: rhymes <github@rhymes.dev>
---
 .../javascripts/initializers/initScrolling.js |   6 +-
 app/views/dashboards/_actions.html.erb        |  30 ++--
 .../dashboardNavigation.spec.js               | 134 ++++++++++++++++++
 3 files changed, 160 insertions(+), 10 deletions(-)
 create mode 100644 cypress/integration/dashboardFlows/dashboardNavigation.spec.js

diff --git a/app/assets/javascripts/initializers/initScrolling.js b/app/assets/javascripts/initializers/initScrolling.js
index b330bc698..c70dbf0cd 100644
--- a/app/assets/javascripts/initializers/initScrolling.js
+++ b/app/assets/javascripts/initializers/initScrolling.js
@@ -43,7 +43,7 @@ function fetchNext(el, endpoint, insertCallback) {
 }
 
 function insertNext(params, buildCallback) {
-  return function insertEntries(entries) {
+  return function insertEntries(entries = []) {
     var list = document.getElementById(params.listId || 'sublist');
     var newFollowersHTML = '';
     entries.forEach(function insertAnEntry(entry) {
@@ -57,7 +57,9 @@ function insertNext(params, buildCallback) {
     });
 
     var followList = document.getElementById('following-wrapper');
-    followList.insertAdjacentHTML('beforeend', newFollowersHTML);
+    if (followList) {
+      followList.insertAdjacentHTML('beforeend', newFollowersHTML);
+    }
     if (nextPage > 0) {
       fetching = false;
     }
diff --git a/app/views/dashboards/_actions.html.erb b/app/views/dashboards/_actions.html.erb
index ec1a00d19..40a770a77 100644
--- a/app/views/dashboards/_actions.html.erb
+++ b/app/views/dashboards/_actions.html.erb
@@ -1,35 +1,49 @@
-<nav class="hidden m:block">
-  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "show" && (params[:which] == "organization" || params[:which].blank?) %>" href="/dashboard">
+<nav class="hidden m:block" aria-label="Dashboards">
+  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "show" && (params[:which] == "organization" || params[:which].blank?) %>"
+    href="<%= dashboard_path %>"
+    <%= params[:action] == "show" && (params[:which] == "organization" || params[:which].blank?) ? ' aria-current="page"'.html_safe : "" %>>
     Posts
     <span class="crayons-indicator"><%= @user.articles_count %></span>
   </a>
 
-  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "series" && (params[:which] == "organization" || params[:which].blank?) %>" href="/<%= current_user.username %>/series">
+  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "series" && (params[:which] == "organization" || params[:which].blank?) %>"
+    href="<%= user_series_path(current_user.username) %>"
+    <%= params[:action] == "series" && (params[:which] == "organization" || params[:which].blank?) ? ' aria-current="page"'.html_safe : "" %>>
     Series
     <span class="crayons-indicator"><%= @user.collections.count %></span>
   </a>
 
-  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "followers" %>" href="/dashboard/user_followers">
+  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "followers" %>"
+    href="/dashboard/user_followers"
+    <%= params[:action] == "followers" ? ' aria-current="page"'.html_safe : "" %>>
     Followers
     <span class="crayons-indicator"><%= @user.followers_count %></span>
   </a>
 
-  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_tags" %>" href="/dashboard/following_tags">
+  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_tags" %>"
+    href="<%= dashboard_following_tags_path %>"
+    <%= params[:action] == "following_tags" ? ' aria-current="page"'.html_safe : "" %>>
     Following tags
     <span class="crayons-indicator"><%= @user.following_tags_count %></span>
   </a>
 
-  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_users" %>" href="/dashboard/following_users">
+  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_users" %>"
+    href="<%= dashboard_following_users_path %>"
+    <%= params[:action] == "following_users" ? ' aria-current="page"'.html_safe : "" %>>
     Following users
     <span class="crayons-indicator"><%= @user.following_users_count %></span>
   </a>
 
-  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_organizations" %>" href="/dashboard/following_organizations">
+  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_organizations" %>"
+    href="<%= dashboard_following_organizations_path %>"
+    <%= params[:action] == "following_organizations" ? ' aria-current="page"'.html_safe : "" %>>
     Following organizations
     <span class="crayons-indicator"><%= @user.following_organizations_count %></span>
   </a>
 
-  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_podcasts" %>" href="/dashboard/following_podcasts">
+  <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:action] == "following_podcasts" %>"
+    href="<%= dashboard_following_podcasts_path %>"
+    <%= params[:action] == "following_podcasts" ? ' aria-current="page"'.html_safe : "" %>>
     Following podcasts
     <span class="crayons-indicator"><%= @user.following_podcasts_count %></span>
   </a>
diff --git a/cypress/integration/dashboardFlows/dashboardNavigation.spec.js b/cypress/integration/dashboardFlows/dashboardNavigation.spec.js
new file mode 100644
index 000000000..41842a16d
--- /dev/null
+++ b/cypress/integration/dashboardFlows/dashboardNavigation.spec.js
@@ -0,0 +1,134 @@
+describe('Dashboard navigation', () => {
+  beforeEach(() => {
+    cy.testSetup();
+    cy.fixture('users/articleEditorV1User.json').as('user');
+
+    cy.intercept('/api/followers/**', []);
+    cy.intercept('/followings/**', []);
+
+    cy.get('@user').then((user) => {
+      cy.loginAndVisit(user, '/dashboard');
+    });
+  });
+
+  it('Shows the Posts dashboard', () => {
+    cy.findByRole('heading', { name: 'Posts' });
+    cy.findByRole('navigation').within(() => {
+      cy.findByRole('link', { name: /Posts/ }).should(
+        'have.attr',
+        'aria-current',
+        'page',
+      );
+
+      const otherLinks = [
+        /Series/,
+        /Followers/,
+        /Following tags/,
+        /Following users/,
+        /Following organizations/,
+        /Following podcasts/,
+      ];
+      otherLinks.forEach((name) => {
+        cy.findByRole('link', { name }).should('not.have.attr', 'aria-current');
+      });
+    });
+  });
+
+  it('Shows the Series dashboard', () => {
+    cy.findByRole('link', { name: /Series/ }).click();
+
+    // The Series dashboard does not show the sidebar like the others
+    cy.findByRole('heading', { name: "Article Editor v1 User's Series" });
+  });
+
+  it('Shows the Followers dashboard', () => {
+    cy.findByRole('link', { name: /Followers/ }).click();
+    cy.findByRole('heading', { name: 'Dashboard » Followers' });
+
+    cy.findByRole('navigation', { name: 'Dashboards' }).within(() => {
+      cy.findByRole('link', { name: /Followers/ }).should(
+        'have.attr',
+        'aria-current',
+        'page',
+      );
+      const otherLinks = [
+        /Posts/,
+        /Series/,
+        /Following tags/,
+        /Following users/,
+        /Following organizations/,
+        /Following podcasts/,
+      ];
+      otherLinks.forEach((name) => {
+        cy.findByRole('link', { name }).should('not.have.attr', 'aria-current');
+      });
+    });
+  });
+
+  it('Shows the Following tags dashboard', () => {
+    cy.findByRole('link', { name: /Following tags/ }).click();
+    cy.findByRole('heading', { name: 'Dashboard » Following tags' });
+    const otherLinks = [
+      /Posts/,
+      /Series/,
+      /Followers/,
+      /Following users/,
+      /Following organizations/,
+      /Following podcasts/,
+    ];
+    otherLinks.forEach((name) => {
+      cy.findByRole('link', { name }).should('not.have.attr', 'aria-current');
+    });
+  });
+
+  it('Shows the Following users dashboard', () => {
+    cy.findByRole('link', { name: /Following users/ }).click();
+    cy.findByRole('heading', { name: 'Dashboard » Following users' });
+
+    const otherLinks = [
+      /Posts/,
+      /Series/,
+      /Followers/,
+      /Following tags/,
+      /Following organizations/,
+      /Following podcasts/,
+    ];
+    otherLinks.forEach((name) => {
+      cy.findByRole('link', { name }).should('not.have.attr', 'aria-current');
+    });
+  });
+
+  it('Shows the Following organizations dashboard', () => {
+    cy.findByRole('link', { name: /Following organizations/ }).click();
+    cy.findByRole('heading', { name: 'Dashboard » Following organizations' });
+
+    const otherLinks = [
+      /Posts/,
+      /Series/,
+      /Followers/,
+      /Following tags/,
+      /Following users/,
+      /Following podcasts/,
+    ];
+    otherLinks.forEach((name) => {
+      cy.findByRole('link', { name }).should('not.have.attr', 'aria-current');
+    });
+  });
+
+  it('Shows the Following podcasts dashboard', () => {
+    cy.findByRole('link', { name: /Following podcasts/ }).click();
+    cy.findByRole('heading', { name: 'Dashboard » Following podcasts' });
+
+    const otherLinks = [
+      /Posts/,
+      /Series/,
+      /Followers/,
+      /Following tags/,
+      /Following users/,
+      /Following organizations/,
+    ];
+    otherLinks.forEach((name) => {
+      cy.findByRole('link', { name }).should('not.have.attr', 'aria-current');
+    });
+  });
+});