Nuxt•3mo ago

Testing Scenario

Is it possible to test this Scenario in one File? I have a PDF Annotation Page and want to prepare a file (upload it to the server) then you get back a ID which you can call an url with and draw. when you save it gets send with the id to an api so the other service can consume it. I have some issues with using registerEndpoint from @nuxt/test-utils/runtime and createPage from @nuxt/test-utils/e2e together. Do I have to seperate them? https://nuxt.com/docs/getting-started/testing#conflict-with-end-to-end-testing

Nuxt

Testing · Get Started with Nuxt

How to test your Nuxt application.

1 Reply

NiklasOP•3mo ago

This is what my test file looks like right now but I get some unhead dom errors

// @vitest-environment nuxt
import { expect, describe, test } from 'vitest';
import { createPage } from '@nuxt/test-utils/e2e';
import { setup, $fetch } from '@nuxt/test-utils/e2e';
import fs from 'node:fs/promises';
import { registerEndpoint } from '@nuxt/test-utils/runtime';

registerEndpoint('/api/document/test-external', {
  method: 'POST',
  handler: () => {
    console.log('test-external called');
    return { success: true };
  },
});

describe('documents', async () => {
  await setup({
    env: {
      annotationURL: '/api/document/test-external',
      },
    },
  });

  test('upload external document', async () => {
    const formData = new FormData();

    const file = await fs.readFile('tests/data/documents/sample.pdf');

    formData.append(
      'file',
      new File([file], 'sample.pdf', { type: 'application/pdf' }),
    );

    const res = await $fetch<{ id: string }>('/api/document/prepare', {
      method: 'POST',
      body: formData,
    });

    expect(res).toHaveProperty('id');

    console.log(res);

    const page = await createPage(`/pdf/viewer/${res.id}?external=true`);

    await page.mouse.move(650, 350);
    await page.mouse.down({ button: 'left' });
    await page.mouse.move(750, 1000);
    await page.mouse.up({ button: 'left' });

    await page.getByRole('button', { name: 'Save' }).click();

    await expect(page.getByRole('heading')).toContain(
      'PDF successfully saved.',
    );
  });
});

// @vitest-environment nuxt
import { expect, describe, test } from 'vitest';
import { createPage } from '@nuxt/test-utils/e2e';
import { setup, $fetch } from '@nuxt/test-utils/e2e';
import fs from 'node:fs/promises';
import { registerEndpoint } from '@nuxt/test-utils/runtime';

registerEndpoint('/api/document/test-external', {
  method: 'POST',
  handler: () => {
    console.log('test-external called');
    return { success: true };
  },
});

describe('documents', async () => {
  await setup({
    env: {
      annotationURL: '/api/document/test-external',
      },
    },
  });

  test('upload external document', async () => {
    const formData = new FormData();

    const file = await fs.readFile('tests/data/documents/sample.pdf');

    formData.append(
      'file',
      new File([file], 'sample.pdf', { type: 'application/pdf' }),
    );

    const res = await $fetch<{ id: string }>('/api/document/prepare', {
      method: 'POST',
      body: formData,
    });

    expect(res).toHaveProperty('id');

    console.log(res);

    const page = await createPage(`/pdf/viewer/${res.id}?external=true`);

    await page.mouse.move(650, 350);
    await page.mouse.down({ button: 'left' });
    await page.mouse.move(750, 1000);
    await page.mouse.up({ button: 'left' });

    await page.getByRole('button', { name: 'Save' }).click();

    await expect(page.getByRole('heading')).toContain(
      'PDF successfully saved.',
    );
  });
});

Gaming

Programming

Testing Scenario