Add types to all tests to increase type test coverage (#348)

.changeset/sixty-carpets-exercise.md

@@ -0,0 +1,12 @@
+---
+"test-programmatic": patch
+"test-decorators": patch
+"playwright": patch
+"test-config-ts": patch
+"test-provider": patch
+"test-addons": patch
+"test-config": patch
+"test-css": patch
+---
+
+Add types to all tests to increase type test coverage

e2e/addons/src/a11y.stories.tsx

@@ -1,4 +1,6 @@
-export const Issues = () => (
+import type { Story } from "@ladle/react";
+
+export const Issues: Story = () => (
   <>
     <input />
     <button style={{ backgroundColor: "red", color: "darkRed" }}>

e2e/addons/src/controls.stories.tsx

@@ -1,15 +1,6 @@
 import type { Story } from "@ladle/react";
 
-export default {
-  argTypes: {
-    cities: {
-      options: ["Prague", "NYC"],
-      control: { type: "check" },
-    },
-  },
-};
-
-export const Controls: Story<{
+type Props = {
   label: string;
   disabled: boolean;
   count: number;
@@ -19,7 +10,18 @@ export const Controls: Story<{
   range: number;
   airports: string;
   cities: string;
-}> = ({
+};
+
+export default {
+  argTypes: {
+    cities: {
+      options: ["Prague", "NYC"],
+      control: { type: "check" },
+    },
+  },
+};
+
+export const Controls: Story<Props> = ({
   count,
   disabled,
   label,

e2e/addons/src/hello.stories.tsx

@@ -1,6 +1,7 @@
+import type { Story } from "@ladle/react";
 import { useLink } from "@ladle/react";
 
-export const World = () => {
+export const World: Story = () => {
   const link = useLink();
   return (
     <>
@@ -12,6 +13,6 @@ export const World = () => {
   );
 };
 
-export const Linked = () => {
+export const Linked: Story = () => {
   return <h2>Linked Story</h2>;
 };

e2e/addons/src/width.stories.tsx

@@ -1,18 +1,19 @@
+import type { Story } from "@ladle/react";
 import "./styles.css";
 
-export const Iframed = () => <h1>Iframed</h1>;
+export const Iframed: Story = () => <h1>Iframed</h1>;
 Iframed.meta = {
   iframed: true,
 };
 
-export const NoIframe = () => <h1>No Iframe</h1>;
+export const NoIframe: Story = () => <h1>No Iframe</h1>;
 
-export const SetCustom = () => <h1>Width set</h1>;
+export const SetCustom: Story = () => <h1>Width set</h1>;
 SetCustom.meta = {
   width: 555,
 };
 
-export const SetSmall = () => <h1>Width set</h1>;
+export const SetSmall: Story = () => <h1>Width set</h1>;
 SetSmall.meta = {
   width: "small",
 };

e2e/config-ts/src/hello.show.tsx

@@ -1,9 +1,11 @@
+import type { Story } from "@ladle/react";
+
 declare const __filename_root: string;
 declare const __dirname_root: string;
 declare const __filename_myPlugin: string;
 declare const __dirname_myPlugin: string;
 
-export const World = () => {
+export const World: Story = () => {
   return (
     <div>
       <h1>Hello World</h1>

e2e/config/src/hello.show.tsx

@@ -1,4 +1,6 @@
-export const World = () => {
+import type { Story } from "@ladle/react";
+
+export const World: Story = () => {
   return <h1>Hello World</h1>;
 };
 

e2e/config/src/specific-file.custom.tsx

@@ -1,3 +1,5 @@
-export const Custom = () => {
+import type { Story } from "@ladle/react";
+
+export const Custom: Story = () => {
   return <h1>Custom path</h1>;
 };

e2e/css/src/hello.stories.tsx

@@ -1,7 +1,9 @@
+import type { Story } from "@ladle/react";
+
 // @ts-ignore
 import classes from "./more.module.css";
 
-export const World = () => {
+export const World: Story = () => {
   return (
     <>
       <h1>Yellow</h1>

e2e/decorators/src/args.stories.tsx

@@ -1,5 +1,7 @@
 import type { Story, StoryDecorator } from "@ladle/react";
 
+type Props = { label: string };
+
 export default {
   decorators: [
     (Component, context) => {
@@ -32,9 +34,7 @@ export default {
   ] as StoryDecorator[],
 };
 
-const Card: Story<{
-  label: string;
-}> = ({ label }) => (
+const Card: Story<Props> = ({ label }) => (
   <>
     <p>Label: {label}</p>
     <input id="persist-input" />

e2e/decorators/src/hello.stories.tsx

@@ -1,3 +1,5 @@
+import type { Story, StoryDecorator } from "@ladle/react";
+
 export default {
   decorators: [
     (Stories: React.FC) => (
@@ -10,10 +12,10 @@ export default {
         Decorator 2<Stories />
       </>
     ),
-  ],
+  ] as StoryDecorator[],
 };
 
-export const World = () => {
+export const World: Story = () => {
   return <h2>world</h2>;
 };
 

e2e/decorators/src/params.stories.tsx

@@ -1,3 +1,5 @@
+import type { Story } from "@ladle/react";
+
 export default {
   title: "Root / Examples",
   meta: {
@@ -6,11 +8,11 @@ export default {
   },
 };
 
-export const First = () => {
+export const First: Story = () => {
   return <h1>first</h1>;
 };
 
-export const Second = () => {
+export const Second: Story = () => {
   return <h1>second</h1>;
 };
 Second.storyName = "Second Renamed";

e2e/decorators/tests/params.spec.ts

@@ -27,32 +27,32 @@ test("meta.json is correctly using defaults and overrides", async ({
         "args--card-hello": {
           filePath: "src/args.stories.tsx",
           levels: ["Args"],
-          locEnd: 44,
           locStart: 44,
+          locEnd: 44,
           meta: {},
           name: "Card hello",
         },
         "hello--world": {
           name: "World",
           levels: ["Hello"],
-          locStart: 16,
-          locEnd: 18,
+          locStart: 18,
+          locEnd: 20,
           filePath: "src/hello.stories.tsx",
           meta: {},
         },
         "root--examples--first": {
           name: "First",
           levels: ["Root", "Examples"],
-          locStart: 9,
-          locEnd: 11,
+          locStart: 11,
+          locEnd: 13,
           filePath: "src/params.stories.tsx",
           meta: { drink: "coke", food: "burger" },
         },
         "root--examples--second-renamed": {
           name: "Second renamed",
           levels: ["Root", "Examples"],
-          locStart: 13,
-          locEnd: 15,
+          locStart: 15,
+          locEnd: 17,
           filePath: "src/params.stories.tsx",
           meta: { drink: "water", food: "burger" },
         },

e2e/playwright/src/abc.stories.tsx

@@ -1,4 +1,6 @@
-export const First = () => {
+import type { Story } from "@ladle/react";
+
+export const First: Story = () => {
   // not rendering a text since fonts render differently in different operation systems
   // and we use this package in our Github Actions CI which runs Ubuntu and Windows
   // so doing a blue rectangle instead to keep the setup simple
@@ -7,7 +9,7 @@ export const First = () => {
   return <div style={{ width: 200, height: 100, backgroundColor: "blue" }} />;
 };
 
-export const Second = () => {
+export const Second: Story = () => {
   return <h1>Second</h1>;
 };
 Second.meta = {

e2e/programmatic/src/hello.stories.tsx

@@ -1,3 +1,5 @@
-export const World = () => {
+import type { Story } from "@ladle/react";
+
+export const World: Story = () => {
   return <h1>Hello World</h1>;
 };

e2e/programmatic/tests/hello.spec.ts

@@ -18,8 +18,8 @@ test("meta.json has a single story ok", async ({ request }) => {
         "hello--world": {
           name: "World",
           levels: ["Hello"],
-          locEnd: 3,
-          locStart: 1,
+          locStart: 3,
+          locEnd: 5,
           filePath: "src/hello.stories.tsx",
           meta: {},
         },

e2e/provider/src/hello.stories.tsx

@@ -1,7 +1,8 @@
+import type { Story } from "@ladle/react";
 import { useContext } from "react";
 import { MyContext } from "../.ladle/components";
 
-export const World = () => {
+export const World: Story = () => {
   const value = useContext(MyContext);
   return <h1>Hello World - {value}</h1>;
 };

e2e/provider/src/hmr.stories.tsx

@@ -1,4 +1,6 @@
-export const WithState = () => {
+import type { Story } from "@ladle/react";
+
+export const WithState: Story = () => {
   return (
     <>
       <input id="state-input" />

e2e/provider/tests/hello.spec.ts

@@ -19,8 +19,8 @@ test("meta.json has a single story ok", async ({ request }) => {
         "hello--world": {
           name: "World",
           levels: ["Hello"],
-          locEnd: 7,
           locStart: 4,
+          locEnd: 7,
           filePath: "src/hello.stories.tsx",
           meta: {},
         },