Initial commit

tests/e2e/Counter.e2e.ts

@@ -0,0 +1,55 @@
+import assert from 'node:assert';
+import { faker } from '@faker-js/faker';
+import { expect, test } from '@playwright/test';
+
+test.describe('Counter', () => {
+  test.describe('Increment operation', () => {
+    test('should display error message when incrementing with negative number', async ({
+      page,
+    }) => {
+      await page.goto('/counter');
+
+      const count = page.getByText('Count:');
+      const countText = await count.textContent();
+
+      assert(countText !== null, 'Count should not be null');
+
+      await page.getByLabel('Increment by').fill('-1');
+      await page.getByRole('button', { name: 'Increment' }).click();
+
+      await expect(page.getByText('Value must be between 1 and 3')).toBeVisible();
+      await expect(page.getByText('Count:')).toHaveText(countText);
+    });
+
+    test('should increment the counter and validate the count', async ({
+      page,
+    }) => {
+      // `x-e2e-random-id` is used for end-to-end testing to make isolated requests
+      // The default value is 0 when there is no `x-e2e-random-id` header
+      const e2eRandomId = faker.number.int({ max: 1000000 });
+      await page.setExtraHTTPHeaders({
+        'x-e2e-random-id': e2eRandomId.toString(),
+      });
+      await page.goto('/counter');
+
+      const count = page.getByText('Count:');
+      const countText = await count.textContent();
+
+      assert(countText !== null, 'Count should not be null');
+
+      const countNumber = Number(countText.split(' ')[1]);
+
+      await page.getByLabel('Increment by').fill('2');
+      await page.getByRole('button', { name: 'Increment' }).isEnabled();
+      await page.getByRole('button', { name: 'Increment' }).click();
+
+      await expect(page.getByText('Count:')).toHaveText(`Count: ${countNumber + 2}`);
+
+      await page.getByLabel('Increment by').fill('3');
+      await page.getByRole('button', { name: 'Increment' }).isEnabled();
+      await page.getByRole('button', { name: 'Increment' }).click();
+
+      await expect(page.getByText('Count:')).toHaveText(`Count: ${countNumber + 5}`);
+    });
+  });
+});

tests/e2e/I18n.e2e.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('I18n', () => {
+  test.describe('Language Switching', () => {
+    test('should switch language from English to French using dropdown and verify text on the homepage', async ({ page }) => {
+      await page.goto('/');
+
+      await expect(
+        page.getByRole('heading', { name: 'Boilerplate Code for Your Next.js Project with Tailwind CSS' }),
+      ).toBeVisible();
+
+      await page.getByLabel('lang-switcher').selectOption('fr');
+
+      await expect(
+        page.getByRole('heading', { name: 'Code de démarrage pour Next.js avec Tailwind CSS' }),
+      ).toBeVisible();
+    });
+
+    test('should switch language from English to French using URL and verify text on the sign-in page', async ({ page }) => {
+      await page.goto('/sign-in');
+
+      await expect(page.getByText('Email address')).toBeVisible();
+
+      await page.goto('/fr/sign-in');
+
+      await expect(page.getByText('Adresse e-mail')).toBeVisible();
+    });
+  });
+});

tests/e2e/Sanity.check.e2e.ts

@@ -0,0 +1,49 @@
+import { expect, test } from '@playwright/test';
+
+// Checkly is a tool used to monitor deployed environments, such as production or preview environments.
+// It runs end-to-end tests with the `.check.e2e.ts` extension after each deployment to ensure that the environment is up and running.
+// With Checkly, you can monitor your production environment and run `*.check.e2e.ts` tests regularly at a frequency of your choice.
+// If the tests fail, Checkly will notify you via email, Slack, or other channels of your choice.
+// On the other hand, E2E tests ending with `*.e2e.ts` are only run before deployment.
+// You can run them locally or on CI to ensure that the application is ready for deployment.
+
+// BaseURL needs to be explicitly defined in the test file.
+// Otherwise, Checkly runtime will throw an exception: `CHECKLY_INVALID_URL: Only URL's that start with http(s)`
+// You can't use `goto` function directly with a relative path like with other *.e2e.ts tests.
+// Check the example at https://feedback.checklyhq.com/changelog/new-changelog-436
+
+test.describe('Sanity', () => {
+  test.describe('Static pages', () => {
+    test('should display the homepage', async ({ page, baseURL }) => {
+      await page.goto(`${baseURL}/`);
+
+      await expect(
+        page.getByRole('heading', { name: 'Boilerplate Code for Your Next.js Project with Tailwind CSS' }),
+      ).toBeVisible();
+    });
+
+    test('should navigate to the about page', async ({ page, baseURL }) => {
+      await page.goto(`${baseURL}/`);
+
+      await page.getByRole('link', { name: 'About' }).click();
+
+      await expect(page).toHaveURL(/about$/);
+
+      await expect(
+        page.getByText('Welcome to our About page', { exact: false }),
+      ).toBeVisible();
+    });
+
+    test('should navigate to the portfolio page', async ({ page, baseURL }) => {
+      await page.goto(`${baseURL}/`);
+
+      await page.getByRole('link', { name: 'Portfolio' }).click();
+
+      await expect(page).toHaveURL(/portfolio$/);
+
+      await expect(
+        page.locator('main').getByRole('link', { name: /^Portfolio/ }),
+      ).toHaveCount(6);
+    });
+  });
+});

tests/e2e/Visual.e2e.ts

@@ -0,0 +1,55 @@
+import { expect, takeSnapshot, test } from '@chromatic-com/playwright';
+
+test.describe('Visual testing', () => {
+  test.describe('Static pages', () => {
+    test('should take screenshot of the homepage', async ({ page }, testInfo) => {
+      await page.goto('/');
+
+      await expect(
+        page.getByRole('heading', { name: 'Boilerplate Code for Your Next.js Project with Tailwind CSS' }),
+      ).toBeVisible();
+
+      await takeSnapshot(page, testInfo);
+    });
+
+    test('should take screenshot of the portfolio page', async ({ page }, testInfo) => {
+      await page.goto('/portfolio');
+
+      await expect(
+        page.getByText('Welcome to my portfolio page!'),
+      ).toBeVisible();
+
+      await takeSnapshot(page, testInfo);
+    });
+
+    test('should take screenshot of the about page', async ({ page }, testInfo) => {
+      await page.goto('/about');
+
+      await expect(
+        page.getByText('Welcome to our About page!'),
+      ).toBeVisible();
+
+      await takeSnapshot(page, testInfo);
+    });
+
+    test('should take screenshot of the portfolio details page', async ({ page }, testInfo) => {
+      await page.goto('/portfolio/2');
+
+      await expect(
+        page.getByText('Created a set of promotional'),
+      ).toBeVisible();
+
+      await takeSnapshot(page, testInfo);
+    });
+
+    test('should take screenshot of the French homepage', async ({ page }, testInfo) => {
+      await page.goto('/fr');
+
+      await expect(
+        page.getByRole('heading', { name: 'Code de démarrage pour Next.js avec Tailwind CSS' }),
+      ).toBeVisible();
+
+      await takeSnapshot(page, testInfo);
+    });
+  });
+});

tests/integration/Counter.spec.ts

@@ -0,0 +1,83 @@
+import { faker } from '@faker-js/faker';
+import { expect, test } from '@playwright/test';
+
+test.describe('Counter', () => {
+  test.describe('Basic database operations', () => {
+    test('shouldn\'t increment the counter with an invalid input', async ({ page }) => {
+      const counter = await page.request.put('/api/counter', {
+        data: {
+          increment: 'incorrect',
+        },
+      });
+
+      expect(counter.status()).toBe(422);
+    });
+
+    test('shouldn\'t increment the counter with a negative number', async ({ page }) => {
+      const counter = await page.request.put('/api/counter', {
+        data: {
+          increment: -1,
+        },
+      });
+
+      expect(counter.status()).toBe(422);
+    });
+
+    test('shouldn\'t increment the counter with a number greater than 3', async ({ page }) => {
+      const counter = await page.request.put('/api/counter', {
+        data: {
+          increment: 5,
+        },
+      });
+
+      expect(counter.status()).toBe(422);
+    });
+
+    test('should increment the counter and update the counter correctly', async ({ page }) => {
+      // `x-e2e-random-id` is used for end-to-end testing to make isolated requests
+      // The default value is 0 when there is no `x-e2e-random-id` header
+      const e2eRandomId = faker.number.int({ max: 1000000 });
+
+      let counter = await page.request.put('/api/counter', {
+        data: {
+          increment: 1,
+        },
+        headers: {
+          'x-e2e-random-id': e2eRandomId.toString(),
+        },
+      });
+      let counterJson = await counter.json();
+
+      expect(counter.status()).toBe(200);
+
+      // Save the current count
+      const count = counterJson.count;
+
+      counter = await page.request.put('/api/counter', {
+        data: {
+          increment: 2,
+        },
+        headers: {
+          'x-e2e-random-id': e2eRandomId.toString(),
+        },
+      });
+      counterJson = await counter.json();
+
+      expect(counter.status()).toBe(200);
+      expect(counterJson.count).toEqual(count + 2);
+
+      counter = await page.request.put('/api/counter', {
+        data: {
+          increment: 1,
+        },
+        headers: {
+          'x-e2e-random-id': e2eRandomId.toString(),
+        },
+      });
+      counterJson = await counter.json();
+
+      expect(counter.status()).toBe(200);
+      expect(counterJson.count).toEqual(count + 3);
+    });
+  });
+});