sequenceserver 3.1.1 → 3.1.3

data/public/js/sequence_modal.js

@@ -63,48 +63,38 @@ export default class SequenceModal extends React.Component {
   /**
    * Loads sequence using AJAX and updates modal state.
    */
-  loadJSON(url) {
+  async loadJSON(url) {
     // Fetch sequence and update state.
-    $.getJSON(url)
-      .done(
-        _.bind(function (response) {
-          this.setState({
-            sequences: response.sequences,
-            error_msgs: response.error_msgs,
-            requestCompleted: true,
-          });
-        }, this)
-      )
-      .fail((jqXHR, status, error) => {
-        this.hide();
-        this.props.showErrorModal(jqXHR.responseJSON);
+    try {
+      const response = await $.getJSON(url);
+      this.setState({
+        sequences: response.sequences,
+        error_msgs: response.error_msgs,
+        requestCompleted: true,
       });
+    } catch (error) {
+      console.log('Error fetching sequence:', error);
+      this.hide();
+      this.props.showErrorModal(error.responseJSON);
+    }
   }
 
   resultsJSX() {
     return (
       <div className="modal-body">
-        {_.map(
-          this.state.error_msgs,
-          _.bind(function (error_msg) {
-            return (
-              <div className="fastan">
-                <div className="section-header">
-                  <h4>{error_msg[0]}</h4>
-                </div>
-                <div className="section-content">
-                  <pre className="pre-reset">{error_msg[1]}</pre>
-                </div>
-              </div>
-            );
-          }, this)
-        )}
-        {_.map(
-          this.state.sequences,
-          _.bind(function (sequence) {
-            return <SequenceViewer sequence={sequence} />;
-          }, this)
-        )}
+        {this.state.error_msgs.map((error_msg, index) => (
+          <div key={`error-message-${index}`} className="fastan">
+            <div className="section-header">
+              <h4>{error_msg[0]}</h4>
+            </div>
+            <div className="section-content">
+              <pre className="pre-reset">{error_msg[1]}</pre>
+            </div>
+          </div>
+        ))}
+        {this.state.sequences.map((sequence, index) => (
+          <SequenceViewer key={`sequence-viewer-${index}`} sequence={sequence} />
+        ))}
       </div>
     );
   }
@@ -160,6 +150,8 @@ class SequenceViewer extends React.Component {
         footer: false,
       },
     });
-    widget.hideFormatSelector();
+    setTimeout(function() {
+      requestAnimationFrame(() => { widget.hideFormatSelector() }); // ensure React is done painting the DOM of the element before calling a function on it.
+    });
   }
 }

data/public/js/sidebar.js

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import _ from 'underscore';
 
 import downloadFASTA from './download_fasta';
@@ -32,6 +32,7 @@ export default class extends Component {
         this.copyURL = this.copyURL.bind(this);
         this.shareCloudInit = this.shareCloudInit.bind(this);
         this.sharingPanelJSX = this.sharingPanelJSX.bind(this);
+        this.cloudShareModal = React.createRef();
         this.timeout = null;
         this.queryElems = [];
         this.state = {
@@ -203,7 +204,7 @@ export default class extends Component {
     }
 
     shareCloudInit() {
-        this.refs.cloudShareModal.show();
+        this.cloudShareModal.current.show();
     }
 
     topPanelJSX() {
@@ -353,9 +354,9 @@ export default class extends Component {
                     {
                         !this.props.data.imported_xml && <li>
                             <a className="btn-link download" data-toggle="tooltip"
-                                title="Results in pairwise format."
+                                title="Results in text format."
                                 href={'download/' + this.props.data.search_id + '.pairwise'}>
-                                Full Pairwise report
+                                Full Text report
                             </a>
                         </li>
                     }
@@ -403,7 +404,7 @@ export default class extends Component {
                 </ul>
                 {
                     <CloudShareModal
-                        ref="cloudShareModal"
+                        ref={this.cloudShareModal}
                         querydb={this.props.data.querydb}
                         program={this.props.data.program}
                         queryLength={this.props.data.queries.length}
@@ -422,7 +423,7 @@ export default class extends Component {
                 <div className="referral-panel">
                     <div className="section-header-sidebar">
                         <h4>Recommend SequenceServer</h4>
-                        <p><a href="https://sequenceserver.com/referral-program" target="_blank">Earn up to $100 per signup</a></p>
+                        <p><a href="https://sequenceserver.com/referral-program" target="_blank">Earn up to $400 per signup</a></p>
                     </div>
                 </div>
             </div>

data/public/js/tests/alignment_exporter.spec.js

@@ -0,0 +1,38 @@
+import AlignmentExporter from '../alignment_exporter';
+
+describe('AlignmentExporter', () => {
+  let exporter;
+
+  beforeEach(() => {
+    exporter = new AlignmentExporter();
+  });
+
+  describe('wrap_string', () => {
+    it('wraps a string to a specified width', () => {
+      const str = 'abcdefghijklmnopqrstuvwxyz';
+      const width = 5;
+      const expected = 'abcde\nfghij\nklmno\npqrst\nuvwxy\nz';
+      expect(exporter.wrap_string(str, width)).toBe(expected);
+    });
+  });
+
+  describe('generate_fasta', () => {
+    it('generates a fasta string from hsps', () => {
+      const hsps = [
+        {
+          query_id: 'query1',
+          qstart: 1,
+          qend: 10,
+          qseq: 'ATGCATGCAT',
+          hit_id: 'hit1',
+          sstart: 1,
+          send: 10,
+          midline: '||||||||||',
+          sseq: 'ATGCATGCAT',
+        },
+      ];
+      const expected = '>query1:1-10\nATGCATGCAT\n>query1:1-10_alignment_hit1:1-10\n||||||||||\n>hit1:1-10\nATGCATGCAT\n';
+      expect(exporter.generate_fasta(hsps)).toBe(expected);
+    });
+  });
+});

data/public/js/tests/cloud_share_modal.spec.js

@@ -0,0 +1,75 @@
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import CloudShareModal, { handleSubmit } from '../cloud_share_modal';
+
+describe('CloudShareModal', () => {
+    let component;
+
+    beforeEach(() => {
+        global.fetch = jest.fn(() =>
+            Promise.resolve({
+                json: () => Promise.resolve({ shareable_url: 'http://test.com' }),
+                ok: true
+            })
+        );
+        component = render(<CloudShareModal querydb="" program="" queryLength="0" />);
+    });
+
+    it('renders without crashing', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('initial state is correct', () => {
+        const { getByLabelText } = component;
+        const emailInput = getByLabelText('Your Email Address');
+        const tosCheckbox = getByLabelText('I agree to the Terms and Conditions of Service');
+
+        expect(emailInput.value).toBe('');
+        expect(tosCheckbox.checked).toBe(false);
+    });
+
+    it('handles form submission', async () => {
+        const { getByLabelText, getByText, getByDisplayValue } = component;
+
+        // Fill out the form
+        fireEvent.change(getByLabelText(/Your Email Address/i), { target: { value: 'test@test.com' } });
+        fireEvent.click(getByLabelText(/I agree to the/i));
+
+        // Submit the form
+        fireEvent.click(getByText('Submit'));
+
+       // Wait for the loading state to finish
+        await waitFor(() => getByText('Uploading the job to SequenceServer Cloud, please wait...'));
+
+        // Check that the results are displayed
+        await waitFor(() => getByText('Copy to Clipboard'));
+
+        expect(getByDisplayValue(/http:\/\/test.com/i)).toBeTruthy()
+    });
+
+    it('handles form submission errors', async () => {
+        // Override the fetch mock to simulate a server error
+        global.fetch = jest.fn(() =>
+            Promise.resolve({
+                json: () => Promise.resolve({ errors: ['Test error'] }),
+                ok: false
+            })
+        );
+
+        const { getByLabelText, getByText } = component;
+
+        // Fill out the form
+        fireEvent.change(getByLabelText(/Your Email Address/i), { target: { value: 'test@test.com' } });
+        fireEvent.click(getByLabelText(/I agree to the/i));
+
+        // Submit the form
+        fireEvent.click(getByText('Submit'));
+
+        // Wait for the loading state to finish
+        await waitFor(() => getByText('Uploading the job to SequenceServer Cloud, please wait...'));
+
+        // Check that the results are displayed
+        await waitFor(() => getByText('Network response was not ok'));
+
+        expect(getByText(/Network response was not ok/i)).toBeTruthy();
+    });
+});

data/public/js/tests/report.spec.js

@@ -1,13 +1,20 @@
 /* eslint-disable no-undef */
 /* eslint-disable no-unused-vars */
 import { render, screen, fireEvent } from '@testing-library/react';
+import { act } from 'react';
 import Report from '../report';
 import Sidebar from '../sidebar';
 import shortResponseJSON from './mock_data/short_response.json';
 import longResponseJSON from './mock_data/long_response.json';
 
 const setMockJSONResult = (result) => {
-    global.$.getJSON = () => ({ complete: jest.fn((callback) => callback(result)) });
+    global.fetch = jest.fn(() =>
+        Promise.resolve({
+            ok: result.status === 200,
+            status: result.status,
+            text: () => Promise.resolve(JSON.stringify(result.responseJSON)),
+        })
+    );
 };
 
 const nextQueryButton = () => screen.queryByRole('button', { name: /next query/i });
@@ -38,19 +45,30 @@ describe('REPORT PAGE', () => {
         expect(screen.getByRole('heading', { name: 'BLAST-ing' })).toBeInTheDocument();
     });
 
-    it('should show error modal if error occurs while fetching queries', () => {
+    it('should show error modal if error occurs while fetching queries', async () => {
         const showErrorModal = jest.fn();
-        setMockJSONResult({ status: 500 });
-        render(<Report showErrorModal={showErrorModal} />);
+
+        setMockJSONResult({ status: 500, responseJSON: { error: "Internal Server Error" }});
+
+        await act(async () => {
+            render(<Report showErrorModal={showErrorModal} />);
+        });
+
         expect(showErrorModal).toHaveBeenCalledTimes(1);
     });
 
-    it('it should render the report page correctly if there\'s a response provided', () => {
+    it('it should render the report page correctly if there\'s a response provided', async () => {
         setMockJSONResult({ status: 200, responseJSON: shortResponseJSON });
-        const { container } = render(<Report getCharacterWidth={jest.fn()} />);
-        expect(container.querySelector('#results')).toBeInTheDocument();
 
+        let container;
+        await act(async () => {
+            const result = render(<Report getCharacterWidth={jest.fn()} />);
+            container = result.container;
+        });
+
+        expect(container.querySelector('#results')).toBeInTheDocument();
     });
+
     describe('SIDEBAR', () => {
         it('should render the sidebar component with correct heading', () => {
             setMockJSONResult({ status: 200, responseJSON: shortResponseJSON });
@@ -105,23 +123,27 @@ describe('REPORT PAGE', () => {
 
         describe('DOWNLOAD LINKS', () => {
             let container;
-            beforeEach(() => {
+            beforeEach(async () => {
                 setMockJSONResult({ status: 200, responseJSON: shortResponseJSON });
-                container = render(<Report getCharacterWidth={jest.fn()}  />).container;
+                await act(async () => {
+                    container = render(<Report getCharacterWidth={jest.fn()}  />).container;
+                });
             });
             describe('ALIGNMENT DOWNLOAD', () => {
                 it('should generate a blob url and filename for downloading alignment of all hits on render', () => {
-                    const alignment_download_link = container.querySelector('.download-alignment-of-all');
-                    const expected_num_hits = container.querySelectorAll('.hit-links input[type="checkbox"]').length;
-                    const file_name = `alignment-${expected_num_hits}_hits.txt`;
-                    expect(alignment_download_link.download).toEqual(file_name);
-                    expect(alignment_download_link.hred).not.toEqual('#');
+                    const alignmentDownloadLink = container.querySelector('.download-alignment-of-all');
+                    const hitLinks = container.querySelectorAll('.hit-links input[type="checkbox"]');
+                    const expectedNumHits = hitLinks.length;
+                    const fileName = `alignment-${expectedNumHits}_hits.txt`;
+                    expect(alignmentDownloadLink.download).toEqual(fileName);
+                    expect(alignmentDownloadLink.href).not.toEqual('#');
                 });
+
                 it('link for downloading alignment of specific number of selected hits should be disabled on initial load', () => {
                     const alignment_download_link = container.querySelector('.download-alignment-of-selected');
                     expect(alignment_download_link.classList.contains('disabled')).toBeTruthy();
-
                 });
+
                 it('should generate a blob url and filename for downloading alignment of specific number of selected hits', () => {
                     const alignment_download_link = container.querySelector('.download-alignment-of-selected');
                     // QUERY ALL HIT LINKS CHECKBOXES