@atlaskit/editor-plugin-table 2.7.2 → 2.8.0

package/dist/esm/plugins/table/nodeviews/TableResizer.js

@@ -4,39 +4,20 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import rafSchd from 'raf-schd';
-import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
-import { TableMap } from '@atlaskit/editor-tables';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, hasTableBeenResized, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
+import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_HIGHLIGHT_GAP, TABLE_SNAP_GAP } from '../ui/consts';
-import { getTableWidth } from '../utils';
+import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines, defaultGuidelineWidths } from '../utils/guidelines';
 import { findClosestSnap } from '../utils/snapping';
 var handles = {
   right: true
 };
 var tableHandleMarginTop = 12;
-var generateResizedPayload = function generateResizedPayload(props) {
-  var _props$originalNode$a;
-  var tableMap = TableMap.get(props.resizedNode);
-  return {
-    action: TABLE_ACTION.RESIZED,
-    actionSubject: ACTION_SUBJECT.TABLE,
-    eventType: EVENT_TYPE.TRACK,
-    attributes: {
-      newWidth: props.resizedNode.attrs.width,
-      prevWidth: (_props$originalNode$a = props.originalNode.attrs.width) !== null && _props$originalNode$a !== void 0 ? _props$originalNode$a : null,
-      nodeSize: props.resizedNode.nodeSize,
-      totalTableWidth: hasTableBeenResized(props.resizedNode) ? getTableWidth(props.resizedNode) : null,
-      totalRowCount: tableMap.height,
-      totalColumnCount: tableMap.width
-    }
-  };
-};
 var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
   var handleHeightSize = 'small';
@@ -79,6 +60,10 @@ export var TableResizer = function TableResizer(_ref) {
     setSnappingEnabled = _useState2[1];
   var resizerMinWidth = getResizerMinWidth(node);
   var handleHeightSize = getResizerHandleHeight(tableRef);
+  var _useMeasureFramerate = useMeasureFramerate(),
+    startMeasure = _useMeasureFramerate.startMeasure,
+    endMeasure = _useMeasureFramerate.endMeasure,
+    countFrames = _useMeasureFramerate.countFrames;
   var updateActiveGuidelines = useCallback(function (_ref2) {
     var gap = _ref2.gap,
       keys = _ref2.keys;
@@ -93,13 +78,14 @@ export var TableResizer = function TableResizer(_ref) {
     } : undefined;
   }, [snappingEnabled]);
   var handleResizeStart = useCallback(function () {
+    startMeasure();
     var dispatch = editorView.dispatch,
       tr = editorView.state.tr;
     dispatch(tr.setMeta(tableWidthPluginKey, {
       resizing: true
     }));
     setSnappingEnabled(displayGuideline(defaultGuidelines));
-  }, [displayGuideline, editorView]);
+  }, [displayGuideline, editorView, startMeasure]);
   var handleResizeStop = useCallback(function (originalState, delta) {
     var newWidth = originalState.width + delta.width;
     var state = editorView.state,
@@ -108,8 +94,20 @@ export var TableResizer = function TableResizer(_ref) {
     var tr = state.tr.setMeta(tableWidthPluginKey, {
       resizing: false
     });
+    var frameRateSamples = endMeasure();
+    if (frameRateSamples.length > 0) {
+      var resizeFrameRatePayloads = generateResizeFrameRatePayloads({
+        docSize: state.doc.nodeSize,
+        frameRateSamples: frameRateSamples,
+        originalNode: node
+      });
+      resizeFrameRatePayloads.forEach(function (payload) {
+        var _attachAnalyticsEvent;
+        (_attachAnalyticsEvent = attachAnalyticsEvent(payload)) === null || _attachAnalyticsEvent === void 0 ? void 0 : _attachAnalyticsEvent(tr);
+      });
+    }
     if (typeof pos === 'number') {
-      var _attachAnalyticsEvent;
+      var _attachAnalyticsEvent2;
       tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
         width: newWidth
       }));
@@ -121,10 +119,10 @@ export var TableResizer = function TableResizer(_ref) {
         parentWidth: newWidth
       }, editorView.domAtPos.bind(editorView))(tr);
       var scaledNode = tr.doc.nodeAt(pos);
-      (_attachAnalyticsEvent = attachAnalyticsEvent(generateResizedPayload({
+      (_attachAnalyticsEvent2 = attachAnalyticsEvent(generateResizedPayload({
         originalNode: node,
         resizedNode: scaledNode
-      }))) === null || _attachAnalyticsEvent === void 0 ? void 0 : _attachAnalyticsEvent(tr);
+      }))) === null || _attachAnalyticsEvent2 === void 0 ? void 0 : _attachAnalyticsEvent2(tr);
     }
     dispatch(tr);
 
@@ -132,8 +130,9 @@ export var TableResizer = function TableResizer(_ref) {
     displayGuideline([]);
     updateWidth(newWidth);
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent]);
+  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, endMeasure]);
   var handleResize = useCallback(function (originalState, delta) {
+    countFrames();
     var newWidth = originalState.width + delta.width;
     var pos = getPos();
     if (typeof pos !== 'number') {
@@ -148,7 +147,7 @@ export var TableResizer = function TableResizer(_ref) {
     updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP));
     updateWidth(newWidth);
     return newWidth;
-  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines]);
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
   var scheduleResize = useMemo(function () {
     return rafSchd(handleResize);
   }, [handleResize]);

package/dist/esm/plugins/table/utils/analytics.js

@@ -1,5 +1,9 @@
+import { useEffect, useRef } from 'react';
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
+import { getTableWidth } from '../utils';
 export function getSelectedTableInfo(selection) {
   var map;
   var totalRowCount = 0;
@@ -59,4 +63,139 @@ export var withEditorAnalyticsAPI = function withEditorAnalyticsAPI(payload) {
       };
     };
   };
+};
+export var generateResizedPayload = function generateResizedPayload(props) {
+  var _props$originalNode$a;
+  var tableMap = TableMap.get(props.resizedNode);
+  return {
+    action: TABLE_ACTION.RESIZED,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      newWidth: props.resizedNode.attrs.width,
+      prevWidth: (_props$originalNode$a = props.originalNode.attrs.width) !== null && _props$originalNode$a !== void 0 ? _props$originalNode$a : null,
+      nodeSize: props.resizedNode.nodeSize,
+      totalTableWidth: hasTableBeenResized(props.resizedNode) ? getTableWidth(props.resizedNode) : null,
+      totalRowCount: tableMap.height,
+      totalColumnCount: tableMap.width
+    }
+  };
+};
+export var reduceResizeFrameRateSamples = function reduceResizeFrameRateSamples(frameRateSamples) {
+  if (frameRateSamples.length > 1) {
+    var frameRateSum = frameRateSamples.reduce(function (sum, frameRate, index) {
+      if (index === 0) {
+        return sum;
+      } else {
+        return sum + frameRate;
+      }
+    }, 0);
+    var averageFrameRate = Math.round(frameRateSum / (frameRateSamples.length - 1));
+    return [frameRateSamples[0], averageFrameRate];
+  } else {
+    return frameRateSamples;
+  }
+};
+export var generateResizeFrameRatePayloads = function generateResizeFrameRatePayloads(props) {
+  var reducedResizeFrameRateSamples = reduceResizeFrameRateSamples(props.frameRateSamples);
+  return reducedResizeFrameRateSamples.map(function (frameRateSample, index) {
+    return {
+      action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
+      actionSubject: ACTION_SUBJECT.TABLE,
+      eventType: EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        frameRate: frameRateSample,
+        nodeSize: props.originalNode.nodeSize,
+        docSize: props.docSize,
+        isInitialSample: index === 0
+      }
+    };
+  });
+};
+
+/**
+ * Measures the framerate of a component over a given time period.
+ */
+export var useMeasureFramerate = function useMeasureFramerate() {
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _config$maxSamples = config.maxSamples,
+    maxSamples = _config$maxSamples === void 0 ? 10 : _config$maxSamples,
+    _config$minFrames = config.minFrames,
+    minFrames = _config$minFrames === void 0 ? 5 : _config$minFrames,
+    _config$minTimeMs = config.minTimeMs,
+    minTimeMs = _config$minTimeMs === void 0 ? 500 : _config$minTimeMs,
+    _config$sampleRateMs = config.sampleRateMs,
+    sampleRateMs = _config$sampleRateMs === void 0 ? 1000 : _config$sampleRateMs,
+    _config$timeoutMs = config.timeoutMs,
+    timeoutMs = _config$timeoutMs === void 0 ? 200 : _config$timeoutMs;
+  var frameCount = useRef(0);
+  var lastTime = useRef(0);
+  var timeoutId = useRef();
+  var frameRateSamples = useRef([]);
+  useEffect(function () {
+    return function () {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, []);
+  var startMeasure = function startMeasure() {
+    frameCount.current = 0;
+    lastTime.current = performance.now();
+  };
+
+  /**
+   * Returns an array of frame rate samples as integers.
+   */
+  var endMeasure = function endMeasure() {
+    var samples = frameRateSamples.current;
+    frameRateSamples.current = [];
+    return samples;
+  };
+  var sampleFrameRate = function sampleFrameRate() {
+    var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var currentTime = performance.now();
+    var deltaTime = currentTime - lastTime.current - delay;
+    var isValidSample = deltaTime > minTimeMs && frameCount.current >= minFrames;
+    if (isValidSample) {
+      var frameRate = Math.round(frameCount.current / (deltaTime / 1000));
+      frameRateSamples.current.push(frameRate);
+    }
+    frameCount.current = 0;
+    lastTime.current = 0;
+  };
+
+  /**
+   * Counts the number of frames that occur within a given time period. Intended to be called
+   * inside a `requestAnimationFrame` callback.
+   */
+  var countFrames = function countFrames() {
+    if (frameRateSamples.current.length >= maxSamples && timeoutId.current) {
+      clearTimeout(timeoutId.current);
+      return;
+    }
+
+    /**
+     * Allows us to keep counting frames even if `startMeasure` is not called
+     */
+    if (lastTime.current === 0) {
+      lastTime.current = performance.now();
+    }
+    frameCount.current++;
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+    }
+    if (performance.now() - lastTime.current > sampleRateMs) {
+      sampleFrameRate();
+    } else {
+      timeoutId.current = setTimeout(function () {
+        return sampleFrameRate(timeoutMs);
+      }, timeoutMs);
+    }
+  };
+  return {
+    startMeasure: startMeasure,
+    endMeasure: endMeasure,
+    countFrames: countFrames
+  };
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.7.2",
+	"version": "2.8.0",
 	"sideEffects": false
 }

package/dist/types/plugins/table/utils/analytics.d.ts

@@ -1,5 +1,6 @@
-import type { AnalyticsEventPayload, AnalyticsEventPayloadCallback, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { AnalyticsEventPayload, AnalyticsEventPayloadCallback, EditorAnalyticsAPI, TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { HigherOrderCommand } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 export declare function getSelectedTableInfo(selection: Selection): {
@@ -16,3 +17,29 @@ export declare function getSelectedCellInfo(selection: Selection): {
     totalCells: number;
 };
 export declare const withEditorAnalyticsAPI: (payload: AnalyticsEventPayload | AnalyticsEventPayloadCallback) => (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => HigherOrderCommand;
+interface UseMeasureFramerateConfig {
+    maxSamples?: number;
+    minFrames?: number;
+    minTimeMs?: number;
+    sampleRateMs?: number;
+    timeoutMs?: number;
+}
+export declare const generateResizedPayload: (props: {
+    originalNode: PMNode;
+    resizedNode: PMNode;
+}) => TableEventPayload;
+export declare const reduceResizeFrameRateSamples: (frameRateSamples: number[]) => number[];
+export declare const generateResizeFrameRatePayloads: (props: {
+    docSize: number;
+    frameRateSamples: number[];
+    originalNode: PMNode;
+}) => TableEventPayload[];
+/**
+ * Measures the framerate of a component over a given time period.
+ */
+export declare const useMeasureFramerate: (config?: UseMeasureFramerateConfig) => {
+    startMeasure: () => void;
+    endMeasure: () => number[];
+    countFrames: () => void;
+};
+export {};

package/dist/types-ts4.5/plugins/table/utils/analytics.d.ts

@@ -1,5 +1,6 @@
-import type { AnalyticsEventPayload, AnalyticsEventPayloadCallback, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { AnalyticsEventPayload, AnalyticsEventPayloadCallback, EditorAnalyticsAPI, TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { HigherOrderCommand } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 export declare function getSelectedTableInfo(selection: Selection): {
@@ -16,3 +17,29 @@ export declare function getSelectedCellInfo(selection: Selection): {
     totalCells: number;
 };
 export declare const withEditorAnalyticsAPI: (payload: AnalyticsEventPayload | AnalyticsEventPayloadCallback) => (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => HigherOrderCommand;
+interface UseMeasureFramerateConfig {
+    maxSamples?: number;
+    minFrames?: number;
+    minTimeMs?: number;
+    sampleRateMs?: number;
+    timeoutMs?: number;
+}
+export declare const generateResizedPayload: (props: {
+    originalNode: PMNode;
+    resizedNode: PMNode;
+}) => TableEventPayload;
+export declare const reduceResizeFrameRateSamples: (frameRateSamples: number[]) => number[];
+export declare const generateResizeFrameRatePayloads: (props: {
+    docSize: number;
+    frameRateSamples: number[];
+    originalNode: PMNode;
+}) => TableEventPayload[];
+/**
+ * Measures the framerate of a component over a given time period.
+ */
+export declare const useMeasureFramerate: (config?: UseMeasureFramerateConfig) => {
+    startMeasure: () => void;
+    endMeasure: () => number[];
+    countFrames: () => void;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.7.2",
+  "version": "2.8.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^28.0.0",
-    "@atlaskit/editor-common": "^74.41.0",
+    "@atlaskit/editor-common": "^74.42.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.7",
@@ -67,6 +67,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "^0.1.2",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "raf-stub": "^2.0.1",
     "typescript": "~4.9.5"
   },

package/src/__tests__/unit/nodeviews/TableContainer.tsx

@@ -29,6 +29,23 @@ import {
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { TablePluginState } from '../../../plugins/table/types';
 
+const mockStartMeasure = jest.fn();
+const mockEndMeasure = jest.fn(() => {
+  return [51, 52, 53, 54];
+});
+const mockCountFrames = jest.fn();
+
+jest.mock('../../../plugins/table/utils/analytics', () => ({
+  ...jest.requireActual('../../../plugins/table/utils/analytics'),
+  useMeasureFramerate: () => {
+    return {
+      startMeasure: mockStartMeasure,
+      endMeasure: mockEndMeasure,
+      countFrames: mockCountFrames,
+    };
+  },
+}));
+
 describe('table -> nodeviews -> TableContainer.tsx', () => {
   const createEditor = createEditorFactory<TablePluginState>();
   const editor = (
@@ -202,7 +219,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!);
       fireEvent.mouseUp(container.querySelector('.resizer-handle-right')!);
 
-      expect(analyticsMock).toHaveBeenLastCalledWith({
+      expect(analyticsMock).toHaveBeenCalledWith({
         action: TABLE_ACTION.RESIZED,
         actionSubject: ACTION_SUBJECT.TABLE,
         eventType: EVENT_TYPE.TRACK,
@@ -215,6 +232,45 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
           totalColumnCount: 3,
         },
       });
+
+      expect(analyticsMock).toHaveBeenCalledWith({
+        action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          docSize: 22,
+          frameRate: 51,
+          isInitialSample: true,
+          nodeSize: 20,
+        },
+      });
+
+      expect(analyticsMock).toHaveBeenCalledWith({
+        action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          docSize: 22,
+          frameRate: 53,
+          isInitialSample: false,
+          nodeSize: 20,
+        },
+      });
+
+      analyticsMock.mockReset();
+    });
+
+    test('calls useMeasureFramerate handlers', async () => {
+      const { container } = buildContainer({ layout: 'wide' });
+
+      fireEvent.mouseDown(container.querySelector('.resizer-handle-right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!, {
+        clientX: 100,
+      });
+      fireEvent.mouseUp(container.querySelector('.resizer-handle-right')!);
+
+      expect(mockStartMeasure).toHaveBeenCalled();
+      expect(mockEndMeasure).toHaveBeenCalled();
     });
   });
 });

package/src/__tests__/unit/utils/analytics.ts

@@ -0,0 +1,98 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import {
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  TABLE_ACTION,
+} from '@atlaskit/editor-common/analytics';
+
+import {
+  generateResizeFrameRatePayloads,
+  reduceResizeFrameRateSamples,
+  useMeasureFramerate,
+} from '../../../plugins/table/utils/analytics';
+
+describe('reduceResizeFrameRateSamples()', () => {
+  it('should return the same array if it has only one element', () => {
+    expect(reduceResizeFrameRateSamples([1])).toEqual([1]);
+  });
+
+  it('should return the first element and the average of the array if length > 1', () => {
+    expect(reduceResizeFrameRateSamples([3, 2, 4, 6])).toEqual([3, 4]);
+  });
+});
+
+describe('generateResizeFrameRatePayloads()', () => {
+  it('should return an empty array if the array is empty', () => {
+    expect(
+      generateResizeFrameRatePayloads({
+        docSize: 10,
+        frameRateSamples: [],
+        originalNode: { nodeSize: 5 } as any,
+      }),
+    ).toEqual([]);
+  });
+
+  it('should return an array of payloads with the correct attributes', () => {
+    expect(
+      generateResizeFrameRatePayloads({
+        docSize: 10,
+        frameRateSamples: [3, 2, 4, 6],
+        originalNode: { nodeSize: 5 } as any,
+      }),
+    ).toEqual([
+      {
+        action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          frameRate: 3,
+          nodeSize: 5,
+          docSize: 10,
+          isInitialSample: true,
+        },
+      },
+      {
+        action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          frameRate: 4,
+          nodeSize: 5,
+          docSize: 10,
+          isInitialSample: false,
+        },
+      },
+    ]);
+  });
+});
+
+describe('useMeasureFramerate()', () => {
+  jest.useFakeTimers('modern');
+
+  it('should return the correct handlers', () => {
+    const { result } = renderHook(() => useMeasureFramerate());
+    const { startMeasure, endMeasure, countFrames } = result.current;
+
+    expect(startMeasure).toBeInstanceOf(Function);
+    expect(endMeasure).toBeInstanceOf(Function);
+    expect(countFrames).toBeInstanceOf(Function);
+  });
+
+  it('should return the correct frame rate sample', async () => {
+    const { result } = renderHook(() =>
+      useMeasureFramerate({ minTimeMs: 0, minFrames: 0, sampleRateMs: 0 }),
+    );
+
+    const { startMeasure, endMeasure, countFrames } = result.current;
+    jest.advanceTimersByTime(100);
+    startMeasure();
+    jest.advanceTimersByTime(100);
+    countFrames();
+    const samples = endMeasure();
+
+    expect(samples).toEqual([10]);
+
+    jest.useRealTimers();
+  });
+});