@opencloning/opencloningdb 1.7.1

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# @opencloning/opencloningdb
+
+## 1.7.1
+
+### Patch Changes
+
+- Updated dependencies [[`8e841bd`](https://github.com/OpenCloning/OpenCloning_frontend/commit/8e841bdee4797df61bcf8d1972e3c3581d24fbfb)]:
+  - @opencloning/ui@1.8.1
+  - @opencloning/utils@1.8.1
+
+## 1.7.0
+
+### Minor Changes
+
+- [#694](https://github.com/OpenCloning/OpenCloning_frontend/pull/694) [`2ff9010`](https://github.com/OpenCloning/OpenCloning_frontend/commit/2ff90103c1d9e8e984533e51ecf4dc7978756a57) Thanks [@manulera](https://github.com/manulera)! - Add package and app for a dedicated OpenCloning database, OpenCloningDB
+
+### Patch Changes
+
+- Updated dependencies [[`2ff9010`](https://github.com/OpenCloning/OpenCloning_frontend/commit/2ff90103c1d9e8e984533e51ecf4dc7978756a57), [`2ff9010`](https://github.com/OpenCloning/OpenCloning_frontend/commit/2ff90103c1d9e8e984533e51ecf4dc7978756a57)]:
+  - @opencloning/ui@1.8.0
+  - @opencloning/utils@1.8.0

package/package.json

@@ -0,0 +1,30 @@
+{
+  "license": "MIT",
+  "name": "@opencloning/opencloningdb",
+  "version": "1.7.1",
+  "type": "module",
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OpenCloning/OpenCloning_frontend.git",
+    "directory": "packages/opencloningdb"
+  },
+  "dependencies": {
+    "@mui/icons-material": "^5.18.0",
+    "@mui/material": "^5.18.0",
+    "@opencloning/ui": "1.8.1",
+    "@opencloning/utils": "1.8.1",
+    "axios": "^1.16.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^8.1.3"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/GetPrimerComponent.cy.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import GetPrimerComponent from './GetPrimerComponent';
+import { clickMultiSelectOption } from '../../../cypress/e2e/common_functions';
+
+const PRIMER_NAME = 'lacZ_attB1_fwd';
+
+describe('<GetPrimerComponent />', () => {
+  it('successfully selects a primer and calls setPrimer with correct data', () => {
+    const setPrimerSpy = cy.spy().as('setPrimerSpy');
+    const setErrorSpy = cy.spy().as('setErrorSpy');
+    cy.setupOpenCloningDBTestAuth();
+
+    cy.interceptOpenCloningDBStub('get_primers_search_by_name', { alias: 'getPrimers' });
+    cy.interceptOpenCloningDBStub('get_primer', { alias: 'getPrimer' });
+
+    cy.mount(<GetPrimerComponent setPrimer={setPrimerSpy} setError={setErrorSpy} />);
+
+    cy.get('input').type(PRIMER_NAME);
+    cy.get('.MuiAutocomplete-listbox li', { timeout: 10000 }).should('have.length.greaterThan', 0);
+    cy.wait('@getPrimers');
+
+    clickMultiSelectOption('Primer', PRIMER_NAME, 'div');
+
+    cy.getStub('get_primer').then((stub) => {
+      cy.wait('@getPrimer');
+      cy.get('@setPrimerSpy').should('have.been.calledWithMatch', {
+        name: stub.response.body.name,
+        sequence: stub.response.body.sequence,
+        'database_id': stub.response.body.id,
+      });
+    });
+    cy.get('@setErrorSpy').should('have.been.calledWith', '');
+  });
+
+  it('clears primer and error when selection is cleared', () => {
+    const setPrimerSpy = cy.spy().as('setPrimerSpy');
+    const setErrorSpy = cy.spy().as('setErrorSpy');
+    cy.setupOpenCloningDBTestAuth();
+
+    cy.interceptOpenCloningDBStub('get_primers_search_by_name', { alias: 'getPrimers' });
+    cy.interceptOpenCloningDBStub('get_primer', { alias: 'getPrimer' });
+
+    cy.mount(<GetPrimerComponent setPrimer={setPrimerSpy} setError={setErrorSpy} />);
+
+    cy.get('input').type(PRIMER_NAME);
+    cy.get('.MuiAutocomplete-listbox li', { timeout: 10000 }).should('have.length.greaterThan', 0);
+    cy.wait('@getPrimers');
+    clickMultiSelectOption('Primer', PRIMER_NAME, 'div');
+    cy.wait('@getPrimer');
+    cy.get('@setPrimerSpy').should('have.been.calledWithMatch', { name: PRIMER_NAME });
+
+    cy.get('.MuiAutocomplete-clearIndicator').click();
+
+    cy.get('@setPrimerSpy').should('have.been.calledWith', null);
+    cy.get('@setErrorSpy').should('have.been.calledWith', '');
+  });
+});

package/src/GetPrimerComponent.jsx

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import PrimerSelect from './PrimerSelect';
+import { openCloningDBHttpClient } from './common';
+import endpoints from './endpoints';
+import { Box } from '@mui/material';
+
+function GetPrimerComponent({ setPrimer, setError, existingDatabaseIds }) {
+  const { mutate, reset } = useMutation({
+    mutationFn: async (primerId) => {
+      const response = await openCloningDBHttpClient.get(endpoints.primer(primerId));
+      return response.data;
+    },
+    onSuccess: (primer) => {
+      /* database_id matches API primer model */
+      /* eslint-disable-next-line camelcase */
+      setPrimer({ name: primer.name, sequence: primer.sequence, database_id: primer.id });
+      setError('');
+    },
+    onError: (err) => {
+      setError(err?.response?.data?.detail || err?.message || 'Could not retrieve primer from OpenCloningDB');
+      setPrimer(null);
+    },
+  });
+
+  const handlePrimerSelect = useCallback(async (selectedPrimer) => {
+    if (selectedPrimer === null || selectedPrimer === '') {
+      reset();
+      setPrimer(null);
+      setError('');
+      return;
+    }
+    mutate(selectedPrimer.id);
+  }, [mutate, reset, setPrimer, setError]);
+
+  return (
+    <Box sx={{ minWidth: '400px' }}>
+      <PrimerSelect fullWidth setPrimer={handlePrimerSelect} filterDatabaseIds={existingDatabaseIds} />
+    </Box>
+  );
+}
+
+export default GetPrimerComponent;

package/src/GetSequenceFileAndDatabaseIdComponent.cy.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import GetSequenceFileAndDatabaseIdComponent from './GetSequenceFileAndDatabaseIdComponent';
+import { clickMultiSelectOption } from '../../../cypress/e2e/common_functions';
+import endpoints from './endpoints';
+
+const SEQUENCE_NAME = 'ase1_CDS_PCR';
+const textFilePattern = `**${endpoints.sequenceTextFile('*')}`;
+
+function expectCloningStrategyFile(file, sequenceId, expectedSequenceFile) {
+  expect(file.name).to.equal('cloning_strategy.json');
+  return cy.readFileAsText(file).then((content) => {
+    const parsed = JSON.parse(content);
+    expect(parsed.sources).to.have.length(1);
+    expect(parsed.sources[0].database_id).to.equal(sequenceId);
+    expect(parsed.sources[0].type).to.equal('DatabaseSource');
+    expect(parsed.sequences).to.have.length(1);
+    expect(parsed.sequences[0]).to.include({
+      ...expectedSequenceFile,
+      id: 1,
+    });
+    expect(parsed.primers).to.eql([]);
+  });
+}
+
+describe('<GetSequenceFileAndDatabaseIdComponent />', () => {
+  it('selects a sequence and calls setFile and setDatabaseId with correct data', () => {
+    const setFileSpy = cy.spy().as('setFileSpy');
+    const setDatabaseIdSpy = cy.spy().as('setDatabaseIdSpy');
+    cy.setupOpenCloningDBTestAuth();
+
+    cy.interceptOpenCloningDBStub('get_sequences_search_by_name', { alias: 'getSequences' });
+    cy.interceptOpenCloningDBStub('get_text_file_sequence', { alias: 'getSequenceFile' });
+
+    cy.mount(
+      <GetSequenceFileAndDatabaseIdComponent setFile={setFileSpy} setDatabaseId={setDatabaseIdSpy} />,
+    );
+
+    cy.get('input').type(SEQUENCE_NAME);
+    cy.get('.MuiAutocomplete-listbox li', { timeout: 10000 }).should('have.length.greaterThan', 0);
+    cy.wait('@getSequences').its('request.url').should('include', `name=${SEQUENCE_NAME}`);
+
+    clickMultiSelectOption('Sequence', RegExp(`^${SEQUENCE_NAME}$`), 'div');
+    cy.getStub('get_text_file_sequence').then((stub) => {
+      cy.get('@setDatabaseIdSpy').should('have.been.calledWith', stub.response.body.id);
+      cy.get('@setFileSpy').should('have.been.calledOnce');
+      return cy.get('@setFileSpy').then((spy) => {
+        const [file] = spy.lastCall.args;
+        return expectCloningStrategyFile(file, stub.response.body.id, stub.response.body.sequence);
+      });
+    });
+
+  });
+
+  it('shows a retry button when requesting the selected file fails and retries successfully', () => {
+    const setFileSpy = cy.spy().as('setFileSpy');
+    const setDatabaseIdSpy = cy.spy().as('setDatabaseIdSpy');
+
+    cy.setupOpenCloningDBTestAuth();
+    cy.interceptOpenCloningDBStub('get_sequences_search_by_name', { alias: 'getSequences' });
+
+    cy.getStub('get_text_file_sequence').then((textFileSequenceStub) => {
+      let callCount = 0;
+      cy.intercept('GET', textFilePattern, (req) => {
+        callCount += 1;
+        if (callCount === 1) {
+          req.reply({ statusCode: 500 });
+          return;
+        }
+
+        req.reply({
+          statusCode: textFileSequenceStub.response.status_code,
+          body: textFileSequenceStub.response.body,
+          headers: textFileSequenceStub.response.headers,
+        });
+      }).as('getSequenceFile');
+    });
+
+    cy.mount(
+      <GetSequenceFileAndDatabaseIdComponent setFile={setFileSpy} setDatabaseId={setDatabaseIdSpy} />,
+    );
+
+    cy.get('input').type(SEQUENCE_NAME);
+    cy.get('.MuiAutocomplete-listbox li', { timeout: 10000 }).should('have.length.greaterThan', 0);
+    cy.wait('@getSequences').its('request.url').should('include', `name=${SEQUENCE_NAME}`);
+
+    clickMultiSelectOption('Sequence', RegExp(`^${SEQUENCE_NAME}$`), 'div');
+
+    cy.wait('@getSequenceFile');
+    cy.contains('Failed to load sequence file.').should('exist');
+    cy.get('@setFileSpy').should('not.have.been.called');
+    cy.get('@setDatabaseIdSpy').should('not.have.been.called');
+
+    cy.contains('button', 'Retry').click();
+
+    cy.wait('@getSequenceFile');
+    cy.contains('Failed to load sequence file.').should('not.exist');
+    cy.get('@setFileSpy').should('have.been.calledOnce');
+    cy.get('@setDatabaseIdSpy').should('have.been.calledOnce');
+
+  });
+});
+

package/src/GetSequenceFileAndDatabaseIdComponent.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useMutation } from '@tanstack/react-query';
+import SequenceSelect from './SequenceSelect';
+import { openCloningDBHttpClient } from './common';
+import endpoints from './endpoints';
+import { CircularProgress, FormControl } from '@mui/material';
+import RetryAlert from '@opencloning/ui/components/form/RetryAlert';
+
+function GetSequenceFileAndDatabaseIdComponent({ setFile, setDatabaseId }) {
+  const lastSelectedSequenceRef = React.useRef(null);
+
+  const { mutate, isPending, error, reset } = useMutation({
+    mutationFn: async (selectedSequence) => {
+      const selectedId = selectedSequence.id;
+      const response = await openCloningDBHttpClient.get(endpoints.sequenceTextFile(selectedId));
+      const sequence = { ...response.data, id: 1 };
+      const source = { id: 1, input: [], database_id: selectedId, type: 'DatabaseSource' };
+      const cloningStrategy = { sources: [source], sequences: [sequence], primers: [] };
+      const fileContent = JSON.stringify(cloningStrategy);
+
+      return {
+        databaseId: selectedId,
+        file: new File([fileContent], 'cloning_strategy.json', { type: 'application/json' }),
+      };
+    },
+    onSuccess: ({ file, databaseId }) => {
+      setFile(file);
+      setDatabaseId(databaseId);
+    },
+    onError: (requestError) => {
+      console.error('Error fetching cloning strategy:', requestError);
+    },
+    retry: false,
+  });
+
+  const onSequenceSelect = React.useCallback((selectedSequence) => {
+    if (!selectedSequence) {
+      lastSelectedSequenceRef.current = null;
+      reset();
+      return;
+    }
+
+    lastSelectedSequenceRef.current = selectedSequence;
+    mutate(selectedSequence);
+  }, [mutate, reset]);
+
+  const retryLoad = React.useCallback(() => {
+    if (lastSelectedSequenceRef.current) {
+      mutate(lastSelectedSequenceRef.current);
+    }
+  }, [mutate]);
+
+  return (
+    <FormControl fullWidth>
+      <SequenceSelect multiple={false} label="Sequence" onChange={onSequenceSelect} />
+      {isPending && <CircularProgress />}
+      {error && <RetryAlert onRetry={retryLoad}>Failed to load sequence file.</RetryAlert>}
+    </FormControl>
+  );
+}
+
+export default GetSequenceFileAndDatabaseIdComponent;

package/src/LoadHistoryComponent.cy.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import LoadHistoryComponent from './LoadHistoryComponent';
+
+const DATABASE_ID = 10;
+
+describe('<LoadHistoryComponent />', () => {
+  it('calls loadDatabaseFile with the file returned by the API', () => {
+    const loadDatabaseFileSpy = cy.spy().as('loadDatabaseFileSpy');
+    cy.setupOpenCloningDBTestAuth();
+
+    cy.interceptOpenCloningDBStub('get_cloning_strategy', { alias: 'getCloningStrategy' });
+
+    cy.mount(
+      <LoadHistoryComponent
+        databaseId={DATABASE_ID}
+        loadDatabaseFile={loadDatabaseFileSpy}
+      />,
+    );
+
+    cy.getStub('get_cloning_strategy').then((cloningStrategyStub) => {
+      const expectedContent = JSON.stringify(cloningStrategyStub.response.body);
+
+      cy.wait('@getCloningStrategy').its('request.url').should('include', cloningStrategyStub.endpoint);
+      cy.get('@loadDatabaseFileSpy').should('have.been.calledOnce');
+
+      cy.get('@loadDatabaseFileSpy').then((spy) => {
+        const [file, id, flag] = spy.lastCall.args;
+        expect(id).to.equal(DATABASE_ID);
+        expect(flag).to.equal(true);
+
+        return cy.readFileAsText(file).then((content) => {
+          expect(content).to.equal(expectedContent);
+        });
+      });
+    });
+  });
+
+  it('shows a loading spinner while the request is pending', () => {
+    cy.setupOpenCloningDBTestAuth();
+
+    cy.getStub('get_cloning_strategy').then((cloningStrategyStub) => {
+      cy.intercept({ method: cloningStrategyStub.method, pathname: cloningStrategyStub.endpoint }, (req) => {
+        req.reply({
+          delay: 1000,
+          statusCode: cloningStrategyStub.response.status_code,
+          body: cloningStrategyStub.response.body,
+          headers: cloningStrategyStub.response.headers,
+        });
+      }).as('getCloningStrategy');
+    });
+
+    cy.mount(
+      <LoadHistoryComponent
+        databaseId={DATABASE_ID}
+        loadDatabaseFile={cy.stub()}
+      />,
+    );
+
+    cy.get('.MuiCircularProgress-svg', { timeout: 500 }).should('exist');
+    cy.wait('@getCloningStrategy');
+  });
+
+  it('shows a retry button when the request fails, and retries on click', () => {
+    cy.setupOpenCloningDBTestAuth();
+
+    cy.getStub('get_cloning_strategy').then((cloningStrategyStub) => {
+      let callCount = 0;
+      cy.intercept({ method: cloningStrategyStub.method, pathname: cloningStrategyStub.endpoint }, (req) => {
+        callCount += 1;
+        if (callCount === 1) {
+          req.reply({ statusCode: 500 });
+        } else {
+          req.reply({
+            statusCode: cloningStrategyStub.response.status_code,
+            body: cloningStrategyStub.response.body,
+            headers: cloningStrategyStub.response.headers,
+          });
+        }
+      }).as('getCloningStrategy');
+    });
+
+    cy.mount(
+      <LoadHistoryComponent
+        databaseId={DATABASE_ID}
+        loadDatabaseFile={cy.stub()}
+      />,
+    );
+
+    cy.wait('@getCloningStrategy');
+    cy.contains('Failed to load history file.').should('exist');
+    cy.contains('button', 'Retry').should('exist').click();
+    cy.wait('@getCloningStrategy');
+    cy.contains('Failed to load history file.').should('not.exist');
+  });
+});

package/src/LoadHistoryComponent.jsx

@@ -0,0 +1,35 @@
+import { CircularProgress } from '@mui/material';
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { openCloningDBHttpClient } from './common';
+import RetryAlert from '@opencloning/ui/components/form/RetryAlert';
+import endpoints from './endpoints';
+
+function LoadHistoryComponent({ databaseId, loadDatabaseFile }) {
+  const url = endpoints.sequenceCloningStrategy(databaseId);
+
+  const { isLoading, error, data, refetch } = useQuery({
+    queryKey: ['cloningStrategy', databaseId],
+    queryFn: async () => {
+      const response = await openCloningDBHttpClient.get(url);
+      return response.data;
+    },
+    retry: false,
+  });
+
+  React.useEffect(() => {
+    if (data) {
+      const file = new File([JSON.stringify(data)], 'cloning_strategy.json', { type: 'application/json' });
+      loadDatabaseFile(file, databaseId, true);
+    }
+  }, [data, databaseId, loadDatabaseFile]);
+
+  return (
+    <div>
+      {isLoading && <CircularProgress />}
+      {error && <RetryAlert onRetry={refetch}>Failed to load history file.</RetryAlert>}
+    </div>
+  );
+}
+
+export default LoadHistoryComponent;

package/src/OpenCloningDBInterface.js

@@ -0,0 +1,141 @@
+import { Save as SaveIcon, Link as LinkIcon } from '@mui/icons-material';
+import GetPrimerComponent from './GetPrimerComponent';
+import GetSequenceFileAndDatabaseIdComponent from './GetSequenceFileAndDatabaseIdComponent';
+import { openCloningDBHttpClient } from './common';
+import endpoints from './endpoints';
+import LoadHistoryComponent from './LoadHistoryComponent';
+import SubmitToDatabaseComponent from './SubmitToDatabaseComponent';
+import PrimersNotInDatabaseComponent from './PrimersNotInDatabaseComponent';
+
+function isSubmissionDataValid(submissionData) {
+  return Boolean(submissionData.title);
+}
+
+async function submitSequenceToDatabase({ submissionData, substate, id }) {
+  // const substateCopy = cloneDeep(substate);
+  // const selectedSequence = substateCopy.sequences.find((s) => s.id === id);
+  // selectedSequence.name = submissionData.title;
+  // substateCopy.description = '';
+  // console.log(substateCopy);
+  const { sources, primers, sequences } = substate;
+  const { data } = await openCloningDBHttpClient.post(endpoints.postSequence, { sources, primers, sequences });
+
+  const primerIds = new Set(primers.map((p) => p.id));
+  const sequenceIds = new Set(sequences.map((s) => s.id));
+
+  const primerMappings = data.mappings.filter(({localId}) => primerIds.has(localId));
+  const sequenceMappings = data.mappings.filter(({localId}) => sequenceIds.has(localId));
+
+  return { databaseId: data.id, primerMappings, sequenceMappings };
+}
+
+async function getPrimer(databaseId) {
+  const response = await openCloningDBHttpClient.get(endpoints.primer(databaseId));
+  return { name: response.data.name, database_id: databaseId, sequence: response.data.sequence };
+}
+
+async function submitPrimerToDatabase({ submissionData, primer }) {
+  const payload = {
+    name: submissionData.title,
+    sequence: primer.sequence,
+  };
+  const response = await openCloningDBHttpClient.post(endpoints.postPrimer, payload);
+  return response.data.id;
+}
+
+async function submitSequencingFileToDatabase({ databaseId, sequencingFiles }) {
+  const formData = new FormData();
+  sequencingFiles.forEach((file) => {
+    if (file) {
+      formData.append('files', file);
+    }
+  });
+
+  try {
+    const resp = await openCloningDBHttpClient.post(
+      endpoints.sequenceSequencingFiles(databaseId),
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      },
+    );
+    return resp.data;
+  } catch (e) {
+    console.error(e);
+    throw new Error(e.response?.data?.detail || e.message || 'Error submitting sequencing files');
+  }
+}
+
+async function getSequencingFiles(databaseId) {
+  // Returns array of { name, getFile } where getFile is async and returns the file content
+  try {
+    const resp = await openCloningDBHttpClient.get(endpoints.sequenceSequencingFiles(databaseId));
+    const files = resp.data || [];
+    return files.map((fileInfo) => ({
+      id: fileInfo.id,
+      name: fileInfo.original_name,
+      getFile: async () => {
+        const downloadResp = await openCloningDBHttpClient.get(endpoints.sequencingFileDownload(fileInfo.id), {
+          responseType: 'blob',
+        });
+        return new File([downloadResp.data], fileInfo.original_name);
+      },
+    }));
+  } catch (e) {
+    console.error(e);
+    throw new Error(e.response?.data?.detail || e.message || 'Error getting sequencing files');
+  }
+}
+
+async function locateSequenceInDatabase(sequence) {
+  const response = await openCloningDBHttpClient.post(endpoints.sequenceSearch, sequence);
+  return response.data;
+}
+
+export default {
+  // Name of the database interface
+  name: 'OpenCloningDB',
+  // Returns a link to the sequence in the database
+  getSequenceLink: (databaseId) => `sequences/${databaseId}`,
+  // Returns a link to the primer in the database
+  getPrimerLink: (databaseId) => `primers/${databaseId}`,
+  // Component for selecting and loading sequence files from the database
+  GetSequenceFileAndDatabaseIdComponent,
+  // Component for selecting and loading primers from the database
+  GetPrimerComponent,
+  // Component for submitting resources to the database
+  SubmitToDatabaseComponent,
+  // Component for handling primers not yet in database
+  PrimersNotInDatabaseComponent,
+  // Function to submit a primer to the database
+  submitPrimerToDatabase,
+  // Function to submit a sequence and its history to the database
+  submitSequenceToDatabase,
+  // Function to validate submission data
+  isSubmissionDataValid,
+  // Icon displayed on the node corner to submit
+  SubmitIcon: SaveIcon,
+  // Icon displayed on the node corner for entities in the database
+  DatabaseIcon: LinkIcon,
+  // OPTIONAL =======================================================================
+  // Component for loading history from the database (can be hook-like does not have to render anything)
+  LoadHistoryComponent,
+  // Function to load sequences from url parameters
+  loadSequenceFromUrlParams: () => {},
+  // Function to get the primer ({name, database_id, sequence}) from the database
+  getPrimer,
+  // Function to get the name of a sequence from the database
+  getSequenceName: () => {},
+  // Function to get the sequencing files from the database, see docs for what the return value should be
+  getSequencingFiles,
+  // Autoload sequencing files (Boolean)
+  autoloadSequencingFiles: true,
+  // Omit unsaved intermediates disclaimer (Boolean)
+  omitUnsavedIntermediatesDisclaimer: true,
+  // Function to locate a sequence in the database
+  locateSequenceInDatabase,
+  // Function to submit sequencing files to the database
+  submitSequencingFileToDatabase,
+};

package/src/OpenCloningDBInterface.multipart.test.js

@@ -0,0 +1,65 @@
+import { describe, expect, it, vi } from 'vitest';
+import { getStub } from './testUtils.test';
+import endpoints from './endpoints';
+
+const multipartStub = getStub('post_sequence_sequencing_files');
+const sequenceFileStub = multipartStub.body.multipart_files[0];
+const databaseId = Number(multipartStub.endpoint.match(/\/sequences\/(\d+)\//)?.[1]);
+const postMock = vi.fn().mockResolvedValue({
+  data: 'direct-response',
+});
+
+vi.mock('./common', async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    openCloningDBHttpClient: {
+      ...actual.openCloningDBHttpClient,
+      post: (...args) => postMock(...args),
+    },
+  };
+});
+
+vi.mock('./GetPrimerComponent', () => ({ default: () => null }));
+vi.mock('./GetSequenceFileAndDatabaseIdComponent', () => ({ default: () => null }));
+vi.mock('./LoadHistoryComponent', () => ({ default: () => null }));
+vi.mock('./SubmitToDatabaseComponent', () => ({ default: () => null }));
+vi.mock('./PrimersNotInDatabaseComponent', () => ({ default: () => null }));
+
+import OpenCloningDBInterface from './OpenCloningDBInterface';
+
+function readFileAsText(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(reader.error);
+    reader.onload = () => resolve(reader.result);
+    reader.readAsText(file);
+  });
+}
+
+describe('submitSequencingFileToDatabase multipart payload', () => {
+  it('submits FormData with files field and forwards response', async () => {
+    postMock.mockClear();
+    const sequenceFile = new File([sequenceFileStub.content], sequenceFileStub.filename, {
+      type: sequenceFileStub.content_type,
+    });
+
+    const result = await OpenCloningDBInterface.submitSequencingFileToDatabase({
+      databaseId,
+      sequencingFiles: [sequenceFile],
+    });
+
+    const [url, formData] = postMock.mock.calls[0];
+    expect(url).toBe(endpoints.sequenceSequencingFiles(databaseId));
+    expect(formData).toBeInstanceOf(FormData);
+
+    const files = formData.getAll('files');
+    expect(files).toHaveLength(1);
+    expect(files[0]).toBeInstanceOf(File);
+    expect(files[0].name).toBe(sequenceFileStub.filename);
+    expect(files[0].type).toBe(sequenceFileStub.content_type);
+    expect(await readFileAsText(files[0])).toBe(sequenceFileStub.content);
+
+    expect(result).toEqual('direct-response');
+  });
+});