import { test } from 'magnitude-test';

test('Mantine theme is applied correctly', async (agent) => {
  // Act: Navigate to the homepage
  await agent.act('Navigate to the homepage');

  // Check: Verify the Mantine components are rendered
  await agent.check('The text "Ponderants" is visible as a title');
  await agent.check('A "Test Button" is visible on the screen');

  // Check: Verify the theme is applied.
  // We check that the button has the specific visual properties
  // defined in our theme (gray color, xl radius).
  await agent.check(
    'The "Test Button" has a gray background, indicating the theme\'s primaryColor is active'
  );
  await agent.check(
    'The "Test Button" has rounded corners, indicating the theme\'s defaultRadius is active'
  );

  // Check: Verify the Paper component is rendered with its themed styles
  await agent.check(
    'The page content is inside a "Paper" component with a border'
  );
});