Merge pull request #16 from tkrotoff/update-npm-packages

Update npm packages

Author: tkrotoff

.eslintignore

@@ -6,3 +6,4 @@ node_modules/
 
 build/
 dist/
+coverage/

.eslintrc.js

@@ -6,7 +6,7 @@ const config = {
   parserOptions: {},
   extends: [
     // /!\ Order matters: the next one overrides rules from the previous one
-    'plugin:jest-playwright/recommended',
+    'plugin:playwright/playwright-test',
     'plugin:jest/recommended',
     'plugin:unicorn/recommended',
     'airbnb',
@@ -15,7 +15,7 @@ const config = {
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended'
   ],
-  plugins: ['simple-import-sort', 'react-hooks', 'jest-playwright'],
+  plugins: ['simple-import-sort', 'react-hooks'],
   env: {
     browser: true
   },
@@ -119,6 +119,9 @@ const config = {
     'react/jsx-filename-extension': ['error', { extensions: ['.tsx'] }],
     'react/require-default-props': 'off',
     'react/prop-types': 'off',
+    // FIXME https://github.com/yannickcr/eslint-plugin-react/issues/3114#issuecomment-951725512
+    'react/jsx-no-bind': 'off',
+    'react/function-component-definition': 'off',
 
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'error'

.github/workflows/node.js.yml

@@ -1,4 +1,4 @@
-# https://github.com/actions/starter-workflows/blob/c934669ce246e6d64e54006b714b04199cbe445b/ci/node.js.yml
+# https://github.com/actions/starter-workflows/blob/432e3e3e741760610382c82fb0e909ff700496f7/ci/node.js.yml
 
 name: Node.js CI
 
@@ -9,25 +9,22 @@ jobs:
   build:
     runs-on: ubuntu-latest
 
-    # https://github.com/arjun27/playwright-github-actions
-    container: arjun27/playwright-bionic:0.2.0
-
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{matrix.node-version}}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: ${{matrix.node-version}}
+          cache: 'npm'
       - run: npm ci
+      - run: npx playwright install --with-deps
       - run: npm run build
       - run: npm run npm:install:examples
       - run: npm run build:examples
       - run: npm run lint
       - run: npm run test:coverage
       - run: npm run test:examples
-        env:
-          CI: true

.github/workflows/npm-publish.yml

@@ -1,4 +1,4 @@
-# https://github.com/actions/starter-workflows/blob/c934669ce246e6d64e54006b714b04199cbe445b/ci/npm-publish.yml
+# https://github.com/actions/starter-workflows/blob/432e3e3e741760610382c82fb0e909ff700496f7/ci/npm-publish.yml
 
 name: Node.js Package
 
@@ -9,16 +9,13 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-
-    # https://github.com/arjun27/playwright-github-actions
-    container: arjun27/playwright-bionic:0.2.0
-
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
       - run: npm ci
+      - run: npx playwright install --with-deps
       - run: npm run build
       - run: npm run npm:install:examples
       - run: npm run build:examples
@@ -31,9 +28,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
           registry-url: https://registry.npmjs.org/
       - run: npm ci
       - run: npm publish

.gitignore

@@ -5,5 +5,4 @@ node_modules/
 
 dist/
 coverage/
-examples/package-lock.json
 examples/build/

.husky/.gitignore

@@ -12,5 +12,6 @@ LICENSE
 
 dist/
 build/
+coverage/
 *.gif
 *.png

.prettierignore

@@ -5,14 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <title>Bootstrap example</title>
-
-    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
-    <style>
-      * {
-        /* Force Roboto font so Playwright works on all platforms: Mac, Linux, Windows and Docker */
-        font-family: 'Roboto', sans-serif !important;
-      }
-    </style>
   </head>
 
   <body>

examples/Bootstrap.html

@@ -1,127 +1,108 @@
-import 'jest-playwright-preset';
+/* eslint-disable unicorn/no-await-expression-member, jest/no-done-callback, playwright/missing-playwright-await */
 
+import { expect, test } from '@playwright/test';
 import path from 'path';
 
-const waitForResize = () => page.waitForTimeout(100);
-
-test('resize', async () => {
+test('resize', async ({ page }) => {
   await page.goto(`file:${path.join(__dirname, 'build/Bootstrap.html')}`);
 
   const height = 768;
 
-  const firstPersonChildren = (await page.$('.people > .person:first-child > .wrap-children'))!;
-  const children = await firstPersonChildren.$$(':scope > div');
-  expect(children.length).toEqual(5);
-
-  {
-    await page.setViewportSize({ width: /*1114*/ 1111, height });
-    await waitForResize();
-
-    const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
-    expect(classNames).toEqual([
-      'floating-label mb-3 me-2 flex-fill',
-      'floating-label mb-3 me-2 flex-fill',
-      'floating-label mb-3 me-2',
-      'floating-label mb-3 me-2',
-      'floating-label mb-3 me-2'
-    ]);
-
-    expect(await page.screenshot()).toMatchImageSnapshot();
-  }
-
-  {
-    await page.setViewportSize({ width: /*1113*/ 1110, height });
-    await waitForResize();
-
-    const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
-    expect(classNames).toEqual([
-      'floating-label mb-3 me-2 flex-fill',
-      'floating-label mb-3 me-2 flex-fill',
-      'floating-label mb-3 me-2',
-      'floating-label mb-3 me-2 next-is-wrapped',
-      'floating-label mb-3 me-2'
-    ]);
-
-    expect(await page.screenshot()).toMatchImageSnapshot();
-  }
-
-  {
-    await page.setViewportSize({ width: /*814*/ 813, height });
-    await waitForResize();
-
-    const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
-    expect(classNames).toEqual([
-      'floating-label mb-3 me-2 flex-fill',
-      'floating-label mb-3 me-2 flex-fill',
-      'floating-label mb-3 me-2 next-is-wrapped',
-      'floating-label mb-3 me-2',
-      'floating-label mb-3 me-2'
-    ]);
-
-    expect(await page.screenshot()).toMatchImageSnapshot();
-  }
-
-  {
-    await page.setViewportSize({ width: /*610*/ 609, height });
-    await waitForResize();
-
-    const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
-    expect(classNames).toEqual([
-      'floating-label mb-3 me-2 flex-fill',
-      'floating-label mb-3 me-2 flex-fill next-is-wrapped',
-      'floating-label mb-3 me-2',
-      'floating-label mb-3 me-2 next-is-wrapped',
-      'floating-label mb-3 me-2'
-    ]);
-
-    expect(await page.screenshot()).toMatchImageSnapshot();
-  }
-
-  {
-    await page.setViewportSize({ width: /*485*/ 485, height });
-    await waitForResize();
-
-    const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
-    expect(classNames).toEqual([
-      'floating-label mb-3 me-2 flex-fill next-is-wrapped',
-      'floating-label mb-3 me-2 flex-fill',
-      'floating-label mb-3 me-2 next-is-wrapped',
-      'floating-label mb-3 me-2 next-is-wrapped',
-      'floating-label mb-3 me-2'
-    ]);
-
-    expect(await page.screenshot()).toMatchImageSnapshot();
-  }
-
-  {
-    await page.setViewportSize({ width: /*375*/ 374, height });
-    await waitForResize();
-
-    const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
-    expect(classNames).toEqual([
-      'floating-label mb-3 me-2 flex-fill next-is-wrapped',
-      'floating-label mb-3 me-2 flex-fill next-is-wrapped',
-      'floating-label mb-3 me-2',
-      'floating-label mb-3 me-2 next-is-wrapped',
-      'floating-label mb-3 me-2'
-    ]);
-
-    expect(await page.screenshot()).toMatchImageSnapshot();
-  }
-
-  {
-    await page.setViewportSize({ width: /*344*/ 341, height });
-    await waitForResize();
-
-    const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
-    expect(classNames).toEqual([
-      'floating-label mb-3 me-2 flex-fill next-is-wrapped',
-      'floating-label mb-3 me-2 flex-fill next-is-wrapped',
-      'floating-label mb-3 me-2 next-is-wrapped',
-      'floating-label mb-3 me-2 next-is-wrapped',
-      'floating-label mb-3 me-2'
-    ]);
-
-    expect(await page.screenshot()).toMatchImageSnapshot();
-  }
+  const firstBeatlesChildren = page
+    .locator('.people > .person:first-child > .wrap-children')
+    .first();
+  await expect(firstBeatlesChildren).toHaveCount(1);
+  const inputs = firstBeatlesChildren.locator('> div');
+  await expect(inputs).toHaveCount(5);
+
+  // 1
+  await page.setViewportSize({ width: 1068, height });
+
+  expect(await page.screenshot()).toMatchSnapshot('bootstrap-1.png');
+
+  await expect(inputs).toHaveClass([
+    'floating-label mb-3 me-2 flex-fill',
+    'floating-label mb-3 me-2 flex-fill',
+    'floating-label mb-3 me-2',
+    'floating-label mb-3 me-2',
+    'floating-label mb-3 me-2'
+  ]);
+
+  // 2
+  await page.setViewportSize({ width: 1067, height });
+
+  expect(await page.screenshot()).toMatchSnapshot('bootstrap-2.png');
+
+  await expect(inputs).toHaveClass([
+    'floating-label mb-3 me-2 flex-fill',
+    'floating-label mb-3 me-2 flex-fill',
+    'floating-label mb-3 me-2',
+    'floating-label mb-3 me-2 next-is-wrapped',
+    'floating-label mb-3 me-2'
+  ]);
+
+  // 3
+  await page.setViewportSize({ width: 761, height });
+
+  expect(await page.screenshot()).toMatchSnapshot('bootstrap-3.png');
+
+  await expect(inputs).toHaveClass([
+    'floating-label mb-3 me-2 flex-fill',
+    'floating-label mb-3 me-2 flex-fill',
+    'floating-label mb-3 me-2 next-is-wrapped',
+    'floating-label mb-3 me-2',
+    'floating-label mb-3 me-2'
+  ]);
+
+  // 4
+  await page.setViewportSize({ width: 559, height });
+
+  expect(await page.screenshot()).toMatchSnapshot('bootstrap-4.png');
+
+  await expect(inputs).toHaveClass([
+    'floating-label mb-3 me-2 flex-fill',
+    'floating-label mb-3 me-2 flex-fill next-is-wrapped',
+    'floating-label mb-3 me-2',
+    'floating-label mb-3 me-2 next-is-wrapped',
+    'floating-label mb-3 me-2'
+  ]);
+
+  // 5
+  await page.setViewportSize({ width: 433, height });
+
+  expect(await page.screenshot()).toMatchSnapshot('bootstrap-5.png');
+
+  await expect(inputs).toHaveClass([
+    'floating-label mb-3 me-2 flex-fill next-is-wrapped',
+    'floating-label mb-3 me-2 flex-fill',
+    'floating-label mb-3 me-2 next-is-wrapped',
+    'floating-label mb-3 me-2 next-is-wrapped',
+    'floating-label mb-3 me-2'
+  ]);
+
+  // 6
+  await page.setViewportSize({ width: 350, height });
+
+  expect(await page.screenshot()).toMatchSnapshot('bootstrap-6.png');
+
+  await expect(inputs).toHaveClass([
+    'floating-label mb-3 me-2 flex-fill next-is-wrapped',
+    'floating-label mb-3 me-2 flex-fill next-is-wrapped',
+    'floating-label mb-3 me-2 next-is-wrapped',
+    'floating-label mb-3 me-2 next-is-wrapped',
+    'floating-label mb-3 me-2'
+  ]);
+
+  // 7
+  await page.setViewportSize({ width: 343, height });
+
+  expect(await page.screenshot()).toMatchSnapshot('bootstrap-7.png');
+
+  await expect(inputs).toHaveClass([
+    'floating-label mb-3 me-2 flex-fill next-is-wrapped',
+    'floating-label mb-3 me-2 flex-fill next-is-wrapped',
+    'floating-label mb-3 me-2 next-is-wrapped',
+    'floating-label mb-3 me-2 next-is-wrapped',
+    'floating-label mb-3 me-2'
+  ]);
 });