feat: add support for client scripts. still using path to node_modules for now, but will add support for module syntax soon.

BREAKING CHANGE: removed addTestcafeTestingLibrary

Author: Ben Monro

.testcaferc.json

@@ -1,4 +1,7 @@
 {
+  "clientScripts": [
+    "./node_modules/@testing-library/dom/dist/@testing-library/dom.umd.js"
+  ],
   "src": "tests/testcafe/**/*.js",
   "browsers": [
     "chrome:headless",

src/index.js

@@ -1,64 +1,25 @@
 /* eslint-disable no-eval */
 /* eslint-disable no-new-func */
-import fs from 'fs'
-import path from 'path'
 import { ClientFunction, Selector } from 'testcafe'
 import { queries } from '@testing-library/dom'
 
-const DOM_TESTING_LIBRARY_UMD_PATH = path.join(
-  require.resolve( '@testing-library/dom' ),
-  '../../',
-  'dist/@testing-library/dom.umd.js',
-)
-const DOM_TESTING_LIBRARY_UMD = fs.readFileSync(DOM_TESTING_LIBRARY_UMD_PATH).toString()
 
 
+export async function configureOnce(options) {
+  const { content } = configure(options);
 
+  await new ClientFunction(new Function(content))();
+}
+
+export function configure(options) {
 
-export async function configure(options, t) {
   const configFunction =
     `
   window.TestingLibraryDom.configure(${JSON.stringify(options)});
 `;
-  await new 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)
-    },
-    {
-      dependencies: { script: DOM_TESTING_LIBRARY_UMD },
-    },
-  )
-
-  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);
-  }
-
+  return { content: configFunction };
 }
 
-// eslint-disable-next-line no-shadow
-addTestcafeTestingLibrary.configure = function configure(options) {
-  addTestcafeTestingLibrary.options = { ...options };
-  return addTestcafeTestingLibrary;
-}
 
 Object.keys(queries).forEach(queryName => {
   module.exports[queryName] = Selector(

tests/testcafe/configure.js

@@ -1,10 +1,9 @@
 /* eslint-disable import/named */
-import { configure, getByTestId, getByText, addTestcafeTestingLibrary } from '../../src'
-
+import { configure, configureOnce, getByTestId, getByText } from '../../src'
 
 
 // eslint-disable-next-line babel/no-unused-expressions
-fixture`configure`.beforeEach(addTestcafeTestingLibrary.configure({ testIdAttribute: 'data-automation-id' }))
+fixture`configure`.clientScripts(configure({ testIdAttribute: 'data-automation-id' }))
     .page`http://localhost:13370`
 
 
@@ -21,6 +20,6 @@ test('still works after browser page load', async t => {
 })
 
 test('can be used standalone', async t => {
-    await configure({ testIdAttribute: 'data-other-test-id' });
+    await configureOnce({ testIdAttribute: 'data-other-test-id' });
     await t.click(getByTestId('other-id'));
 })

tests/testcafe/selectors.js

@@ -8,11 +8,11 @@ import {
   getByTestId,
   getAllByText,
   queryAllByText,
-  addTestcafeTestingLibrary,
+
 } from '../../src/'
 
 // eslint-disable-next-line babel/no-unused-expressions
-fixture`selectors`.beforeEach(addTestcafeTestingLibrary)
+fixture`selectors`
   .page`http://localhost:13370`
 
 test('getByPlaceHolderText', async t => {
@@ -64,6 +64,11 @@ test('still works after browser page load', async t => {
     .expect(getByText('second page').exists).ok()
 })
 
+test('still works after reload', async (t) => {
+  await t.eval(() => location.reload(true));
+  await t.expect(getByText('getByText').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/testcafe/within.js

@@ -1,26 +1,26 @@
-import {Selector} from 'testcafe'
-import {within, addTestcafeTestingLibrary} from '../../src'
+import { Selector } from 'testcafe'
+import { within } from '../../src'
 
 // eslint-disable-next-line babel/no-unused-expressions
-fixture`within`.beforeEach(addTestcafeTestingLibrary)
+fixture`within`
   .page`http://localhost:13370`
 
 test('getByText within container', async t => {
-  const {getByText} = await within('#nested')
+  const { getByText } = await within('#nested')
   await t
     .click(getByText('Button Text'))
     .expect(Selector('button').withExactText('Button Clicked').exists)
     .ok()
 })
 
 test("queryByPlaceholder doesn't find anything", async t => {
-  const {queryByPlaceholderText} = await within('#nested')
+  const { queryByPlaceholderText } = await within('#nested')
 
   await t.expect(queryByPlaceholderText('Placeholder Text').exists).notOk()
 })
 
 test('quotes in selector', async t => {
-  const {getByText} = await within('div[id="nested"]')
+  const { getByText } = await within('div[id="nested"]')
 
   await t
     .click(getByText('Button Text'))

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

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

typings/index.d.ts

@@ -1,17 +1,20 @@
-import {BoundFunction, IConfig, queries} from '@testing-library/dom';
-import {Selector, t} from 'testcafe';
+import { BoundFunction, IConfig, queries } from '@testing-library/dom';
+import { Selector, t, ClientScript } from 'testcafe';
 
 export function addTestcafeTestingLibrary(
     testController: typeof t
 ): Promise<void>;
 
+export function configureOnce(
+    options: Pick<IConfig, 'testIdAttribute'>
+): Promise<void>
+
 export function configure(
-    options: Pick<IConfig, 'testIdAttribute'>,
-    testController: typeof t
-): Promise<void>;
+    options: Pick<IConfig, 'testIdAttribute'>
+): ClientScript;
 
 export type TestcafeBoundFunction<T> = (...params: Parameters<BoundFunction<T>>) => Selector;
-export type TestcafeBoundFunctions<T> = {[P in keyof T]: TestcafeBoundFunction<T[P]>};
+export type TestcafeBoundFunctions<T> = { [P in keyof T]: TestcafeBoundFunction<T[P]> };
 
 export function within(selector: string): Promise<TestcafeBoundFunctions<typeof queries>>;