summaryrefslogtreecommitdiff
path: root/tests/client/App.test.tsx
blob: 960f38334eec67a49c5b8c830a0974313cb68d7b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import App from '../../src/client/App';

describe('App', () => {
  const fetchMock = vi.fn();

  beforeEach(() => {
    fetchMock.mockReset();
    vi.stubGlobal('fetch', fetchMock);
  });

  afterEach(() => {
    vi.unstubAllGlobals();
  });

  it('shows qr code after successful start call', async () => {
    fetchMock.mockResolvedValueOnce({
      ok: true,
      json: async () => ({
        sessionId: 'session-1',
        qrCodeDataUrl: 'data:image/png;base64,qr',
      }),
    });

    render(<App />);
    fireEvent.click(
      screen.getByRole('button', { name: /sign in with digi-id/i })
    );

    await waitFor(() => {
      expect(
        screen.getByRole('heading', { name: /scan the qr code/i })
      ).toBeInTheDocument();
    });
    expect(screen.getByAltText('Digi-ID QR Code')).toBeInTheDocument();
  });

  it('transitions to success after polling confirms authentication', async () => {
    fetchMock
      .mockResolvedValueOnce({
        ok: true,
        json: async () => ({
          sessionId: 'session-2',
          qrCodeDataUrl: 'data:image/png;base64,qr',
        }),
      })
      .mockResolvedValueOnce({
        ok: true,
        json: async () => ({
          status: 'success',
          address: 'D123456789',
        }),
      });

    render(<App />);
    fireEvent.click(
      screen.getByRole('button', { name: /sign in with digi-id/i })
    );

    await waitFor(() => {
      expect(
        screen.getByText(/waiting for authentication/i)
      ).toBeInTheDocument();
    });

    await waitFor(
      () => {
        expect(
          screen.getByText(/authentication successful/i)
        ).toBeInTheDocument();
      },
      { timeout: 3000 }
    );
    expect(screen.getByText('D123456789')).toBeInTheDocument();
  });

  it('shows start errors in the initial state', async () => {
    fetchMock.mockResolvedValueOnce({
      ok: false,
      status: 500,
      json: async () => ({ message: 'Backend unavailable' }),
    });

    render(<App />);
    fireEvent.click(
      screen.getByRole('button', { name: /sign in with digi-id/i })
    );

    await waitFor(() => {
      expect(
        screen.getByText(/failed to initiate digi-id: backend unavailable/i)
      ).toBeInTheDocument();
    });
  });

  it('can cancel waiting flow and return to initial view', async () => {
    fetchMock.mockResolvedValueOnce({
      ok: true,
      json: async () => ({
        sessionId: 'session-3',
        qrCodeDataUrl: 'data:image/png;base64,qr',
      }),
    });

    render(<App />);
    fireEvent.click(
      screen.getByRole('button', { name: /sign in with digi-id/i })
    );

    await waitFor(() => {
      expect(
        screen.getByRole('button', { name: /cancel/i })
      ).toBeInTheDocument();
    });

    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
    expect(
      screen.getByRole('button', { name: /sign in with digi-id/i })
    ).toBeInTheDocument();
  });
});