feat: no more having to re-add DomTestingLibrary after page load! (#20)

* feat: no more having to re-add DomTestingLibrary after page load! :party:

* configure works after page load and standalone

* update snapshot

* set browsers

* updated readme

Author: benmonro

.testcaferc.json

@@ -1,6 +1,8 @@
 {
   "src": "tests/testcafe/**/*.js",
-  "browsers": ["chromium"],
-
+  "browsers": [
+    "chrome:headless",
+    "firefox:headless"
+  ],
   "concurrency": 1
-}
+}

README.md

@@ -8,8 +8,6 @@
 
 <p>Testcafe selectors and utilities that encourage good testing practices laid down by dom-testing-library.</p>
 
-**_Please go upvote this issue in testcafe to help make this library better_** https://github.com/DevExpress/testcafe/issues/3758
-
 [**Read the docs**](https://testing-library.com/docs/testcafe-testing-library/intro) | [Edit the docs](https://github.com/alexkrolick/testing-library-docs)
 
 </div>

src/index.js

@@ -5,26 +5,58 @@ import path from 'path'
 import { ClientFunction, Selector } from 'testcafe'
 import { queries } from 'dom-testing-library'
 
-const LIBRARY_UMD_PATH = path.join(
+const DOM_TESTING_LIBRARY_UMD_PATH = path.join(
   './node_modules',
   'dom-testing-library/dist/dom-testing-library.umd.js',
 )
-const LIBRARY_UMD_CONTENT = fs.readFileSync(LIBRARY_UMD_PATH).toString()
+const DOM_TESTING_LIBRARY_UMD = fs.readFileSync(DOM_TESTING_LIBRARY_UMD_PATH).toString()
 
-export const addTestcafeTestingLibrary = async t => {
+
+
+
+export async function configure(options, t) {
+  const configFunction =
+    `
+  window.DomTestingLibrary.configure(${JSON.stringify(options)});
+`;
+  await ClientFunction(new Function(configFunction))();
+
+  if (t) {
+    t.testRun.injectable.scripts.push('/testcafe-testing-library-config.js');
+    t.testRun.session.proxy.GET('/testcafe-testing-library-config.js', { content: configFunction, contentType: 'application/x-javascript' })
+  }
+
+}
+
+export async function addTestcafeTestingLibrary(t) {
+  // inject for 1st pageload.  Then just use injectables for subsequent page loads.
   // eslint-disable-next-line
   const inject = ClientFunction(
     () => {
       // eslint-disable-next-line no-undef
       window.eval(script)
-      window.TestCafeTestingLibrary = {}
     },
     {
-      dependencies: { script: LIBRARY_UMD_CONTENT },
+      dependencies: { script: DOM_TESTING_LIBRARY_UMD },
     },
   )
 
-  await inject.with({ boundTestRun: t })()
+  await inject.with({ boundTestRun: t })();
+
+  //and for subsequent pageloads:
+  t.testRun.injectable.scripts.push('/dom-testing-library.js');
+  t.testRun.session.proxy.GET('/dom-testing-library.js', { content: DOM_TESTING_LIBRARY_UMD, contentType: 'application/x-javascript' })
+
+  if (addTestcafeTestingLibrary.options) {
+    await configure(addTestcafeTestingLibrary.options, t);
+  }
+
+}
+
+// eslint-disable-next-line no-shadow
+addTestcafeTestingLibrary.configure = function configure(options) {
+  addTestcafeTestingLibrary.options = { ...options };
+  return addTestcafeTestingLibrary;
 }
 
 Object.keys(queries).forEach(queryName => {
@@ -42,8 +74,10 @@ export const within = async sel => {
   await ClientFunction(
     new Function(
       ` 
-    const elem = document.querySelector("${sanitizedSel}");
-    window.TestCafeTestingLibrary["within_${sanitizedSel}"] = DomTestingLibrary.within(elem);
+
+      window.TestcafeTestingLibrary = window.TestcafeTestingLibrary || {}
+      const elem = document.querySelector("${sanitizedSel}");
+      window.TestcafeTestingLibrary["within_${sanitizedSel}"] = DomTestingLibrary.within(elem);
 
     `,
     ),
@@ -53,19 +87,11 @@ export const within = async sel => {
   Object.keys(queries).forEach(queryName => {
     container[queryName] = Selector(
       new Function(
-        `return window.TestCafeTestingLibrary["within_${sanitizedSel}"].${queryName}(...arguments)`,
+        `return window.TestcafeTestingLibrary["within_${sanitizedSel}"].${queryName}(...arguments)`,
       ),
     )
   })
 
   return container
 }
 
-
-export const configure = async options => {
-  await ClientFunction(new Function(
-    `
-      window.DomTestingLibrary.configure(${JSON.stringify(options)});
-    `
-  ))
-}

test-app/index.html

@@ -56,11 +56,20 @@ <h2>configure</h2>
     <img data-automation-id="image-with-random-alt-tag" src="data:image/png;base64,"
       onclick="this.style.border = '5px solid red'" />
   </section>
+  <section>
+    <h2>configure standalone</h2>
+
+    <img data-other-test-id="other-id" src="data:image/png;base64," onclick="this.style.border = '5px solid red'" />
+  </section>
   <section>
     <h2>getAllByText</h2>
     <button onclick="this.innerText = 'Jackie Kicked'">Jackie Chan 1</button>
     <button onclick="this.innerText = 'Jackie Kicked'">Jackie Chan 2</button>
   </section>
+  <section>
+    <h2>navigate</h2>
+    <a href="page2.html">Go to Page 2</a>
+  </section>
   <!-- Prettier unindents the script tag below -->
   <script>
     document

test-app/page2.html

@@ -0,0 +1,8 @@
+<div>second page</div>
+<section>
+    <section>
+        <h2>configure</h2>
+        <img data-automation-id="page2-thing" src="data:image/png;base64,"
+            onclick="this.style.border = '5px solid red'" />
+    </section>
+</section>

tests/testcafe/configure.js

@@ -1,16 +1,26 @@
 /* eslint-disable import/named */
-import { configure, getByTestId, addTestcafeTestingLibrary } from '../../src'
+import { configure, getByTestId, getByText, addTestcafeTestingLibrary } from '../../src'
 
 
 
 // eslint-disable-next-line babel/no-unused-expressions
-fixture`configure`.beforeEach(addTestcafeTestingLibrary)
+fixture`configure`.beforeEach(addTestcafeTestingLibrary.configure({ testIdAttribute: 'data-automation-id' }))
     .page`http://localhost:13370`
 
 
-test('configure', async t => {
-    await configure({ testIdAttribute: 'data-automation-id' });
-
+test('supports alternative testIdAttribute', async t => {
     await t
         .click(getByTestId('image-with-random-alt-tag'))
+})
+
+test('still works after browser page load', async t => {
+    await t
+        .click(getByText('Go to Page 2'))
+        .click(getByTestId('page2-thing'))
+        .expect(getByText('second page').exists).ok()
+})
+
+test('can be used standalone', async t => {
+    await configure({ testIdAttribute: 'data-other-test-id' });
+    await t.click(getByTestId('other-id'));
 })

tests/testcafe/selectors.js

@@ -55,6 +55,15 @@ test('queryAllByText', async t => {
   await t.expect(queryAllByText('Non-existing Button Text').exists).notOk()
 })
 
+
+
+
+test('still works after browser page load', async t => {
+  await t
+    .click(getByText('Go to Page 2'))
+    .expect(getByText('second page').exists).ok()
+})
+
 test.skip('getByTestId only throws the error message', async t => {
   const testId = 'Some random id'
   const errorMessage = `Unable to find an element by: [data-testid="${testId}"]`

tests/unit/__snapshots__/selectors.test.js.snap

@@ -2,9 +2,9 @@
 
 exports[`exports expected selectors 1`] = `
 Array [
+  "configure",
   "addTestcafeTestingLibrary",
   "within",
-  "configure",
   "queryAllByLabelText",
   "getAllByLabelText",
   "queryByLabelText",