🚨(i18n) add linter to i18n package

We need to add a linter to the i18n package, we are mainly
interested by the jest linting rules so we create
a jest eslint config pluggable our other configs and to the
i18n eslint config.
This commit is contained in:
Anthony LC
2024-01-24 15:27:11 +01:00
committed by Anthony LC
parent 801cb98e15
commit 8043d12315
20 changed files with 272 additions and 189 deletions

View File

@@ -1,29 +1,29 @@
import { expect, test } from "@playwright/test";
import { expect, test } from '@playwright/test';
import { keyCloakSignIn } from "./common";
import { keyCloakSignIn } from './common';
test.beforeEach(async ({ page }) => {
await page.goto("/");
await page.goto('/');
await keyCloakSignIn(page);
});
test.describe("App", () => {
test("should display the main elements", async ({ page }) => {
await expect(page.locator("header").first()).toContainText("Desk");
await expect(page.getByLabel("Team name")).toBeVisible();
test.describe('App', () => {
test('should display the main elements', async ({ page }) => {
await expect(page.locator('header').first()).toContainText('Desk');
await expect(page.getByLabel('Team name')).toBeVisible();
});
test("creates 2 teams and displayed them", async ({ page }) => {
await page.getByLabel("Team name").fill("My new team");
test('creates 2 teams and displayed them', async ({ page }) => {
await page.getByLabel('Team name').fill('My new team');
await page.click('button:has-text("Create Team")');
await page.getByLabel("Team name").fill("My second new team");
await page.getByLabel('Team name').fill('My second new team');
await page.click('button:has-text("Create Team")');
await expect(
page.locator("li").getByText("My new team").first(),
page.locator('li').getByText('My new team').first(),
).toBeVisible();
await expect(
page.locator("li").getByText("My second new team").first(),
page.locator('li').getByText('My second new team').first(),
).toBeVisible();
});
});

View File

@@ -1,13 +1,13 @@
import { Page } from "@playwright/test";
import { Page } from '@playwright/test';
export const keyCloakSignIn = async (page: Page) => {
const title = await page.locator("h1").first().textContent({
const title = await page.locator('h1').first().textContent({
timeout: 5000,
});
if (title?.includes("Sign in to your account")) {
await page.getByRole("textbox", { name: "username" }).fill("user-e2e");
await page.getByRole("textbox", { name: "password" }).fill("password-e2e");
if (title?.includes('Sign in to your account')) {
await page.getByRole('textbox', { name: 'username' }).fill('user-e2e');
await page.getByRole('textbox', { name: 'password' }).fill('password-e2e');
await page.click('input[type="submit"]');
}

View File

@@ -1,40 +1,40 @@
import { expect, test } from "@playwright/test";
import { expect, test } from '@playwright/test';
import { keyCloakSignIn } from "./common";
import { keyCloakSignIn } from './common';
test.beforeEach(async ({ page }) => {
await page.goto("/");
await page.goto('/');
await keyCloakSignIn(page);
});
test.describe("Header", () => {
test("checks all the elements are visible", async ({ page }) => {
const header = page.locator("header").first();
test.describe('Header', () => {
test('checks all the elements are visible', async ({ page }) => {
const header = page.locator('header').first();
await expect(header.getByAltText("Marianne Logo")).toBeVisible();
await expect(header.getByAltText('Marianne Logo')).toBeVisible();
await expect(
header.getByAltText("Freedom Equality Fraternity Logo"),
header.getByAltText('Freedom Equality Fraternity Logo'),
).toBeVisible();
await expect(header.getByAltText("Desk Logo")).toBeVisible();
await expect(header.locator("h2").getByText("Desk")).toHaveCSS(
"color",
"rgb(0, 0, 145)",
await expect(header.getByAltText('Desk Logo')).toBeVisible();
await expect(header.locator('h2').getByText('Desk')).toHaveCSS(
'color',
'rgb(0, 0, 145)',
);
await expect(header.locator("h2").getByText("Desk")).toHaveCSS(
"font-family",
"marianne",
await expect(header.locator('h2').getByText('Desk')).toHaveCSS(
'font-family',
'marianne',
);
await expect(
header.getByRole("button", { name: "Access to FAQ" }),
header.getByRole('button', { name: 'Access to FAQ' }),
).toBeVisible();
await expect(header.getByAltText("FAQ Icon")).toBeVisible();
await expect(header.getByText("FAQ")).toBeVisible();
await expect(header.getByAltText('FAQ Icon')).toBeVisible();
await expect(header.getByText('FAQ')).toBeVisible();
await expect(header.getByAltText("Cells icon")).toBeVisible();
await expect(header.getByAltText('Cells icon')).toBeVisible();
await expect(header.getByAltText("Language Icon")).toBeVisible();
await expect(header.getByAltText('Language Icon')).toBeVisible();
});
});

View File

@@ -1,24 +1,24 @@
import { expect, test } from "@playwright/test";
import { expect, test } from '@playwright/test';
import { keyCloakSignIn } from "./common";
import { keyCloakSignIn } from './common';
test.beforeEach(async ({ page }) => {
await page.goto("/");
await page.goto('/');
await keyCloakSignIn(page);
});
test.describe("Language", () => {
test("checks translation library works", async ({ page }) => {
test.describe('Language', () => {
test('checks translation library works', async ({ page }) => {
await expect(
page.locator("h1").first().getByText("Bienvenue sur Desk !"),
page.locator('h1').first().getByText('Bienvenue sur Desk !'),
).toBeVisible();
});
test("checks the language picker", async ({ page }) => {
const header = page.locator("header").first();
test('checks the language picker', async ({ page }) => {
const header = page.locator('header').first();
await header.getByRole("combobox").getByText("FR").click();
await header.getByRole("option", { name: "Language Icon EN" }).click();
await expect(header.getByRole("combobox").getByText("EN")).toBeVisible();
await header.getByRole('combobox').getByText('FR').click();
await header.getByRole('option', { name: 'Language Icon EN' }).click();
await expect(header.getByRole('combobox').getByText('EN')).toBeVisible();
});
});

View File

@@ -1,4 +1,4 @@
import { defineConfig, devices } from "@playwright/test";
import { defineConfig, devices } from '@playwright/test';
const PORT = process.env.PORT || 3200;
@@ -10,8 +10,8 @@ const baseURL = `http://localhost:${PORT}`;
export default defineConfig({
// Timeout per test
timeout: 30 * 1000,
testDir: "./__tests__",
outputDir: "./test-results",
testDir: './__tests__',
outputDir: './test-results',
/* Run tests in files in parallel */
fullyParallel: true,
@@ -22,18 +22,18 @@ export default defineConfig({
/* 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", { outputFolder: "./report" }]],
reporter: [['html', { outputFolder: './report' }]],
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
baseURL: baseURL,
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: "on-first-retry",
trace: 'on-first-retry',
},
webServer: {
command: `cd ../.. && yarn app:${
process.env.CI ? "start -p " : "dev --port "
process.env.CI ? 'start -p ' : 'dev --port '
} ${PORT}`,
url: baseURL,
timeout: 120 * 1000,
@@ -43,18 +43,18 @@ export default defineConfig({
/* Configure projects for major browsers */
projects: [
{
name: "chromium",
use: { ...devices["Desktop Chrome"] },
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: "firefox",
use: { ...devices["Desktop Firefox"] },
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: "webkit",
use: { ...devices["Desktop Safari"] },
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
],
});

View File

@@ -14,6 +14,6 @@
"jsx": "preserve",
"incremental": true,
},
"include": ["**/*.ts", ],
"include": ["**/*.ts"],
"exclude": ["node_modules"]
}

View File

@@ -18,7 +18,7 @@
"app:test": "yarn APP_DESK run test",
"ci:build": "yarn APP_DESK run build:ci",
"e2e:test": "yarn APP_E2E run test",
"lint": "yarn APP_DESK run lint && yarn APP_E2E run lint",
"lint": "yarn APP_DESK run lint && yarn APP_E2E run lint && yarn workspace eslint-config-people run lint && yarn I18N run lint",
"i18n:extract": "yarn I18N run extract-translation",
"i18n:deploy": "yarn I18N run format-deploy",
"i18n:test": "yarn I18N run test"

View File

@@ -0,0 +1,20 @@
const common = require('./common');
module.exports = {
root: true,
settings: {
react: {
version: 'detect',
},
},
extends: [
'plugin:prettier/recommended',
'plugin:import/recommended',
'plugin:react/recommended',
],
rules: common.globalRules,
parserOptions: {
sourceType: 'module',
ecmaVersion: 'latest',
},
};

View File

@@ -1,58 +1,66 @@
const eslintTS = {
files: ["*.ts", "*.tsx"],
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
],
parser: "@typescript-eslint/parser", // Specifies the ESLint parser
parserOptions: {
tsconfigRootDir: __dirname,
project: ["./tsconfig.json"],
},
rules: {
"@typescript-eslint/no-explicit-any": "error",
"@typescript-eslint/no-non-null-assertion": "error",
"sort-imports": [
"error",
{
ignoreDeclarationSort: true,
},
const eslintTS = [
{
files: ['*.ts', '*.tsx'],
extends: [
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
],
},
};
const globalRules = {
"block-scoped-var": "error",
curly: ["error", "all"],
"import/no-duplicates": ["error", { considerQueryString: false }],
"import/order": [
"error",
{
alphabetize: {
order: "asc",
},
groups: ["builtin", "external", "internal", "parent", "sibling", "index"],
pathGroups: [
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
},
rules: {
'@typescript-eslint/no-explicit-any': 'error',
'@typescript-eslint/no-non-null-assertion': 'error',
'sort-imports': [
'error',
{
pattern: "@/**",
group: "internal",
ignoreDeclarationSort: true,
},
],
pathGroupsExcludedImportTypes: ["builtin"],
"newlines-between": "always",
},
},
{
files: ['*.d.ts'],
rules: {
'no-unused-vars': 'off',
},
},
];
const globalRules = {
'block-scoped-var': 'error',
curly: ['error', 'all'],
'import/no-duplicates': ['error', { considerQueryString: false }],
'import/order': [
'error',
{
alphabetize: {
order: 'asc',
},
groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
pathGroups: [
{
pattern: '@/**',
group: 'internal',
},
],
pathGroupsExcludedImportTypes: ['builtin'],
'newlines-between': 'always',
},
],
"no-alert": "error",
"no-unused-vars": [
"error",
{ varsIgnorePattern: "^_", argsIgnorePattern: "^_" },
'no-alert': 'error',
'no-unused-vars': [
'error',
{ varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
],
"react/jsx-curly-brace-presence": [
"error",
{ props: "never", children: "never", propElementValues: "always" },
'react/jsx-curly-brace-presence': [
'error',
{ props: 'never', children: 'never', propElementValues: 'always' },
],
"sort-imports": [
"error",
'sort-imports': [
'error',
{
ignoreDeclarationSort: true,
},

View File

@@ -0,0 +1,49 @@
const common = require('./common');
module.exports = {
extends: ['plugin:prettier/recommended', 'plugin:react/recommended'],
rules: common.globalRules,
settings: {
react: {
version: 'detect',
},
},
overrides: [
...common.eslintTS,
{
files: ['*.spec.*', '*.test.*', '**/__mock__/**/*'],
plugins: ['jest'],
extends: ['plugin:jest/recommended', 'plugin:testing-library/react'],
rules: {
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-unsafe-argument': 'off',
'@typescript-eslint/no-unsafe-assignment': 'off',
'@typescript-eslint/no-unsafe-call': 'off',
'@typescript-eslint/no-unsafe-member-access': 'off',
'@typescript-eslint/no-unsafe-return': 'off',
'testing-library/no-await-sync-events': [
'error',
{ eventModules: ['fire-event'] },
],
'testing-library/await-async-events': [
'error',
{
eventModule: 'userEvent',
},
],
'testing-library/no-manual-cleanup': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{ varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
],
'react/display-name': 0,
'jest/expect-expect': 'error',
'@typescript-eslint/unbound-method': 'off',
'jest/unbound-method': 'error',
},
},
],
};

View File

@@ -1,65 +1,29 @@
const common = require("./common");
const common = require('./common');
module.exports = {
extends: [
"next",
"plugin:prettier/recommended",
"plugin:@tanstack/eslint-plugin-query/recommended",
"plugin:jsx-a11y/recommended",
'people/jest',
'next',
'plugin:prettier/recommended',
'plugin:@tanstack/eslint-plugin-query/recommended',
'plugin:jsx-a11y/recommended',
],
settings: {
"jsx-a11y": {
polymorphicPropName: "as",
'jsx-a11y': {
polymorphicPropName: 'as',
components: {
Input: "input",
Button: "button",
Box: "div",
Text: "span",
Select: "select",
Input: 'input',
Button: 'button',
Box: 'div',
Text: 'span',
Select: 'select',
},
},
},
rules: {
...common.globalRules,
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "error",
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'error',
},
overrides: [
common.eslintTS,
{
files: ["*.spec.*", "*.test.*", "**/__mock__/**/*"],
plugins: ["jest"],
extends: ["plugin:jest/recommended", "plugin:testing-library/react"],
rules: {
"@typescript-eslint/ban-types": "off",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-unsafe-argument": "off",
"@typescript-eslint/no-unsafe-assignment": "off",
"@typescript-eslint/no-unsafe-call": "off",
"@typescript-eslint/no-unsafe-member-access": "off",
"@typescript-eslint/no-unsafe-return": "off",
"testing-library/no-await-sync-events": [
"error",
{ eventModules: ["fire-event"] },
],
"testing-library/await-async-events": [
"error",
{
eventModule: "userEvent",
},
],
"testing-library/no-manual-cleanup": "off",
"@typescript-eslint/no-unused-vars": [
"error",
{ varsIgnorePattern: "^_", argsIgnorePattern: "^_" },
],
"react/display-name": 0,
"jest/expect-expect": "error",
"@typescript-eslint/unbound-method": "off",
"jest/unbound-method": "error",
},
},
],
overrides: common.eslintTS,
};

View File

@@ -2,17 +2,22 @@
"name": "eslint-config-people",
"version": "0.1.0",
"license": "MIT",
"scripts": {
"lint": "eslint --ext .js ."
},
"dependencies": {
"@next/eslint-plugin-next": "14.0.4",
"@tanstack/eslint-plugin-query": "5.18.1",
"@typescript-eslint/eslint-plugin": "6.20.0",
"eslint": "8.56.0",
"eslint-config-next": "14.1.0",
"eslint-config-prettier": "9.1.0",
"eslint-plugin-import": "2.29.1",
"eslint-plugin-jest": "27.6.3",
"eslint-plugin-jsx-a11y": "6.8.0",
"eslint-plugin-playwright": "0.22.2",
"eslint-plugin-prettier": "5.1.3",
"eslint-plugin-testing-library": "6.2.0",
"@next/eslint-plugin-next": "14.1.0",
"eslint-plugin-playwright": "0.22.2"
"eslint-plugin-react": "7.33.2",
"eslint-plugin-testing-library": "6.2.0"
}
}

View File

@@ -1,19 +1,24 @@
const common = require("./common");
const common = require('./common');
module.exports = {
extends: ["next", "plugin:prettier/recommended"],
parserOptions: {
babelOptions: {
presets: [require.resolve("next/babel")],
extends: ['next', 'plugin:prettier/recommended'],
settings: {
react: {
version: 'detect',
},
},
rules: common.globalRules,
parserOptions: {
babelOptions: {
presets: [require.resolve('next/babel')],
},
},
rules: { ...common.globalRules, '@next/next/no-html-link-for-pages': 'off' },
overrides: [
common.eslintTS,
...common.eslintTS,
{
files: ["*.spec.*", "*.test.*", "**/__mock__/**/*"],
extends: ["plugin:playwright/recommended"],
plugins: ["playwright"],
files: ['*.spec.*', '*.test.*', '**/__mock__/**/*'],
extends: ['plugin:playwright/recommended'],
plugins: ['playwright'],
},
],
};

View File

@@ -0,0 +1,10 @@
module.exports = {
root: true,
extends: ['people/jest', 'plugin:import/recommended'],
parserOptions: {
sourceType: 'module',
ecmaVersion: 'latest',
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
},
};

View File

@@ -1,15 +1,15 @@
import fs from "fs";
import path from "path";
import fs from 'fs';
import path from 'path';
import { hideBin } from "yargs/helpers";
import yargs from "yargs/yargs";
import { hideBin } from 'yargs/helpers';
import yargs from 'yargs/yargs';
// Get our args
const argv = yargs(hideBin(process.argv)).argv;
const { app, output } = argv;
const folderPath = "./locales/" + app;
const namefile = "translations.json";
const folderPath = './locales/' + app;
const namefile = 'translations.json';
const jsonI18n = {};
// Fetch the files in the locales folder
@@ -31,7 +31,7 @@ fs.readdirSync(folderPath).map((language) => {
throw new Error(`File ${pathTranslateFile} not found!`);
}
const json = JSON.parse(fs.readFileSync(pathTranslateFile, "utf8"));
const json = JSON.parse(fs.readFileSync(pathTranslateFile, 'utf8'));
// Transform the json file to the format expected by i18next
const jsonKeyMessage = {};
@@ -48,6 +48,6 @@ if (!Object.keys(jsonI18n).length) {
}
// Write the file to the output
fs.writeFileSync(output, JSON.stringify(jsonI18n), "utf8");
fs.writeFileSync(output, JSON.stringify(jsonI18n), 'utf8');
console.log(`${app} translations deployed!`);

View File

@@ -1,7 +1,7 @@
const config = {
customValueTemplate: {
message: "${key}",
description: "${description}",
message: '${key}',
description: '${description}',
},
keepRemoved: true,
};

View File

@@ -1,7 +1,7 @@
export default {
rootDir: "./",
testEnvironment: "node",
rootDir: './',
testEnvironment: 'node',
transform: {
"^.+\\.(ts)$": "ts-jest",
'^.+\\.(ts)$': 'ts-jest',
},
};

View File

@@ -7,11 +7,14 @@
"extract-translation:desk": "yarn i18next ../../apps/desk/**/*.{ts,tsx} -c ./i18next-parser.config.mjs -o ./locales/desk/translations-crowdin.json",
"format-deploy": "yarn format-deploy:desk",
"format-deploy:desk": "node ./format-deploy.mjs --app=desk --output=../../apps/desk/src/i18n/translations.json",
"lint": "eslint --ext .js,.ts,.mjs .",
"test": "jest"
},
"dependencies": {
"@types/jest": "29.5.11",
"@types/node": "20.11.6",
"eslint-config-people": "*",
"eslint-plugin-import": "2.29.1",
"i18next-parser": "8.8.0",
"jest": "29.7.0",
"ts-jest": "29.1.2",

View File

@@ -881,6 +881,13 @@
resolved "https://registry.yarnpkg.com/@next/env/-/env-14.1.0.tgz#43d92ebb53bc0ae43dcc64fb4d418f8f17d7a341"
integrity sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw==
"@next/eslint-plugin-next@14.0.4":
version "14.0.4"
resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.0.4.tgz#474fd88d92209270021186043513fbdc4203f5ec"
integrity sha512-U3qMNHmEZoVmHA0j/57nRfi3AscXNvkOnxDmle/69Jz/G0o/gWjXTDdlgILZdrxQ0Lw/jv2mPW8PGy0EGIHXhQ==
dependencies:
glob "7.1.7"
"@next/eslint-plugin-next@14.1.0":
version "14.1.0"
resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.1.0.tgz#29b041233fac7417e22eefa4146432d5cd910820"
@@ -3885,7 +3892,7 @@ eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0:
dependencies:
debug "^3.2.7"
eslint-plugin-import@^2.28.1:
eslint-plugin-import@2.29.1, eslint-plugin-import@^2.28.1:
version "2.29.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643"
integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==
@@ -3957,7 +3964,7 @@ eslint-plugin-prettier@5.1.3:
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
eslint-plugin-react@^7.33.2:
eslint-plugin-react@7.33.2, eslint-plugin-react@^7.33.2:
version "7.33.2"
resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz#69ee09443ffc583927eafe86ffebb470ee737608"
integrity sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==
@@ -4480,6 +4487,18 @@ glob@10.3.10, glob@^10.3.7:
minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
path-scurry "^1.10.1"
glob@7.1.7:
version "7.1.7"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
dependencies:
fs.realpath "^1.0.0"
inflight "^1.0.4"
inherits "2"
minimatch "^3.0.4"
once "^1.3.0"
path-is-absolute "^1.0.0"
glob@^7.1.1, glob@^7.1.3, glob@^7.1.4:
version "7.2.3"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"