playwright tests.

olahol · olahol · commit 7a027934ecaa · 2022-10-14T18:29:05.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -1 +1,5 @@
 *.swp
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/
diff --git a/README.md b/README.md
@@ -1,5 +1,9 @@
 # scrollparent.js
 
+[![NPM version][npm-image]][npm-url]
+[![Size][size-image]][size-url]
+[![Download count][downloads-image]][downloads-url]
+
 > A function to get the scrolling parent of an html element.
 
 ## Install
@@ -45,3 +49,10 @@ you should use a `document.scrollingElement` polyfill such as
 ## License
 
 MIT
+
+[npm-image]: https://img.shields.io/npm/v/scrollparent.svg?style=flat-square
+[npm-url]: https://npmjs.org/package/scrollparent
+[downloads-image]: http://img.shields.io/npm/dm/scrollparent.js.svg?style=flat-square
+[downloads-url]: https://npmjs.org/package/scrollparent.js
+[size-image]: https://badge-size.herokuapp.com/olahol/scrollparent.js/master/scrollparent.js?style=flat-square
+[size-url]: https://github.com/olahol/scrollparent.js/blob/master/react-tagsinput.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,5 +18,12 @@
   "bugs": {
     "url": "https://github.com/olahol/scrollparent.js/issues"
   },
-  "homepage": "https://github.com/olahol/scrollparent.js#readme"
+  "homepage": "https://github.com/olahol/scrollparent.js#readme",
+  "devDependencies": {
+    "@playwright/test": "^1.27.1"
+  },
+  "scripts": {
+    "test": "playwright test"
+  },
+  "files": []
 }
diff --git a/playwright.config.js b/playwright.config.js
@@ -0,0 +1,49 @@
+const { devices } = require('@playwright/test');
+
+const config = {
+  testDir: './test',
+  timeout: 30 * 1000,
+  expect: {
+    timeout: 5000
+  },
+  workers: 1,
+  reporter: 'html',
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+
+    {
+      name: 'mobile_chrome',
+      use: {
+        ...devices['Pixel 5'],
+      },
+    },
+
+    {
+      name: 'mobile_safari',
+      use: {
+        ...devices['iPhone 12'],
+      },
+    },
+  ],
+};
+
+module.exports = config;
diff --git a/scrollparent.js b/scrollparent.js
@@ -24,7 +24,7 @@
   };
 
   var scroll = function (node) {
-   return regex.test(overflow(node));
+    return regex.test(overflow(node));
   };
 
   var scrollParent = function (node) {
diff --git a/test/scrollparent.spec.js b/test/scrollparent.spec.js
@@ -0,0 +1,34 @@
+const { resolve } = require('path');
+const { test, expect } = require('@playwright/test');
+
+test('test scrollparent behaviour', async ({ page }) => {
+  const testFile = resolve(__dirname, 'test.html');
+
+  page.on('console', msg => console.log(msg.text()));
+
+  await page.goto(`file://${testFile}`);
+
+  await expect(page).toHaveTitle('scrollparent.js test page');
+
+  await page.evaluate(() => {
+    var top = document.scrollingElement || document.documentElement;
+
+    function equal(a, b, msg) {
+      if (a !== b) {
+        throw new Error(msg || "Page Error");
+      }
+    }
+
+    function byId(id) {
+      return document.getElementById(id);
+    }
+
+    equal(Scrollparent(byId("test1")).className, "scroll");
+
+    equal(Scrollparent(byId("test2")), top);
+    equal(Scrollparent(byId("test3")), top);
+
+    equal(Scrollparent(byId("test4")).className, "scroll-y");
+    equal(Scrollparent(byId("test5")).className, "scroll-x");
+  });
+});
diff --git a/test/test.html b/test/test.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title></title>
+  <title>scrollparent.js test page</title>
   <meta charset="utf-8">
   <style>
     .scroll {
@@ -114,24 +114,6 @@
   </div>
 </div>
 
-<script src="scrollparent.js"></script>
-<script>
-var equal = function (a, b) {
-  console.log((a === b ? "ok" : "not ok") + " " + (++ assertion));
-}
-
-var assertion = 0;
-
-console.log("TAP version 13");
-console.log("1..5");
-
-equal(Scrollparent(document.getElementById("test1")).className, "scroll");
-
-equal(Scrollparent(document.getElementById("test2")), document.scrollingElement || document.documentElement);
-equal(Scrollparent(document.getElementById("test3")), document.scrollingElement || document.documentElement);
-
-equal(Scrollparent(document.getElementById("test4")).className, "scroll-y");
-equal(Scrollparent(document.getElementById("test5")).className, "scroll-x");
-</script>
+<script src="../scrollparent.js"></script>
 </body>
 </html>
