diff --git a/src/components/Frame/components/Loading/tests/Loading.test.tsx b/src/components/Frame/components/Loading/tests/Loading.test.tsx
index a1b76e458d6..2136b229a9e 100644
--- a/src/components/Frame/components/Loading/tests/Loading.test.tsx
+++ b/src/components/Frame/components/Loading/tests/Loading.test.tsx
@@ -1,17 +1,38 @@
import React from 'react';
import {mountWithAppProvider} from 'test-utilities/legacy';
+import {animationFrame} from '@shopify/jest-dom-mocks';
+import {act} from 'react-dom/test-utils';
import {Loading} from '../Loading';
describe('', () => {
- const loading = mountWithAppProvider();
+ beforeEach(() => {
+ animationFrame.mock();
+ });
+
+ afterEach(() => {
+ animationFrame.restore();
+ });
+
+ it('increases over time', () => {
+ const loading = mountWithAppProvider();
- it('mounts', () => {
- expect(loading.exists()).toBe(true);
+ for (let i = 0; i <= 100; i++) {
+ act(() => animationFrame.runFrame());
+ }
+
+ loading.update();
+
+ expect(loading.find('.Level').prop('aria-valuenow')).toBe(26);
});
- it('unmounts safely', () => {
+ it('cancels the animationFrame on unmount', () => {
+ const cancelAnimationFrameSpy = jest.spyOn(window, 'cancelAnimationFrame');
+ const loading = mountWithAppProvider();
+
expect(() => {
loading.unmount();
}).not.toThrow();
+
+ expect(cancelAnimationFrameSpy).toHaveBeenCalledTimes(1);
});
});