Update to integration tests - support mobile environment

[adamjarling]

What does this do?

• Update tests and fixes a duplicate Header component in layout

How to test?

• Run the test suite pnpm test, or individually in VSCode. Verify all pass.

[jrgriffiniii]

💯

[jrgriffiniii]

💯

[jrgriffiniii]

👍

[jrgriffiniii]

👍

[jrgriffiniii]

This is superb, thank you very much for providing this, as well as for establishing this pattern. I can definitely see how this may be easily and readily extended to support additional mobile browsers.

[adamjarling]

This is superb, thank you very much for providing this, as well as for establishing this pattern. I can definitely see how this may be easily and readily extended to support additional mobile browsers.

@jrgriffiniii Great. Yea, there are a few patterns for targeting mobile environments. Playwright's browsers come with some popular ones, so it's pretty easy to just plug into what they ship to test against.

Here are some other potential mobile test patterns I came across, if helpful or you wanted to experiment:

Pattern 2

import { test, expect } from '@playwright/test';

test.describe('Mobile tests', () => {
  test.use({ projectName: 'Mobile Chrome' });

  test('Mobile Chrome specific test', async ({ page }, testInfo) => {
    expect(testInfo.project.name).toBe('Mobile Chrome');
    // Mobile Chrome specific tests
  });
});

test.describe('Desktop tests', () => {
  test.use({ projectName: 'chromium' });

  test('Desktop Chrome specific test', async ({ page }, testInfo) => {
    expect(testInfo.project.name).toBe('chromium');
    // Desktop Chrome specific tests
  });
});

Pattern 3

import { test, expect } from '@playwright/test';

test('Desktop only test', async ({ page }) => {
  // This test will only run on desktop configurations
});

test('Mobile only test', async ({ page }) => {
  // This test will only run on mobile configurations
});

test.describe('Device specific tests', () => {
  test('iPhone 12 test', async ({ page }, testInfo) => {
    test.skip(testInfo.project.name !== 'Mobile Safari', 'iPhone 12 specific test');
    // iPhone 12 specific test logic
  });

  test('Pixel 5 test', async ({ page }, testInfo) => {
    test.skip(testInfo.project.name !== 'Mobile Chrome', 'Pixel 5 specific test');
    // Pixel 5 specific test logic
  });
});

Fixture Pattern

As you dig more into Playwright, you'll come across their Fixture approach. It's pretty interesting and powerful. Here's one generic example:

import { test as base, expect } from '@playwright/test';

type MyFixtures = {
  isMobile: boolean;
  deviceName: string;
};

const test = base.extend<MyFixtures>({
  isMobile: async ({ }, use, testInfo) => {
    await use(testInfo.project.name.includes('Mobile'));
  },
  deviceName: async ({ }, use, testInfo) => {
    await use(testInfo.project.name);
  },
});

test('Device aware test with custom fixtures', async ({ page, isMobile, deviceName }) => {
  console.log(`Running on: ${deviceName}, Mobile: ${isMobile}`);
  
  if (isMobile) {
    // Mobile specific test logic
  } else {
    // Desktop specific test logic
  }
});