@netlify/spark-ui 1.31.0-alpha.3 → 1.31.0-alpha.5

package/packages/components/preact/DropZone/useDropDeploy.test.ts

@@ -0,0 +1,376 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { h, render } from 'preact';
+import { useDropDeploy } from './useDropDeploy';
+import {
+  DROPZONE_EVENTS,
+  NotAuthenticatedError,
+  type BuildClient,
+  type DropClient,
+  type ProcessedFile,
+} from '../../../drop-core';
+
+// The stash is unit-tested in drop-core/buildStash.test.ts; here it is mocked
+// so the hook's orchestration (when it saves, loads, and clears) is what's
+// under test — and so no IndexedDB shim is needed.
+vi.mock('../../../drop-core', async importOriginal => {
+  const original = await importOriginal<typeof import('../../../drop-core')>();
+  return {
+    ...original,
+    saveDropStash: vi.fn(async () => true),
+    loadDropStash: vi.fn(async () => null),
+    clearDropStash: vi.fn(async () => {}),
+    hasDropStashMarker: vi.fn(() => false),
+  };
+});
+import { clearDropStash, hasDropStashMarker, loadDropStash, saveDropStash } from '../../../drop-core';
+
+const encoder = new TextEncoder();
+const file = (path: string, contents: string): ProcessedFile => {
+  const content = encoder.encode(contents).buffer as ArrayBuffer;
+  return { path, content, size: content.byteLength, sha: 'test-sha', name: path.split('/').pop()! };
+};
+
+const staticFiles = () => [file('/index.html', '<h1>hi</h1>'), file('/style.css', 'body{}')];
+const buildFiles = () => [
+  file('/package.json', '{"scripts":{"build":"vite build"}}'),
+  file('/index.html', '<h1>hi</h1>'),
+];
+
+function makeAnonymousClient(log: string[]): DropClient {
+  return {
+    getToken: async () => (log.push('anon:getToken'), 'anon-token'),
+    createDeploy: async () => (
+      log.push('anon:createDeploy'),
+      { id: 'anon-site-id', deploy_id: 'anon-deploy-id', subdomain: 'anon-sub', required: [] }
+    ),
+    uploadFile: async () => void log.push('anon:uploadFile'),
+    waitUntilReady: async () => void log.push('anon:wait'),
+  };
+}
+
+function makeAuthedDropClient(log: string[], behavior: 'ok' | 'no-auth' | 'server-error'): DropClient {
+  return {
+    getToken: async () => {
+      log.push('authed:getToken');
+      if (behavior === 'no-auth') throw new NotAuthenticatedError();
+      return 'bearer-token';
+    },
+    createDeploy: async () => {
+      log.push('authed:createDeploy');
+      if (behavior === 'server-error')
+        throw Object.assign(new Error('deploy create failed: 500'), { status: 500 });
+      return { id: 'site-uuid', deploy_id: 'deploy-bson', subdomain: 'my-account-site', required: [] };
+    },
+    uploadFile: async () => void log.push('authed:uploadFile'),
+    waitUntilReady: async () => void log.push('authed:wait'),
+  };
+}
+
+function makeBuildClient(behavior: 'ok' | 'no-auth'): BuildClient {
+  return {
+    createSite: async () => {
+      if (behavior === 'no-auth') throw new NotAuthenticatedError();
+      return { id: 'site-uuid', name: 'built-site' };
+    },
+    createBuildFromZip: async () => ({ id: 'build-id', deploy_id: 'deploy-bson' }),
+    waitUntilBuildReady: async () => {},
+  };
+}
+
+interface HarnessResult {
+  api: ReturnType<typeof useDropDeploy>;
+  events: Array<{ event: string; props: Record<string, unknown> | undefined }>;
+  deploys: unknown[];
+  buildDeploys: unknown[];
+  errors: Array<{ message: string; reason: string }>;
+  handoffs: unknown[];
+  assigned: string[];
+  unmount: () => void;
+}
+
+function mountHook(options: Partial<Parameters<typeof useDropDeploy>[0]> = {}): HarnessResult {
+  const result = {
+    events: [],
+    deploys: [],
+    buildDeploys: [],
+    errors: [],
+    handoffs: [],
+    assigned: [],
+  } as unknown as HarnessResult;
+
+  window.location.assign = ((url: string) => result.assigned.push(String(url))) as never;
+
+  function Harness() {
+    result.api = useDropDeploy({
+      claimUrl: name => `https://app.netlify.com/drop/${name}`,
+      siteDashboardUrl: name => `https://app.netlify.com/projects/${name}`,
+      buildSignupUrl: 'https://app.netlify.com/signup?next=/drop',
+      buildDeployUrl: build => `https://app.netlify.com/projects/${(build as { siteName: string }).siteName}`,
+      onDeploy: site => void result.deploys.push(site),
+      onBuildDeploy: build => void result.buildDeploys.push(build),
+      onError: error => void result.errors.push(error),
+      track: (event, props) => void result.events.push({ event, props }),
+      ...options,
+    });
+    return null;
+  }
+
+  const container = document.createElement('div');
+  render(h(Harness, {}), container);
+  result.unmount = () => render(null, container);
+  return result;
+}
+
+/** Preact effects and chained promises settle on real timers — poll briefly. */
+async function waitUntil(condition: () => boolean, ms = 500) {
+  const start = Date.now();
+  while (!condition()) {
+    if (Date.now() - start > ms) throw new Error('condition never became true');
+    await new Promise(r => setTimeout(r, 5));
+  }
+}
+
+const settle = () => new Promise(r => setTimeout(r, 10));
+
+beforeEach(() => {
+  localStorage.clear();
+  vi.mocked(saveDropStash).mockClear().mockResolvedValue(true);
+  vi.mocked(loadDropStash).mockClear().mockResolvedValue(null);
+  vi.mocked(clearDropStash).mockClear();
+  vi.mocked(hasDropStashMarker).mockClear().mockReturnValue(false);
+});
+
+afterEach(() => vi.restoreAllMocks());
+
+describe('static drops', () => {
+  it('deploys into the account and lands on the dashboard — no claim artifacts anywhere', async () => {
+    const log: string[] = [];
+    const harness = mountHook({
+      authenticatedDropClient: makeAuthedDropClient(log, 'ok'),
+      client: makeAnonymousClient(log),
+    });
+    await harness.api.deploy(async () => staticFiles(), 'drag', ['text/html']);
+    await settle();
+
+    expect(harness.assigned).toEqual(['https://app.netlify.com/projects/my-account-site']);
+    expect(localStorage.getItem('drop-token')).toBeNull();
+    expect(localStorage.getItem('dropSiteName')).toBeNull();
+    expect(harness.deploys[0]).toEqual({
+      url: 'https://my-account-site.netlify.app',
+      siteName: 'my-account-site',
+      siteId: 'site-uuid',
+      authenticated: true,
+    });
+    const succeeded = harness.events.find(e => e.event === DROPZONE_EVENTS.DEPLOY_SUCCEEDED);
+    expect(succeeded?.props).toEqual({
+      method: 'drag',
+      site_name: 'my-account-site',
+      file_count: 2,
+      authenticated: true,
+      file_types: ['text/html'],
+    });
+    expect(log.some(entry => entry.startsWith('anon:'))).toBe(false);
+  });
+
+  it('falls back to the anonymous claim flow when the session is gone', async () => {
+    const log: string[] = [];
+    const harness = mountHook({
+      authenticatedDropClient: makeAuthedDropClient(log, 'no-auth'),
+      client: makeAnonymousClient(log),
+    });
+    await harness.api.deploy(async () => staticFiles(), 'drag', ['text/html']);
+    await settle();
+
+    expect(harness.assigned).toEqual(['https://app.netlify.com/drop/anon-sub#drop_token=anon-token']);
+    expect(localStorage.getItem('drop-token')).toBe('anon-token');
+    expect(localStorage.getItem('dropSiteName')).toBe('anon-sub');
+    const succeeded = harness.events.find(e => e.event === DROPZONE_EVENTS.DEPLOY_SUCCEEDED);
+    expect(succeeded?.props).toMatchObject({ authenticated: false, auth_fallback: true });
+    expect(log[0]).toBe('authed:getToken'); // authed tried first, then anonymous
+    expect(log).toContain('anon:getToken');
+  });
+
+  it('surfaces a real authed failure as an error — never a silent anonymous duplicate', async () => {
+    const log: string[] = [];
+    const harness = mountHook({
+      authenticatedDropClient: makeAuthedDropClient(log, 'server-error'),
+      client: makeAnonymousClient(log),
+    });
+    await harness.api.deploy(async () => staticFiles(), 'drag', []);
+    await settle();
+
+    expect(harness.assigned).toEqual([]);
+    expect(harness.api.status.kind).toBe('error');
+    expect(harness.errors).toHaveLength(1);
+    expect(harness.events.some(e => e.event === DROPZONE_EVENTS.DEPLOY_FAILED)).toBe(true);
+    expect(log.some(entry => entry.startsWith('anon:'))).toBe(false);
+    expect(harness.deploys).toHaveLength(0);
+  });
+
+  it('stays fully anonymous without authenticated wiring', async () => {
+    const harness = mountHook({ client: makeAnonymousClient([]) });
+    await harness.api.deploy(async () => staticFiles(), 'browse', []);
+    await settle();
+
+    expect(harness.assigned).toEqual(['https://app.netlify.com/drop/anon-sub#drop_token=anon-token']);
+    const succeeded = harness.events.find(e => e.event === DROPZONE_EVENTS.DEPLOY_SUCCEEDED);
+    expect(succeeded?.props).toMatchObject({ authenticated: false });
+    expect(succeeded?.props).not.toHaveProperty('auth_fallback');
+    expect(succeeded?.props).not.toHaveProperty('file_types'); // omitted, never []
+  });
+
+  it('reports an empty selection as a failure with file_count 0', async () => {
+    const harness = mountHook({ client: makeAnonymousClient([]) });
+    await harness.api.deploy(async () => [], 'drag', []);
+    expect(harness.api.status).toEqual({ kind: 'error', message: 'No files found to deploy.' });
+    const failed = harness.events.find(e => e.event === DROPZONE_EVENTS.DEPLOY_FAILED);
+    expect(failed?.props).toMatchObject({ file_count: 0 });
+  });
+
+  it('emits FILES_DROPPED for drags only', async () => {
+    const dragged = mountHook({ client: makeAnonymousClient([]) });
+    await dragged.api.deploy(async () => staticFiles(), 'drag', []);
+    expect(dragged.events.some(e => e.event === DROPZONE_EVENTS.FILES_DROPPED)).toBe(true);
+
+    const browsed = mountHook({ client: makeAnonymousClient([]) });
+    await browsed.api.deploy(async () => staticFiles(), 'browse', []);
+    expect(browsed.events.some(e => e.event === DROPZONE_EVENTS.FILES_DROPPED)).toBe(false);
+  });
+});
+
+describe('build-required drops', () => {
+  it('builds in place for an authenticated visitor and lands on the project', async () => {
+    const harness = mountHook({ buildClient: makeBuildClient('ok'), getUploadToken: async () => 'tok' });
+    await harness.api.deploy(async () => buildFiles(), 'drag', []);
+    await settle();
+
+    expect(harness.assigned).toEqual(['https://app.netlify.com/projects/built-site']);
+    expect(harness.buildDeploys).toHaveLength(1);
+    expect(harness.events.map(e => e.event)).toContain(DROPZONE_EVENTS.BUILD_DEPLOY_SUCCEEDED);
+    expect(saveDropStash).not.toHaveBeenCalled();
+  });
+
+  it('stashes the archive and redirects to signup when there is no session', async () => {
+    const harness = mountHook({ buildClient: makeBuildClient('no-auth'), getUploadToken: async () => null });
+    await harness.api.deploy(async () => buildFiles(), 'drag', []);
+    await settle();
+
+    expect(saveDropStash).toHaveBeenCalledOnce();
+    const [archive] = vi.mocked(saveDropStash).mock.calls[0];
+    expect(archive.name).toBe('source.zip');
+    expect(harness.events.map(e => e.event)).toContain(DROPZONE_EVENTS.PROJECT_STASHED);
+    expect(harness.assigned).toEqual(['https://app.netlify.com/signup?next=/drop']);
+  });
+
+  it('lets onBuildSignupHandoff own the hand-off instead of redirecting', async () => {
+    const handoffs: unknown[] = [];
+    const harness = mountHook({
+      buildClient: makeBuildClient('no-auth'),
+      getUploadToken: async () => null,
+      onBuildSignupHandoff: info => void handoffs.push(info),
+    });
+    await harness.api.deploy(async () => buildFiles(), 'drag', []);
+    await settle();
+
+    expect(harness.assigned).toEqual([]);
+    expect(handoffs).toEqual([
+      { stashed: true, detection: { buildRequired: true, reason: 'package-json-build-script' } },
+    ]);
+    expect(harness.api.status.kind).toBe('idle'); // zone stays usable behind the popup
+  });
+
+  it('redirects to signup without stashing when nothing here could resume', async () => {
+    const harness = mountHook({}); // no build wiring at all
+    await harness.api.deploy(async () => buildFiles(), 'drag', []);
+    await settle();
+
+    expect(saveDropStash).not.toHaveBeenCalled();
+    expect(harness.assigned).toEqual(['https://app.netlify.com/signup?next=/drop']);
+  });
+
+  it('cedes everything to onBuildRequired when set', async () => {
+    const required: unknown[] = [];
+    const harness = mountHook({
+      buildClient: makeBuildClient('ok'),
+      getUploadToken: async () => 'tok',
+      onBuildRequired: info => void required.push(info),
+    });
+    await harness.api.deploy(async () => buildFiles(), 'drag', []);
+    await settle();
+
+    expect(required).toHaveLength(1);
+    expect(harness.assigned).toEqual([]);
+    expect(harness.api.status.kind).toBe('idle');
+  });
+});
+
+describe('stash resume on mount', () => {
+  const stashRecord = () => ({
+    zipFile: new File(['zip'], 'source.zip', { type: 'application/zip' }),
+    buildSettings: null,
+    createdAt: Date.now(),
+  });
+
+  it('deploys the stash for an authenticated visitor and consumes it', async () => {
+    vi.mocked(hasDropStashMarker).mockReturnValue(true);
+    vi.mocked(loadDropStash).mockResolvedValue(stashRecord());
+    const harness = mountHook({ buildClient: makeBuildClient('ok'), getUploadToken: async () => 'tok' });
+
+    await waitUntil(() => harness.assigned.length > 0);
+    expect(harness.assigned).toEqual(['https://app.netlify.com/projects/built-site']);
+    expect(harness.events.map(e => e.event)).toContain(DROPZONE_EVENTS.RESUMED);
+    expect(clearDropStash).toHaveBeenCalled();
+    expect(harness.buildDeploys).toHaveLength(1);
+  });
+
+  it('keeps the stash when the visitor came back logged out', async () => {
+    vi.mocked(hasDropStashMarker).mockReturnValue(true);
+    vi.mocked(loadDropStash).mockResolvedValue(stashRecord());
+    const harness = mountHook({ buildClient: makeBuildClient('no-auth'), getUploadToken: async () => null });
+
+    await waitUntil(() => vi.mocked(loadDropStash).mock.calls.length > 0);
+    await settle();
+    expect(clearDropStash).not.toHaveBeenCalled(); // preserved for the next authenticated visit
+    expect(harness.api.status.kind).toBe('idle');
+    expect(harness.errors).toHaveLength(0);
+  });
+
+  it('surfaces a real resume failure with re-drop copy, stash consumed', async () => {
+    vi.mocked(hasDropStashMarker).mockReturnValue(true);
+    vi.mocked(loadDropStash).mockResolvedValue(stashRecord());
+    const failing = makeBuildClient('ok');
+    failing.createBuildFromZip = async () => {
+      throw new Error('boom');
+    };
+    const harness = mountHook({ buildClient: failing, getUploadToken: async () => 'tok' });
+
+    await waitUntil(() => harness.api.status.kind === 'error');
+    expect(harness.api.status).toMatchObject({
+      kind: 'error',
+      message: 'We couldn’t automatically deploy your project. Drop it again to publish it.',
+    });
+    const failed = harness.events.find(e => e.event === DROPZONE_EVENTS.DEPLOY_FAILED);
+    expect(failed?.props).toEqual({ reason: 'resume_failed' });
+    expect(clearDropStash).toHaveBeenCalled();
+  });
+
+  it('never attempts without the marker, wiring, or with resume disabled', async () => {
+    mountHook({ buildClient: makeBuildClient('ok'), getUploadToken: async () => 'tok' });
+    await settle();
+    expect(loadDropStash).not.toHaveBeenCalled(); // no marker
+
+    vi.mocked(hasDropStashMarker).mockReturnValue(true);
+    mountHook({}); // marker but no wiring
+    await settle();
+    expect(loadDropStash).not.toHaveBeenCalled();
+
+    mountHook({
+      buildClient: makeBuildClient('ok'),
+      getUploadToken: async () => 'tok',
+      resumeStashedBuilds: false,
+    });
+    await settle();
+    expect(loadDropStash).not.toHaveBeenCalled();
+  });
+});