Update snapshot tests

src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap

@@ -1,52 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Symbol /> from .bob file use arrayIndex to find index if value is an array 1`] = `
+exports[`<Symbol /> from .bob file matches snapshot (using fallback symbol) 1`] = `
 <DocumentFragment>
   <div
     style="overflow: hidden; text-align: left; width: 100%; height: 100%;"
   >
     <img
-      src="img 3.svg"
+      src="https://cs-web-symbol.diamond.ac.uk/catalogue/default.svg"
       style="width: 100%; height: 100%; display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: fill;"
     />
   </div>
 </DocumentFragment>
 `;
 
-exports[`<Symbol /> from .bob file use fallbackSymbol if index out of range or no symbol provided 1`] = `
+exports[`<Symbol /> from .bob file matches snapshot (with index) 1`] = `
 <DocumentFragment>
   <div
     style="overflow: hidden; text-align: left; width: 100%; height: 100%;"
   >
     <img
-      src="https://cs-web-symbol.diamond.ac.uk/catalogue/default.svg"
+      src="img 3.svg"
       style="width: 100%; height: 100%; display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: fill;"
     />
   </div>
 </DocumentFragment>
 `;
 
-exports[`<Symbol /> from .bob file use initialIndex if no props value provided 1`] = `
+exports[`<Symbol /> from .bob file matches snapshot (without index) 1`] = `
 <DocumentFragment>
   <div
     style="overflow: hidden; text-align: left; width: 100%; height: 100%;"
   >
     <img
-      src="img 3.svg"
+      src="img 1.gif"
       style="width: 100%; height: 100%; display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: fill;"
     />
   </div>
-  <div
-    style="justify-content: center; align-content: center;"
-  >
-    <span
-      class="IndexLabel"
-    >
-      <b>
-        2
-      </b>
-    </span>
-  </div>
 </DocumentFragment>
 `;
 

src/ui/widgets/Symbol/symbol.test.tsx

@@ -74,28 +74,54 @@ describe("<Symbol /> from .bob file", (): void => {
       symbols: ["img 1.gif", "img 2.png", "img 3.svg"],
       value: undefined
     };
+
+    render(<SymbolComponent {...(symbolProps as any)} />);
+
+    expect(screen.getByText("2")).toBeInTheDocument();
+  });
+
+  test("use arrayIndex to find index if value is an array", (): void => {
+    const symbolProps = {
+      arrayIndex: 0,
+      showIndex: true,
+      symbols: ["img 1.gif", "img 2.png", "img 3.svg"],
+      value: arrayValue
+    };
+    render(<SymbolComponent {...(symbolProps as any)} />);
+
+    expect(screen.getByText("2")).toBeInTheDocument();
+  });
+
+  test("matches snapshot (without index)", (): void => {
+    const symbolProps = {
+      symbols: ["img 1.gif"],
+      value: new DType({ stringValue: "0" })
+    };
+
     const { asFragment } = render(
       <SymbolComponent {...(symbolProps as any)} />
     );
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test("use fallbackSymbol if index out of range or no symbol provided", (): void => {
+
+  test("matches snapshot (with index)", (): void => {
     const symbolProps = {
-      symbols: ["img 1.gif"],
-      value: new DType({ doubleValue: 1 })
+      symbols: ["img 1.gif", "img 2.png", "img 3.svg"],
+      value: new DType({ stringValue: "2" })
     };
+
     const { asFragment } = render(
       <SymbolComponent {...(symbolProps as any)} />
     );
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test("use arrayIndex to find index if value is an array", (): void => {
+
+  test("matches snapshot (using fallback symbol)", (): void => {
     const symbolProps = {
-      arrayIndex: 0,
-      symbols: ["img 1.gif", "img 2.png", "img 3.svg"],
-      value: arrayValue
+      symbols: ["img 1.gif"],
+      value: new DType({ doubleValue: 1 })
     };
     const { asFragment } = render(
       <SymbolComponent {...(symbolProps as any)} />