Perfect Tense Editor

Browser Extension

Requirements for Extension:

• NodeJS - Javascript runtime
• VSCode - Recomended editor
• Chrome or Firefox - Web browser

How to run:

In terminal or command prompt

install dependencies
 - npm install
Transpile the code
 - npm run build:extension (transpiles the code)


yarn commands will work too if yarn is installed.

In Chrome web browser

1. Go to: chrome://extensions
2. Toggle: "developer mode" on.
3. Click on: "Load unpacked"
4. Select the newly created folder "build" from the project folder.
5. Thats it.

In Firefox web browser

1. Go to: about:debugging
2. Select: "Enable add-on debugging"
3. Click on: "Load Temporary Add-on…"
4. Open the newly created folder "build" from the project folder, and choose the "manifest.json" file.
5. Thats it.

Storybook

We have now storybook enabled in out project. This means that you can modify the design of all our components for experimentation or more. You don't need to know any Javascript knowledge to acheieve this.

How to run:

Start Storybook in Terminal

# install dependencies
 - npm install
# start storybook
 - npm run storybook

yarn commands will work too if yarn is installed.

Once it builds, it will load storybook in your default browser with all components we have. To interact with components, change css files of corresponding component located in src/styles, changes will be reflected instantaneously on the opened browser window. This is a good place to mock out new design.

End-to-end tests

Running E2E tests on our test page

• kill any other local server using port 3080
• start the mock server: yarn mock-server
• start webpack for our test page: yarn dev
• start cypress:
  • to open in Chrome: yarn e2e
  • to run in headless Electron: yarn e2e:ci

Running E2E tests on other websites

• kill any other local server using port 3080
• start the mock server: yarn mock-server
• start webpack for the extension: yarn dev:cypress
• start cypress with the Chrome extension: yarn e2e:extension