Staging

.github/workflows/e2e-ci.yml

@@ -0,0 +1,15 @@
+name: "Tests: E2E"
+on: [pull_request]
+jobs:
+  tests_e2e:
+    name: Run end-to-end tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - name: install dependencies
+        run: npm ci
+      - name: install playwright browsers
+        run: npx playwright install --with-deps
+      - name: npm run test:e2e
+        run: npm run test:e2e

.gitignore

@@ -32,3 +32,13 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+## IDE's
+.idea/
+
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets

README.md

@@ -58,7 +58,11 @@ You can add / update your personal profile by creating a Pull Request to this re
    and anything that you are passionate about. Are you an architect? Do you speak Chinese? Studied amusement park
    and roller coaster engineering? This is the place to brag!
 
-2. By default, we'll use your GitHub photo. There's currently an [open issue](https://github.com/urish/pull-request-community/issues/78) to allow custom profile photos.
+2. By default, we'll use your GitHub photo. If you don't have a GitHub profile photo,
+   or want to use a different one, add it under [public/images/people](public/images/people) in jpeg format.
+   Use your GitHub username for the image, e.g. `MichalPorag.jpg`.
+
+   Then, add `"customImage": true` to your profile JSON that you created in the previous step.
 
 3. Create a pull request with new files.
 

components/description/Description.tsx

@@ -6,7 +6,9 @@ const Description = ({ descriptionOutput, descriptionHeight }) => {
   const myRef = useRef(null);
   const [height, setHeight] = useState(0);
 
-  descriptionHeight(height);
+  useEffect(() => {
+    descriptionHeight(height);
+  }, [descriptionHeight, height]);
 
   useEffect(() => {
     const handleResize = () => {

components/label/label.module.scss

@@ -11,6 +11,9 @@
   &[role="Admin"] {
     background: cornflowerblue;
   }
+  &[role="Former admin"] {
+    background: cadetblue;
+  }
 
   @media screen and (max-width: 600px) {
     font-size: 10px;

e2e/home.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('page should have title of "קהילת Pull Request"', async ({page}) => {
+    await page.goto('http://localhost:3000/')
+    const title = await page.title()
+    expect(title).toBe('קהילת Pull Request')
+});
+

package.json

@@ -6,9 +6,10 @@
     "dev": "npm run open-browser && next dev",
     "open-browser": "node ./scripts/open-browser.js",
     "build": "next build",
-    "start": "next start",
+    "start": "npm run build && next start",
     "prepare": "husky install",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@mdi/js": "^5.6.55",
@@ -22,6 +23,7 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
+    "@playwright/test": "^1.22.2",
     "@types/node": "^14.11.2",
     "@types/react": "^16.9.50",
     "eslint": "^7.32.0",

pages/index.tsx

@@ -30,5 +30,6 @@ export const getStaticProps: GetStaticProps = async () => {
     props: {
       people: randomShuffle(getPeople()),
     },
+    revalidate: true,
   };
 };

playwright.config.ts

@@ -0,0 +1,10 @@
+import { PlaywrightTestConfig } from "@playwright/test";
+
+const config: PlaywrightTestConfig = {
+    webServer: {
+        command: "npm run start",
+        url: "http://localhost:3000",
+    }
+};
+
+export default config;