Skip to content

Commit 34a0c45

Browse files
brophdawg11brophdawg11
committed
Inline more components
1 parent 4453c2a commit 34a0c45

File tree

1 file changed

+53
-106
lines changed

1 file changed

+53
-106
lines changed

‎packages/react-router/__tests__/dom/data-browser-router-test.tsx‎

Lines changed: 53 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -391,14 +391,17 @@ function testDomRouter(
391391
{
392392
path: "/",
393393
Component: () => <Outlet />,
394-
HydrateFallback: () => <FallbackElement />,
394+
HydrateFallback: () => <p>Loading...</p>,
395395
children: [
396396
{
397397
path: "foo",
398398
loader: () => fooDefer.promise,
399-
Component: () => <Foo />,
399+
Component: () => {
400+
let data = useLoaderData() as { message: string };
401+
return <h1>Foo:{data.message}</h1>;
402+
},
400403
},
401-
{ path: "bar", Component: () => <Bar /> },
404+
{ path: "bar", Component: () => <h1>Bar Heading</h1> },
402405
],
403406
},
404407
],
@@ -408,19 +411,6 @@ function testDomRouter(
408411
);
409412
let { container } = render(<RouterProvider router={router} />);
410413

411-
function FallbackElement() {
412-
return <p>Loading...</p>;
413-
}
414-
415-
function Foo() {
416-
let data = useLoaderData() as { message: string };
417-
return <h1>Foo:{data.message}</h1>;
418-
}
419-
420-
function Bar() {
421-
return <h1>Bar Heading</h1>;
422-
}
423-
424414
expect(getHtml(container)).toMatchInlineSnapshot(`
425415
"<div>
426416
<p>
@@ -448,18 +438,21 @@ function testDomRouter(
448438
{
449439
path: "/",
450440
Component: () => <Outlet />,
451-
HydrateFallback: () => <FallbackElement />,
441+
HydrateFallback: () => <p>Loading...</p>,
452442
children: [
453443
{
454444
path: "foo",
455445
lazy: async () => {
456446
return {
457447
loader: () => fooDefer.promise,
458-
Component: () => <Foo />,
448+
Component: () => {
449+
let data = useLoaderData() as { message: string };
450+
return <h1>Foo:{data.message}</h1>;
451+
},
459452
};
460453
},
461454
},
462-
{ path: "bar", Component: () => <Bar /> },
455+
{ path: "bar", Component: () => <h1>Bar Heading</h1> },
463456
],
464457
},
465458
],
@@ -469,19 +462,6 @@ function testDomRouter(
469462
);
470463
let { container } = render(<RouterProvider router={router} />);
471464

472-
function FallbackElement() {
473-
return <p>Loading...</p>;
474-
}
475-
476-
function Foo() {
477-
let data = useLoaderData() as { message: string };
478-
return <h1>Foo:{data.message}</h1>;
479-
}
480-
481-
function Bar() {
482-
return <h1>Bar Heading</h1>;
483-
}
484-
485465
expect(getHtml(container)).toMatchInlineSnapshot(`
486466
"<div>
487467
<p>
@@ -513,35 +493,21 @@ function testDomRouter(
513493
{
514494
path: "foo",
515495
loader: () => fooDefer.promise,
516-
Component: () => <Foo />,
496+
HydrateFallback: () => <p>Loading...</p>,
497+
Component: () => {
498+
let data = useLoaderData() as { message: string };
499+
return <h1>Foo:{data.message}</h1>;
500+
},
517501
},
518-
{ path: "bar", Component: () => <Bar /> },
502+
{ path: "bar", Component: () => <h1>Bar Heading</h1> },
519503
],
520504
},
521505
],
522506
{
523507
window: getWindow("/bar"),
524508
},
525509
);
526-
let { container } = render(
527-
<RouterProvider
528-
router={router}
529-
fallbackElement={<FallbackElement />}
530-
/>,
531-
);
532-
533-
function FallbackElement() {
534-
return <p>Loading...</p>;
535-
}
536-
537-
function Foo() {
538-
let data = useLoaderData() as { message: string };
539-
return <h1>Foo:{data.message}</h1>;
540-
}
541-
542-
function Bar() {
543-
return <h1>Bar Heading</h1>;
544-
}
510+
let { container } = render(<RouterProvider router={router} />);
545511

546512
expect(getHtml(container)).toMatchInlineSnapshot(`
547513
"<div>
@@ -564,7 +530,10 @@ function testDomRouter(
564530
{
565531
path: "foo",
566532
loader: () => fooDefer.promise,
567-
Component: () => <Foo />,
533+
Component: () => {
534+
let data = useLoaderData() as { message: string };
535+
return <h1>Foo:{data.message}</h1>;
536+
},
568537
},
569538
],
570539
},
@@ -578,11 +547,6 @@ function testDomRouter(
578547
return <p>Loading{location.pathname}</p>;
579548
}
580549

581-
function Foo() {
582-
let data = useLoaderData() as { message: string };
583-
return <h1>Foo:{data.message}</h1>;
584-
}
585-
586550
expect(getHtml(container)).toMatchInlineSnapshot(`
587551
"<div>
588552
<p>
@@ -691,11 +655,14 @@ function testDomRouter(
691655
path: "/",
692656
Component: () => <Layout />,
693657
children: [
694-
{ path: "foo", Component: () => <Foo /> },
658+
{ path: "foo", Component: () => <h1>Foo</h1> },
695659
{
696660
path: "bar",
697661
loader: () => barDefer.promise,
698-
Component: () => <Bar />,
662+
Component: () => {
663+
let data = useLoaderData() as { message: string };
664+
return <h1>{data.message}</h1>;
665+
},
699666
},
700667
],
701668
},
@@ -717,14 +684,6 @@ function testDomRouter(
717684
);
718685
}
719686

720-
function Foo() {
721-
return <h1>Foo</h1>;
722-
}
723-
function Bar() {
724-
let data = useLoaderData() as { message: string };
725-
return <h1>{data.message}</h1>;
726-
}
727-
728687
expect(getHtml(container.querySelector("#output")!))
729688
.toMatchInlineSnapshot(`
730689
"<div
@@ -780,12 +739,15 @@ function testDomRouter(
780739
path: "/",
781740
Component: () => <Layout />,
782741
children: [
783-
{ path: "foo", Component: () => <Foo /> },
742+
{ path: "foo", Component: () => <h1>Foo</h1> },
784743
{
785744
path: "bar",
786745
lazy: async () => ({
787746
loader: () => barDefer.promise,
788-
Component: () => <Bar />,
747+
Component: () => {
748+
let data = useLoaderData() as { message: string };
749+
return <h1>{data.message}</h1>;
750+
},
789751
}),
790752
},
791753
],
@@ -810,14 +772,6 @@ function testDomRouter(
810772
);
811773
}
812774

813-
function Foo() {
814-
return <h1>Foo</h1>;
815-
}
816-
function Bar() {
817-
let data = useLoaderData() as { message: string };
818-
return <h1>{data.message}</h1>;
819-
}
820-
821775
expect(getHtml(container.querySelector("#output")!))
822776
.toMatchInlineSnapshot(`
823777
"<div
@@ -7799,13 +7753,19 @@ function testDomRouter(
77997753
{
78007754
path: "foo",
78017755
loader: () => fooDefer.promise,
7802-
Component: () => <Foo />,
7756+
Component: () => {
7757+
let data = useLoaderData() as { message: string };
7758+
return <h1>Foo:{data.message}</h1>;
7759+
},
78037760
ErrorBoundary: () => <FooError />,
78047761
},
78057762
{
78067763
path: "bar",
78077764
loader: () => barDefer.promise,
7808-
Component: () => <Bar />,
7765+
Component: () => {
7766+
let data = useLoaderData() as { message: string };
7767+
return <h1>Bar:{data.message}</h1>;
7768+
},
78097769
ErrorBoundary: () => <BarError />,
78107770
},
78117771
],
@@ -7837,19 +7797,10 @@ function testDomRouter(
78377797
</div>
78387798
);
78397799
}
7840-
7841-
function Foo() {
7842-
let data = useLoaderData() as { message: string };
7843-
return <h1>Foo:{data.message}</h1>;
7844-
}
78457800
function FooError() {
78467801
let error = useRouteError() as Error;
78477802
return <p>Foo Error:{error.message}</p>;
78487803
}
7849-
function Bar() {
7850-
let data = useLoaderData() as { message: string };
7851-
return <h1>Bar:{data.message}</h1>;
7852-
}
78537804
function BarError() {
78547805
let error = useRouteError() as Error;
78557806
return <p>Bar Error:{error.message}</p>;
@@ -7921,13 +7872,19 @@ function testDomRouter(
79217872
{
79227873
path: "foo",
79237874
loader: () => fooDefer.promise,
7924-
Component: () => <Foo />,
7875+
Component: () => {
7876+
let data = useLoaderData() as { message: string };
7877+
return <h1>Foo:{data.message}</h1>;
7878+
},
79257879
ErrorBoundary: () => <FooError />,
79267880
},
79277881
{
79287882
path: "bar",
79297883
loader: () => barDefer.promise,
7930-
Component: () => <Bar />,
7884+
Component: () => {
7885+
let data = useLoaderData() as { message: string };
7886+
return <h1>Bar:{data.message}</h1>;
7887+
},
79317888
},
79327889
],
79337890
},
@@ -7962,18 +7919,10 @@ function testDomRouter(
79627919
let error = useRouteError() as Error;
79637920
return <p>Layout Error:{error.message}</p>;
79647921
}
7965-
function Foo() {
7966-
let data = useLoaderData() as { message: string };
7967-
return <h1>Foo:{data.message}</h1>;
7968-
}
79697922
function FooError() {
79707923
let error = useRouteError() as Error;
79717924
return <p>Foo Error:{error.message}</p>;
79727925
}
7973-
function Bar() {
7974-
let data = useLoaderData() as { message: string };
7975-
return <h1>Bar:{data.message}</h1>;
7976-
}
79777926

79787927
expect(getHtml(container.querySelector("#output")!))
79797928
.toMatchInlineSnapshot(`
@@ -8019,7 +7968,10 @@ function testDomRouter(
80197968
{
80207969
path: "bar",
80217970
loader: () => barDefer.promise,
8022-
Component: () => <Bar />,
7971+
Component: () => {
7972+
let data = useLoaderData() as { message: string };
7973+
return <h1>Bar:{data.message}</h1>;
7974+
},
80237975
ErrorBoundary: () => <BarError />,
80247976
},
80257977
],
@@ -8041,11 +7993,6 @@ function testDomRouter(
80417993
</div>
80427994
);
80437995
}
8044-
8045-
function Bar() {
8046-
let data = useLoaderData() as { message: string };
8047-
return <h1>Bar:{data.message}</h1>;
8048-
}
80497996
function BarError() {
80507997
let error = useRouteError() as Error;
80517998
return <p>Bar Error:{error.message}</p>;

0 commit comments

Comments
 (0)