Merge pull request #1

Template transfert

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -0,0 +1,55 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -1 +1,2 @@
-# WebsiteNextJS
+# WebsiteNextJS
+

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub'

__mocks__/nextFontMock.js

@@ -0,0 +1,12 @@
+module.exports = new Proxy(
+    {},
+    {
+        get: function getter() {
+            return () => ({
+                className: 'className',
+                variable: 'variable',
+                style: {fontFamily: 'fontFamily'},
+            })
+        },
+    }
+)

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {}

__tests__/example.spec.ts

@@ -0,0 +1,18 @@
+import {test, expect} from '@playwright/test';
+
+test('has title', async ({page}) => {
+    await page.goto('https://playwright.dev/');
+
+    // Expect a title "to contain" a substring.
+    await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({page}) => {
+    await page.goto('https://playwright.dev/');
+
+    // Click the get started link.
+    await page.getByRole('link', {name: 'Get started'}).click();
+
+    // Expects page to have a heading with the name of Installation.
+    await expect(page.getByRole('heading', {name: 'Installation'})).toBeVisible();
+});

__tests__/index.test.js

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom'
+import {render, screen} from '@testing-library/react'
+import Home from '../pages/index'
+
+describe('Home', () => {
+    it('renders a heading', () => {
+        render(<Home/>)
+
+        const heading = screen.getByRole('heading', {level: 1})
+
+        expect(heading).toBeInTheDocument()
+    })
+})

__tests__/snapshot.js

@@ -0,0 +1,7 @@
+import {render} from '@testing-library/react'
+import Home from '../pages/index'
+
+it('renders homepage unchanged', () => {
+    const {container} = render(<Home/>)
+    expect(container).toMatchSnapshot()
+})

app/[locale]/client.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import {useI18n} from '../../locales/client';
+
+export default function Client() {
+    const t = useI18n();
+
+    return <p>From client: {t('hello')}</p>;
+}

app/[locale]/client/layout.tsx

@@ -0,0 +1,6 @@
+import type {ReactNode} from 'react';
+import {Provider} from '../provider';
+
+export default function Layout({params: {locale}, children}: { params: { locale: string }; children: ReactNode }) {
+    return <Provider locale={locale}>{children}</Provider>;
+}

app/[locale]/client/page.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import {useI18n, useScopedI18n, useChangeLocale, useCurrentLocale} from '../../../locales/client';
+
+export default function Client() {
+    const t = useI18n();
+    const changeLocale = useChangeLocale();
+    const t2 = useScopedI18n('scope.more');
+    const locale = useCurrentLocale();
+
+    return (
+        <div>
+            <h1>CSR</h1>
+            <p>
+                Current locale:
+                <span>{locale}</span>
+            </p>
+            <p>Hello: {t('hello')}</p>
+            <p>
+                Hello:{' '}
+                {t('welcome', {
+                    name: 'John',
+                })}
+            </p>
+            <p>
+                Hello (with React components):{' '}
+                {t('welcome', {
+                    name: <strong>John</strong>,
+                })}
+            </p>
+            <p>
+                Hello:{' '}
+                {t('about.you', {
+                    age: '23',
+                    name: 'Doe',
+                })}
+            </p>
+            <p>
+                Hello (with React components):{' '}
+                {t('about.you', {
+                    age: <strong>23</strong>,
+                    name: 'Doe',
+                })}
+            </p>
+            <p>{t2('test')}</p>
+            <p>
+                {t2('param', {
+                    param: 'test',
+                })}
+            </p>
+            <p>
+                {t2('param', {
+                    param: <strong>test</strong>,
+                })}
+            </p>
+            <p>{t2('and.more.test')}</p>
+            <p>
+                {t('cows', {
+                    count: 1,
+                })}
+            </p>
+            <p>
+                {t('cows', {
+                    count: 2,
+                })}
+            </p>
+            <p>
+                {t2('stars', {
+                    count: 1,
+                })}
+            </p>
+            <p>
+                {t2('stars', {
+                    count: 2,
+                })}
+            </p>
+            <button type="button" onClick={() => changeLocale('en')}>
+                EN
+            </button>
+            <button type="button" onClick={() => changeLocale('fr')}>
+                FR
+            </button>
+        </div>
+    );
+}