feat: initial project structure

sand4rt · Jun 14, 2024 · 75c294b · 75c294b
commit 75c294b
Show file tree

Hide file tree

Showing 34 changed files with 3,672 additions and 0 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: [sand4rt]
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,10 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,10 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,26 @@
+name: Deploy
+on:
+  release:
+    types: [created]
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: pnpm/action-setup@v2
+        with:
+          version: '9.x'
+
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+          scope: '@sand4rt'
+
+      - run: pnpm publish --filter eslint-plugin-playwright-ct --access public --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,39 @@
+name: Test
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: pnpm/action-setup@v2
+        with:
+          version: '9.x'
+
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build packages
+        run: pnpm build
+
+      - name: Install Playwright Browsers
+        run: pnpm dlx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: pnpm test
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: ./*/**/playwright-report/
+          retention-days: 30
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*playwright-report
+*.cache
+*test-results
diff --git a/README.md b/README.md
@@ -0,0 +1,26 @@
+# 🎭 ESLint Plugin Playwright component testing
+
+> **Note**
+> This package is work in progress
+
+## Usage
+
+Install the package with PNPM, NPM or Yarn:
+
+```sh
+pnpm add -D eslint-plugin-playwright-ct
+```
+```sh
+npm install -D eslint-plugin-playwright-ct
+```
+```sh
+yarn add -D eslint-plugin-playwright-ct
+```
+
+### [Flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new) _(eslint.config.js)_
+
+TODO
+
+### [Legacy config](https://eslint.org/docs/latest/use/configure/configuration-files) _(.eslintrc)_
+
+TODO
diff --git a/ct-react-vite/.gitignore b/ct-react-vite/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/ct-react-vite/eslint.config.mjs b/ct-react-vite/eslint.config.mjs
@@ -0,0 +1,21 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import { fixupConfigRules } from "@eslint/compat";
+import playwright from "eslint-plugin-playwright-ct";
+
+export default [
+  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
+  pluginJs.configs.all,
+  ...tseslint.configs.recommended,
+  {
+    ...playwright,
+    files: ["tests/**"],
+  },
+  {
+    files: ["**/*.jsx"],
+    languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } },
+  },
+  ...fixupConfigRules(pluginReactConfig),
+];
diff --git a/ct-react-vite/index.html b/ct-react-vite/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/ct-react-vite/package.json b/ct-react-vite/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "ct-react-vite",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "eslint": "eslint ."
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.6.1"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.1.0",
+    "@eslint/js": "^9.5.0",
+    "@playwright/experimental-ct-react": "^1.44.1",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "9.x",
+    "eslint-plugin-react": "^7.34.2",
+    "globals": "^15.4.0",
+    "typescript": "^5.2.2",
+    "typescript-eslint": "^7.13.0",
+    "vite": "^5.2.8"
+  }
+}
diff --git a/ct-react-vite/playwright.config.ts b/ct-react-vite/playwright.config.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineConfig, devices } from '@playwright/experimental-ct-react';
+import { resolve } from 'path';
+
+export default defineConfig({
+  testDir: 'tests',
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI ? 'html' : 'line',
+  use: {
+    trace: 'on-first-retry',
+    ctViteConfig: {
+      build: {
+        assetsInlineLimit: 0,
+      },
+      resolve: {
+        alias: {
+          '@': resolve(__dirname, './src'),
+        }
+      }
+    }
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+});
diff --git a/ct-react-vite/playwright/index.html b/ct-react-vite/playwright/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>
diff --git a/ct-react-vite/playwright/index.tsx b/ct-react-vite/playwright/index.tsx
@@ -0,0 +1 @@
+import '../src/assets/index.css';
diff --git a/ct-react-vite/src/App.tsx b/ct-react-vite/src/App.tsx
@@ -0,0 +1,20 @@
+import { Routes, Route, Link } from 'react-router-dom';
+import logo from './assets/logo.svg';
+import LoginPage from './pages/LoginPage';
+import DashboardPage from './pages/DashboardPage';
+
+export default function App() {
+  return <>
+    <header>
+      <img src={logo} alt="logo" width={125} height={125} />
+      <Link to="/">Login</Link>
+      <Link to="/dashboard">Dashboard</Link>
+    </header>
+    <Routes>
+      <Route path="/">
+        <Route index element={<LoginPage />} />
+        <Route path="dashboard" element={<DashboardPage />} />
+      </Route>
+    </Routes>
+  </>
+}
diff --git a/ct-react-vite/src/assets/favicon.svg b/ct-react-vite/src/assets/favicon.svg
diff --git a/ct-react-vite/src/assets/iconfont.woff2 b/ct-react-vite/src/assets/iconfont.woff2
diff --git a/ct-react-vite/src/assets/index.css b/ct-react-vite/src/assets/index.css
@@ -0,0 +1,29 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #e3e3e3;
+    background-color: #1b1b1d;
+  }
+}
+
+@font-face {
+  font-family: 'pwtest-iconfont';
+  /* See tests/assets/webfont/README.md */
+  src: url('./iconfont.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
diff --git a/ct-react-vite/src/assets/logo.svg b/ct-react-vite/src/assets/logo.svg
diff --git a/ct-react-vite/src/components/Button.tsx b/ct-react-vite/src/components/Button.tsx
@@ -0,0 +1,13 @@
+import { ButtonHTMLAttributes } from 'react';
+
+type ButtonProps = {
+  title: string;
+  onClick?(props: string): void;
+  className?: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
+
+export default function Button({ onClick, title, ...attributes }: ButtonProps) {
+  return <button {...attributes} onClick={() => onClick?.('hello')}>
+    {title}
+  </button>
+}