Merge pull request #52 from CreoWis/issue-39-e2e-capabilities

Issue 39: E2E capabilities added

Author: atapas

.gitignore

@@ -66,4 +66,10 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -1,6 +1,9 @@
 <a href="https://github.com/CreoWis/next-js-launchpad/blob/master/LICENSE" target="blank"><img src="https://img.shields.io/github/license/CreoWis/next-js-launchpad?style=flat-square" alt="License" /></a>
+
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 <a href="https://github.com/CreoWis/next-js-launchpad/fork" target="blank">
 <img src="https://img.shields.io/github/forks/CreoWis/next-js-launchpad?style=flat-square" alt="next-js-launchpad forks"/>
@@ -37,59 +40,67 @@ Say goodbye to setup headaches and hello to consistent code quality. Elevate you
 - **Prettier Plugin Sort Imports**: Organize import declarations alphabetically within groups, which can help improve readability when working on larger projects.
 - **Husky**: Ensure code quality and prevent bad commits with pre-commit hooks powered by Husky.
 - **Docker Support**: Complete Docker configuration.
-    ```bash
-   -  Start the application using this Docker command:
-   
-    docker-compose up
-
-    The command will:
-    1. Build the application container
-    2. Install all dependencies
-    3. Start the development server
-    4. Make the application available on localhost
-    ```
-
--  **Internationalization (i18n)**: Built-in support for multiple languages using next-intl, making it easy to create multilingual applications with locale-specific routing and translations.
-  ## Getting Started
+
+  ```bash
+  -  Start the application using this Docker command:
+
+  docker-compose up
+
+  The command will:
+  1. Build the application container
+  2. Install all dependencies
+  3. Start the development server
+  4. Make the application available on localhost
+  ```
+
+- **Internationalization (i18n)**: Built-in support for multiple languages using next-intl, making it easy to create multilingual applications with locale-specific routing and translations.
+
+## Getting Started
+
 > Usage
 
 ```bash
 npx create-next-app -e https://github.com/CreoWis/next-js-launchpad
 ```
-  
+
 ## Internationalization (i18n)
+
 NextJsLaunchpad comes with built-in internationalization support using next-intl. This integration provides:
 
 - Route-based locale handling with `/[locale]/` directory structure
 - Easy-to-use translation hooks with `useTranslations` in server and client components.
 
 Translation files are located in:
+
 ```bash
 content/
   ├── en.json
   ├── fr.json
   └── [other-locales].json
-```  
+```
+
 #### How to add a new language support:
 
 To add a new language, we have to add the language JSON file to the content directory, which is in the root directory, that is our first step.
 
 After that, we have to add the newly added language to the locales array in the navigation.ts file. Below is the content of the navigation.ts file, where we need to add the newly added language to the locales array:
+
 ```bash
 import {defineRouting} from 'next-intl/routing';
 import {createNavigation} from 'next-intl/navigation';
 
 export const routing = defineRouting({
   // A list of all locales that are supported
   locales: ['en', 'fr', 'newLanguage'], // Add the new language code here
- 
+
   // Used when no locale matches
   defaultLocale: 'en'
 });
 
 export const {Link, redirect, usePathname, useRouter, getPathname} =
   createNavigation(routing);
 ```
+
 #### Using Strings from Language Files
 
 To use strings from a language file in both **client and server** components, use the `useTranslations` hook.
@@ -101,6 +112,7 @@ To use strings from a language file in both **client and server** components, us
    ```javascript
    import { useTranslations } from 'next-intl';
    ```
+
 2. **Initialize useTranslations with a section:**
    ```javascript
    const t = useTranslations('Home');
@@ -110,7 +122,38 @@ To use strings from a language file in both **client and server** components, us
    ```javascript
    <h1>{t('welcomeMessage')}</h1>
    ```
-   
+
+## Playwright E2E Testing
+
+NextJsLaunchpad includes Playwright for robust end-to-end testing. This integration provides:
+
+- **Headless and UI Testing**: Run tests in both headless mode for automation and UI mode for debugging.
+- **Cross-Browser Compatibility**: Test on Chromium, Firefox, and WebKit.
+- **API and Component Testing**: Supports API calls and frontend component interactions.
+
+### Running Playwright Tests
+
+To execute Playwright tests, use:
+
+```shell
+npm run playwright
+```
+
+### Playwright Configuration
+
+Test settings are defined in:
+
+```plaintext
+/playwright.config.ts
+```
+
+### Test Files
+
+Playwright tests are located in:
+
+```plaintext
+/__tests__/e2e/
+```
 
 <!-- Project should be public for the above command to work -->
 
@@ -263,4 +306,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

__tests__/.gitkeep

@@ -0,0 +1,14 @@
+import test, { expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://www.creowis.com/');
+  await expect(page).toHaveTitle('CreoWis Technologies Private Limited');
+});
+
+test('should ensure that blog page link navigates correctly', async ({
+  page,
+}) => {
+  await page.goto('https://www.creowis.com/');
+  await page.getByRole('link', { name: 'Blog' }).click();
+  await expect(page.getByRole('heading', { name: 'Blogs' })).toBeVisible();
+});

__tests__/e2e/example.spec.ts

@@ -11,7 +11,8 @@
     "prepare": "husky install",
     "prettier:check": "prettier --ignore-path .gitignore --write \"**/*.+(js|ts|json)\"",
     "lint:check": "eslint --ignore-path .eslintignore --ext .js,.ts .",
-    "lint-prettier": "npm run lint:check && npm run prettier:check"
+    "lint-prettier": "npm run lint:check && npm run prettier:check",
+    "playwright": "npx playwright install && npx playwright install-deps && npx playwright test"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx}": "npm run lint-prettier"
@@ -24,6 +25,7 @@
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
+    "@playwright/test": "^1.50.1",
     "@types/node": "^20.11.19",
     "@types/react": "19.0.7",
     "@types/react-dom": "19.0.3",

package-lock.json

@@ -0,0 +1,41 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './__tests__/e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+});