edb/cnapp
9
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace apollo with tanstack query

Browse Source
This commit is contained in:
ponas committed 2026-08-01 16:00:54 +02:00
1 parent d785ad4c1d
commit a35730f418
12 files changed
+135 -326
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package-lock.json
Generated
+3 -191
View File
@@ -8,7 +8,6 @@
"name": "cnapp",
"version": "2.0.1",
"dependencies": {
"@apollo/client": "^3.14.1",
"@date-fns/tz": "^1.5.0",
"@react-native-async-storage/async-storage": "2.2.0",
"@react-native-vector-icons/feather": "^13.1.2",
@@ -31,7 +30,6 @@
"expo-notifications": "~57.0.8",
"expo-splash-screen": "~57.0.5",
"expo-status-bar": "~57.0.1",
"graphql": "^16.9.0",
"react": "19.2.3",
"react-hook-form": "^7.52.1",
"react-native": "0.86.2",
@@ -60,48 +58,6 @@
"typescript": "~6.0.3"
}
},
"node_modules/@apollo/client": {
"version": "3.14.1",
"resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.14.1.tgz",
"integrity": "sha512-SgGX6E23JsZhUdG2anxiyHvEvvN6CUaI4ZfMsndZFeuHPXL3H0IsaiNAhLITSISbeyeYd+CBd9oERXQDdjXWZw==",
"license": "MIT",
"dependencies": {
"@graphql-typed-document-node/core": "^3.1.1",
"@wry/caches": "^1.0.0",
"@wry/equality": "^0.5.6",
"@wry/trie": "^0.5.0",
"graphql-tag": "^2.12.6",
"hoist-non-react-statics": "^3.3.2",
"optimism": "^0.18.0",
"prop-types": "^15.7.2",
"rehackt": "^0.1.0",
"symbol-observable": "^4.0.0",
"ts-invariant": "^0.10.3",
"tslib": "^2.3.0",
"zen-observable-ts": "^1.2.5"
},
"peerDependencies": {
"graphql": "^15.0.0 || ^16.0.0",
"graphql-ws": "^5.5.5 || ^6.0.3",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc",
"subscriptions-transport-ws": "^0.9.0 || ^0.11.0"
},
"peerDependenciesMeta": {
"graphql-ws": {
"optional": true
},
"react": {
"optional": true
},
"react-dom": {
"optional": true
},
"subscriptions-transport-ws": {
"optional": true
}
}
},
"node_modules/@babel/code-frame": {
"version": "7.29.7",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
@@ -2076,15 +2032,6 @@
"js-yaml": "bin/js-yaml.js"
}
},
"node_modules/@graphql-typed-document-node/core": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
"integrity": "sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==",
"license": "MIT",
"peerDependencies": {
"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
}
},
"node_modules/@humanfs/core": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
@@ -4912,54 +4859,6 @@
"integrity": "sha512-pUrWq3V5PiSGFLeLxoGqReTZmiiXwY3jRkIG5sLLKjyqNxrwm/04b4nw7LSmGWJcKk59XOM/YRTUwOzo4MMlow==",
"license": "BSD-3-Clause"
},
"node_modules/@wry/caches": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@wry/caches/-/caches-1.0.1.tgz",
"integrity": "sha512-bXuaUNLVVkD20wcGBWRyo7j9N3TxePEWFZj2Y+r9OoUzfqmavM84+mFykRicNsBqatba5JLay1t48wxaXaWnlA==",
"license": "MIT",
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/@wry/context": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@wry/context/-/context-0.7.4.tgz",
"integrity": "sha512-jmT7Sb4ZQWI5iyu3lobQxICu2nC/vbUhP0vIdd6tHC9PTfenmRmuIFqktc6GH9cgi+ZHnsLWPvfSvc4DrYmKiQ==",
"license": "MIT",
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/@wry/equality": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.5.7.tgz",
"integrity": "sha512-BRFORjsTuQv5gxcXsuDXx6oGRhuVsEGwZy6LOzRRfgu+eSfxbhUQ9L9YtSEIuIjY/o7g3iWFjrc5eSY1GXP2Dw==",
"license": "MIT",
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/@wry/trie": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.5.0.tgz",
"integrity": "sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==",
"license": "MIT",
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/@xmldom/xmldom": {
"version": "0.8.13",
"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.13.tgz",
@@ -8899,30 +8798,6 @@
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
"license": "ISC"
},
"node_modules/graphql": {
"version": "16.14.2",
"resolved": "https://registry.npmjs.org/graphql/-/graphql-16.14.2.tgz",
"integrity": "sha512-Chq1s4CY7jmh8gO2qvLIJyfCDIN+EHLFW/9iShnp1z8FjBQMoodWP1kDC36VAMXXIvAjj4ARa7ntfAV2BrjsbA==",
"license": "MIT",
"engines": {
"node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
}
},
"node_modules/graphql-tag": {
"version": "2.12.7",
"resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.7.tgz",
"integrity": "sha512-xnE/NFzy+0eIesvAsREJZ284zTl/wYuBAvpsFSDhRGRdRHdnE90M21Q3xAWyYInb0J756c6x0pIQ62+vtvOs1Q==",
"license": "MIT",
"dependencies": {
"tslib": "^2.1.0"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"graphql": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
}
},
"node_modules/has-bigints": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -12488,6 +12363,7 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@@ -12669,18 +12545,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/optimism": {
"version": "0.18.1",
"resolved": "https://registry.npmjs.org/optimism/-/optimism-0.18.1.tgz",
"integrity": "sha512-mLXNwWPa9dgFyDqkNi54sjDyNJ9/fTI6WGBLgnXku1vdKY/jovHfZT5r+aiVeFFLOz+foPNOm5YJ4mqgld2GBQ==",
"license": "MIT",
"dependencies": {
"@wry/caches": "^1.0.0",
"@wry/context": "^0.7.0",
"@wry/trie": "^0.5.0",
"tslib": "^2.3.0"
}
},
"node_modules/optionator": {
"version": "0.9.4",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -13264,6 +13128,7 @@
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dev": true,
"license": "MIT",
"dependencies": {
"loose-envify": "^1.4.0",
@@ -13275,6 +13140,7 @@
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true,
"license": "MIT"
},
"node_modules/proxy-from-env": {
@@ -13937,24 +13803,6 @@
"regjsparser": "bin/parser"
}
},
"node_modules/rehackt": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/rehackt/-/rehackt-0.1.0.tgz",
"integrity": "sha512-7kRDOuLHB87D/JESKxQoRwv4DzbIdwkAGQ7p6QKGdVlY1IZheUnVhlk/4UZlNUVxdAXpyxikE3URsG067ybVzw==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "*"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"react": {
"optional": true
}
}
},
"node_modules/require-directory": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -15015,15 +14863,6 @@
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
"license": "CC0-1.0"
},
"node_modules/symbol-observable": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",
"integrity": "sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==",
"license": "MIT",
"engines": {
"node": ">=0.10"
}
},
"node_modules/symbol-tree": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -15260,18 +15099,6 @@
"typescript": ">=4.8.4"
}
},
"node_modules/ts-invariant": {
"version": "0.10.3",
"resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz",
"integrity": "sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==",
"license": "MIT",
"dependencies": {
"tslib": "^2.1.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/tsconfig-paths": {
"version": "3.15.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -16112,21 +15939,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/zen-observable": {
"version": "0.8.15",
"resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
"integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==",
"license": "MIT"
},
"node_modules/zen-observable-ts": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz",
"integrity": "sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==",
"license": "MIT",
"dependencies": {
"zen-observable": "0.8.15"
}
},
"node_modules/zod": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
package.json
-2
View File
@@ -15,7 +15,6 @@
"web": "expo start --web"
},
"dependencies": {
"@apollo/client": "^3.14.1",
"@date-fns/tz": "^1.5.0",
"@react-native-async-storage/async-storage": "2.2.0",
"@react-native-vector-icons/feather": "^13.1.2",
@@ -38,7 +37,6 @@
"expo-notifications": "~57.0.8",
"expo-splash-screen": "~57.0.5",
"expo-status-bar": "~57.0.1",
"graphql": "^16.9.0",
"react": "19.2.3",
"react-hook-form": "^7.52.1",
"react-native": "0.86.2",
src/App.tsx
+8 -16
View File
@@ -1,4 +1,3 @@
import { ApolloClient, HttpLink, InMemoryCache, ApolloProvider } from '@apollo/client';
import { StripeProvider } from '@stripe/stripe-react-native';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import Constants from 'expo-constants';
@@ -24,11 +23,6 @@ Notifications.setNotificationHandler({
}),
});
const apolloClient = new ApolloClient({
link: new HttpLink({ uri: `${process.env.EXPO_PUBLIC_DUSKEN_API_URL}/api/graphql/` }),
cache: new InMemoryCache(),
});
export default function App() {
useDeepLinking();
return (
@@ -36,16 +30,14 @@ export default function App() {
<StatusBar style="light" />
<PersistQueryClientProvider client={appQueryClient} persistOptions={persistOptions}>
<AuthProvider>
<ApolloProvider client={apolloClient}>
{/* FIXME: Read urlScheme and merchantIdentifier from .Config */}
<StripeProvider
publishableKey={process.env.EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY || ''}
urlScheme={Constants.expoConfig?.scheme as string}
merchantIdentifier="merchant.no.neuf.chateau" // https://developer.apple.com/account/resources/identifiers/list/merchant
>
<AppInner />
</StripeProvider>
</ApolloProvider>
{/* FIXME: Read urlScheme and merchantIdentifier from .Config */}
<StripeProvider
publishableKey={process.env.EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY || ''}
urlScheme={Constants.expoConfig?.scheme as string}
merchantIdentifier="merchant.no.neuf.chateau" // https://developer.apple.com/account/resources/identifiers/list/merchant
>
<AppInner />
</StripeProvider>
</AuthProvider>
</PersistQueryClientProvider>
</GestureHandlerRootView>
src/api.test.ts
+38 -1
View File
@@ -1,4 +1,12 @@
import { deleteUser, fetchEvents, fetchUserData, login, registerUser, requestStripePaymentSheet } from '@/api';
import {
deleteUser,
fetchEvents,
fetchMembershipTypes,
fetchUserData,
login,
registerUser,
requestStripePaymentSheet,
} from '@/api';
import { ApiError } from '@/errors';
const fetchMock = global.fetch as jest.Mock;
@@ -172,6 +180,35 @@ describe('fetchEvents', () => {
});
});
describe('fetchMembershipTypes', () => {
it('posts the GraphQL query and resolves the membership types', async () => {
const membershipTypes = [{ slug: 'regular', price: 30000 }];
mockResponseOnce({ data: { membershipTypes } });
await expect(fetchMembershipTypes()).resolves.toEqual(membershipTypes);
expect(fetchMock).toHaveBeenCalledWith(
'https://dusken.example.test/api/graphql/',
expect.objectContaining({
method: 'POST',
body: JSON.stringify({ query: '{ membershipTypes { slug price } }' }),
}),
);
});
it('throws when the API reports a GraphQL error', async () => {
mockResponseOnce({ data: null, errors: [{ message: 'Cannot query field "membershipTypes"' }] });
await expect(fetchMembershipTypes()).rejects.toThrow('Kunne ikke hente priser');
});
it('throws on a non-ok response', async () => {
mockResponseOnce({ data: { membershipTypes: [] } }, false, 500);
await expect(fetchMembershipTypes()).rejects.toThrow('Kunne ikke hente priser');
});
});
describe('requestStripePaymentSheet', () => {
it('posts the membership type and returns the payment sheet parameters', async () => {
const sheet = { paymentIntent: 'pi_secret', ephemeralKey: 'ek_secret', customer: 'cus_123' };
src/api.ts
+15 -1
View File
@@ -1,5 +1,5 @@
import { ApiError } from '@/errors';
import type { EventType, UserType } from '@/types/data';
import type { EventType, MembershipTypeOption, UserType } from '@/types/data';
import type { UserRegisterFormValues } from '@/types/forms';
import { fetchWithTimeout } from '@/utils';
@@ -115,6 +115,20 @@ export async function fetchEvents(): Promise<EventType[]> {
return events;
}
export async function fetchMembershipTypes(): Promise<MembershipTypeOption[]> {
const response = await fetchWithTimeout(`${process.env.EXPO_PUBLIC_DUSKEN_API_URL}/api/graphql/`, {
method: 'POST',
headers: JSON_HEADERS,
body: JSON.stringify({ query: '{ membershipTypes { slug price } }' }),
});
const json = await response.json();
const membershipTypes = response.ok ? json?.data?.membershipTypes : null;
if (!membershipTypes) {
throw new Error('Kunne ikke hente priser');
}
return membershipTypes;
}
/** Create a stripe payment sheet; rejects with a message for the failure toast. */
export async function requestStripePaymentSheet(authToken: string, membershipType: string) {
const response = await fetchWithTimeout(`${process.env.EXPO_PUBLIC_DUSKEN_API_URL}/api/stripe/payment-sheet/`, {
src/modules/membership/Membership.test.tsx
+8 -41
View File
@@ -1,10 +1,9 @@
import { gql } from '@apollo/client';
import { fireEvent } from '@testing-library/react-native';
import React from 'react';
import { RefreshControl } from 'react-native';
import Membership from '@/modules/membership/Membership';
import { renderWithProviders, testUser } from '@/testUtils';
import { mockMembershipTypesOnce, renderWithProviders, testUser } from '@/testUtils';
import type { UserType } from '@/types/data';
const mockNavigate = jest.fn();
@@ -13,25 +12,6 @@ jest.mock('@react-navigation/native', () => ({
useNavigation: () => ({ navigate: mockNavigate }),
}));
// Must match PROOF_QUERY in useProof.tsx
const PROOF_QUERY = gql`
{
membershipTypes {
slug
price
}
}
`;
const apolloMocks = [
{
request: { query: PROOF_QUERY },
result: {
data: { membershipTypes: [{ __typename: 'MembershipType', slug: 'standard', price: 25000 }] },
},
},
];
it('shows the membership pitch when logged out', async () => {
const { findByText } = renderWithProviders(<Membership />);
@@ -42,23 +22,10 @@ it('shows the membership pitch when logged out', async () => {
it('lets a logged in non-member pick a membership type and shows its price', async () => {
const nonMember: UserType = { ...testUser, is_member: false, last_membership: null };
mockMembershipTypesOnce();
const { findByText, getByText } = renderWithProviders(<Membership />, {
initialToken: 'test-token',
initialUser: nonMember,
apolloMocks: [
{
request: { query: PROOF_QUERY },
result: {
data: {
membershipTypes: [
{ __typename: 'MembershipType', slug: 'student', price: 15000 },
{ __typename: 'MembershipType', slug: 'regular', price: 30000 },
{ __typename: 'MembershipType', slug: 'support', price: 50000 },
],
},
},
},
],
});
// All three membership types are offered
@@ -79,10 +46,10 @@ it('lets a logged in non-member pick a membership type and shows its price', asy
});
it('shows the membership proof when logged in', async () => {
mockMembershipTypesOnce();
const { findByText } = renderWithProviders(<Membership />, {
initialToken: 'test-token',
initialUser: testUser,
apolloMocks,
});
expect(await findByText('MEDLEM')).toBeTruthy();
@@ -90,15 +57,16 @@ it('shows the membership proof when logged in', async () => {
});
it('fetches the user with the stored token when only the token survives a cold start', async () => {
(global.fetch as jest.Mock).mockResolvedValue({
// The user fetch resolves first; Proof then mounts and fetches membership types
(global.fetch as jest.Mock).mockResolvedValueOnce({
ok: true,
status: 200,
json: async () => testUser,
});
mockMembershipTypesOnce();
const { findByText } = renderWithProviders(<Membership />, {
initialToken: 'test-token',
apolloMocks,
});
expect(await findByText('MEDLEM')).toBeTruthy();
@@ -116,10 +84,10 @@ it('refetches and renders updated user data on pull-to-refresh', async () => {
const fetchMock = global.fetch as jest.Mock;
const nonMember: UserType = { ...testUser, is_member: false, last_membership: null };
mockMembershipTypesOnce();
const { findByText, UNSAFE_getByType } = renderWithProviders(<Membership />, {
initialToken: 'test-token',
initialUser: nonMember,
apolloMocks,
});
expect(await findByText('Velg medlemskapstype')).toBeTruthy();
@@ -146,17 +114,16 @@ it('signs out when the stored token has been revoked', async () => {
const { findByText } = renderWithProviders(<Membership />, {
initialToken: 'revoked-token',
apolloMocks,
});
expect(await findByText('Bli medlem')).toBeTruthy();
});
it('logs out and shows the logged-out membership screen again', async () => {
mockMembershipTypesOnce();
const { findByText } = renderWithProviders(<Membership />, {
initialToken: 'test-token',
initialUser: testUser,
apolloMocks,
});
fireEvent.press(await findByText('Logg ut'));
src/modules/membership/Proof.test.tsx
+14 -43
View File
@@ -1,11 +1,9 @@
import { gql } from '@apollo/client';
import type { MockedResponse } from '@apollo/client/testing';
import { fireEvent, waitFor } from '@testing-library/react-native';
import * as Notifications from 'expo-notifications';
import React from 'react';
import Proof from '@/modules/membership/Proof';
import { renderWithProviders, testUser } from '@/testUtils';
import { mockMembershipTypesOnce, renderWithProviders, testUser } from '@/testUtils';
import type { UserType } from '@/types/data';
// The setup-wide stripe mock resolves initPaymentSheet/presentPaymentSheet
@@ -24,31 +22,6 @@ const mockPaymentSheetResponse = () =>
json: async () => ({ paymentIntent: 'pi_secret', ephemeralKey: 'ek_secret', customer: 'cus_123' }),
});
// Must match PROOF_QUERY in useProof.tsx
const PROOF_QUERY = gql`
{
membershipTypes {
slug
price
}
}
`;
const apolloMocks = [
{
request: { query: PROOF_QUERY },
result: {
data: {
membershipTypes: [
{ __typename: 'MembershipType', slug: 'student', price: 15000 },
{ __typename: 'MembershipType', slug: 'regular', price: 30000 },
{ __typename: 'MembershipType', slug: 'support', price: 50000 },
],
},
},
},
];
const nonMember: UserType = { ...testUser, is_member: false, last_membership: null };
const expiredMember: UserType = {
@@ -57,19 +30,18 @@ const expiredMember: UserType = {
last_membership: { membership_type: 'standard', end_date: '2020-01-01' },
};
const renderProof = ({
user = nonMember,
fetchUser = jest.fn(),
mocks = apolloMocks,
}: { user?: UserType; fetchUser?: () => void; mocks?: readonly MockedResponse[] } = {}) =>
renderWithProviders(
// The membership type query fires on mount, so its response must be queued
// before render; later mockResolvedValueOnce calls queue up behind it.
const renderProof = ({ user = nonMember, fetchUser = jest.fn() }: { user?: UserType; fetchUser?: () => void } = {}) => {
mockMembershipTypesOnce();
return renderWithProviders(
<Proof onLogoutPress={jest.fn()} fetchUser={fetchUser} isRefetching={false} onDeletePress={jest.fn()} />,
{
initialToken: 'test-token',
initialUser: user,
apolloMocks: mocks,
},
);
};
beforeEach(() => {
jest.clearAllMocks();
@@ -87,9 +59,8 @@ it('disables the purchase button without showing a price while membership types
});
it('shows an error with retry instead of a price when membership types fail to load', async () => {
const { findByText, getByText, getByRole } = renderProof({
mocks: [{ request: { query: PROOF_QUERY }, error: new Error('network down') }, ...apolloMocks],
});
fetchMock.mockRejectedValueOnce(new Error('network down'));
const { findByText, getByText, getByRole } = renderProof();
expect(await findByText('Kunne ikke hente priser')).toBeTruthy();
expect(getByRole('button', { name: 'Kjøp medlemskap' })).toBeDisabled();
@@ -101,8 +72,8 @@ it('shows an error with retry instead of a price when membership types fail to l
});
it('purchases the preselected membership through the stripe payment sheet', async () => {
mockPaymentSheetResponse();
const { findByText } = renderProof();
mockPaymentSheetResponse();
// 'Ordinær' (slug: regular) is preselected; the button enables once the
// membership type query has resolved and its price is shown
@@ -132,8 +103,8 @@ it('purchases the preselected membership through the stripe payment sheet', asyn
});
it('purchases the selected membership type, not the default', async () => {
mockPaymentSheetResponse();
const { findByText } = renderProof();
mockPaymentSheetResponse();
fireEvent.press(await findByText('Student'));
fireEvent.press(await findByText('Kjøp medlemskap (150 NOK)'));
@@ -146,11 +117,11 @@ it('purchases the selected membership type, not the default', async () => {
});
it('shows the stripe error when the payment sheet is not completed', async () => {
mockPaymentSheetResponse();
presentPaymentSheet.mockResolvedValueOnce({
error: { code: 'Canceled', message: 'The payment flow has been canceled' },
});
const { findByText, queryByText } = renderProof();
mockPaymentSheetResponse();
fireEvent.press(await findByText('Kjøp medlemskap (300 NOK)'));
@@ -160,12 +131,12 @@ it('shows the stripe error when the payment sheet is not completed', async () =>
it('shows an error and does not present the sheet when the backend rejects the purchase', async () => {
jest.spyOn(console, 'error').mockImplementation(() => {});
const { findByText, getByRole } = renderProof();
fetchMock.mockResolvedValueOnce({
ok: false,
status: 400,
json: async () => ({ detail: 'Ugyldig medlemskapstype' }),
});
const { findByText, getByRole } = renderProof();
fireEvent.press(await findByText('Kjøp medlemskap (300 NOK)'));
@@ -178,9 +149,9 @@ it('shows an error and does not present the sheet when the backend rejects the p
it('shows an error and does not present the sheet when stripe fails to initialise it', async () => {
jest.spyOn(console, 'error').mockImplementation(() => {});
mockPaymentSheetResponse();
initPaymentSheet.mockResolvedValueOnce({ error: { code: 'Failed', message: 'Invalid client secret' } });
const { findByText } = renderProof();
mockPaymentSheetResponse();
fireEvent.press(await findByText('Kjøp medlemskap (300 NOK)'));
src/modules/membership/useProof.tsx
+5 -16
View File
@@ -1,29 +1,20 @@
import { gql, useQuery } from '@apollo/client';
import { useStripe } from '@stripe/stripe-react-native';
import Constants from 'expo-constants';
import { useEffect, useState } from 'react';
import { useNotifications } from '@/hooks/useNotifications';
import { useMembershipTypes } from '@/queries/useMembershipTypes';
import { usePaymentSheetMutation } from '@/queries/usePaymentSheetMutation';
import { useUser } from '@/queries/useUser';
import { ToastProps } from '@/types/toast';
const PROOF_QUERY = gql`
{
membershipTypes {
slug
price
}
}
`;
interface UseProofProps {
fetchUser: () => void;
}
const useProof = ({ fetchUser }: UseProofProps) => {
const { user } = useUser();
const { data, loading, error, refetch } = useQuery(PROOF_QUERY);
const { data: membershipTypes, isPending, isError, refetch } = useMembershipTypes();
const { initPaymentSheet, presentPaymentSheet } = useStripe();
const { mutateAsync: createPaymentSheet } = usePaymentSheetMutation();
const { scheduleMembershipExpiryNotification, hasPermission } = useNotifications();
@@ -35,9 +26,7 @@ const useProof = ({ fetchUser }: UseProofProps) => {
// null until the query has delivered a price for the selected type; the
// purchase button stays disabled rather than showing a guessed amount
const membershipPrice =
data?.membershipTypes?.find(
(membershipTypeOption: { slug: string; price: number }) => membershipTypeOption.slug === membershipTypeSlug,
)?.price ?? null;
membershipTypes?.find((membershipTypeOption) => membershipTypeOption.slug === membershipTypeSlug)?.price ?? null;
const openPaymentSheet = async () => {
setPaymentLoading(true);
@@ -92,9 +81,9 @@ const useProof = ({ fetchUser }: UseProofProps) => {
}, [membershipType, membershipEndDate, fetchUser, hasPermission, scheduleMembershipExpiryNotification]);
return {
isLoadingMembershipType: loading,
isLoadingMembershipType: isPending,
membershipPrice: membershipPrice != null ? membershipPrice / 100 : null,
membershipTypesError: !!error,
membershipTypesError: isError,
refetchMembershipTypes: refetch,
onPurchasePress: openPaymentSheet,
paymentLoading,
src/queries/queryKeys.ts
+1
View File
@@ -1,4 +1,5 @@
export const queryKeys = {
user: ['user'],
events: ['events'],
membershipTypes: ['membershipTypes'],
} as const;
src/queries/useMembershipTypes.ts
+13
View File
@@ -0,0 +1,13 @@
import { useQuery } from '@tanstack/react-query';
import { fetchMembershipTypes } from '@/api';
import { queryKeys } from '@/queries/queryKeys';
/** The purchasable membership types with prices. */
export function useMembershipTypes() {
return useQuery({
queryKey: queryKeys.membershipTypes,
queryFn: fetchMembershipTypes,
staleTime: 5 * 60 * 1000,
});
}
src/testUtils.tsx
+24 -15
View File
@@ -1,6 +1,3 @@
import { InMemoryCache } from '@apollo/client';
import type { MockedResponse } from '@apollo/client/testing';
import { MockedProvider } from '@apollo/client/testing';
import { NavigationContainer } from '@react-navigation/native';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { render } from '@testing-library/react-native';
@@ -9,7 +6,7 @@ import type { ReactElement } from 'react';
import { AuthProvider } from '@/auth/AuthContext';
import { queryKeys } from '@/queries/queryKeys';
import type { UserType } from '@/types/data';
import type { MembershipTypeOption, UserType } from '@/types/data';
/** A member with an active membership, for screens that require a logged in user. */
export const testUser: UserType = {
@@ -25,22 +22,36 @@ export const testUser: UserType = {
},
};
/** The purchase options offered in the app, as served by /api/graphql/. */
export const testMembershipTypes: MembershipTypeOption[] = [
{ slug: 'student', price: 15000 },
{ slug: 'regular', price: 30000 },
{ slug: 'support', price: 50000 },
];
/** Queue a successful /api/graphql/ membership types response on the fetch mock. */
export function mockMembershipTypesOnce(membershipTypes: MembershipTypeOption[] = testMembershipTypes) {
(global.fetch as jest.Mock).mockResolvedValueOnce({
ok: true,
status: 200,
json: async () => ({ data: { membershipTypes } }),
});
}
interface RenderWithProvidersOptions {
/** Auth token the app has stored; being set means the user is logged in. */
initialToken?: string | null;
/** Already-fetched user data, as after a completed /api/me/ request. */
initialUser?: UserType | null;
apolloMocks?: readonly MockedResponse[];
}
/**
* Renders a screen inside the providers it expects in the real app: a fresh
* query client (no persister), AuthProvider, Apollo's MockedProvider and a
* NavigationContainer.
* query client (no persister), AuthProvider and a NavigationContainer.
*/
export function renderWithProviders(
ui: ReactElement,
{ initialToken = null, initialUser = null, apolloMocks = [] }: RenderWithProvidersOptions = {},
{ initialToken = null, initialUser = null }: RenderWithProvidersOptions = {},
) {
const queryClient = new QueryClient({
defaultOptions: {
@@ -55,13 +66,11 @@ export function renderWithProviders(
}
const result = render(
<MockedProvider mocks={apolloMocks} cache={new InMemoryCache()}>
<QueryClientProvider client={queryClient}>
<AuthProvider initialToken={initialToken}>
<NavigationContainer>{ui}</NavigationContainer>
</AuthProvider>
</QueryClientProvider>
</MockedProvider>,
<QueryClientProvider client={queryClient}>
<AuthProvider initialToken={initialToken}>
<NavigationContainer>{ui}</NavigationContainer>
</AuthProvider>
</QueryClientProvider>,
);
return { queryClient, ...result };
src/types/data.ts
+6
View File
@@ -27,6 +27,12 @@ export interface MembershipType {
end_date: string;
}
/** A purchasable membership type; price is in øre. */
export interface MembershipTypeOption {
slug: string;
price: number;
}
export interface UserType {
first_name: string;
last_name: string;