Fix rendering of AA seqs

Author: josh

src/Linear/SeqBlock.test.tsx

@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
+import { cleanup, render, screen } from "@testing-library/react";
 
 import * as React from "react";
 
@@ -73,5 +73,7 @@ describe("SeqBlock", () => {
     const seqBlock = screen.getByTestId("la-vz-seq");
     expect(seqBlock).toBeTruthy();
     expect(seqBlock.textContent).toEqual(seq);
+
+    cleanup();
   });
 });

src/Linear/SeqBlock.tsx

@@ -297,6 +297,7 @@ export class SeqBlock extends React.PureComponent<SeqBlockProps> {
         })}
         className="la-vz-seqblock"
         cursor="text"
+        data-testid="la-vz-seqblock"
         display="block"
         height={blockHeight}
         id={id}

src/Linear/Translations.tsx

@@ -36,7 +36,7 @@ export const TranslationRows = ({
   translations,
   yDiff,
 }: TranslationRowsProps) => (
-  <g className="la-vz-linear-translations">
+  <g className="la-vz-linear-translation" data-testid="la-vz-linear-translation">
     {translations.map((t, i) => (
       <TranslationRow
         key={`${t.id}-${firstBase}`}

src/SeqViz.tsx

@@ -382,8 +382,8 @@ export default class SeqViz extends React.Component<SeqVizProps, SeqVizState> {
     // This is an unfortunate bit of seq checking. We could get a seq directly or from a file parsed to a part.
     if (!seq) return <div className="la-vz-seqviz" />;
 
-    if (seqType !== "dna" && seqType !== "rna" && translations && translations.length) {
-      // make the entire sequence the "translation"
+    // If the seqType is aa, make the entire sequence the "translation"
+    if (seqType === "aa") {
       // TODO: during some grand future refactor, make this cleaner and more transparent to the user
       translations = [{ direction: 1, end: seq.length, start: 0 }];
     }

src/index.test.tsx

@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom";
-import { cleanup, render, screen } from "@testing-library/react";
+import { cleanup, render } from "@testing-library/react";
 
 import * as React from "react";
 
@@ -16,7 +16,7 @@ const props = {
   ],
   name: "test_part",
   seq: "ATGGTAGTTAGATAGGGATACCGATAGACTTGAGAGATACCGCATCTATTTACGACCAGCGAGCAG",
-  testSize: { height: 600, width: 800 },
+  testSize: { height: 900, width: 800 },
 };
 
 describe("SeqViz rendering (React)", () => {
@@ -50,30 +50,30 @@ describe("SeqViz rendering (React)", () => {
   });
 
   it("renders with Genbank file string input", async () => {
-    render(<SeqViz {...props} file={demoPart} />);
-    expect(screen.getAllByTestId("la-vz-seqviz")).toBeTruthy();
-
-    expect(screen.getAllByTestId("la-vz-viewer-container")).toHaveLength(1);
+    const { getAllByTestId } = render(<SeqViz {...props} file={demoPart} />);
+    expect(getAllByTestId("la-vz-seqviz")).toBeTruthy();
+    expect(getAllByTestId("la-vz-viewer-container")).toHaveLength(1);
 
     // Verify the file's sequence is rendered.
     // The linear viewer will cut off the end, this is just the prefix
-    const seqs = screen.getAllByTestId("la-vz-seq");
+    const seqs = getAllByTestId("la-vz-seq");
     const seq = seqs.map(s => s.textContent).join("");
     expect(seq).toContain("ttgacagctagctcagtcctaggtactgtgctagcta");
   });
 
   it("renders with an Amino Acid sequence", () => {
     const aaSeq =
-      "MSKGEELFTGVVPILVELDGDVNGHKFSVSGEGEGDATYGKLTLKFICTTGKLPVPWPTLVTTFSYGVQCFSRYPDHMKQHDFFKSAMPEGYVQERTIFFKDDGNYKTRAEVKFEGDTLVNRIELKGIDFKEDGNILGHKLEYNYNSHNVYIMADKQKNGIKVNFKIRHNIEDGSVQLADHYQQNTPIGDGPVLLPDNHYLSTQSALSKDPNEKRDHMVLLEFVTAAGITHGMDELYK*";
+      "MSKGEELFTGVVPILVELDGDVNGHKFSVSGEGEGDATYGKLTLKFICTTGKLPVPWPTLVTTFSYGVQCFSRYPDHMKQHDFFKSAMPEGYVQERTIFFKDDGDNHYLSTQSALSKDPNEKRDHMVLLEFVTAAGITHGMDELYK*";
 
-    const { getAllByTestId, getByTestId } = render(<SeqViz {...props} seq={aaSeq} seqType="aa" viewer="linear" />);
+    const { getAllByTestId, getByTestId } = render(<SeqViz {...props} seq={aaSeq} viewer="linear" />);
     expect(getAllByTestId("la-vz-seqviz")).toBeTruthy();
     expect(getByTestId("la-vz-viewer-linear")).toBeTruthy();
     expect(getAllByTestId("la-vz-viewer-linear")).toHaveLength(1);
 
-    // const seqs = getAllByTestId("la-vz-translation");
-    // const seq = seqs.map(s => s.textContent).join("");
-    // expect(seq).toEqual(aaSeq);
+    const seqs = getAllByTestId("la-vz-linear-translation");
+    const seq = seqs.map(s => s.textContent).join("");
+    expect(seq.length).toBeGreaterThan(0);
+    expect(aaSeq).toContain(seq);
   });
 
   it("renders with an externally set Selection prop", () => {