Profile card

[edlu77]

• Add profile card to labs #82
• Need profile card and profile card grid components wholepersonproject/wpp-ui#25

[nx-cloud]

View your CI Pipeline Execution ↗ for commit fed9270

Command	Status	Duration	Result
nx affected -t lint test build build-compodoc b...	✅ Succeeded	2m 3s	View ↗
nx-cloud record -- nx format:check	✅ Succeeded	1s	View ↗
nx-cloud record -- commitlint --from 1dd6292de9...	✅ Succeeded	<1s	View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗

---

☁️ Nx Cloud last updated this comment at 2026-07-20 19:01:12 UTC

[nx-cloud]

✅ The fix from Nx Cloud was applied

We ran nx format to fix the format:check failure caused by the profile card spec file using tab indentation instead of the project's standard 2-space indentation. Our change brings libs/labs/profile-card/src/lib/profile-card.spec.ts into compliance with the Prettier configuration, which will allow the nx format:check task to pass.

Tip

✅ We verified this fix by re-running nx-cloud record -- nx format:check.

Suggested Fix changes

diff --git a/libs/labs/profile-card/src/lib/profile-card.spec.ts b/libs/labs/profile-card/src/lib/profile-card.spec.ts
index 751fa58..d54b05d 100644
--- a/libs/labs/profile-card/src/lib/profile-card.spec.ts
+++ b/libs/labs/profile-card/src/lib/profile-card.spec.ts
@@ -2,17 +2,14 @@ import { ComponentInput, render, screen } from '@testing-library/angular';
 import { ProfileCard } from './profile-card';
 
 describe('ProfileCard', () => {
-	type SetupOptions = {
-		inputs?: ComponentInput<ProfileCard>;
-		content?: string;
-	};
+  type SetupOptions = {
+    inputs?: ComponentInput<ProfileCard>;
+    content?: string;
+  };
 
-	function setup({
-		inputs = {},
-		content = '<a href="/profile">View profile</a>',
-	}: SetupOptions = {}) {
-		return render(
-			`<ang-profile-card
+  function setup({ inputs = {}, content = '<a href="/profile">View profile</a>' }: SetupOptions = {}) {
+    return render(
+      `<ang-profile-card
 				[pictureUrl]="pictureUrl"
 				[name]="name"
 				[description]="description"
@@ -20,49 +17,49 @@ describe('ProfileCard', () => {
 			>
 				${content}
 			</ang-profile-card>`,
-			{
-				imports: [ProfileCard],
-				componentProperties: {
-					pictureUrl: '/assets/profile.png',
-					name: 'Ada Lovelace',
-					description: 'Mathematician',
-					centerContent: false,
-					...inputs,
-				},
-			},
-		);
-	}
+      {
+        imports: [ProfileCard],
+        componentProperties: {
+          pictureUrl: '/assets/profile.png',
+          name: 'Ada Lovelace',
+          description: 'Mathematician',
+          centerContent: false,
+          ...inputs,
+        },
+      },
+    );
+  }
 
-	it('renders the name and description text', async () => {
-		await setup();
+  it('renders the name and description text', async () => {
+    await setup();
 
-		expect(screen.getByText('Ada Lovelace')).toBeInTheDocument();
-		expect(screen.getByText('Mathematician')).toBeInTheDocument();
-	});
+    expect(screen.getByText('Ada Lovelace')).toBeInTheDocument();
+    expect(screen.getByText('Mathematician')).toBeInTheDocument();
+  });
 
-	it('renders the profile picture with src and accessible alt text', async () => {
-		await setup();
+  it('renders the profile picture with src and accessible alt text', async () => {
+    await setup();
 
-		const image = screen.getByRole('img', { name: 'Profile picture of Ada Lovelace' });
+    const image = screen.getByRole('img', { name: 'Profile picture of Ada Lovelace' });
 
-		expect(image).toHaveAttribute('src', '/assets/profile.png');
-	});
+    expect(image).toHaveAttribute('src', '/assets/profile.png');
+  });
 
-	it('renders projected action content', async () => {
-		await setup({ content: '<button type="button">Connect</button>' });
+  it('renders projected action content', async () => {
+    await setup({ content: '<button type="button">Connect</button>' });
 
-		expect(screen.getByRole('button', { name: 'Connect' })).toBeInTheDocument();
-	});
+    expect(screen.getByRole('button', { name: 'Connect' })).toBeInTheDocument();
+  });
 
-	it('applies the center-content host class when centerContent is true', async () => {
-		const { container } = await setup({ inputs: { centerContent: true } });
+  it('applies the center-content host class when centerContent is true', async () => {
+    const { container } = await setup({ inputs: { centerContent: true } });
 
-		expect(container.querySelector('ang-profile-card')).toHaveClass('ang-profile-card-center-content');
-	});
+    expect(container.querySelector('ang-profile-card')).toHaveClass('ang-profile-card-center-content');
+  });
 
-	it('does not apply the center-content host class by default', async () => {
-		const { container } = await setup();
+  it('does not apply the center-content host class by default', async () => {
+    const { container } = await setup();
 
-		expect(container.querySelector('ang-profile-card')).not.toHaveClass('ang-profile-card-center-content');
-	});
+    expect(container.querySelector('ang-profile-card')).not.toHaveClass('ang-profile-card-center-content');
+  });
 });

  

View interactive diff ↗

➡️ This fix was applied by Edward Lu

_{🎓 Learn more about Self-Healing CI on nx.dev}

[github-actions]

🚀 Preview Deploy Report

✅ Successfully deployed preview here