Skip to content

Commit 916f7c8

Browse files
AbanoubGhadbanAbanoubGhadban
committed
linting
1 parent 182e040 commit 916f7c8

File tree

8 files changed

+168
-122
lines changed

8 files changed

+168
-122
lines changed

‎packages/react-on-rails-pro/src/RSCRoute.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
*/
1414

1515
/// <reference types="react/experimental" />
16-
"use client";
16+
17+
'use client';
1718

1819
import * as React from 'react';
1920
import { useRSC } from './RSCProvider.tsx';

‎packages/react-on-rails-pro/tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
"compilerOptions": {
44
"outDir": "./lib"
55
},
6-
"include": ["src/**/*"]
6+
"include": ["src/**/*"],
7+
"allowDefaultProject": "../spec/dummy/e2e-tests/*"
78
}

‎react_on_rails_pro/spec/dummy/client/app/components/RSCPostsPage/ToggleContainer.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,12 @@ const ToggleContainer = ({ children, childrenTitle }) => {
1010

1111
return (
1212
<div style={{ border: '1px solid black', margin: '10px', padding: '10px' }}>
13-
<button className="toggle-button" onClick={() => setIsVisible(!isVisible)} style={{ border: '1px solid black' }} type="button">
13+
<button
14+
className="toggle-button"
15+
onClick={() => setIsVisible(!isVisible)}
16+
style={{ border: '1px solid black' }}
17+
type="button"
18+
>
1419
{showOrHideText}
1520
</button>
1621
{isVisible && children}

‎react_on_rails_pro/spec/dummy/client/app/components/ServerComponentRouter.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,7 @@ export default function App({ basePath = '/server_router', ...props }: { basePat
4242
</Link>
4343
</li>
4444
<li>
45-
<Link to={`${basePath}/redis-receiver-for-testing`}>
46-
Redis Receiver For Testing
47-
</Link>
45+
<Link to={`${basePath}/redis-receiver-for-testing`}>Redis Receiver For Testing</Link>
4846
</li>
4947
<li>
5048
<Link to={`${basePath}/server-component-with-retry`}>Server Component with Retry</Link>

‎react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/RedisReceiver.jsx‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,33 @@ import { ErrorBoundary } from '../components/ErrorBoundary';
55

66
const RedisItem = async ({ getValue, itemIndex }) => {
77
const value = await getValue(`Item${itemIndex}`);
8-
return <li className={`redis-item${itemIndex}`}>Value of "Item{itemIndex + 1}": {value}</li>
9-
}
8+
return (
9+
<li className={`redis-item${itemIndex}`}>
10+
Value of &quot;Item{itemIndex + 1}&quot;: {value}
11+
</li>
12+
);
13+
};
1014

1115
const RedisItemWithWrapper = ({ getValue, itemIndex }) => (
1216
<section className={`redis-item${itemIndex}-container`}>
13-
<Suspense fallback={<p className={`redis-item${itemIndex}-fallback`}>Waiting for the key "Item{itemIndex + 1}"</p>}>
17+
<Suspense
18+
fallback={
19+
<p className={`redis-item${itemIndex}-fallback`}>
20+
Waiting for the key &quot;Item{itemIndex + 1}&quot;
21+
</p>
22+
}
23+
>
1424
<RedisItem getValue={getValue} itemIndex={itemIndex} />
1525
</Suspense>
1626
</section>
17-
)
27+
);
1828

1929
// Convert it to async component and make tests control when it's rendered
2030
// To test the page behavior when a client component is rendered asynchronously at the page
2131
const AsyncToggleContainer = async ({ children, childrenTitle, getValue }) => {
2232
await getValue('ToggleContainer');
23-
return <ToggleContainer childrenTitle={childrenTitle}>{children}</ToggleContainer>
24-
}
33+
return <ToggleContainer childrenTitle={childrenTitle}>{children}</ToggleContainer>;
34+
};
2535

2636
const RedisReceiver = ({ requestId, asyncToggleContainer }, railsContext) => {
2737
const { getValue, close } = listenToRequestData(requestId);
@@ -34,23 +44,20 @@ const RedisReceiver = ({ requestId, asyncToggleContainer }, railsContext) => {
3444

3545
return () => (
3646
<ErrorBoundary>
37-
<main className='redis-receiver-container'>
47+
<main className="redis-receiver-container">
3848
<h1 className="redis-receiver-header">A list of items received from Redis:</h1>
3949
<Suspense fallback={<div>Loading ToggleContainer</div>}>
40-
<UsedToggleContainer
41-
childrenTitle="Redis Items"
42-
{...(asyncToggleContainer ? { getValue } : {})}
43-
>
44-
<ol className='redis-items-container'>
45-
{
46-
[0,1,2,3,4].map(index => <RedisItemWithWrapper key={index} getValue={getValue} itemIndex={index} />)
47-
}
50+
<UsedToggleContainer childrenTitle="Redis Items" {...(asyncToggleContainer ? { getValue } : {})}>
51+
<ol className="redis-items-container">
52+
{[0, 1, 2, 3, 4].map((index) => (
53+
<RedisItemWithWrapper key={index} getValue={getValue} itemIndex={index} />
54+
))}
4855
</ol>
4956
</UsedToggleContainer>
5057
</Suspense>
5158
</main>
5259
</ErrorBoundary>
53-
)
54-
}
60+
);
61+
};
5562

56-
export default RedisReceiver;
63+
export default RedisReceiver;

‎react_on_rails_pro/spec/dummy/e2e-tests/fixture.ts‎

Lines changed: 87 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,33 @@ type RedisClientFixture = {
88

99
type RedisRequestIdFixture = {
1010
redisRequestId: string;
11-
nonBlockingNavigateWithRequestId: (path: string) => Promise<Response | null>
12-
}
11+
nonBlockingNavigateWithRequestId: (path: string) => Promise<Response | null>;
12+
};
1313

1414
type RedisReceiverPageFixture = {
1515
pagePath: string;
16-
}
16+
};
1717

1818
export type RedisReceiverControllerFixture = {
1919
sendRedisValue: (key: string, value: unknown) => Promise<void>;
2020
sendRedisItemValue: (itemIndex: number, value: unknown) => Promise<void>;
2121
matchPageSnapshot: (snapshotPath: string) => Promise<void>;
2222
waitForConsoleMessage: (msg: string) => Promise<void>;
2323
getNetworkRequests: (requestUrlPattern: RegExp) => Promise<Request[]>;
24-
}
24+
};
2525

2626
const redisControlledTest = base.extend<RedisRequestIdFixture, RedisClientFixture>({
27-
redisClient: [async ({}, use, workerInfo) => {
28-
console.log(`Creating Redis Client at Worker ${workerInfo.workerIndex}`)
29-
const url = process.env.REDIS_URL || 'redis://localhost:6379';
30-
const client = createClient({ url });
31-
await client.connect();
32-
await use(client as RedisClientType);
33-
await client.quit();
34-
}, { scope: 'worker' }],
27+
redisClient: [
28+
async ({}, use, workerInfo) => {
29+
console.log(`Creating Redis Client at Worker ${workerInfo.workerIndex}`);
30+
const url = process.env.REDIS_URL || 'redis://localhost:6379';
31+
const client = createClient({ url });
32+
await client.connect();
33+
await use(client as RedisClientType);
34+
await client.quit();
35+
},
36+
{ scope: 'worker' },
37+
],
3538

3639
redisRequestId: async ({ redisClient }, use) => {
3740
const id = randomUUID();
@@ -47,89 +50,104 @@ const redisControlledTest = base.extend<RedisRequestIdFixture, RedisClientFixtur
4750
await use((path) => {
4851
const requestIdParam = `request_id=${redisRequestId}`;
4952
const fullPath = path.includes('?') ? `${path}&${requestIdParam}` : `${path}?${requestIdParam}`;
50-
return page.goto(fullPath, { waitUntil: "commit" })
51-
})
53+
return page.goto(fullPath, { waitUntil: 'commit' });
54+
});
5255
},
5356
});
5457

5558
const redisReceiverPageController = redisControlledTest.extend<RedisReceiverControllerFixture>({
56-
sendRedisValue: async({ redisClient, redisRequestId }, use) => {
57-
await use(async(key, value) => {
59+
sendRedisValue: async ({ redisClient, redisRequestId }, use) => {
60+
await use(async (key, value) => {
5861
await redisClient.xAdd(`stream:${redisRequestId}`, '*', { [`:${key}`]: JSON.stringify(value) });
59-
})
62+
});
6063
},
61-
sendRedisItemValue: async({ sendRedisValue }, use) => {
62-
await use(async(itemIndex, value) => {
64+
sendRedisItemValue: async ({ sendRedisValue }, use) => {
65+
await use(async (itemIndex, value) => {
6366
await sendRedisValue(`Item${itemIndex}`, value);
64-
})
67+
});
6568
},
66-
matchPageSnapshot: async({ page }, use) => {
67-
await use(async(snapshotPath) => {
69+
matchPageSnapshot: async ({ page }, use) => {
70+
await use(async (snapshotPath) => {
6871
await expect(page.locator('.redis-receiver-container:visible')).toBeVisible();
69-
await expect(page.locator('.redis-receiver-container:visible').first()).toMatchAriaSnapshot({ name: `${snapshotPath}.aria.yml` });
70-
})
72+
await expect(page.locator('.redis-receiver-container:visible').first()).toMatchAriaSnapshot({
73+
name: `${snapshotPath}.aria.yml`,
74+
});
75+
});
7176
},
72-
waitForConsoleMessage: async({ page }, use) =>{
73-
await use(async(msg) => {
74-
if ((await page.consoleMessages()).find(consoleMsg => consoleMsg.text().includes(msg))) {
77+
waitForConsoleMessage: async ({ page }, use) => {
78+
await use(async (msg) => {
79+
if ((await page.consoleMessages()).find((consoleMsg) => consoleMsg.text().includes(msg))) {
7580
return;
7681
}
7782

7883
await page.waitForEvent('console', {
7984
predicate: (consoleMsg) => consoleMsg.text().includes(msg),
80-
})
81-
})
85+
});
86+
});
8287
},
83-
getNetworkRequests: async({ page }, use) => {
84-
await use(async(requestUrlPattern) => {
85-
return (await page.requests()).filter(request => request.url().match(requestUrlPattern))
86-
})
87-
}
88-
})
88+
getNetworkRequests: async ({ page }, use) => {
89+
await use(async (requestUrlPattern) => {
90+
return (await page.requests()).filter((request) => request.url().match(requestUrlPattern));
91+
});
92+
},
93+
});
8994

9095
const redisReceiverPageTest = redisReceiverPageController.extend<RedisReceiverPageFixture>({
91-
pagePath: [async({ nonBlockingNavigateWithRequestId }, use) => {
92-
const pagePath = '/redis_receiver_for_testing';
93-
await nonBlockingNavigateWithRequestId(pagePath);
94-
await use(pagePath);
95-
}, { auto: true }]
96-
})
97-
98-
const redisReceiverPageWithAsyncClientComponentTest = redisReceiverPageController.extend<RedisReceiverPageFixture>({
99-
pagePath: [async({ page, nonBlockingNavigateWithRequestId, sendRedisValue }, use) => {
100-
const pagePath = '/redis_receiver_for_testing?async_toggle_container=true';
101-
await nonBlockingNavigateWithRequestId(pagePath);
102-
103-
await expect(page.getByText("Loading ToggleContainer")).toBeVisible();
104-
await expect(page.locator('.toggle-button')).not.toBeVisible();
105-
106-
await sendRedisValue('ToggleContainer', 'anything');
107-
await expect(page.locator('.toggle-button')).toBeVisible();
108-
await use(pagePath);
109-
}, { auto: true }]
110-
})
96+
pagePath: [
97+
async ({ nonBlockingNavigateWithRequestId }, use) => {
98+
const pagePath = '/redis_receiver_for_testing';
99+
await nonBlockingNavigateWithRequestId(pagePath);
100+
await use(pagePath);
101+
},
102+
{ auto: true },
103+
],
104+
});
105+
106+
const redisReceiverPageWithAsyncClientComponentTest =
107+
redisReceiverPageController.extend<RedisReceiverPageFixture>({
108+
pagePath: [
109+
async ({ page, nonBlockingNavigateWithRequestId, sendRedisValue }, use) => {
110+
const pagePath = '/redis_receiver_for_testing?async_toggle_container=true';
111+
await nonBlockingNavigateWithRequestId(pagePath);
112+
113+
await expect(page.getByText('Loading ToggleContainer')).toBeVisible();
114+
await expect(page.locator('.toggle-button')).not.toBeVisible();
115+
116+
await sendRedisValue('ToggleContainer', 'anything');
117+
await expect(page.locator('.toggle-button')).toBeVisible();
118+
await use(pagePath);
119+
},
120+
{ auto: true },
121+
],
122+
});
111123

112124
const redisReceiverInsideRouterPageTest = redisReceiverPageController.extend<RedisReceiverPageFixture>({
113-
pagePath: [async({ nonBlockingNavigateWithRequestId }, use) => {
114-
const pagePath = '/server_router/redis-receiver-for-testing';
115-
await nonBlockingNavigateWithRequestId(pagePath);
116-
await use(pagePath);
117-
}, { auto: true }]
118-
})
125+
pagePath: [
126+
async ({ nonBlockingNavigateWithRequestId }, use) => {
127+
const pagePath = '/server_router/redis-receiver-for-testing';
128+
await nonBlockingNavigateWithRequestId(pagePath);
129+
await use(pagePath);
130+
},
131+
{ auto: true },
132+
],
133+
});
119134

120135
const redisReceiverPageAfterNavigationTest = redisReceiverPageController.extend<RedisReceiverPageFixture>({
121-
pagePath: [async({ nonBlockingNavigateWithRequestId, page }, use) => {
122-
await nonBlockingNavigateWithRequestId('/server_router/simple-server-component');
123-
await expect(page.getByText("Post 1")).toBeVisible({ timeout: 3000 });
124-
await page.getByText("Redis Receiver For Testing").click();
125-
await use('/server_router/redis-receiver-for-testing');
126-
}, { auto: true }]
127-
})
136+
pagePath: [
137+
async ({ nonBlockingNavigateWithRequestId, page }, use) => {
138+
await nonBlockingNavigateWithRequestId('/server_router/simple-server-component');
139+
await expect(page.getByText('Post 1')).toBeVisible({ timeout: 3000 });
140+
await page.getByText('Redis Receiver For Testing').click();
141+
await use('/server_router/redis-receiver-for-testing');
142+
},
143+
{ auto: true },
144+
],
145+
});
128146

129147
export {
130148
redisReceiverPageController,
131149
redisReceiverPageTest,
132150
redisReceiverInsideRouterPageTest,
133151
redisReceiverPageAfterNavigationTest,
134152
redisReceiverPageWithAsyncClientComponentTest,
135-
};
153+
};

0 commit comments

Comments
 (0)