From 2bfc2f8402f7506f971e3befb07b5ff93f6ffe9e Mon Sep 17 00:00:00 2001
From: Kevin Barabash <kevinb@khanacademy.org>
Date: Wed, 25 May 2022 16:19:08 -0400
Subject: [PATCH] Provide a more appropriate 'staticUrl' mock for storybook
 (#248)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
The mock we were using 'staticUrl' was returning invalid URLs.  This is fine for @testing-library tests since we don't care about broken images there.  This PR fixes the situation for storybook but using a pass-through function.

Issue: None

## Test plan:
- yarn storybook
- look at the grapher stories, see that they all have graph paper backgrounds

<img width="1375" alt="Screen Shot 2022-05-23 at 6 26 33 PM" src="https://user-images.githubusercontent.com/1044413/169914748-86106bfe-16f6-4aee-bd73-327b22d8ea7f.png">

Author: kevinbarabash

Reviewers: jeremywiebe

Required Reviewers:

Approved By: jeremywiebe

Checks: ✅ Extract i18n strings (ubuntu-latest, 16.x), ⌛ Check builds for changes in size (ubuntu-latest, 16.x), ⌛ Jest Coverage (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ gerald, ⌛ Lint, Flow, and Test (ubuntu-latest, 16.x), ✅ Check for .changeset file (ubuntu-latest, 16.x)

Pull Request URL: https://github.com/Khan/perseus/pull/248
---
 .changeset/pink-otters-relate.md   | 2 ++
 testing/renderer-with-debug-ui.jsx | 8 ++------
 testing/test-dependencies.js       | 7 +++++++
 3 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/pink-otters-relate.md

diff --git a/.changeset/pink-otters-relate.md b/.changeset/pink-otters-relate.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/pink-otters-relate.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/testing/renderer-with-debug-ui.jsx b/testing/renderer-with-debug-ui.jsx
index 6ab6a624a9..a952e567c8 100644
--- a/testing/renderer-with-debug-ui.jsx
+++ b/testing/renderer-with-debug-ui.jsx
@@ -10,8 +10,7 @@ import {Dependencies, Renderer} from "../packages/perseus/src/index.js";
 import {registerAllWidgetsForTesting} from "../packages/perseus/src/util/register-all-widgets-for-testing.js";
 
 import SideBySide from "./side-by-side.jsx";
-import {testDependencies} from "./test-dependencies.js";
-import {TestTeX} from "./test-tex.jsx";
+import {storybookTestDependencies} from "./test-dependencies.js";
 
 import type {PerseusRenderer} from "../packages/perseus/src/perseus-types.js";
 import type {APIOptions} from "../packages/perseus/src/types.js";
@@ -30,10 +29,7 @@ export const RendererWithDebugUI = ({
     registerAllWidgetsForTesting();
     const ref = React.useRef<?Renderer>(null);
     const [state, setState] = React.useState(null);
-    Dependencies.setDependencies({
-        ...testDependencies,
-        TeX: TestTeX,
-    });
+    Dependencies.setDependencies(storybookTestDependencies);
 
     return (
         <SideBySide
diff --git a/testing/test-dependencies.js b/testing/test-dependencies.js
index ebf68e9162..dfef6ead87 100644
--- a/testing/test-dependencies.js
+++ b/testing/test-dependencies.js
@@ -120,6 +120,13 @@ export const testDependencies: PerseusDependencies = {
     Log: LogForTesting,
 };
 
+export const storybookTestDependencies: PerseusDependencies = {
+    ...testDependencies,
+    TeX: TestTeX,
+    // $FlowIgnore[incompatible-type]
+    staticUrl: (str) => str,
+};
+
 export const cypressTestDependencies: PerseusDependencies = {
     ...testDependencies,
     TeX: TestTeX,