Skip to content

Commit

Permalink
Merge pull request #101 from open-source-labs/staging
Browse files Browse the repository at this point in the history
Spearmint Version 5.0.0 Staging to Main
  • Loading branch information
sharon-zhu authored Mar 25, 2021
2 parents 5573147 + 295c1ae commit d58da10
Show file tree
Hide file tree
Showing 65 changed files with 2,375 additions and 560 deletions.
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2019 spearmintjs
Copyright (c) 2019-2021 spearmintjs

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
60 changes: 51 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,14 @@

Spearmint helps developers easily create functional React/Redux/Endpoint/Paint Timing tests without writing any code. It dynamically converts user inputs into executable Jest test code by using DOM query selectors provided by @testing-library.

## How to use
# How to use

Download spearmint @ spearmintjs.com. Available for Mac OS and Windows.

<br>

### React Testing
<hr>
To run React tests generated by spearmint, install the following in your dev dependencies.

npm i -D jest @testing-library/jest-dom @testing-library/react test-data-bot
Expand All @@ -18,15 +22,44 @@ To run Hooks / Context tests generated by spearmint, install the following in yo

npm i -D @testing-library/react-hooks

<br>

### Endpoint Testing
<hr>
To run Endpoint tests generated by spearmint, install the following in your dev dependencies.

npm i -D jest supertest

<br>

### Puppeteer Testing
<hr>
To run Puppeteer tests generated by spearmint, install the following in your dev dependencies.

npm i -D jest puppeteer

## How it works

<br>

### Accessiblity Testing
<hr>

To run Accessibility tests generated by spearmint on HTML, install the following in your dev dependencies.

npm i -D axe-core regenerator-runtime jest

To run Accessibility tests generated by spearmint on React Components, install the following in your dev dependencies.

npm i -D axe-core regenerator-runtime jest enzyme enzyme-adapter-react-16

To run Accessibility tests generated by spearmint on URL's with Puppeteer, install the following in your dev dependencies.

npm i -D axe-core puppeteer


<br>

# How it works

1. On the initial screen, enter the URL of your project and load your application to start creating tests.

Expand All @@ -42,24 +75,33 @@ To run Puppeteer tests generated by spearmint, install the following in your dev

![](/public/testfile.png?raw=true)

## Team
<br>

### The Spearmint Team
<hr>

> Alex [@apark0720](https://github.com/apark0720) &nbsp;&middot;&nbsp;
> Alfred [@astaiglesia](https://github.com/astaiglesia) &nbsp;&middot;&nbsp;
> Annie [@annieshinn](https://github.com/annieshinn) &nbsp;&middot;&nbsp;
> Ben [@bkwak](https://github.com/bkwak) &nbsp;&middot;&nbsp;
> Charlie [@charlie-maloney](https://github.com/charlie-maloney) &nbsp;&middot;&nbsp;
> Chloe [@HeyItsChloe](https://github.com/HeyItsChloe) <br />
> Charlie [@charlie-maloney](https://github.com/charlie-maloney) <br />
> Chloe [@HeyItsChloe](https://github.com/HeyItsChloe) &nbsp;&middot;&nbsp;
> Cornelius [@corneeltron](https://github.com/corneeltron) &nbsp;&middot;&nbsp;
> Dave [@davefranz](https://github.com/davefranz) &nbsp;&middot;&nbsp;
> Evan [@Berghoer](https://github.com/Berghoer) &nbsp;&middot;&nbsp;
> Johnny [@johnny-lim](https://github.com/johnny-lim) <br />
> Gabriel [@bielchristo](https://github.com/bielchristo) <br />
> Johnny [@johnny-lim](https://github.com/johnny-lim) &nbsp;&middot;&nbsp;
> Julie [@julicious100](https://github.com/julicious100) &nbsp;&middot;&nbsp;
> Karen [@karenpinilla](https://github.com/karenpinilla) &nbsp;&middot;&nbsp;
> Linda [@lcwish](https://github.com/lcwish) &nbsp;&middot;&nbsp;
> Luis [@Luis-KM-Lo](https://github.com/Luis-KM-Lo) <br />
> Mike [@mbcoker](https://github.com/mbcoker) &nbsp;&middot;&nbsp;
> Natlyn [@natlynp](https://github.com/natlynp) &nbsp;&middot;&nbsp;
> Nick [@nicolaspita](https://github.com/nicolaspita) &nbsp;&middot;&nbsp;
> Rachel [@rachethecreator](https://github.com/rachethecreator) <br />
> Sean [@sean-haverstock](https://github.com/Sean-Haverstock) &nbsp;&middot;&nbsp;
> Rachel [@rachethecreator](https://github.com/rachethecreator) &nbsp;&middot;&nbsp;
> Sean [@sean-haverstock](https://github.com/Sean-Haverstock) <br />
> Sharon [@sharon-zhu](https://github.com/sharon-zhu) &nbsp;&middot;&nbsp;
> Sieun [@sieunjang](https://github.com/sieunjang) &nbsp;&middot;&nbsp;
> Tristen [@twastell](https://github.com/twastell)
> Tolan [@taoantaoan](https://github.com/taoantaoan) &nbsp;&middot;&nbsp;
> Tristen [@twastell](https://github.com/twastell) <br />
<hr>
File renamed without changes.
21 changes: 14 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "Spearmint",
"version": "0.1.0",
"description": "Spearmint",
"name": "spearmint",
"version": "0.5.0",
"description": "An open-source developer tool that simplifies testing and hopes to help increase awareness about web accessibility.",
"author": "spearmintjs",
"build": {
"appId": "com.spearmint",
Expand Down Expand Up @@ -37,20 +37,23 @@
"react-dom": "^16.8.6",
"react-modal": "^3.8.1",
"react-monaco-editor": "^0.25.1",
"react-scripts": "3.4.1",
"react-scripts": "^3.4.1",
"sass": "^1.26.5",
"typescript": "^3.9.2",
"wait-on": "^3.3.0"
},
"scripts": {
"react-start": "react-scripts start",
"react-build": "NODE_ENV=production react-scripts build",
"test": "react-scripts test --env=jsdom",
"test:e2e": "./node_modules/mocha/bin/mocha src/__tests__/spec.e2e.js",
"test:integra": "mocha src/__tests__/spec.integra.js",
"test:watch": "jest --watch",
"react-start": "react-scripts start",
"react-eject": "react-scripts eject",
"build": "NODE_ENV=production npm run react-build && npm run electron-build",
"react-build": "NODE_ENV=production react-scripts build",
"electron-build": "NODE_ENV=production electron-builder -mwl",
"release": "npm run react-build && electron-builder --publish=always",
"build": "NODE_ENV=production npm run react-build && npm run electron-build",
"start-windows": "SET NODE_ENV=development concurrently \"cross-env BROWSER=none npm run react-start\" \"wait-on http://localhost:3000 && electron .\"",
"start": "NODE_ENV=development concurrently \"cross-env BROWSER=none npm run react-start\" \"wait-on http://localhost:3000 && electron .\""
},
"browserslist": {
Expand All @@ -69,9 +72,12 @@
"@testing-library/jest-dom": "^5.8.0",
"@testing-library/react": "^8.0.9",
"@testing-library/react-hooks": "^3.2.1",
"@types/classnames": "^2.2.11",
"@types/jest": "^25.2.3",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"chai": "^4.3.4",
"chai-as-promised": "^7.1.1",
"electron": "^5.0.3",
"electron-builder": "^22.6.1",
"electron-devtools-installer": "^3.0.0",
Expand All @@ -82,6 +88,7 @@
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^2.5.1",
"mocha": "^8.3.2",
"react-test-renderer": "^16.12.0",
"spectron": "^5.0.0",
"test-data-bot": "^0.8.0"
Expand Down
3 changes: 1 addition & 2 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>spearmint</title>
<title>spearmint | testing, simplified</title>
</head>

<body>
Expand All @@ -42,6 +42,5 @@
return '/monaco-editor-worker-loader-proxy.js';
},
};
// require(['vs/editor/editor.main'], function() {});
</script>
</html>
4 changes: 0 additions & 4 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ import RightPanel from './pages/RightPanel/RightPanel';
import About from './pages/About/About';

const App = () => {
// useReducer takes a reducer and initial state as
// args and return the current state paired with a dispatch method
// distpatchTo method invokes associated reducer function

const [global, dispatchToGlobal] = useReducer(globalReducer, globalState);

if (!global.isProjectLoaded) {
Expand Down
6 changes: 3 additions & 3 deletions src/__tests__/globalReducer.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -179,14 +179,14 @@ describe('Global Reducer works properly', () => {
});
});

it('should handle UPDATE_FILE_SHOW', () => {
let action = { type: 'UPDATE_FILE_SHOW', testString: '' };
it('should handle UPDATE_FILE', () => {
let action = { type: 'UPDATE_FILE', testString: '' };
expect(globalReducer(initialState, action)).toEqual({
...initialState,
file: '',
});
action = {
type: 'UPDATE_FILE_SHOW',
type: 'UPDATE_FILE',
testString: `import React from "react";
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect`,
Expand Down
49 changes: 49 additions & 0 deletions src/__tests__/spec.e2e.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
const Application = require('spectron').Application;
const path = require('path');
const chai = require('chai');
const chaiAsPromised = require('chai-as-promised');

// specifies the path of the application to launch
const electronPath = require('electron');

// tell spectron to look and use the main.js file + package.json located 2 levels above
const appPath = path.join(__dirname, '../..');


// instantiates the spearmint application given the optional paramaters of the Application API
const app = new Application({
path: electronPath, // string path to the Electron application executable to launch
args: [appPath], // array of paths to find the executable files and package.json
});

// define the use of chai and chai as promised packages
global.before(function () {
chai.should();
chai.use(chaiAsPromised);
});

describe('Application Accessibility Audit', function () {
this.timeout(10000);

beforeEach(function () {
return app.start();
});

afterEach(function () {
if (app && app.isRunning()) {
return app.stop();
}
});

it('Audits Accessibility', function (done) {
app.client.auditAccessibility().then(function (audit) {
if (audit.failed) {
console.error('Please address the following accessibility issues in your application: \n', audit.results)
}
else {
console.log('No accessibility issues have been found.')
}
done()
})
});
});
41 changes: 41 additions & 0 deletions src/__tests__/spec.integra.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
const Application = require('spectron').Application;
const path = require('path');
const assert = require('assert');

// specifies the path of the application to launch
const electronPath = require('electron');

// tell spectron to look and use the main.js file + package.json located 2 levels above
const appPath = path.join(__dirname, '../..');

// instantiates the spearmint application given the optional paramaters of the Application API
const app = new Application({
path: electronPath, // string path to the Electron application executable to launch
args: [appPath], // array of paths to find the executable files and package.json
});


describe('Application Accessibility Audit', function () {
this.timeout(10000);

beforeEach(function () {
return app.start();
});

afterEach(function () {
if (app && app.isRunning()) {
return app.stop();
}
});

it('Audits Accessibility', function () {
return app.client.auditAccessibility().then(function (audit) {
if (audit.failed) {
console.error('Please address the following accessibility issues in your application: \n', audit.results)
}
else {
console.log('No accessibility issues have been found.')
}
})
});
});
Binary file added src/assets/images/spearmintHomepage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/assets/stylesheets/colors.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
$mint: #02c2c3;
$mint2: #69e5ce;
$mint: #038181;
$mint2: #02c3c33f;
$dark-gray: #808080;
$light-gray: #d5d5d5;
$light-gray2: #f6f8f9;
Expand Down
2 changes: 1 addition & 1 deletion src/assets/stylesheets/reset.scss
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ video {

/* make sure to set some focus styles for accessibility */
:focus {
outline: 0;
outline: 2px solid darkblue;
}

/* HTML5 display-role reset for older browsers */
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
#AccTestTypesComponent{
margin-right: 35px;
}

#AccTestTypesLabel {
display: block;
margin-bottom: 6px;
}

.AccTestTypesInput{
margin-top: 4px;
min-height: 35px;
}
23 changes: 23 additions & 0 deletions src/components/AccTestComponent/AccTestTypes/AccTestTypes.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react';
import styles from './AccTestTypes.module.scss';

const AccTestTypes = ({ dispatch, action, currTypes }) => {
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
dispatch(action(e.target.value));
};

return (
<div id={styles.AccTestTypesComponent}>
<label id={styles.AccTestTypesLabel} for='accTestTypes'>
Choose Type of Accessibility Test
</label>
<select value={currTypes} id='accTestTypes' className={styles.AccTestTypesInput} onChange={handleChange}>
<option value='html'>HTML</option>
<option value='react'>React</option>
<option value='puppeteer'>Puppeteer</option>
</select>
</div>
);
};

export default AccTestTypes;
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
@import '../../../assets/stylesheets/fonts.scss';
@import '../../../assets/stylesheets/colors.scss';

#CatTagFilter {
font-weight: bold;
font-size: 0.75rem;
position: relative;
margin-left: 5px;
margin-top: 10px;
z-index: 3;

#accTestCatTypes:focus {
border: 2px solid darkblue;
}
}
Loading

0 comments on commit d58da10

Please sign in to comment.