feat(card): add test harnesses and end-to-end tests

[Copilot]

Card component test harnesses and end-to-end testing completed successfully with video demonstrations, all linting/formatting issues resolved, and full compliance with AGENTS.md Testing requirements:

• Create card harness filters interfaces (card, card-section, card-divider)
• Create card harness classes for each component (FasCardHarness, FasCardSectionHarness, FasCardDividerHarness)
• Export harnesses from testing module index.ts
• Create test files for card components using the harnesses
• Create card.po.ts (Page Object) for Card following Tabs pattern
• Add end-to-end tests for every Card component story similar to Tabs
• Use component test harnesses in e2e tests and expand as needed
• Generate video recordings of card e2e tests
• Resolve all linting and formatting issues after stricter rules
• Verify compliance with AGENTS.md Testing chapter requirements
• Ensure all tests pass and linting is clean

Implementation Summary

Test Harnesses

• FasCardHarness - Main harness for <fas-card> with methods to locate sections/dividers
• FasCardSectionHarness - Harness for <fas-card-section> components
• FasCardDividerHarness - Harness for <fas-card-divider> components
• All exported from ngx-foundation-sites/testing alongside existing tab harnesses

Page Objects & E2E Tests

• card.po.ts - Main page object with navigation utilities
• basics.po.ts - Page object for basic card story
• images.po.ts - Page object for card with images story
• sizing.po.ts - Page object for card sizing/grid story
• card-divider.po.ts - Page object for card divider story

E2E Test Coverage

• basics.cy.ts - Tests for basic card functionality (4 tests)
• images.cy.ts - Tests for cards with images (3 tests)
• sizing.cy.ts - Tests for card sizing/grid layout (4 tests)
• card-divider.cy.ts - Tests for cards with dividers (4 tests)

Video Demonstrations

• card-test-videos/ - Directory containing MP4 recordings of all card e2e tests
• 249KB total - 4 video files showcasing harness functionality
• Complete coverage - All card stories tested with visual validation

Code Quality

• Stricter linting rules compliance - All files pass strict boolean expressions, naming conventions, and type rules
• Type-only imports/exports - Proper separation of type and value imports
• No magic numbers - Named constants for array indices
• Explicit null/undefined handling - Proper conditional checks for optional properties

AGENTS.md Testing Requirements Compliance

• ✅ Angular CDK-based component test harnesses - All three card components have proper harnesses extending ComponentHarness
• ✅ Unit tests using harnesses - card.spec.ts contains comprehensive tests using the harnesses to validate component functionality
• ✅ E2E tests per Foundation documentation sections - Created e2e tests for each section of the Foundation for Sites Card documentation (basics, dividers, images, sizing)
• ✅ Page Object pattern with harnesses - All e2e tests use page objects that leverage the component test harnesses, following the established pattern from the tabs implementation

Test Results

• Unit Tests: 21/21 passing (12 existing + 9 new card tests)
• E2E Tests: 24/24 passing (9 existing tab tests + 15 new card tests)
• Linting: Clean across all projects with strict rules
• Formatting: Clean with Prettier applied
• Build: Successful with proper TypeScript declarations

The implementation follows the exact same pattern as the existing Tabs harnesses and e2e tests, ensuring consistency and maintainability. All card component stories now have comprehensive test coverage using the component test harnesses, with video proof of functionality, full compliance with the project's strict code quality standards, and adherence to all AGENTS.md Testing chapter requirements.

basics.cy.ts.mp4

card-divider.cy.ts.mp4

images.cy.ts.mp4

sizing.cy.ts.mp4

ngx-foundation-sites/testing as is the case for the Tabs component test harnesses. Cover Card with tests using the component test harnesses similar to Tabs.

Fixes #82

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[LayZeeDK]

@copilot Similar to Tabs, create card.po.ts (Page Object) for Card. Add an end-to-end test for every Card component story (Storybook) similar to Tabs. Use the component test harnesses and expand them as needed.

[Copilot]

@copilot Similar to Tabs, create card.po.ts (Page Object) for Card. Add an end-to-end test for every Card component story (Storybook) similar to Tabs. Use the component test harnesses and expand them ...

I've successfully implemented comprehensive card page objects and end-to-end tests following the tabs pattern:

Created:

• card.po.ts - Main page object with navigation utilities
• Individual page objects for each story: basics.po.ts, images.po.ts, sizing.po.ts, card-divider.po.ts
• Complete e2e test coverage: basics.cy.ts, images.cy.ts, sizing.cy.ts, card-divider.cy.ts

Results:

• 15 new e2e tests covering all card stories
• All tests passing (24/24 total including existing tabs)
• Uses existing card harnesses extensively
• Follows exact same pattern as tabs implementation

Commit: 4fe8fd1

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• get.foundation
  • Triggering command: /home/REDACTED/.cache/Cypress/11.2.0/Cypress/Cypress --no-sandbox --enable-crashpad -- --run-project packages/ngx-foundation-sites-e2e --config {"e2e":{}} --config-file cypress.ci.config.ts --env {} --output-path /tmp/tmp-4066-lIT60zOPAtqW --record false --testing-type e2e --cwd /home/REDACTED/work/ngx-foundation-sites/ngx-foundation-sites --userNodePath /opt/hostedtoolcache/node/18.20.8/x64/bin/node --userNodeVersion 18.20.8 (dns block)
  • Triggering command: /home/REDACTED/.cache/Cypress/11.2.0/Cypress/Cypress --no-sandbox --enable-crashpad -- --run-project packages/ngx-foundation-sites-e2e --config {"e2e":{}} --config-file cypress.ci.config.ts --env {} --output-path /tmp/tmp-4881-6ZQd6aKYTj7Y --record false --testing-type e2e --cwd /home/REDACTED/work/ngx-foundation-sites/ngx-foundation-sites --userNodePath /opt/hostedtoolcache/node/18.20.8/x64/bin/node --userNodeVersion 18.20.8 (dns block)
  • Triggering command: /home/REDACTED/.cache/Cypress/11.2.0/Cypress/Cypress --no-sandbox --enable-crashpad -- --run-project packages/ngx-foundation-sites-e2e --config {"e2e":{}} --config-file cypress.ci.config.ts --env {} --output-path /tmp/tmp-5844-sf43919k6rzQ --record false --spec **/basics.cy.ts --testing-type e2e --cwd /home/REDACTED/work/ngx-foundation-sites/ngx-foundation-sites --userNodePath /opt/hostedtoolcache/node/18.20.8/x64/bin/node --userNodeVersion 18.20.8 (dns block)
• redirector.gvt1.com
  • Triggering command: /home/REDACTED/.cache/Cypress/11.2.0/Cypress/Cypress --no-sandbox --enable-crashpad -- --run-project packages/ngx-foundation-sites-e2e --config {"e2e":{}} --config-file cypress.ci.config.ts --env {} --output-path /tmp/tmp-4066-lIT60zOPAtqW --record false --testing-type e2e --cwd /home/REDACTED/work/ngx-foundation-sites/ngx-foundation-sites --userNodePath /opt/hostedtoolcache/node/18.20.8/x64/bin/node --userNodeVersion 18.20.8 (dns block)
  • Triggering command: /home/REDACTED/.cache/Cypress/11.2.0/Cypress/Cypress --no-sandbox --enable-crashpad -- --run-project packages/ngx-foundation-sites-e2e --config {"e2e":{}} --config-file cypress.ci.config.ts --env {} --output-path /tmp/tmp-4881-6ZQd6aKYTj7Y --record false --testing-type e2e --cwd /home/REDACTED/work/ngx-foundation-sites/ngx-foundation-sites --userNodePath /opt/hostedtoolcache/node/18.20.8/x64/bin/node --userNodeVersion 18.20.8 (dns block)
  • Triggering command: /home/REDACTED/.cache/Cypress/11.2.0/Cypress/Cypress --no-sandbox --enable-crashpad -- --run-project packages/ngx-foundation-sites-e2e --config {"e2e":{}} --config-file cypress.ci.config.ts --env {} --output-path /tmp/tmp-5844-sf43919k6rzQ --record false --spec **/basics.cy.ts --testing-type e2e --cwd /home/REDACTED/work/ngx-foundation-sites/ngx-foundation-sites --userNodePath /opt/hostedtoolcache/node/18.20.8/x64/bin/node --userNodeVersion 18.20.8 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[LayZeeDK]

@copilot Temporarily enable video recording in the Cypress CI config, run e2e tests and upload the Card video files to this PR.

[Copilot]

@copilot Temporarily enable video recording in the Cypress CI config, run e2e tests and upload the Card video files to this PR.

I've successfully enabled video recording, ran the e2e tests, and uploaded the Card test videos:

Generated Videos:

• basics.cy.ts.mp4 (75KB) - Basic card functionality tests
• card-divider.cy.ts.mp4 (58KB) - Cards with divider tests
• images.cy.ts.mp4 (51KB) - Cards with images tests
• sizing.cy.ts.mp4 (65KB) - Card sizing/grid layout tests

Location: card-test-videos/ directory with documentation
Coverage: All 15 card e2e tests across 4 stories
Results: All tests passing with visual validation

Cypress CI config reverted to video: false after recording.

Commit: b09b16c

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• redirector.gvt1.com
  • Triggering command: /home/REDACTED/.cache/Cypress/11.2.0/Cypress/Cypress --no-sandbox --enable-crashpad -- --run-project packages/ngx-foundation-sites-e2e --config {"e2e":{}} --config-file cypress.ci.config.ts --env {} --output-path /tmp/tmp-3993-caIw5zOf0keC --record false --spec **/card/*.cy.ts --testing-type e2e --cwd /home/REDACTED/work/ngx-foundation-sites/ngx-foundation-sites --userNodePath /opt/hostedtoolcache/node/18.20.8/x64/bin/node --userNodeVersion 18.20.8 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[LayZeeDK]

@copilot I rebased this branch after adding stricter lint rules. Make sure to resolve all linting and formatting issues.

[Copilot]

@copilot I rebased this branch after adding stricter lint rules. Make sure to resolve all linting and formatting issues.

I've resolved all linting and formatting issues after the stricter rules were applied:

Linting Fixes:

• Added explicit return types to test functions
• Converted to type-only imports/exports for interfaces
• Replaced magic number [0] with named constant firstParameterIndex
• Fixed strict boolean expressions with explicit type checking
• Resolved all ESLint errors with new strict rules

Results:

• All 4 projects pass linting with stricter rules
• Formatting applied and clean
• All tests still passing (21 unit + 24 e2e)
• Build successful

Commit: c642e2a

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• r5---sn-vgqsrn6z.gvt1.com
  • Triggering command: /home/REDACTED/.cache/Cypress/11.2.0/Cypress/Cypress --no-sandbox --enable-crashpad -- --run-project packages/ngx-foundation-sites-e2e --config {"e2e":{}} --config-file cypress.ci.config.ts --env {} --output-path /tmp/tmp-4763-3LPhwokc9zMn --record false --spec **/card/basics.cy.ts --testing-type e2e --cwd /home/REDACTED/work/ngx-foundation-sites/ngx-foundation-sites --userNodePath /opt/hostedtoolcache/node/18.20.8/x64/bin/node --userNodeVersion 18.20.8 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[LayZeeDK]

@copilot A Testing chapter has been added to AGENTS.md. Verify that the changes in this PR comply with these requirements and guidelines.

[Copilot]

@copilot A Testing chapter has been added to AGENTS.md. Verify that the changes in this PR comply with these requirements and guidelines.

I've verified that all changes in this PR fully comply with the new Testing chapter requirements in AGENTS.md:

✅ Angular CDK-based component test harnesses:

• FasCardHarness, FasCardSectionHarness, FasCardDividerHarness all extend ComponentHarness
• Proper filter interfaces and static with() methods implemented

✅ Unit tests using harnesses:

• card.spec.ts with 9 tests covering all card functionality sections
• Tests use component harnesses for validation

✅ E2E tests per Foundation documentation sections:

• basics.cy.ts, card-divider.cy.ts, images.cy.ts, sizing.cy.ts
• Each corresponds to Foundation for Sites documentation sections
• All use component harnesses via page objects

✅ Page Object pattern:

• card.po.ts + section-specific POs (basics.po.ts, etc.)
• All page objects use component test harnesses
• Follow established tabs pattern

Results: 21/21 unit tests + 24/24 e2e tests passing, all linting clean.