smalruby3-gui

Smalruby3 GUI is a set of React components that comprise the interface for creating and running Smalruby 3.0 projects. It forked from LLK/scratch-gui .

Installation

This requires you to have Git and Node.js installed.

In your own node environment/application:

npm install https://github.com/smalruby/smalruby3-gui.git

If you want to edit/play yourself:

git clone https://github.com/smalruby/smarluby3-gui.git
cd smarluby3-gui
npm install

You may want to add --depth=1 to the git clone command because there are some large files in the git repository history.

Getting started

Running the project requires Node.js to be installed.

Running

Open a Command Prompt or Terminal in the repository and run:

npm start

Then go to http://localhost:8601/ - the playground outputs the default GUI component

Testing

Documentation

You may want to review the documentation for Jest and Enzyme as you write your tests.

See jest cli docs for more options.

Running tests

NOTE: If you're a Windows user, please run these scripts in Windows cmd.exe instead of Git Bash/MINGW64.

Before running any tests, make sure you have run npm install from this (scratch-gui) repository's top level.

Main testing command

To run linter, unit tests, build, and integration tests, all at once:

npm test

Running unit tests

To run unit tests in isolation:

npm run test:unit

To run unit tests in watch mode (watches for code changes and continuously runs tests):

npm run test:unit -- --watch

You can run a single file of integration tests (in this example, the button tests):

$(npm bin)/jest --runInBand test/unit/components/button.test.jsx

Running integration tests

Integration tests use a headless browser to manipulate the actual HTML and javascript that the repo produces. You will not see this activity (though you can hear it when sounds are played!).

To run the integration tests, you'll first need to install Chrome, Chromium, or a variant, along with Chromedriver.

Note that integration tests require you to first create a build that can be loaded in a browser:

npm run build

Then, you can run all integration tests:

npm run test:integration

Or, you can run a single file of integration tests (in this example, the backpack tests):

$(npm bin)/jest --runInBand test/integration/backpack.test.js

If you want to watch the browser as it runs the test, rather than running headless, use:

USE_HEADLESS=no $(npm bin)/jest --runInBand test/integration/backpack.test.js

Note: If you are seeing failed tests related to chromedriver being incompatible with your version of Chrome, you may need to update chromedriver with:

npm install chromedriver@{version}

Troubleshooting

Ignoring optional dependencies

When running npm install, you can get warnings about optional dependencies:

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.2.7

You can suppress them by adding the no-optional switch:

npm install --no-optional

Further reading: Stack Overflow

Resolving dependencies

When installing for the first time, you can get warnings that need to be resolved:

npm WARN eslint-config-scratch@5.0.0 requires a peer of babel-eslint@^8.0.1 but none was installed.
npm WARN eslint-config-scratch@5.0.0 requires a peer of eslint@^4.0 but none was installed.
npm WARN scratch-paint@0.2.0-prerelease.20190318170811 requires a peer of react-intl-redux@^0.7 but none was installed.
npm WARN scratch-paint@0.2.0-prerelease.20190318170811 requires a peer of react-responsive@^4 but none was installed.

You can check which versions are available:

npm view react-intl-redux@0.* version

You will need to install the required version:

npm install  --no-optional --save-dev react-intl-redux@^0.7

The dependency itself might have more missing dependencies, which will show up like this:

user@machine:/path/to/smalruby3-gui$ npm install  --no-optional --save-dev react-intl-redux@^0.7
smalruby-gui@0.9.1 /path/to/smalruby3-gui
├── react-intl-redux@0.7.0
└── UNMET PEER DEPENDENCY react-responsive@5.0.0

You will need to install those as well:

npm install  --no-optional --save-dev react-responsive@^5.0.0

Further reading: Stack Overflow

Troubleshooting

If you run into npm install errors, try these steps:

1. run npm cache clean --force
2. Delete the node_modules directory
3. Delete package-lock.json
4. run npm install again

Publishing to GitHub Pages

see Scratch's document: Read the wiki for a step-by-step guide.