Extract supported percentage calculation to separate file

extensions/ql-vscode/src/view/data-extensions-editor/DataExtensionsEditor.tsx

@@ -14,6 +14,7 @@ import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usag
 import { ModeledMethod } from "../../data-extensions-editor/modeled-method";
 import { MethodRow } from "./MethodRow";
 import { assertNever } from "../../pure/helpers-pure";
+import { calculateSupportedPercentage } from "./supported";
 
 export const DataExtensionsEditorContainer = styled.div`
   margin-top: 1rem;
@@ -70,21 +71,12 @@ export function DataExtensionsEditor(): JSX.Element {
     };
   }, []);
 
-  const supportedPercentage = useMemo(() => {
-    return (
-      (externalApiUsages.filter((m) => m.supported).length /
-        externalApiUsages.length) *
-      100
-    );
-  }, [externalApiUsages]);
+  const supportedPercentage = useMemo(
+    () => calculateSupportedPercentage(externalApiUsages),
+    [externalApiUsages],
+  );
 
-  const unsupportedPercentage = useMemo(() => {
-    return (
-      (externalApiUsages.filter((m) => !m.supported).length /
-        externalApiUsages.length) *
-      100
-    );
-  }, [externalApiUsages]);
+  const unsupportedPercentage = 100 - supportedPercentage;
 
   const onChange = useCallback(
     (method: ExternalApiUsage, model: ModeledMethod) => {

extensions/ql-vscode/src/view/data-extensions-editor/__tests__/supported.spec.ts

@@ -0,0 +1,52 @@
+import { calculateSupportedPercentage } from "../supported";
+
+describe("calculateSupportedPercentage", () => {
+  it("when there are no external API usages", () => {
+    expect(calculateSupportedPercentage([])).toBe(0);
+  });
+
+  it("when there are is 1 supported external API usage", () => {
+    expect(
+      calculateSupportedPercentage([
+        {
+          supported: true,
+        },
+      ]),
+    ).toBe(100);
+  });
+
+  it("when there are is 1 unsupported external API usage", () => {
+    expect(
+      calculateSupportedPercentage([
+        {
+          supported: false,
+        },
+      ]),
+    ).toBe(0);
+  });
+
+  it("when there are multiple supporte and unsupported external API usage", () => {
+    expect(
+      calculateSupportedPercentage([
+        {
+          supported: false,
+        },
+        {
+          supported: true,
+        },
+        {
+          supported: false,
+        },
+        {
+          supported: false,
+        },
+        {
+          supported: true,
+        },
+        {
+          supported: false,
+        },
+      ]),
+    ).toBeCloseTo(33.33);
+  });
+});

extensions/ql-vscode/src/view/data-extensions-editor/supported.ts

@@ -0,0 +1,17 @@
+import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usage";
+
+export function calculateSupportedPercentage(
+  externalApiUsages: Array<Pick<ExternalApiUsage, "supported">>,
+): number {
+  if (externalApiUsages.length === 0) {
+    return 0;
+  }
+
+  const supportedExternalApiUsages = externalApiUsages.filter(
+    (m) => m.supported,
+  );
+
+  const supportedRatio =
+    supportedExternalApiUsages.length / externalApiUsages.length;
+  return supportedRatio * 100;
+}