485: Ability to switch to previously loaded ids in UI (#583)

src/components/StoredScenesList.test.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import Enzyme, { shallow } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import { StoredScenesList } from "./StoredScenesList";
+import { PreviousScene } from "../scene/types";
+
+Enzyme.configure({ adapter: new Adapter() });
+
+jest.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: any) => key }),
+}));
+
+function setup(props: any) {
+  const currentProps = {
+    ...props,
+    onChange: jest.fn(),
+  };
+  return {
+    wrapper: shallow(<StoredScenesList {...currentProps} />),
+    props: currentProps,
+  };
+}
+
+describe("<StoredScenesList/>", () => {
+  const scenes: PreviousScene[] = [
+    {
+      id: "123",
+      timestamp: Date.now(),
+    },
+    {
+      id: "234",
+      timestamp: Date.now(),
+    },
+    {
+      id: "345",
+      timestamp: Date.now(),
+    },
+  ];
+
+  const { wrapper, props } = setup({ scenes });
+
+  describe("Renders the ids correctly when", () => {
+    it("select options and ids length are the same", () => {
+      expect(wrapper.find("option").length).toBe(scenes.length);
+    });
+  });
+
+  describe("Can handle id selection when", () => {
+    it("onChange method is called when select option has changed", async () => {
+      const select = wrapper.find("select") as any;
+      const mockedEvenet = { currentTarget: { value: "1" } };
+      await select.invoke("onChange")(mockedEvenet);
+      expect(props.onChange.mock.calls.length).toBe(1);
+    });
+  });
+});

src/components/StoredScenesList.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { PreviousScene } from "../scene/types";
+
+interface StoredScenesListProps {
+  scenes: PreviousScene[];
+  currentId?: string;
+  onChange: (selectedId: string) => {};
+}
+
+export function StoredScenesList({
+  scenes,
+  currentId,
+  onChange,
+}: StoredScenesListProps) {
+  const { t } = useTranslation();
+
+  return (
+    <React.Fragment>
+      <select
+        className="stored-ids-select"
+        onChange={({ currentTarget }) => onChange(currentTarget.value)}
+        value={currentId}
+        title={t("buttons.previouslyLoadedScenes")}
+      >
+        {scenes.map(scene => (
+          <option key={scene.id} value={scene.id}>
+            id={scene.id}
+          </option>
+        ))}
+      </select>
+    </React.Fragment>
+  );
+}