Skip to content

Commit

Permalink
upgrades to new mocha testing suite and module imports
Browse files Browse the repository at this point in the history
  • Loading branch information
@davelandry
davelandry committed Jan 25, 2023
1 parent 8d5a94d commit 9723af4
Show file tree
Hide file tree
Showing 13 changed files with 12,364 additions and 4,223 deletions.
154 changes: 6 additions & 148 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
@@ -1,154 +1,12 @@
{
"extends": "eslint:recommended",
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 8
},
"env": {
"browser": true,
"es6": true,
"browser": true,
"node": true
},
"parserOptions": {
"sourceType": "module"
},
"rules": {
"array-bracket-spacing": 2,
"arrow-body-style": 2,
"arrow-parens": [
2,
"as-needed"
],
"arrow-spacing": 2,
"accessor-pairs": 2,
"block-scoped-var": 2,
"block-spacing": 2,
"brace-style": [
2,
"stroustrup"
],
"camelcase": [
2,
{
"properties": "never"
}
],
"comma-dangle": 2,
"comma-spacing": 2,
"comma-style": 2,
"complexity": [
0,
11
],
"computed-property-spacing": 2,
"consistent-return": 2,
"consistent-this": 2,
"constructor-super": 2,
"curly": [
2,
"multi-line"
],
"default-case": 2,
"dot-location": [
2,
"property"
],
"dot-notation": 2,
"eol-last": 2,
"eqeqeq": 2,
"func-style": [
2,
"declaration",
{
"allowArrowFunctions": true
}
],
"generator-star-spacing": 2,
"global-require": 2,
"guard-for-in": 2,
"handle-callback-err": 2,
"id-match": 2,
"indent": [
2,
2,
{
"flatTernaryExpressions": true,
"MemberExpression": "off",
"SwitchCase": 1,
"VariableDeclarator": {
"var": 2,
"let": 2,
"const": 3
}
}
],
"jsx-quotes": 2,
"key-spacing": 2,
"keyword-spacing": 2,
"lines-around-comment": 2,
"max-nested-callbacks": 2,
"new-cap": 2,
"new-parens": 2,
"no-cond-assign": 2,
"no-constant-condition": 2,
"no-control-regex": 2,
"no-debugger": 2,
"no-delete-var": 2,
"no-dupe-keys": 2,
"no-dupe-args": 2,
"no-duplicate-case": 2,
"no-empty": 2,
"no-empty-character-class": 2,
"no-ex-assign": 2,
"no-extra-boolean-cast": 2,
"no-extra-parens": 2,
"no-extra-semi": 2,
"no-fallthrough": 2,
"no-func-assign": 2,
"no-inner-declarations": 2,
"no-invalid-regexp": 2,
"no-irregular-whitespace": 2,
"no-mixed-spaces-and-tabs": 2,
"no-negated-in-lhs": 2,
"no-obj-calls": 2,
"no-octal": 2,
"no-redeclare": 2,
"no-regex-spaces": 2,
"no-sparse-arrays": 2,
"no-undef": 2,
"no-unreachable": 2,
"no-unused-vars": 2,
"no-var": 2,
"object-curly-spacing": 2,
"object-shorthand": 2,
"operator-assignment": 2,
"operator-linebreak": 2,
"prefer-arrow-callback": 2,
"prefer-const": 2,
"prefer-spread": 2,
"prefer-template": 1,
"quote-props": [
2,
"consistent-as-needed"
],
"quotes": 2,
"radix": 2,
"require-jsdoc": 2,
"require-yield": 2,
"semi": 2,
"semi-spacing": 2,
"sort-vars": 2,
"space-before-blocks": 2,
"space-before-function-paren": [
2,
"never"
],
"space-in-parens": 2,
"space-infix-ops": 2,
"space-unary-ops": 2,
"spaced-comment": 2,
"use-isnan": 2,
"valid-typeof": 2,
"wrap-iife": 2,
"wrap-regex": 2,
"yoda": [
2,
"never"
]
}
}
104 changes: 12 additions & 92 deletions .github/CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
# Contributing

We love Pull Requests from anyone and everyone. To get started, fork the repo, then clone your fork:
If you are looking to contribute to the d3plus.org examples and documentation, please visit the [d3plus-storybook](https://github.com/d3plus/d3plus-storybook.git) repository. If you are looking to contribute to the core source code of d3plus, start by cloning this repo:

```sh
git clone git@github.com:your-username/d3plus-priestley.git
git clone https://github.com/d3plus/d3plus-priestley.git
```

## Setting up your Environment
Expand All @@ -15,11 +15,11 @@ git clone git@github.com:your-username/d3plus-priestley.git
npm i
```

And that's it! Now your environment should be all set up and ready to go.
And that's it! Your environment should be all set up and ready to start coding.

## Writing Code

With the introduction of modules in D3plus 2.0, all code is transpiled using [babel](https://babeljs.io/), which allows usage of most of the good bits from ES6. If you are unfamiliar with ES6, then normal vanilla javascript works fine as well (but we may suggest PR revisions to include more succinct ES6). All source code lives in the `./src` directory.
All code is transpiled using [babel](https://babeljs.io/), which allows usage of most of the good bits from ES6. If you are unfamiliar with ES6, then normal vanilla javascript works fine as well (but we may suggest PR revisions to include more succinct ES6). All source code lives in the `./src` directory.

## Code Style

Expand Down Expand Up @@ -58,109 +58,29 @@ npm run docs
## Tests

Any time you write a new feature for a module, you should also be writing tests. D3plus modules come bundled with a test suite that let's you write tests using full ES6, which are then run directly in a headless Electron browser.
Any time you write a new feature for a module, you should also be writing tests. D3plus modules come bundled with a test suite that let's you write functional tests using [Mocha](https://mochajs.org/) and [JSDOM](https://github.com/jsdom/jsdom).

All tests need to be placed in the `./test` directory, and the filenames should match up to the components in `./src`. To run all tests, run:
All tests need to be placed in the `./test` directory, and the filenames should match up to the components in `./src` with a suffix of `-test.js`. To run all tests, run:

```sh
npm test
```
> This command will also lint all files according to the provided `.eslintc` file.
> This command will also lint all files using eslint.
D3plus uses [zora](https://github.com/lorenzofox3/zora) for running tests, and [tape-run](https://github.com/juliangruber/tape-run) for outputting the results. Here is an example of what a test file could look like:
Here is an example of what a test file could look like:

```js
import {test} from "zora";
import assert from "assert";
import it from "./jsdom.js"; // optional import, only the test needs window/document

test("testing booleans", assert => {
it("example test title", () => {

assert.equal(true, true, "testing true");
assert.equal(false, false, "testing false");
assert.strictEqual(true, true, "the truth test");

});

test("testing numbers", assert => {

assert.equal(1, 1, "testing 1");
assert.equal(2, 2, "testing 2");

});

export default test;
```

## Examples

All D3plus 2.0 examples seen on [d3plus.org](https://d3plus.org) are created from within their respective repositories. The examples are parsed from any markdown files placed in the `./example` directory, with the following behaviors:

#### Title

Example titles are extracted from the first H1 present in the file. Generally, the first line of the file will be the title:

```md
# My Cool Example
```

#### URL Slug

The slug used in the URL on [d3plus.org](https://d3plus.org) is taken directly from the filename. A file with the following path:

```sh
/example/my-cool-example.md
```

Would end up at the following URL:

```sh
https://d3plus.org/examples/d3plus-priestley/my-cool-example/
```

#### Code Blocks

Any `css`, `html`, or `js` code block present in an example will be extracted and rendered into a static HTML file. This is what gets used on [d3plus.org](https://d3plus.org), and also let's us take screenshots!

#### Screenshots

A screenshot of each example is generated from the rendered HTML. By default, each screenshot is 990x400 in size, but specific dimensions can be given using markdown relative links:

```md
[width]: 100
[height]: 100
```

Adding all that together, here is a sample of what a full example could look like:

`````md
[width]: 100
[height]: 100

# A Cool Red Square

In this example, we show you how to add a red square to a webpage!

```html
<div id="container"></div>
```

Wow, look at that container element. Such beauty.

```css
#container > div {
background-color: red;
height: 100px;
width: 100px;
}
```

CSS. Amazing. Now let's finish this off with some JavaScript!

```js
var box = document.createElement("div");
document.getElementById("container").appendChild(box);
```

`````

## Submitting a Pull Request

Push to your fork and [submit a pull request](https://github.com/d3plus/d3plus-priestley/compare/). At this point, you're waiting on us. We may suggest some changes or improvements or alternatives.
28 changes: 4 additions & 24 deletions .github/ISSUE_TEMPLATE.md
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,7 @@
<!-- Are you asking for help or have a general question? -->
<!-- If so, please consider using the D3plus Gitter community. -->
<!-- https://gitter.im/d3plus/ -->
<!-- If possible, please recreate your issue in a JSFiddle. -->

<!-- Provide a general summary of the issue in the title above. -->
<!-- Please create separate issues for each individual bug/feature. -->
<!-- You can use this template to get started: -->
<!-- https://jsfiddle.net/davelandry/u7dfeop0/ -->

### Expected Behavior
<!-- If you're describing a bug, tell us what should happen -->
<!-- If you're suggesting a change/improvement, tell us how it should work -->

### Current Behavior
<!-- If describing a bug, tell us what happens instead of the expected behavior -->
<!-- If suggesting a change/improvement, explain the difference from current behavior -->

### Steps to Reproduce (for bugs)
<!-- Provide a link to a live example, a screenshot, -->
<!-- and/or an unambiguous set of steps to reproduce this bug. -->
1.
2.
3.

### Your Environment
<!-- Include as many relevant details about the environment in which you experienced the bug. -->
* Browser Name:
* Operating System and Version:
<!-- Please remove as many unrelated methods until the bug is still reproducible. -->

18 changes: 0 additions & 18 deletions .github/PULL_REQUEST_TEMPLATE.md
View file

This file was deleted.

29 changes: 29 additions & 0 deletions .github/workflows/NodeCI.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
name: Node.js CI

on:
push:
branches: [ main ]
pull_request:
branches: [ main ]

jobs:
test:

runs-on: ubuntu-latest

strategy:
matrix:
node-version: [14.x]

steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
- name: Install Dependencies
run: npm ci
- name: Lint Code
run: ./node_modules/.bin/eslint src test
- name: Run Tests
run: ./node_modules/.bin/mocha 'test/**/*-test.js'

0 comments on commit 9723af4

Please sign in to comment.