refactor: move test endpoint to e2e test, add media proxy tests

e2e/codecept.conf.ts

@@ -14,6 +14,14 @@ export const config: CodeceptJS.MainConfig = {
       url: 'http://localhost:3000',
       show: true,
     },
+    ChaiWrapper: {
+      require: 'codeceptjs-chai',
+    },
+    REST: {
+      endpoint: 'http://localhost:3000',
+      prettyPrintJson: true,
+    },
+    JSONResponse: {},
     EdusharingHelper: {
       require: './helpers/edusharing-helper.ts',
     },

e2e/steps.d.ts

@@ -1,4 +1,12 @@
 /// <reference types='codeceptjs' />
+
+/*
+This file is supposed to be auto generated with `npx codeceptjs def ./e2e`
+Unfortunately there is a problem with the custom helpers so you have to either manually add/change types
+or remove the custom helpers from the config, run `def` and them add them again in the config and here as well.
+*/
+
+type ChaiWrapper = import('codeceptjs-chai')
 type EdusharingHelper = import('./helpers/edusharing-helper')
 type ItslearningHelper = import('./helpers/itslearning-helper')
 
@@ -8,7 +16,13 @@ declare namespace CodeceptJS {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     current: any
   }
-  interface Methods extends Playwright, EdusharingHelper, ItslearningHelper {}
+  interface Methods
+    extends Playwright,
+      ChaiWrapper,
+      REST,
+      JSONResponse,
+      EdusharingHelper,
+      ItslearningHelper {}
   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   interface I extends WithTranslation<Methods> {}
   namespace Translation {

e2e/tests/media.ts

@@ -0,0 +1,88 @@
+import {
+  GetObjectTaggingCommand,
+  HeadObjectCommand,
+  S3Client,
+} from '@aws-sdk/client-s3'
+import config from '../../src/utils/config'
+
+Feature('Media upload and proxy')
+
+const s3Client = new S3Client({
+  region: config.BUCKET_REGION,
+  credentials: {
+    accessKeyId: config.BUCKET_ACCESS_KEY_ID,
+    secretAccessKey: config.BUCKET_SECRET_ACCESS_KEY,
+  },
+  endpoint: config.S3_ENDPOINT,
+  forcePathStyle: true,
+})
+
+const uploadedKeys: string[] = []
+
+Scenario('Requesting media proxy with example image works', ({ I }) => {
+  I.sendGetRequest('http://localhost:3000/media/four-byte-burger.png')
+  I.seeResponseCodeIsSuccessful()
+})
+
+Scenario('Requesting media proxy with invalid url returns 400', ({ I }) => {
+  I.sendGetRequest('http://localhost:3000/media/imaginary987.png')
+  I.seeResponseCodeIs(403)
+})
+
+Scenario(
+  'Media: Uploading image works and Tags and Metadata is written as expected',
+  async ({ I }) => {
+    const presignedResponse = await fetch(
+      'http://localhost:3000/media/presigned-url?mimeType=image/png&editorVariant=test-uploads&userId=test&parentHost=localhost:3000'
+    )
+    const data = await presignedResponse.json()
+    I.assertStartsWith(
+      data.signedUrl,
+      'https://s3.eu-central-3.ionoscloud.com/editor-media-assets-development/test-uploads/'
+    )
+    I.assertStartsWith(data.fileUrl, 'https://editor.serlo.dev/media/')
+
+    // // 1x1 pixel png
+    const base64Data =
+      'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADUlEQVR42mP8z/C/HwAF/gL+Tf7XNQAAAABJRU5ErkJggg=='
+    const binaryData = atob(base64Data)
+    const byteArray = Uint8Array.from(binaryData, (char) => char.charCodeAt(0))
+    const file = new File([byteArray], '1x1.png', { type: 'image/png' })
+
+    await fetch(data.signedUrl, {
+      method: 'PUT',
+      body: file,
+      headers: {
+        'Content-Type': file.type,
+        'x-amz-tagging': data.tagging,
+        'Access-Control-Allow-Origin': '*',
+      },
+    }).catch((e) => {
+      I.assertFalse(true) // fail test
+      // eslint-disable-next-line no-console
+      console.error(e)
+    })
+
+    I.sendGetRequest(data.fileUrl)
+    I.seeResponseCodeIsSuccessful()
+
+    const key = data.fileUrl.replace(config.MEDIA_BASE_URL + '/media/', '')
+
+    uploadedKeys.push(key)
+
+    const inputValues = { Bucket: 'editor-media-assets-development', Key: key }
+    const taggingCommand = new GetObjectTaggingCommand(inputValues)
+    const taggingResponse = await s3Client.send(taggingCommand)
+    I.assertEqual(
+      JSON.stringify(taggingResponse.TagSet),
+      '[{"Key":"editorVariant","Value":"test-uploads"},{"Key":"parentHost","Value":"localhost:3000"},{"Key":"requestHost","Value":"localhost:3000"},{"Key":"userId","Value":"test"}]'
+    )
+
+    const headCommand = new HeadObjectCommand(inputValues)
+    const metaResponse = await s3Client.send(headCommand)
+    I.assertEqual(
+      JSON.stringify(metaResponse.Metadata),
+      '{"content-type":"image/png"}'
+    )
+  }
+)

package.json

@@ -63,6 +63,7 @@
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react-swc": "^3.7.1",
     "codeceptjs": "^3.6.7",
+    "codeceptjs-chai": "^2.3.5",
     "esbuild": "^0.24.0",
     "eslint": "^9.13.0",
     "eslint-plugin-react": "^7.37.2",

src/backend/index.ts

@@ -15,11 +15,7 @@
   editorPutEntity,
 } from './editor-route-handlers'
 import { getMariaDB } from './mariadb'
-import {
-  mediaPresignedUrl,
-  mediaProxy,
-  runTestUpload,
-} from './media-route-handlers'
+import { mediaPresignedUrl, mediaProxy } from './media-route-handlers'
 import { serverLog } from '../utils/server-log'
 
 const ltijsKey = config.LTIJS_KEY
@@ -121,7 +117,6 @@
   app.get('/edusharing-embed/get', edusharing.get)
 
   app.get('/media/presigned-url', mediaPresignedUrl)
-  app.get('/media/test-upload', runTestUpload)
   app.use(mediaProxy)
 
   // Successful LTI resource link launch
@@ -226,7 +221,7 @@
     // @ts-expect-error @types/ltijs
     const resourceLinkId: string = idToken.platformContext.resource.id
 
     console.log('ltijs.onConnect -> idToken: ', idToken)
 
     const mariaDB = getMariaDB()
 
@@ -310,7 +305,7 @@
       [ltiCustomClaimId, JSON.stringify(idToken)]
     )
 
     console.log('entityId: ', entityId)
 
     const url = new URL(urlJoin(config.EDITOR_URL, '/lti/launch'))
 

src/backend/media-route-handlers.ts

@@ -1,8 +1,6 @@
 import { createId } from '@paralleldrive/cuid2'
 import * as t from 'io-ts'
 import {
-  GetObjectTaggingCommand,
-  HeadObjectCommand,
   PutObjectCommand,
   PutObjectCommandInput,
   S3Client,
@@ -11,7 +9,6 @@ import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
 import { createProxyMiddleware } from 'http-proxy-middleware'
 import type { Request, Response } from 'express'
 import config from '../utils/config'
-import { serverLog } from '../utils/server-log'
 
 const endpoint = config.S3_ENDPOINT
 const bucketName = config.BUCKET_NAME
@@ -139,53 +136,3 @@ export async function mediaPresignedUrl(req: Request, res: Response) {
 
   res.json({ signedUrl, fileUrl: publicUrl.href, tagging })
 }
-
-export async function runTestUpload(_req: Request, res: Response) {
-  const presignedResponse = await fetch(
-    'http://localhost:3000/media/presigned-url?mimeType=image/png&editorVariant=test-uploads&userId=test&parentHost=localhost:3000'
-  )
-  const data = await presignedResponse.json()
-
-  // 1x1 pixel png
-  const base64Data =
-    'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADUlEQVR42mP8z/C/HwAF/gL+Tf7XNQAAAABJRU5ErkJggg=='
-  const binaryData = atob(base64Data)
-  const byteArray = Uint8Array.from(binaryData, (char) => char.charCodeAt(0))
-  const file = new File([byteArray], '1x1.png', { type: 'image/png' })
-
-  await fetch(data.signedUrl, {
-    method: 'PUT',
-    body: file,
-    headers: {
-      'Content-Type': file.type,
-      'x-amz-tagging': data.tagging,
-      'Access-Control-Allow-Origin': '*',
-    },
-  }).catch((e) => {
-    // eslint-disable-next-line no-console
-    console.error(e)
-  })
-
-  serverLog('src: ' + data.fileUrl)
-
-  const checkResponse = await fetch(data.fileUrl)
-  const imageData = await checkResponse.blob()
-  serverLog('type: ' + imageData.type)
-  serverLog('size: ' + imageData.size)
-
-  const key = data.fileUrl.replace(config.MEDIA_BASE_URL + '/media/', '')
-
-  const inputValues = {
-    Bucket: 'editor-media-assets-development',
-    Key: key,
-  }
-  const taggingCommand = new GetObjectTaggingCommand(inputValues)
-  const taggingResponse = await s3Client.send(taggingCommand)
-  serverLog(taggingResponse.TagSet)
-
-  const headCommand = new HeadObjectCommand(inputValues)
-  const metaResponse = await s3Client.send(headCommand)
-  serverLog(metaResponse.Metadata)
-
-  res.end('Done testing, check server logs for results')
-}