DEV Community

Diiiii
Diiiii

Posted on

Testing a Retro Text Generator as Two Different Products

A text-image generator can look like a single form: enter a phrase, choose some visual settings, generate, and download. From a product-engineering perspective, however, a logo route and a poster route do not have the same success criteria.

This article shows how to turn those two creative intentions into observable UI contracts. It is a black-box test plan based on public-facing workflow language, not an analysis of private source code, model architecture, API design, or performance.

Start with intent, not the Generate button

A successful server response tells us very little about whether the result is useful. A logo-oriented user needs a compact identity asset that survives repeated use. A poster-oriented user needs a headline that works inside a one-off information hierarchy.

That suggests two top-level contracts:

Surface Primary user question Failure that matters most
Logo route Is the name still recognizable across contexts? The word shape collapses at small size or depends on one background
Poster route Can the viewer find the message in the intended layout? The headline overwhelms the date, place, or call to action

The public Fontify retro workflow describes short text entry, font color and background choices, image-size selection, preview or generation, and image download. Those are useful observable stages. They should not be confused with guarantees about trademark distinctiveness, production-ready vectors, accessibility, or an installable font file.

Model only states a user can observe

Keep the test model deliberately modest:

type CreativeIntent = 'logo' | 'poster';

type ObservableState =
  | { kind: 'editing'; text: string }
  | { kind: 'generating'; requestId?: string }
  | { kind: 'preview-ready'; intent: CreativeIntent }
  | { kind: 'download-ready'; formatLabel: string }
  | { kind: 'recoverable-error'; messageVisible: boolean };
Enter fullscreen mode Exit fullscreen mode

This is a proposed test vocabulary, not a claim about the product’s implementation. Its value is that bug reports become reproducible. “The tool failed” turns into “after editing a completed preview, a second Generate action left the old image visible without a progress or error state.”

Also test what happens when intent changes. If a person moves from a square logo exploration to a wide poster composition, are the prior text and settings intentionally preserved, intentionally reset, or silently mixed? Any of those behaviors can be valid, but the interface should make the outcome understandable.

Define a logo-specific matrix

Use the Retro Font Logo Generator as the logo-focused entry point and prepare inputs that reveal recognition problems:

  • a short name with repeated letters;
  • a name containing a narrow and a wide character;
  • mixed case, if the current interface accepts it;
  • a name near the apparent input boundary;
  • light, dark, and transparent-background attempts when those options are available.

For each case, review the preview at three scales: the editor size, a compact card, and a favicon-like thumbnail. The automated check can confirm that a preview exists and that an enabled download action follows. Human review still has to answer whether letters merge, internal counters close, or an important terminal is cropped.

Do not encode guessed DOM selectors into the article as if they were stable product contracts. A real automation suite should inspect the live accessible roles and labels first. An illustrative Playwright skeleton might look like this:

test('logo journey exposes a reviewable result', async ({ page }) => {
  await page.goto(LOGO_ROUTE);
  await page.getByRole('textbox').fill('MOONROOM');
  await page.getByRole('button', { name: /generate/i }).click();
  await expect(page.getByRole('img')).toBeVisible();
  // Project selectors, completion signals, and download assertions
  // must be verified against the current live UI before use.
});
Enter fullscreen mode Exit fullscreen mode

Define a poster-specific matrix

The Retro Poster Font Generator needs scenarios that expose hierarchy and canvas problems rather than only glyph problems:

  1. A two-word event name in a wide composition.
  2. A long headline that may wrap.
  3. A date containing numbers and punctuation.
  4. A high-detail uploaded background, if the live page currently permits one.
  5. A mobile viewport where controls and preview compete for space.

The critical visual assertions are not merely “image exists.” Check safe margins, wrapping, cropping, foreground-background contrast, and whether a changed ratio is reflected in the newest preview and downloaded asset. When pixel-diff testing is used, keep tolerance and baseline updates under review; generative output may not be deterministic enough for strict full-image comparison.

A more durable split is to automate workflow invariants and reserve aesthetic judgment for a review checklist. Workflow invariants include input persistence, visible loading or error feedback, prevention of accidental duplicate actions, and consistency between selected settings and the export metadata visible to the user.

Test failure and recovery paths

Creative tools are often tested only on the happy path because the preview is the exciting part. Recovery deserves its own matrix:

  • empty or whitespace-only input;
  • unsupported or unrendered characters;
  • network interruption during generation;
  • a second click while work is in progress;
  • changing text after a preview is ready;
  • navigating back from a download-ready state;
  • retrying without losing the creative brief.

For each failure, record whether the message identifies the problem, preserves recoverable input, and presents a clear next action. Avoid inventing a character-support promise: verify behavior with the current interface and document the result.

Keep the product boundary visible

QA can verify that a route accepts input, exposes settings, produces a reviewable result, and offers a download path. It cannot certify that a generated logo is legally unique or that a poster is effective for every audience. Commercial projects also require a current license check, and teams should distinguish a rendered text image from an editable font family.

The main engineering lesson is simple: do not let a shared component erase distinct user intent. The same generator shell can support multiple creative surfaces, but each surface needs its own fixtures, visual-review questions, and release criteria. Test the job, not just the button.

Top comments (0)