Simplify the test for AccessTokens component

Refactor `AccessTokens` component test. Axios calls are tested on the
`useAccessTokens` store. Hence, in the component we just need to make
sure that the `fetchTokens` are been called. This simplifies the test.

EE: true

ee/spec/frontend/service_accounts/components/access_tokens/access_tokens_spec.js

 import { GlFilteredSearch, GlPagination } from '@gitlab/ui';
-import MockAdapter from 'axios-mock-adapter';
+import { createTestingPinia } from '@pinia/testing';
+import Vue from 'vue';
+import { PiniaVuePlugin } from 'pinia';
 import AccessTokens from 'ee/service_accounts/components/access_tokens/access_tokens.vue';
+import { useAccessTokens } from 'ee/service_accounts/stores/access_tokens';
 import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import axios from '~/lib/utils/axios_utils';
-import { pinia } from '~/pinia/instance';
+
+Vue.use(PiniaVuePlugin);
 
 describe('AccessTokens', () => {
   let wrapper;
-  const mockAxios = new MockAdapter(axios);
+
+  const pinia = createTestingPinia();
+  const store = useAccessTokens();
+
   const accessTokenShow = 'https://gitlab.example.com/api/v4/personal_access_tokens';
   const id = 235;
 
@@ -27,63 +33,31 @@ describe('AccessTokens', () => {
   const findFilteredSearch = () => wrapper.findComponent(GlFilteredSearch);
   const findPagination = () => wrapper.findComponent(GlPagination);
 
-  beforeEach(() => {
-    mockAxios.reset();
-  });
-
-  it('fetches tokens when it is rendered', async () => {
+  it('fetches tokens when it is rendered', () => {
     createComponent();
-    await waitForPromises();
+    waitForPromises();
 
-    expect(mockAxios.history.get).toHaveLength(1);
-    expect(mockAxios.history.get[0]).toEqual(
-      expect.objectContaining({
-        url: accessTokenShow,
-        params: {
-          page: 1,
-          state: 'active',
-          sort: 'expires_at_asc_id_desc',
-          user_id: 235,
-        },
-      }),
-    );
+    expect(store.setup).toHaveBeenCalledWith({
+      filters: [{ type: 'state', value: { data: 'active', operator: '=' } }],
+      id: 235,
+      urlShow: 'https://gitlab.example.com/api/v4/personal_access_tokens',
+    });
+    expect(store.fetchTokens).toHaveBeenCalledTimes(1);
   });
 
-  it('fetches tokens when the page is changed', async () => {
+  it('fetches tokens when the page is changed', () => {
     createComponent();
+    expect(store.fetchTokens).toHaveBeenCalledTimes(1);
     findPagination().vm.$emit('input', 2);
-    await waitForPromises();
 
-    expect(mockAxios.history.get).toHaveLength(2);
-    expect(mockAxios.history.get[1]).toEqual(
-      expect.objectContaining({
-        url: accessTokenShow,
-        params: {
-          page: 2,
-          state: 'active',
-          sort: 'expires_at_asc_id_desc',
-          user_id: 235,
-        },
-      }),
-    );
+    expect(store.fetchTokens).toHaveBeenCalledTimes(2);
   });
 
-  it('fetches tokens when filters are changed', async () => {
+  it('fetches tokens when filters are changed', () => {
     createComponent();
+    expect(store.fetchTokens).toHaveBeenCalledTimes(1);
     findFilteredSearch().vm.$emit('submit', ['my token']);
-    await waitForPromises();
 
-    expect(mockAxios.history.get).toHaveLength(2);
-    expect(mockAxios.history.get[1]).toEqual(
-      expect.objectContaining({
-        url: accessTokenShow,
-        params: {
-          page: 1,
-          sort: 'expires_at_asc_id_desc',
-          search: 'my token',
-          user_id: 235,
-        },
-      }),
-    );
+    expect(store.fetchTokens).toHaveBeenCalledTimes(2);
   });
 });