Initial commit.

.babelrc

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "corejs": 3,
+        "modules": false,
+        "useBuiltIns": "usage"
+      }
+    ],
+    "@babel/react",
+    "@babel/typescript"
+  ],
+  "plugins": [
+    "@babel/proposal-class-properties",
+    "@babel/proposal-object-rest-spread"
+  ]
+}

.browserslistrc

@@ -0,0 +1,10 @@
+[development]
+last 2 chrome versions
+last 2 firefox versions
+last 2 edge versions
+
+[production]
+>1%
+last 4 versions
+Firefox ESR
+not ie < 11

.circleci/config.yml

@@ -0,0 +1,37 @@
+# Javascript Node CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+#
+version: 2
+jobs:
+  build:
+    docker:
+      - image: cypress/base:10.16.0
+
+      # Specify service dependencies here if necessary
+      # CircleCI maintains a library of pre-built images
+      # documented at https://circleci.com/docs/2.0/circleci-images/
+      # - image: circleci/mongo:3.4.4
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+            - v2-dependencies-{{ checksum "package.json" }}
+            # fallback to using the latest cache if no exact match is found
+            - v2-dependencies-
+
+      - run: npm install
+
+      - save_cache:
+          paths:
+            - node_modules
+            - /root/.cache
+          key: v2-dependencies-{{ checksum "package.json" }}
+      - run: npm run lint
+      # run tests!
+      - run: npm run test

.eslintrc.js

@@ -0,0 +1,58 @@
+/**
+ * Unified ES+TS+Prettier configuration for ESLint. Inspired by:
+ * https://dev.to/robertcoopercode/using-eslint-and-prettier-in-a-typescript-project-53jb
+ *
+ * This file uses JS (not JSON) so we can have comments and object literals.
+ * PLEASE DO NOT ADD CONDITIONALS OR DYNAMIC CODE. Keep this file as pure data.
+ */
+
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  plugins: ['cypress'],
+  env: {
+    browser: true,
+    es6: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:cypress/recommended',
+    'plugin:react/recommended',
+    'prettier/@typescript-eslint',
+    // NB: please leave this at the end so it can override all other rules!
+    'plugin:prettier/recommended'
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 2018, // aka ECMAScript 9
+    sourceType: 'module' // allow `import` statement
+  },
+  rules: {
+    '@typescript-eslint/array-type': 'warn',
+    '@typescript-eslint/camelcase': 'off',
+    '@typescript-eslint/class-name-casing': 'warn',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-member-accessibility': 'off',
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'no-empty': 'warn',
+    'no-extra-boolean-cast': 'warn',
+    'prettier/prettier': ['error', {singleQuote: true, trailingComma: 'es5'}],
+    'react/prop-types': 'off'
+  },
+  overrides: [
+    {
+      files: ['cypress/**/*.js', 'cypress/**/*.jsx'],
+      env: {
+        "cypress/globals": true
+      }
+    }
+  ],
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  }
+};

.gitignore

@@ -0,0 +1,10 @@
+.nyc_output
+.DS_Store
+lib
+dist
+node_modules
+coverage
+*.log
+
+cypress/videos/*
+cypress/screenshots/*

.npmignore

@@ -0,0 +1,10 @@
+coverage
+cypress/**/*
+src
+test
+.browserslistrc
+.eslintrc
+.prettierignore
+tsconfig.json
+.vscode
+*.log

.prettierignore

@@ -0,0 +1,3 @@
+# package.json is formatted by package managers, so we ignore it here
+package.json
+tsconfig.json

.prod.babelrc

@@ -0,0 +1,4 @@
+{
+  "extends": "./.babelrc",
+  "sourceMaps": "inline"
+}

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Cypress",
+      "program": "${workspaceFolder}/node_modules/.bin/cypress",
+      "args": ["run", "-s", "${file}"]
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,39 @@
+{
+  "eslint.enable": true,
+  "eslint.autoFixOnSave": true,
+  "eslint.options": {
+    "rules": {
+      "no-console": "off",
+      "no-debugger": "off"
+    }
+  },
+  "eslint.packageManager": "npm",
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    {
+      "language": "typescript",
+      "autoFix": true
+    },
+    {
+      "language": "typescriptreact",
+      "autoFix": true
+    }
+  ],
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.formatOnSave": false
+  },
+  "[javascriptreact]": {
+    "editor.formatOnSave": false
+  },
+  "[typescript]": {
+    "editor.formatOnSave": false
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": false
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

CHANGELOG.md

@@ -0,0 +1,59 @@
+WIP
+===
+
+- Command auto-install when `commands` is required directly
+
+5.14
+===
+
+**NOTE:** this point release contains likely interface-breaking changes
+as compared to 5.5.x; this is made possible because the package is now
+distributed under a new name and channel.
+  - Old: `react-gears-cypress` (published privately)
+  - New: `@appfolio/react-gears-cypress` (published via npmjs.org)
+Future releases will be aligned with react-gears' versioning scheme, and will provide guaranteed interface compatibility within a major version.
+
+New features:
+- Helper function `add` to register Cypress commands without copypasta.
+- Custom command, `gears`, to replace `find` and `findNegative`!
+   - compatibility shims are provided to ease migration
+- More consistent, reliable behavior for `clear` and `fill` commands.
+   - Better at dismissing unwanted popups & overlays
+   - May blur the subject after typing, if it was focused, to trigger
+     form validations
+- All commands produce log output similar to built-in Cypress commands.
+- Commands and helpers hide the log output of any Cypress commands they invoke.
+
+Significant interface-breaking changes:
+- cannot use a RegExp for labels due to Cypress limitations; `Text` is now synonymous with `string`!
+- `cy.fill` always requires a value (analogous to `cy.type`); formerly it sometimes accidentally accepted `''`.
+- Large changes to the way we deal with popups (i.e. DateInput).
+- The `sel` module has been removed (see `components` for a superior alternative)
+
+5.5
+===
+
+Aligned CSS selectors with `react-gears` v5. No significant interface-breaking changes.
+
+1.x
+===
+
+Committed to interface stability. Works with `react-gears` v4.
+
+0.2
+===
+
+Added finders for Alert, Card, and others.
+
+Added negative finder for Alert.
+
+Added protocol documentation for Finders (overall).
+
+Fixed corner cases w/inconsistent use of match by Finders.
+
+Added test coverage for match & Finders.
+
+0.1
+===
+
+Initial release of the package. Very rough!

README.md

@@ -0,0 +1,111 @@
+# react-gears-cypress
+
+# What is this?
+
+This is a collection of helpers for testing
+[react-gears](https://github.com/appfolio/react-gears) browser UIs with
+Cypress. It provides "finder" functions for finding `react-gears` components
+in the DOM, Cypress commands for interacting with compomnents, and some fuzzy
+text-matching functions to promote more reliable tests.
+
+# How do I use it?
+
+Install the commands at startup by adding a few lines to `cypress/support/commands.js`:
+
+```javascript
+import { commands as gears } from 'react-gears-cypress'
+
+// Adds all commands: clear, fill, gears, select. Pass string[] to
+// install just some of the commands.
+gears.add();
+```
+
+Then, in each test where you want to interact with react-gears components:
+
+```javascript
+import { BlockPanel, Datapair, Input, Select } from 'react-gears-cypress';
+
+cy.gears(BlockPanel, 'Personal Information').within(() => {
+  cy.gears(Datapair, 'First Name').contains('Alice')
+  cy.gears(Input, 'Last Name').clear().type('Liddel')
+  cy.gears(Select, 'Favorite Color').select('red')
+})
+```
+
+Inputs and other components are always identified by their label/title. The
+intended usage is with the form-labelling component `FormLabelGroup`, which provides a `<label>` element for basically any nested component(s).
+
+```javascript
+import { FormLabelGroup, Input } from 'react-gears';
+
+...
+const TestableComponent = () => (
+  <FormLabelGroup label="foo"><Input/></FormLabelGroup>
+)
+```
+
+To deal with labels, values and other text whose whitespace varies, you
+can use the `match` helpers which return a RegExp that can be passed
+instead of a string for more precise or relaxed matching.
+
+```javascript
+import {Datapair, match} from 'react-gears-cypress
+
+// Matches "Name" or "Name *" but not "First Name"
+cy.gears(Datapair, match.exact('Name'))
+// Matches "foo bar", "foo badger bar", "foo badger badger mushroom bar", etc
+cy.gears(Datapair, match.fuzzyFirstLast('foo', 'bar'))
+// Matches "foo\nbar baz", "foo     bar\nbaz", etc
+cy.gears(Datapair, match.fuzzyMultiline('foo bar baz'))
+```
+
+# Contributing
+
+## Building the repo
+
+```sh
+npm run build
+```
+
+## Type-checking the repo
+
+```sh
+npm run type-check
+```
+
+And to run in `--watch` mode:
+
+```sh
+npm run type-check:watch
+```
+
+## Releasing a new version
+
+This repository is currently private (because `react-gears` is private); therefore, we publish it to Appfolio's internal [Nexus](https://nexus.dev.appf.io/) repository. You will need Nexus
+credentials to release new versions.
+
+You may need to  `npm adduser`; in theory an `.npmrc` is committed to this repository with a shared API token (as is standard practice in our GitHub org), but the shared token has read-only privileges. Logging in
+as yourself, seems to enable extra privileges e.g. publish.
+
+**WARNING:** Do not forget the `npm build` step below, otherwise
+you will publish old code to a new version number!
+
+To release a new version:
+
+1) Merge your work to master.
+
+2) Check `package.json` for the previously released version X.Y.Z.
+
+3) Run `git log vX.Y.Z..HEAD` to review new work from yourself and others. Decide on a new version number according to semver guidelines; for the sake of this example, let's say
+you decide the new version will be `X.Y.W`.
+  - if you want a prerelease version, the preferred format is `X.Y.Z-rc.0` (then `rc.1`, etc)
+
+4) Run `npm run build` to produce distributables and `npm version X.Y.W` to bump to the new version.
+you decided on above.
+
+5) `git push` and `git push --tags` to ensure that the npm version bump is preserved
+for posterity.
+
+6) `npm publish` to share your distributables with the world.
+  - if publishing a prerelease version you _must_ add `--tags=beta` to the `npm publish` command!
+  - otherwise, people will accidentally upgrade to your prerelease and you will be forced to support them

cypress.json

@@ -0,0 +1,5 @@
+{
+  "experimentalComponentTesting": true,
+  "viewportWidth": 640,
+  "viewportHeight": 480
+}