<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: ss</title>
    <description>The latest articles on DEV Community by ss (@_da0f051ea2b8b35434bcd).</description>
    <link>https://dev.to/_da0f051ea2b8b35434bcd</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4042754%2F477fad8f-19c8-431e-aae5-ecfac6395916.png</url>
      <title>DEV Community: ss</title>
      <link>https://dev.to/_da0f051ea2b8b35434bcd</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/_da0f051ea2b8b35434bcd"/>
    <language>en</language>
    <item>
      <title>I built a local-only VS Code extension for generating Angular TestBed specs</title>
      <dc:creator>ss</dc:creator>
      <pubDate>Wed, 22 Jul 2026 22:47:15 +0000</pubDate>
      <link>https://dev.to/_da0f051ea2b8b35434bcd/i-built-a-local-only-vs-code-extension-for-generating-angular-testbed-specs-3bg</link>
      <guid>https://dev.to/_da0f051ea2b8b35434bcd/i-built-a-local-only-vs-code-extension-for-generating-angular-testbed-specs-3bg</guid>
      <description>&lt;p&gt;Angular component tests often start with the same chores:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;configure &lt;code&gt;TestBed&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;import the component&lt;/li&gt;
&lt;li&gt;provide shallow dependency stubs&lt;/li&gt;
&lt;li&gt;set required inputs&lt;/li&gt;
&lt;li&gt;create the fixture&lt;/li&gt;
&lt;li&gt;add the first creation assertion&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I built &lt;strong&gt;ngTestFoundry&lt;/strong&gt; to generate that first draft from Angular component&lt;br&gt;
source.&lt;/p&gt;

&lt;p&gt;Marketplace:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=sshyeri.ng-test-foundry" rel="noopener noreferrer"&gt;https://marketplace.visualstudio.com/items?itemName=sshyeri.ng-test-foundry&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Public docs/support:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/sshyeri/ng-test-foundry-public" rel="noopener noreferrer"&gt;https://github.com/sshyeri/ng-test-foundry-public&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What it does
&lt;/h2&gt;

&lt;p&gt;ngTestFoundry is a VS Code extension that generates:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Angular TestBed &lt;code&gt;.spec.ts&lt;/code&gt; files&lt;/li&gt;
&lt;li&gt;CSF3 Storybook &lt;code&gt;.stories.ts&lt;/code&gt; files&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It runs locally. Component source is not sent to a server.&lt;/p&gt;

&lt;p&gt;The goal is not to pretend generated tests are finished. The goal is to remove&lt;br&gt;
the boring first-draft work so developers can review and adapt generated output&lt;br&gt;
like normal code.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why deterministic instead of AI magic?
&lt;/h2&gt;

&lt;p&gt;I wanted the output to be repeatable and inspectable.&lt;/p&gt;

&lt;p&gt;ngTestFoundry statically analyzes the component source. When it can infer&lt;br&gt;
something confidently, it generates it. When it is unsure, it leaves an explicit&lt;br&gt;
TODO instead of silently guessing.&lt;/p&gt;

&lt;p&gt;That makes the tool less flashy, but easier to trust in real codebases.&lt;/p&gt;

&lt;h2&gt;
  
  
  Best fit today
&lt;/h2&gt;

&lt;p&gt;The current best fit is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Angular 17.3+ standalone components&lt;/li&gt;
&lt;li&gt;&lt;code&gt;input()&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;model()&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;output()&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;inject()&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;@Input()&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;@Output()&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It can generate Jasmine/Jest-style TestBed specs and CSF3 Storybook stories.&lt;/p&gt;

&lt;h2&gt;
  
  
  Free vs Pro
&lt;/h2&gt;

&lt;p&gt;Free:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;generate a spec for the active component&lt;/li&gt;
&lt;li&gt;generate a story for the active component&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Pro:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;batch-generate specs across a workspace&lt;/li&gt;
&lt;li&gt;batch-generate stories across a workspace&lt;/li&gt;
&lt;li&gt;use custom Eta templates&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Pro is about workflow scale and customization. The core generator is the same.&lt;/p&gt;

&lt;h2&gt;
  
  
  Current limits
&lt;/h2&gt;

&lt;p&gt;The tool is intentionally honest about current limits:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Non-standalone components are not fully supported yet because NgModule graph
resolution is not implemented.&lt;/li&gt;
&lt;li&gt;Dependency mocks are shallow.&lt;/li&gt;
&lt;li&gt;Vitest output is planned but not implemented yet.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What feedback would help most
&lt;/h2&gt;

&lt;p&gt;If you use Angular standalone components, I would love feedback on one real&lt;br&gt;
component from your workspace.&lt;/p&gt;

&lt;p&gt;The most useful questions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Did the generated spec compile?&lt;/li&gt;
&lt;li&gt;Was the TestBed setup useful?&lt;/li&gt;
&lt;li&gt;Which Angular pattern was missing?&lt;/li&gt;
&lt;li&gt;Did the TODOs help, or were they noisy?&lt;/li&gt;
&lt;li&gt;Would batch generation save time in your workspace?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Feedback thread:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/sshyeri/ng-test-foundry-public/issues/1" rel="noopener noreferrer"&gt;https://github.com/sshyeri/ng-test-foundry-public/issues/1&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Roadmap voting:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/sshyeri/ng-test-foundry-public/issues/2" rel="noopener noreferrer"&gt;https://github.com/sshyeri/ng-test-foundry-public/issues/2&lt;/a&gt;&lt;/p&gt;

</description>
      <category>angular</category>
      <category>vscode</category>
      <category>testing</category>
      <category>storybook</category>
    </item>
  </channel>
</rss>
