feat: support screen export (#12)

BREAKING CHANGE: drop support for `cleanup-after-each` import, now this is the default

.eslintignore

@@ -0,0 +1,6 @@
+.vscode
+.nyc_output
+node_modules
+coverage
+dist
+__snapshots__

.eslintrc.json

@@ -0,0 +1,32 @@
+{
+  "root": true,
+  "extends": ["eslint:recommended", "prettier"],
+  "parserOptions": {
+    "sourceType": "module",
+    "impliedStrict": true
+  },
+  "env": {
+    "jest": true,
+    "node": true,
+    "es2020": true,
+    "browser": true
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts"],
+      "parser": "@typescript-eslint/parser",
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier"
+      ],
+      "rules": {
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/ban-ts-comment": "off"
+      }
+    }
+  ]
+}

.fixpackrc

@@ -0,0 +1,3 @@
+{
+  "quiet": true
+}

.github/ISSUE_TEMPLATE/Bug_report.md

@@ -5,7 +5,7 @@ about: Something isn't working right
 
 ## Version: x.x.x
 
-<!--- Provide the exact version in which you see the bug.  You can run `npm ls @marko/jest` to see this. -->
+<!--- Provide the exact version in which you see the bug.  You can run `npm ls @marko/testing-library` to see this. -->
 
 ### Details
 

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: CI
+
+on:
+  pull_request:
+    paths-ignore: ["**.md"]
+  push:
+    branches: ["main"]
+    paths-ignore: ["**.md"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [14.x, 16.x]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Use node@${{ matrix.node }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+      - name: Install dependencies
+        run: npm ci
+      - name: Lint code
+        run: npm run lint
+      - name: Run tests
+        run: npm run ci:test
+      - name: Report code coverage
+        run: npm run ci:report

.gitignore

@@ -11,10 +11,8 @@ npm-debug.log
 
 # Build
 dist
+*.tsbuildinfo
 
 # Coverage
 coverage
 .nyc_output
-
-# Test
-__snapshots__

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install lint-staged

.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "*.ts": ["eslint -f codeframe --fix", "prettier --write"],
+  "*{.js,.json,.md,.yml,rc}": ["prettier --write"]
+}

.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "overrides": [
+    {
+      "files": "*rc",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 eBay Inc. and contributors
+Copyright (c) 2021 eBay Inc. and contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -17,8 +17,8 @@
   <img src="https://img.shields.io/travis/marko-js/testing-library.svg" alt="Build status"/>
   </a>
   <!-- Coverage -->
-  <a href="https://coveralls.io/github/marko-js/testing-library">
-    <img src="https://img.shields.io/coveralls/marko-js/testing-library.svg" alt="Test Coverage"/>
+  <a href="https://codecov.io/gh/marko-js/testing-library">
+    <img src="https://codecov.io/gh/marko-js/testing-library/branch/master/graph/badge.svg?token=LirxYQjltb" alt="Test Coverage"/>
   </a>
   <!-- Language -->
   <a href="http://typescriptlang.org">
@@ -85,21 +85,21 @@ Marko testing library exposes all of the same utilities for [querying the dom](h
 This funcition renders your template asynchronously and provides you with [query helpers](https://testing-library.com/docs/dom-testing-library/api-queries) that are scoped to output DOM.
 
 ```javascript
-import { render } from "@marko/testing-library";
+import { render, screen } from "@marko/testing-library";
 import HelloTemplate from "./src/__test__/fixtures/hello-name.marko";
 
 test("contains the text", async () => {
-  const { getByText, rerender } = await render(HelloTemplate, {
+  const { rerender } = await render(HelloTemplate, {
     name: "World",
   });
 
   // Will find the element within the rendered result from the template.
-  expect(getByText("Hello World")).toBeInTheDocument();
+  expect(screen.getByText("Hello World")).toBeInTheDocument();
 
   // You can also rerender the component if needed.
   await rerender({ name: "Marko" });
 
-  expect(getByText("Hello Marko")).toBeInTheDocument();
+  expect(screen.getByText("Hello Marko")).toBeInTheDocument();
 });
 ```
 
@@ -118,21 +118,34 @@ The problem with the above test is that your user does not care about or see tha
 ### `cleanup()`
 
 With client side tests your components are rendered into a placeholder HTMLElement.
-To ensure that your components are properly removed, and destroyed, you can call `cleanup` at any time which will remove any attached components.
+You can call `cleanup` at any time to destroy any attached components and remove them from the DOM.
 
 ```javascript
-import { cleanup } from "@marko/testing-library";
-// automatically unmount and cleanup DOM after the test is finished.
-afterEach(cleanup);
+import { cleanup, screen } from "@marko/testing-library";
+import HelloTemplate from "./src/__test__/fixtures/hello-name.marko";
+
+test("contains the text", async () => {
+  await render(HelloTemplate, { name: "World" });
+
+  expect(screen.getByText("Hello World")).toBeInTheDocument();
+
+  cleanup();
+
+  expect(screen.queryByText("Hello Marko")).toBeNull();
+});
 ```
 
-To save some typing, you could also import a file with the above.
+By default if your testing framework exposes an `afterEach` hook (such as `jest` and `mocha`) then `cleanup` will be automatically invoked after each of your tests run.
+
+If you'd like to disable the automatic cleanup behavior described above you can import `@marko/testing-library/dont-cleanup-after-each`.
 
 ```javascript
-import "@marko/testing-library/cleanup-after-each";
+import "@marko/testing-library/dont-cleanup-after-each";
 ```
 
-If you are using Jest, you can simply include `setupFilesAfterEnv: ["@marko/testing-library/cleanup-after-each"]` to your Jest config to avoid doing this in each file.
+With mocha you can use `mocha -r @marko/testing-library/dont-cleanup-after-each` as a shorthand.
+
+If you are using Jest, you can include `setupFilesAfterEnv: ["@marko/testing-library/dont-cleanup-after-each"]` in your Jest config to avoid doing this in each file.
 
 ## Setup
 

build.js

@@ -0,0 +1,28 @@
+const fs = require("fs");
+const path = require("path");
+const { build } = require("esbuild");
+
+(async () => {
+  const entryPoints = [
+    "src/dont-cleanup.ts",
+    "src/index.ts",
+    "src/index-browser.ts",
+    "src/shared.ts",
+  ];
+
+  for (const format of ["cjs", "esm"]) {
+    const outdir = path.join("dist", format);
+    await fs.promises.rmdir(outdir, { recursive: true }).catch(() => {});
+    await build({
+      format,
+      outdir,
+      entryPoints,
+      platform: "node",
+      target: ["node14"],
+    });
+    await fs.promises.copyFile(
+      "src/package.json",
+      path.join(outdir, "package.json")
+    );
+  }
+})().catch(() => process.exit(1));

dont-cleanup-after-each/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/cjs/dont-cleanup",
+  "module": "../dist/esm/dont-cleanup",
+  "jsnext": "../dist/esm/dont-cleanup",
+  "types": "../dist/dont-cleanup.d.ts"
+}

jest-setup.js

@@ -0,0 +1 @@
+require("@testing-library/jest-dom");

jest.config.js

@@ -7,24 +7,15 @@ module.exports = {
       preset: "@marko/jest/preset/node",
     }),
   ],
-  coverageThreshold: {
-    global: {
-      branches: 100,
-      functions: 100,
-      lines: 100,
-      statements: 100,
-    },
-  },
 };
 
 function project(displayName, config) {
   return {
     ...config,
     displayName,
-    testRegex: `/__tests__/([^.]+\\.)?${displayName}\\.ts$`,
-    transform: {
-      "\\.ts$": "ts-jest",
-    },
     coveragePathIgnorePatterns: ["/__tests__/"],
+    setupFilesAfterEnv: ["<rootDir>/jest-setup.js"],
+    testRegex: `/__tests__/([^.]+\\.)?${displayName}\\.ts$`,
+    transform: { "\\.ts$": ["esbuild-jest", { sourcemap: true }] },
   };
 }