Dashboard Navigation and Footer Link Tests

Problem/Feature Description

A SaaS product team has built a marketing dashboard with a main navigation bar at the top and a footer at the bottom. Both sections contain a set of links: "Home", "About", "Pricing", and "Contact". The component also renders a main content area with a data table showing recent activity. Each table row has action buttons labeled "Edit" and "Delete".

The QA team has found several test failures in the existing test suite where queries are ambiguous — the test runner reports "Found multiple elements with the role 'link' and name 'Home'" — so tests are brittle and hard to maintain. A developer has been asked to write a clean test suite for the AppLayout component that avoids these ambiguity errors entirely. The tests should verify that navigation links appear correctly in both the navigation bar and the footer independently, and that the action buttons in the first data row work as expected.

Output Specification

Write a test file named AppLayout.test.tsx that tests the AppLayout component provided below. The tests should verify:

• The navigation bar contains the expected links
• The footer contains the expected links (same link names as the nav)
• The first row of the activity table has both an "Edit" and a "Delete" action button

Also provide the component file AppLayout.tsx with the implementation that the tests are written for.

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: AppLayout.tsx =============== import React from 'react';

const NAV_LINKS = ['Home', 'About', 'Pricing', 'Contact'];

const ROWS = [ { id: 1, description: 'User signup', date: '2024-01-15' }, { id: 2, description: 'Plan upgrade', date: '2024-01-16' }, { id: 3, description: 'Invoice paid', date: '2024-01-17' }, ];

export function AppLayout() { return ( <div> <nav aria-label="main navigation"> {NAV_LINKS.map((link) => ( <a key={link} href={/${link.toLowerCase()}}>{link}</a> ))} </nav>

<main>
    <h1>Recent Activity</h1>
    <table>
      <thead>
        <tr>
          <th>Description</th>
          <th>Date</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {ROWS.map((row) => (
          <tr key={row.id}>
            <td>{row.description}</td>
            <td>{row.date}</td>
            <td>
              <button onClick={() => {}}>Edit</button>
              <button onClick={() => {}}>Delete</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  </main>

  <footer aria-label="site footer">
    {NAV_LINKS.map((link) => (
      <a key={link} href={`/${link.toLowerCase()}`}>{link}</a>
    ))}
  </footer>
</div>

); }