chore(testing): review and complete test suites

2nd-gen/packages/swc/components/asset/test/asset.test.ts

@@ -47,9 +47,15 @@ export const OverviewTest: Story = {
 
     await step('renders slotted content when no variant is set', async () => {
       const img = asset.querySelector('img');
-      expect(asset.variant).toBeUndefined();
-      expect(img).toBeTruthy();
-      expect(img?.getAttribute('alt')?.length).toBeGreaterThan(0);
+      expect(
+        asset.variant,
+        'variant is undefined when not set'
+      ).toBeUndefined();
+      expect(img, 'slotted img element is rendered').toBeTruthy();
+      expect(
+        img?.getAttribute('alt')?.length,
+        'slotted img has a non-empty alt attribute'
+      ).toBeGreaterThan(0);
     });
   },
 };
@@ -69,21 +75,82 @@ export const DefaultLabelFallbackTest: Story = {
     await step('file variant falls back to default aria-label', async () => {
       const fileAsset = assets.find(
         (a) => a.getAttribute('variant') === 'file'
-      ) as Asset;
-      const svg = fileAsset.shadowRoot?.querySelector('svg');
-      expect(svg?.getAttribute('aria-label')).toBe('File');
+      ) as Asset | null;
+      expect(fileAsset, 'file asset is rendered').toBeTruthy();
+      const svg = fileAsset?.shadowRoot?.querySelector('svg');
+      expect(svg, 'file asset has an SVG in shadow DOM').toBeTruthy();
+      expect(
+        svg?.getAttribute('aria-label'),
+        'file asset SVG defaults to "File" aria-label'
+      ).toBe('File');
     });
 
     await step('folder variant falls back to default aria-label', async () => {
       const folderAsset = assets.find(
         (a) => a.getAttribute('variant') === 'folder'
-      ) as Asset;
-      const svg = folderAsset.shadowRoot?.querySelector('svg');
-      expect(svg?.getAttribute('aria-label')).toBe('Folder');
+      ) as Asset | null;
+      expect(folderAsset, 'folder asset is rendered').toBeTruthy();
+      const svg = folderAsset?.shadowRoot?.querySelector('svg');
+      expect(svg, 'folder asset has an SVG in shadow DOM').toBeTruthy();
+      expect(
+        svg?.getAttribute('aria-label'),
+        'folder asset SVG defaults to "Folder" aria-label'
+      ).toBe('Folder');
     });
   },
 };
 
+// ──────────────────────────────────────────────────────────────
+// TEST: Properties / Attributes
+// ──────────────────────────────────────────────────────────────
+
+export const LabelMutationTest: Story = {
+  render: () => html`
+    <swc-asset variant="file"></swc-asset>
+  `,
+  play: async ({ canvasElement, step }) => {
+    const asset = await getComponent<Asset>(canvasElement, 'swc-asset');
+
+    await step(
+      'SVG aria-label reflects default "File" when label is empty',
+      async () => {
+        const svg = asset.shadowRoot?.querySelector('svg');
+        expect(svg, 'SVG is rendered initially').toBeTruthy();
+        expect(
+          svg?.getAttribute('aria-label'),
+          'SVG aria-label defaults to "File" when no label is set'
+        ).toBe('File');
+      }
+    );
+
+    await step(
+      'SVG aria-label updates when label property is set',
+      async () => {
+        asset.label = 'Q4 Budget Report';
+        await asset.updateComplete;
+        const svg = asset.shadowRoot?.querySelector('svg');
+        expect(
+          svg?.getAttribute('aria-label'),
+          'SVG aria-label reflects updated label property'
+        ).toBe('Q4 Budget Report');
+      }
+    );
+
+    await step(
+      'SVG aria-label reverts to default when label is cleared',
+      async () => {
+        asset.label = '';
+        await asset.updateComplete;
+        const svg = asset.shadowRoot?.querySelector('svg');
+        expect(
+          svg?.getAttribute('aria-label'),
+          'SVG aria-label reverts to "File" when label is cleared'
+        ).toBe('File');
+      }
+    );
+  },
+};
+
 // ──────────────────────────────────────────────────────────────
 // TEST: Variants / States
 // ──────────────────────────────────────────────────────────────
@@ -101,8 +168,74 @@ export const VariantsTest: Story = {
         (item) => item.getAttribute('variant') === 'folder'
       );
 
-      expect(fileAsset).toBeTruthy();
-      expect(folderAsset).toBeTruthy();
+      expect(fileAsset, 'file variant asset is rendered').toBeTruthy();
+      expect(folderAsset, 'folder variant asset is rendered').toBeTruthy();
+    });
+  },
+};
+
+export const VariantMutationTest: Story = {
+  render: () => html`
+    <swc-asset></swc-asset>
+  `,
+  play: async ({ canvasElement, step }) => {
+    const asset = await getComponent<Asset>(canvasElement, 'swc-asset');
+
+    await step('initially renders slot when no variant is set', async () => {
+      expect(asset.variant, 'variant is initially undefined').toBeUndefined();
+      const svg = asset.shadowRoot?.querySelector('svg');
+      expect(svg, 'no SVG is rendered when variant is not set').toBeNull();
+    });
+
+    await step('renders file SVG after variant is set to "file"', async () => {
+      asset.variant = 'file';
+      await asset.updateComplete;
+      expect(
+        asset.getAttribute('variant'),
+        'variant attribute is "file" after mutation'
+      ).toBe('file');
+      const svg = asset.shadowRoot?.querySelector('svg');
+      expect(svg, 'file SVG is rendered after variant mutation').toBeTruthy();
+      expect(
+        svg?.getAttribute('aria-label'),
+        'file SVG has default "File" aria-label'
+      ).toBe('File');
+    });
+
+    await step(
+      'renders folder SVG after variant is set to "folder"',
+      async () => {
+        asset.variant = 'folder';
+        await asset.updateComplete;
+        expect(
+          asset.getAttribute('variant'),
+          'variant attribute is "folder" after mutation'
+        ).toBe('folder');
+        const svg = asset.shadowRoot?.querySelector('svg');
+        expect(
+          svg,
+          'folder SVG is rendered after variant mutation'
+        ).toBeTruthy();
+        expect(
+          svg?.getAttribute('aria-label'),
+          'folder SVG has default "Folder" aria-label'
+        ).toBe('Folder');
+      }
+    );
+
+    await step('reverts to slot content when variant is cleared', async () => {
+      asset.variant = undefined;
+      await asset.updateComplete;
+      expect(
+        asset.variant,
+        'variant is undefined after clearing'
+      ).toBeUndefined();
+      expect(
+        asset.hasAttribute('variant'),
+        'variant attribute is absent after clearing'
+      ).toBe(false);
+      const svg = asset.shadowRoot?.querySelector('svg');
+      expect(svg, 'no SVG is rendered after variant is cleared').toBeNull();
     });
   },
 };
@@ -123,8 +256,14 @@ export const InvalidVariantWarningTest: Story = {
         asset.variant = 'not-a-variant' as Asset['variant'];
         await asset.updateComplete;
 
-        expect(warnCalls.length).toBeGreaterThan(0);
-        expect(String(warnCalls[0]?.[1] || '')).toContain('variant');
+        expect(
+          warnCalls.length,
+          'at least one warning is emitted for invalid variant'
+        ).toBeGreaterThan(0);
+        expect(
+          String(warnCalls[0]?.[1] || ''),
+          'warning message references variant'
+        ).toContain('variant');
       })
     );
   },
@@ -142,7 +281,10 @@ export const ValidVariantNoWarningTest: Story = {
         asset.variant = 'folder';
         await asset.updateComplete;
 
-        expect(warnCalls.length).toBe(0);
+        expect(
+          warnCalls.length,
+          'no warnings are emitted for valid variant'
+        ).toBe(0);
       })
     );
   },

2nd-gen/packages/swc/components/avatar/stories/avatar.stories.ts

@@ -50,7 +50,7 @@ argTypes.decorative = {
 /**
  * An avatar displays a circular profile image representing a person or entity.
  */
-export const meta: Meta = {
+const meta: Meta = {
   title: 'Avatar',
   component: 'swc-avatar',
   args,
@@ -67,11 +67,7 @@ export const meta: Meta = {
   tags: ['migrated'],
 };
 
-export default {
-  ...meta,
-  title: 'Avatar',
-  excludeStories: ['meta'],
-} as Meta;
+export default meta;
 
 // ────────────────────
 //    HELPERS

2nd-gen/packages/swc/components/avatar/test/avatar.test.ts

@@ -23,10 +23,9 @@ import {
   getComponents,
   withWarningSpy,
 } from '../../../utils/test-utils.js';
-import {
+import meta, {
   Decorative,
   Disabled,
-  meta,
   Overview,
   Sizes,
 } from '../stories/avatar.stories.js';

2nd-gen/packages/swc/components/badge/stories/badge.stories.ts

@@ -90,7 +90,7 @@ argTypes['icon-slot'] = {
  * Choose one style consistently within a product - `outline` and `subtle` fill draw similar attention levels.
  * Reserve bold fill for high-attention badging only.
  */
-export const meta: Meta = {
+const meta: Meta = {
   title: 'Badge',
   component: 'swc-badge',
   args,
@@ -112,11 +112,7 @@ export const meta: Meta = {
   tags: ['migrated'],
 };
 
-export default {
-  ...meta,
-  title: 'Badge',
-  excludeStories: ['meta'],
-} as Meta;
+export default meta;
 
 // ────────────────────
 //    HELPERS