Skip to content

Commit

Permalink
Add an E2E test.
Browse files Browse the repository at this point in the history
  • Loading branch information
@onurtemizkan
onurtemizkan committed Nov 28, 2024
1 parent b0ae4c9 commit 73fbd62
Show file tree
Hide file tree
Showing 13 changed files with 354 additions and 0 deletions.
29 changes: 29 additions & 0 deletions dev-packages/e2e-tests/test-applications/react-router-6-descendant-routes/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

/test-results/
/playwright-report/
/playwright/.cache/

!*.d.ts
2 changes: 2 additions & 0 deletions dev-packages/e2e-tests/test-applications/react-router-6-descendant-routes/.npmrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@sentry:registry=http://127.0.0.1:4873
@sentry-internal:registry=http://127.0.0.1:4873
63 changes: 63 additions & 0 deletions dev-packages/e2e-tests/test-applications/react-router-6-descendant-routes/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
{
"name": "react-router-6-descendant-routes",
"version": "0.1.0",
"private": true,
"dependencies": {
"@sentry/react": "latest || *",
"@types/react": "18.0.0",
"@types/react-dom": "18.0.0",
"express": "4.19.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-router-dom": "^6.28.0",
"react-scripts": "5.0.1",
"typescript": "4.9.5"
},
"scripts": {
"build": "react-scripts build",
"start": "run-p start:client start:server",
"start:client": "node server/app.js",
"start:server": "serve -s build",
"test": "playwright test",
"clean": "npx rimraf node_modules pnpm-lock.yaml",
"test:build": "pnpm install && npx playwright install && pnpm build",
"test:build-ts3.8": "pnpm install && pnpm add [email protected] && npx playwright install && pnpm build",
"test:build-canary": "pnpm install && pnpm add react@canary react-dom@canary && npx playwright install && pnpm build",
"test:assert": "pnpm test"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@playwright/test": "^1.44.1",
"@sentry-internal/test-utils": "link:../../../test-utils",
"serve": "14.0.1",
"npm-run-all2": "^6.2.0"
},
"volta": {
"extends": "../../package.json"
},
"sentryTest": {
"variants": [
{
"build-command": "test:build-ts3.8",
"label": "react-router-6 (TS 3.8)"
}
]
}
}
7 changes: 7 additions & 0 deletions ...ckages/e2e-tests/test-applications/react-router-6-descendant-routes/playwright.config.mjs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { getPlaywrightConfig } from '@sentry-internal/test-utils';

const config = getPlaywrightConfig({
startCommand: `pnpm start`,
});

export default config;
24 changes: 24 additions & 0 deletions dev-packages/e2e-tests/test-applications/react-router-6-descendant-routes/public/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
47 changes: 47 additions & 0 deletions dev-packages/e2e-tests/test-applications/react-router-6-descendant-routes/server/app.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
const express = require('express');

const app = express();
const PORT = 8080;

const wait = time => {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, time);
});
};

async function sseHandler(request, response, timeout = false) {
response.headers = {
'Content-Type': 'text/event-stream',
Connection: 'keep-alive',
'Cache-Control': 'no-cache',
'Access-Control-Allow-Origin': '*',
};

response.setHeader('Cache-Control', 'no-cache');
response.setHeader('Content-Type', 'text/event-stream');
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Connection', 'keep-alive');

response.flushHeaders();

await wait(2000);

for (let index = 0; index < 10; index++) {
response.write(`data: ${new Date().toISOString()}\n\n`);
if (timeout) {
await wait(10000);
}
}

response.end();
}

app.get('/sse', (req, res) => sseHandler(req, res));

app.get('/sse-timeout', (req, res) => sseHandler(req, res, true));

app.listen(PORT, () => {
console.log(`SSE service listening at http://localhost:${PORT}`);
});
5 changes: 5 additions & 0 deletions dev-packages/e2e-tests/test-applications/react-router-6-descendant-routes/src/globals.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
interface Window {
recordedTransactions?: string[];
capturedExceptionId?: string;
sentryReplayId?: string;
}
68 changes: 68 additions & 0 deletions dev-packages/e2e-tests/test-applications/react-router-6-descendant-routes/src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import * as Sentry from '@sentry/react';
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
BrowserRouter,
Route,
Routes,
createRoutesFromChildren,
matchRoutes,
useLocation,
useNavigationType,
Navigate,
Outlet,
} from 'react-router-dom';

const replay = Sentry.replayIntegration();

Sentry.init({
environment: 'qa', // dynamic sampling bias to keep transactions
dsn: process.env.REACT_APP_E2E_TEST_DSN,
integrations: [
Sentry.reactRouterV6BrowserTracingIntegration({
useEffect: React.useEffect,
useLocation,
useNavigationType,
createRoutesFromChildren,
matchRoutes,
trackFetchStreamPerformance: true,
}),
replay,
],
// We recommend adjusting this value in production, or using tracesSampler
// for finer control
tracesSampleRate: 1.0,
release: 'e2e-test',

// Always capture replays, so we can test this properly
replaysSessionSampleRate: 1.0,
replaysOnErrorSampleRate: 0.0,

tunnel: 'http://localhost:3031',
});

const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);

const ProjectsRoutes = () => (
<SentryRoutes>
<Route path=":projectId" element={<div>Project Page</div>}>
<Route index element={<div>Project Page Root</div>} />
<Route element={<div>Editor</div>}>
<Route path="*" element={<Outlet />}>
<Route path="views/:viewId" element={<div>View Canvas</div>} />
</Route>
</Route>
</Route>
<Route path="*" element={<div>No Match Page</div>} />
</SentryRoutes>
);

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
<BrowserRouter>
<SentryRoutes>
{/* <Route index element={<Navigate to="/projects/123/views/234" />} /> */}
<Route path="projects/*" element={<ProjectsRoutes />}></Route>
</SentryRoutes>
</BrowserRouter>,
);
23 changes: 23 additions & 0 deletions ...packages/e2e-tests/test-applications/react-router-6-descendant-routes/src/pages/Index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
// biome-ignore lint/nursery/noUnusedImports: Need React import for JSX
import * as React from 'react';
import { Link } from 'react-router-dom';

const Index = () => {
return (
<>
<input
type="button"
value="Capture Exception"
id="exception-button"
onClick={() => {
throw new Error('I am an error!');
}}
/>
<Link to="/user/5" id="navigation">
navigate
</Link>
</>
);
};

export default Index;
1 change: 1 addition & 0 deletions ...kages/e2e-tests/test-applications/react-router-6-descendant-routes/src/react-app-env.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="react-scripts" />
6 changes: 6 additions & 0 deletions ...ckages/e2e-tests/test-applications/react-router-6-descendant-routes/start-event-proxy.mjs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { startEventProxyServer } from '@sentry-internal/test-utils';

startEventProxyServer({
port: 3031,
proxyServerName: 'react-router-6-descendant-routes',
});
59 changes: 59 additions & 0 deletions ...s/e2e-tests/test-applications/react-router-6-descendant-routes/tests/transactions.test.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { expect, test } from '@playwright/test';
import { waitForTransaction } from '@sentry-internal/test-utils';

test('sends a pageload transaction with a parameterized URL', async ({ page }) => {
const transactionPromise = waitForTransaction('react-router-6-descendant-routes', async transactionEvent => {
return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
});

await page.goto(`/projects/123/views/234`);

const rootSpan = await transactionPromise;

console.debug('rootSpan', rootSpan);

expect(rootSpan).toMatchObject({
contexts: {
trace: {
op: 'pageload',
origin: 'auto.pageload.react.reactrouter_v6',
},
},
transaction: '/projects/:projectId/views/:viewId',
transaction_info: {
source: 'route',
},
});
});

// test('sends a navigation transaction with a parameterized URL', async ({ page }) => {
// page.on('console', msg => console.log(msg.text()));

// const pageloadTxnPromise = waitForTransaction('react-router-6-descendant-routes', async transactionEvent => {
// return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
// });

// const navigationTxnPromise = waitForTransaction('react-router-6-descendant-routes', async transactionEvent => {
// return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation';
// });

// await page.goto(`/`);
// await pageloadTxnPromise;

// const linkElement = page.locator('id=navigation');

// const [_, navigationTxn] = await Promise.all([linkElement.click(), navigationTxnPromise]);

// expect(navigationTxn).toMatchObject({
// contexts: {
// trace: {
// op: 'navigation',
// origin: 'auto.navigation.react.reactrouter_v6',
// },
// },
// transaction: '/user/:id',
// transaction_info: {
// source: 'route',
// },
// });
// });
20 changes: 20 additions & 0 deletions dev-packages/e2e-tests/test-applications/react-router-6-descendant-routes/tsconfig.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"compilerOptions": {
"target": "es2018",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": ["src", "tests"]
}

0 comments on commit 73fbd62

Please sign in to comment.