A little spring cleaning...

test/e2e/test.html → index.html

@@ -5,7 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>CodeFlask Test Page</title>
-  <script src="codeflask.min.js"></script>
   <style>
     body {
       font-family: Arial;
@@ -32,8 +31,10 @@ <h1 id="header1">Testing below:</h1>
     Hey("Jude");
     Hey("Don't make it bad.");
 }</div>
-  <script>
-    const flask = new CodeFlask('.test', {
+  <script type="module">
+    import CodeFlask from "./src/codeflask"
+    window.CodeFlask = CodeFlask   // this is for the tests
+    window.flask = new CodeFlask('.test', {
       language: 'js',
       lineNumbers: true,
       areaId: 'thing1',

package.json

@@ -12,35 +12,30 @@
     "README.md",
     "LICENSE"
   ],
-  "scripts": {
+  "was_scripts": {
     "build": "rollup -c",
     "dev": "serve build & rollup -c -w",
     "start": "serve public",
     "pretest": "npm run build",
     "test": "wdio test/wdio.conf.js",
     "prepublishOnly": "npm install && npm run build"
   },
-  "dependencies": {
-    "@types/prismjs": "^1.9.1",
-    "prismjs": "^1.14.0"
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "playwright test"
   },
   "devDependencies": {
-    "@wdio/cli": "^6.1.15",
-    "@wdio/local-runner": "^6.1.14",
-    "@wdio/mocha-framework": "^6.1.14",
-    "@wdio/spec-reporter": "^6.1.14",
-    "@wdio/sync": "^6.1.14",
-    "chai": "^4.1.2",
-    "chromedriver": "^83.0.0",
-    "micro": "^9.3.0",
-    "mocha": "^5.1.1",
-    "rollup": "^0.58.1",
-    "rollup-plugin-buble": "^0.19.2",
-    "rollup-plugin-commonjs": "^9.1.0",
-    "rollup-plugin-node-resolve": "^3.0.3",
-    "rollup-plugin-uglify": "^3.0.0",
-    "serve": "^7.0.0",
-    "wdio-chromedriver-service": "^6.0.3"
+    "@esm-bundle/chai": "^4.3.4-fix.0",
+    "@playwright/test": "^1.23.4",
+    "@web/test-runner": "^0.13.31",
+    "@web/test-runner-playwright": "^0.8.9",
+    "vite": "^3.0.0"
+  },
+  "dependencies": {
+    "@types/prismjs": "^1.26.0",
+    "prismjs": "^1.28.0"
   },
   "repository": {
     "type": "git",

playwright.config.js

@@ -0,0 +1,11 @@
+const baseURL = 'http://localhost:5173'
+const config = {
+  webServer: {
+    url: baseURL,
+    command: 'yarn dev',
+  },
+  use: {
+    baseURL,
+  },
+};
+module.exports = config;

test/codeflask.spec.js

@@ -0,0 +1,235 @@
+const { test, expect } = require('@playwright/test');
+
+
+////////////////////////////////////////////////////////////////////////////////
+
+async function exists(page, selector) {
+  const el =  page.locator(`.${selector}`)
+  await expect(el).toHaveClass(new RegExp(selector))
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/')
+})
+
+////////////////////////////////////////////////////////////////////////////////
+
+test('smoke test', async ({ page }) => {
+  const title = page.locator('h1')
+  await expect(title).toHaveText('Testing below:');
+})
+
+
+test('should create editor elements',  async ({page}) => {
+  await exists(page, 'codeflask')
+  await exists(page, 'codeflask__pre')
+  await exists(page, 'codeflask__textarea')
+  await exists(page, 'codeflask__lines')
+  const flatten = page.locator('.codeflask__flatten')
+  await expect(flatten).toHaveCount(2)
+})
+
+test('should enable syntax highlight', async ({page}) => {
+  const code_span = page.locator('.codeflask .token.punctuation')
+  await expect(code_span.first()).toHaveClass('token punctuation')
+})
+
+test('should render lineNumbers', async ({page}) => {
+  const lines = page.locator('.codeflask .codeflask__lines' )
+  expect(await lines.count()).toBeGreaterThan(0)
+  const line = page.locator('.codeflask .codeflask__lines__line' )
+  expect(await line.count()).toBeGreaterThan(1)
+});
+
+test('should have same lineNumbers as lines of code', async ({page}) => {
+  const text = page.locator('.codeflask__textarea')
+  await text.fill('let it = "go";\nconst parrot = "bird";')
+  const lines = page.locator('.codeflask .codeflask__lines' )
+  expect(await lines.count()).toBeGreaterThan(0)
+  const line = page.locator('.codeflask .codeflask__lines__line' )
+  expect(await line.count()).toBe(2)
+});
+
+test('should update highlighting to reflect code', async ({page}) => {
+  const text = page.locator('.codeflask__textarea')
+  await text.fill('let it = "go";')
+  const tokens = page.locator('.codeflask .token')
+  await expect(tokens).toHaveClass([ 
+    'token keyword',
+    'token operator',
+    'token string',
+    'token punctuation',
+  ])
+})
+
+test('.updateCode(): should update lineNumbers', async ({page}) => {
+  await page.evaluate(() => { flask.updateCode("let age = 20"); })
+  const lines = page.locator('.codeflask .codeflask__lines' )
+  expect(await lines.count()).toBe(1)
+})
+
+test('.updateCode(): should update lineNumbers for multiple lines', async ({page}) => {
+  await page.evaluate(() => { flask.updateCode("let age = 20\nlet lines = 2"); })
+  const lines = page.locator('.codeflask .codeflask__lines .codeflask__lines__line' )
+  expect(await lines.count()).toBe(2)
+})
+
+test('.onUpdate(): should execute callback upon user interaction', async ({page}) => {
+  const text = page.locator('.codeflask__textarea')
+  await text.fill('let it = "go";\nconst parrot = "bird";')
+  await page.evaluate(() => { flask.onUpdate(code => document.title = code) });
+  await text.fill('title = 99')
+  const newTitle = await page.evaluate(() => document.title)
+  expect(newTitle).toBe('title = 99')
+})
+
+test('should enable rtl when rtl: true', async ({page}) => {
+   await page.evaluate(() => {
+
+      const test_div = document.createElement('div');
+      document.body.appendChild(test_div);
+      new CodeFlask(test_div, { rtl: true });
+    })
+    const ta = page.locator('.codeflask__textarea[dir="rtl"]')
+    expect(await ta.count()).toBe(1)
+    const pre = page.locator('.codeflask__pre[dir="rtl"]')
+    expect(await pre.count()).toBe(1)
+})
+
+test('should not enable rtl when rtl: false', async ({page}) => {
+   await page.evaluate(() => {
+
+      const test_div = document.createElement('div');
+      document.body.appendChild(test_div);
+      new CodeFlask(test_div, { rtl: false });
+    })
+    const ta = page.locator('.codeflask__textarea[dir="rtl"]')
+    expect(await ta.count()).toBe(0)
+    const pre = page.locator('.codeflask__pre[dir="rtl"]')
+    expect(await pre.count()).toBe(0)
+})
+
+test('should not enable rtl when rtl not set', async ({page}) => {
+   await page.evaluate(() => {
+      const test_div = document.createElement('div');
+      document.body.appendChild(test_div);
+      new CodeFlask(test_div, { language: 'js' });
+    })
+    const ta = page.locator('.codeflask__textarea[dir="rtl"]')
+    expect(await ta.count()).toBe(0)
+    const pre = page.locator('.codeflask__pre[dir="rtl"]')
+    expect(await pre.count()).toBe(0)
+})
+
+test('.getCode(): should return current code', async ({page}) => {
+  const text = page.locator('.codeflask__textarea')
+  await text.fill('return "my code here"');
+  const result = await page.evaluate(() => flask.getCode());
+  expect(result).toBe('return "my code here"');
+})
+
+test('should add an ID attribute with option', async ({page}) => {
+   await page.evaluate(() => {
+      const test_div = document.createElement('div');
+     test_div.textContent = "'hello from test div'"
+      document.body.appendChild(test_div);
+      new CodeFlask(test_div, { areaId: 'thing2' });
+    })
+    const result = page.locator('#thing2')
+    expect(await result.count()).toBe(1)
+})
+
+test('should add an aria-labelledby attribute with option', async ({page}) => {
+   await page.evaluate(() => {
+      const test_div = document.createElement('div');
+     test_div.textContent = "'hello from test div'"
+      document.body.appendChild(test_div);
+      new CodeFlask(test_div, { ariaLabelledby: 'thing2' });
+    })
+    const result = page.locator('.codeflask__textarea[aria-labelledby="thing2"]')
+    expect(await result.count()).toBe(1)
+})
+
+function createEditorWithOptions(options) {  // runs in browser
+  document.body.innerHTML = '';
+  const test_div = document.createElement('div');
+  test_div.textContent = "'hello from test div'"
+  document.body.appendChild(test_div);
+  window.cf_test = new CodeFlask(test_div, options)
+}
+
+test('should set readonly attribute with option', async ({page}) => {
+  await page.evaluate(createEditorWithOptions, { readonly: true })
+  let result = page.locator('.codeflask__textarea[readonly]')
+  expect(await result.count()).toBe(1)
+})
+
+
+test('should not set readonly attribute with readonly: false', async ({page}) => {
+  await page.evaluate(createEditorWithOptions, { readonly: false })
+    let result = page.locator('.codeflask__textarea[readonly]')
+    expect(await result.count()).toBe(0)
+})
+
+test('should not set readonly attribute with no option', async ({page}) => {
+  await page.evaluate(createEditorWithOptions, {  })
+    let result = page.locator('.codeflask__textarea[readonly]')
+    expect(await result.count()).toBe(0)
+})
+
+test('should remove readonly attribute via API', async ({page}) => {
+  await page.evaluate(createEditorWithOptions, { readonly: true })
+
+  let result = page.locator('.codeflask__textarea[readonly]')
+
+  expect(await result.count()).toBe(1)
+  await page.evaluate(() => window.cf_test.disableReadonlyMode())
+
+  result = page.locator('.codeflask__textarea[readonly]')
+  expect(await result.count()).toBe(0)
+})
+
+test('should add line when enter pressed', async ({page}) => {
+  await page.evaluate(createEditorWithOptions, { lineNumbers: true })
+
+  let lines = page.locator('.codeflask .codeflask__lines__line')
+  expect(await lines.count()).toBe(1)
+  await page.fill('textarea', 'x\n')
+  lines = page.locator('.codeflask .codeflask__lines__line')
+  expect(await lines.count()).toBe(2)
+})
+
+test('should not add line when enter pressed and readonly', async ({page}) => {
+  await page.evaluate(createEditorWithOptions, { lineNumbers: true, readonly: true })
+
+  let lines = page.locator('.codeflask .codeflask__lines__line')
+  expect(await lines.count()).toBe(1)  // initial blank line
+  await page.fill('textarea', 'x\n', { force: true })  // otherwise Playwright waits for it to become enabled
+  lines = page.locator('.codeflask .codeflask__lines__line')
+  expect(await lines.count()).toBe(1)
+})
+
+  // xit('should handle the tab key in the editor', function () {
+  //   let flask_test
+  //   browser.execute(() => {
+  //     const test_div = document.createElement('div');
+  //     document.body.appendChild(test_div);
+  //     flask_test = new CodeFlask(test_div, { handleTabs: true });
+  //   });
+  //   $('.codeflask__textarea').setValue('hi\thello after');
+  //   const code = browser.execute(() => { return flask.getCode(); });
+  //   expect(code).to.be.equals('hi\thello after');
+  // });
+
+  // xit('should not handle the tab key in the editor with handleTabs=false option', function () {
+  //   let flask_test
+  //   browser.execute(() => {
+  //     const test_div = document.createElement('div');
+  //     document.body.appendChild(test_div);
+  //     flask_test = new CodeFlask(test_div, { handleTabs: false });
+  //   });
+  //   $('.codeflask__textarea').setValue('hi before tab\thello after');
+  //   const code = browser.execute(() => { return flask.getCode(); });
+  //   expect(code).to.be.equals('hi before tab');
+  // });
+// });