Create and destroy fake clock on the same `it` function

There seems to be a pattern in our code that if a fake clock is used on
a single `it` function, the clock should be created and restored within
that function. I think it is beneficial from a readability perspective.
On the other hand, if the clock is used in several test functions it
should be declared on a parent context and restored on an `afterEach`
function.

I simplified an unrelated test using async.

src/sidebar/components/test/Menu-test.js

@@ -9,7 +9,6 @@ import { checkAccessibility } from '../../../test-util/accessibility';
 
 describe('Menu', () => {
   let container;
-  let clock;
 
   const TestLabel = () => 'Test label';
   const TestMenuItem = () => 'Test item';
@@ -39,10 +38,6 @@ describe('Menu', () => {
   afterEach(() => {
     $imports.$restore();
     container.remove();
-    if (clock) {
-      clock.restore();
-      clock = null;
-    }
   });
 
   it('opens and closes when the toggle button is clicked', () => {
@@ -182,7 +177,7 @@ describe('Menu', () => {
     it(`${
       shouldClose ? 'closes' : "doesn't close"
     } when user performs a "${eventType}" (key: "${key}") on menu content`, () => {
-      clock = sinon.useFakeTimers();
+      const clock = sinon.useFakeTimers();
       try {
         const wrapper = createMenu({ defaultOpen: true });
         wrapper.find('.Menu__content').simulate(eventType, { key });

src/sidebar/services/test/session-test.js

@@ -109,8 +109,6 @@ describe('SessionService', () => {
     });
 
     context('when using a first party account', () => {
-      let clock;
-
       beforeEach(() => {
         fakeApi.profile.read.returns(
           Promise.resolve({
@@ -119,12 +117,6 @@ describe('SessionService', () => {
         );
       });
 
-      afterEach(() => {
-        if (clock) {
-          clock.restore();
-        }
-      });
-
       it('should fetch profile data from the API', () => {
         const session = createService();
         return session.load().then(() => {
@@ -170,32 +162,28 @@ describe('SessionService', () => {
         });
       });
 
-      it('should cache the returned profile data', () => {
+      it('should cache the returned profile data', async () => {
         const session = createService();
-        return session
-          .load()
-          .then(() => {
-            return session.load();
-          })
-          .then(() => {
-            assert.calledOnce(fakeApi.profile.read);
-          });
+        await session.load();
+        await session.load();
+
+        assert.calledOnce(fakeApi.profile.read);
       });
 
-      it('should eventually expire the cache', () => {
-        clock = sinon.useFakeTimers();
+      it('should eventually expire the cache', async () => {
+        const clock = sinon.useFakeTimers();
         const CACHE_TTL = 5 * 60 * 1000; // 5 minutes
-
         const session = createService();
-        return session
-          .load()
-          .then(() => {
-            clock.tick(CACHE_TTL * 2);
-            return session.load();
-          })
-          .then(() => {
-            assert.calledTwice(fakeApi.profile.read);
-          });
+
+        try {
+          await session.load();
+          clock.tick(CACHE_TTL * 2);
+          await session.load();
+
+          assert.calledTwice(fakeApi.profile.read);
+        } finally {
+          clock.restore();
+        }
       });
     });
   });