Fix inconsistent pagination styles

app/assets/javascripts/vue_shared/components/table_pagination.vue

@@ -149,9 +149,9 @@ export default {
         }"
         class="page-item"
       >
-        <a class="page-link" @click.prevent="changePage(item.title, item.disabled)">
+        <button type="button" class="page-link" @click="changePage(item.title, item.disabled)">
           {{ item.title }}
-        </a>
+        </button>
       </li>
     </ul>
   </div>

app/assets/stylesheets/framework/variables_overrides.scss

@@ -44,3 +44,4 @@ $spacers: (
   5: ($spacer * 4),
   6: ($spacer * 8)
 );
+$pagination-color: $gl-text-color;

changelogs/unreleased/consistent-pagination.yml

+---
+title: Fix inconsistent pagination styles
+merge_request:
+author:
+type: fixed

spec/features/projects/pipelines/pipelines_spec.rb

@@ -485,7 +485,7 @@ describe 'Pipelines', :js do
         it 'should show updated content' do
           visit project_pipelines_path(project)
           wait_for_requests
-          page.find('.js-next-button a').click
+          page.find('.js-next-button .page-link').click
 
           expect(page).to have_selector('.gl-pagination .page', count: 2)
         end

spec/javascripts/commit/pipelines/pipelines_spec.js

@@ -87,7 +87,7 @@ describe('Pipelines table in Commits and Merge requests', function() {
             };
 
             vm.$nextTick(() => {
-              vm.$el.querySelector('.js-next-button a').click();
+              vm.$el.querySelector('.js-next-button .page-link').click();
 
               expect(vm.updateContent).toHaveBeenCalledWith({ page: '2' });
               done();

spec/javascripts/environments/environments_app_spec.js

@@ -94,7 +94,7 @@ describe('Environment', () => {
         it('should make an API request when page is clicked', done => {
           spyOn(component, 'updateContent');
           setTimeout(() => {
-            component.$el.querySelector('.gl-pagination li:nth-child(5) a').click();
+            component.$el.querySelector('.gl-pagination li:nth-child(5) .page-link').click();
 
             expect(component.updateContent).toHaveBeenCalledWith({ scope: 'available', page: '2' });
             done();

spec/javascripts/environments/folder/environments_folder_view_spec.js

@@ -107,7 +107,7 @@ describe('Environments Folder View', () => {
       it('should make an API request when changing page', done => {
         spyOn(component, 'updateContent');
         setTimeout(() => {
-          component.$el.querySelector('.gl-pagination .js-last-button a').click();
+          component.$el.querySelector('.gl-pagination .js-last-button .page-link').click();
 
           expect(component.updateContent).toHaveBeenCalledWith({
             scope: component.scope,

spec/javascripts/pipelines/pipelines_spec.js

@@ -446,7 +446,7 @@ describe('Pipelines', () => {
             };
 
             vm.$nextTick(() => {
-              vm.$el.querySelector('.js-next-button a').click();
+              vm.$el.querySelector('.js-next-button .page-link').click();
 
               expect(vm.updateContent).toHaveBeenCalledWith({ scope: 'all', page: '2' });
 

spec/javascripts/vue_shared/components/table_pagination_spec.js

@@ -53,7 +53,7 @@ describe('Pagination component', () => {
           component.$el.querySelector('.js-previous-button').classList.contains('disabled'),
         ).toEqual(true);
 
-        component.$el.querySelector('.js-previous-button a').click();
+        component.$el.querySelector('.js-previous-button .page-link').click();
 
         expect(spy).not.toHaveBeenCalled();
       });
@@ -71,7 +71,7 @@ describe('Pagination component', () => {
           change: spy,
         });
 
-        component.$el.querySelector('.js-previous-button a').click();
+        component.$el.querySelector('.js-previous-button .page-link').click();
 
         expect(spy).toHaveBeenCalledWith(1);
       });
@@ -91,7 +91,7 @@ describe('Pagination component', () => {
           change: spy,
         });
 
-        const button = component.$el.querySelector('.js-first-button a');
+        const button = component.$el.querySelector('.js-first-button .page-link');
 
         expect(button.textContent.trim()).toEqual('« First');
 
@@ -115,7 +115,7 @@ describe('Pagination component', () => {
           change: spy,
         });
 
-        const button = component.$el.querySelector('.js-last-button a');
+        const button = component.$el.querySelector('.js-last-button .page-link');
 
         expect(button.textContent.trim()).toEqual('Last »');
 
@@ -141,7 +141,7 @@ describe('Pagination component', () => {
 
         expect(component.$el.querySelector('.js-next-button').textContent.trim()).toEqual('Next');
 
-        component.$el.querySelector('.js-next-button a').click();
+        component.$el.querySelector('.js-next-button .page-link').click();
 
         expect(spy).not.toHaveBeenCalled();
       });
@@ -159,7 +159,7 @@ describe('Pagination component', () => {
           change: spy,
         });
 
-        component.$el.querySelector('.js-next-button a').click();
+        component.$el.querySelector('.js-next-button .page-link').click();
 
         expect(spy).toHaveBeenCalledWith(4);
       });