Skip to content

Commit

Permalink
add support for adding audio via the ankiconnect android app
Browse files Browse the repository at this point in the history
update react-scripts 5.0.0 -> 5.0.1

upgrade react 17.0.2 -> 18.2.0

update cypress 8.5.0 -> 8.7.0

upgrade craco 5.5.0 -> 7.1.0

upgrade typescript 4.9.5 -> 5.0.2

upgrade cypress 8.7.0 -> ^9.0.0

upgrade cypress 9.7.0 -> 10.11.0

cypress upgrade wizard changes

upgrade cypress 10.11.0 -> 11.2.0

upgrade to cypress 12

fix yomichanDatabase test failing

add browser test for AnkiConnectSettings

refactor export view a bit

avoid react synchronous unmount warning

Warning: Attempted to synchronously unmount a root while React was already
rendering. React cannot finish unmounting the root until the current render has
completed, which may lead to a race condition.

Not comfortable with this solution, but it works.

fix export tests

fix Grammar tests

fix YomichanDictionary tests

move YomichanDictionary types to their own file

fix Dictionary tests
  • Loading branch information
barona-mika-vilpas authored and mikavilpas committed Mar 26, 2023
1 parent 9ecef2c commit 54c5ab1
Show file tree
Hide file tree
Showing 46 changed files with 5,054 additions and 6,095 deletions.
111 changes: 51 additions & 60 deletions sakura/README.md
Original file line number Diff line number Diff line change
@@ -1,79 +1,70 @@
# how to build a new version

Cd into this directory
# Common development instructions

```sh
(cd ../loaderapp && ./publish.sh)

```

# Getting Started with Create React App

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `yarn start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `yarn test`
# install dependencies
yarn install

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
# start the development server
yarn start

### `yarn build`
# run unit tests
npx cypress run-ct

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
# run browser tests
npx cypress run

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `yarn eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
# build a new version for deployment
(cd ../loaderapp && ./publish.sh)
```

To learn React, check out the [React documentation](https://reactjs.org/).
# How to develop against Ankiconnect Android

### Code Splitting
These instructions are for developing against the Android version of Ankiconnect
called Ankiconnect Android. This will work for the following scenarios:

This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
1. You have an android device such as your mobile phone or tablet.
2. You are using an existing version of Ankiconnect Android, or you are
developing a version with Android Studio and you can run it on your device.

### Analyzing the Bundle Size
## Prerequisites for development

This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
These instructions are for Chrome on a Mac. If you are using a different browser
or operating system, you may need to find the equivalent steps.

### Making a Progressive Web App
- Install Ankiconnect Android on your device
- Connect your device to your computer and enable USB debugging in Android.
- Connect your Android device to the same network as your computer.

This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
## Connecting to hare on your Android device

### Advanced Configuration
1. Find out the IP address of your computer. For example, if you are on a
Mac, you can run `ifconfig | grep inet` and look for the IP address that
starts with 192.168.0. or 10.0.0.
1. In the Ankiconnect Android app, go to the settings and change the cors setting
to `*`. This will allow access from any host. If you want to limit this, you
can also set it to `http://<the ip address of your computer>:4000`. The
settings will be taken into use immediately.
1. Start hare on your computer with `yarn start`. This will make it available to
the network so you can connect to it from your device.
1. On your device, open http://<your computer's IP address>:4000

This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
## Connect your computer's chrome to your Android device's chrome

### Deployment
1. Connect your Android device to your computer with a USB cable.
2. Open Chrome on your computer and go to chrome://inspect/#devices . You will
be presented with a list of tabs on your device. Choose the tab that is running
hare.
3. Now you can use the developer tools on your computer to debug the code on your
device. Run the following code to test the connection:

This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
```js
fetch("http://localhost:8765")
.then((r) => r.text())
.then(console.log);
```

### `yarn build` fails to minify
It will respond with "Ankiconnect Android is running.". If you get a CORS error,
double check that you have set the cors setting in the app to `*` or
`http://<your computer's IP address>:4000`.

This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
NOTE: on your device, you need to have the chrome tab active for this to work.
38 changes: 38 additions & 0 deletions sakura/cypress.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { defineConfig } from "cypress";

export default defineConfig({
env: {
coverage: false,
},

retries: {
runMode: 5,
openMode: 0,
},

video: false,
viewportHeight: 850,
viewportWidth: 400,

e2e: {
// We've imported your old cypress plugins here.
// You may want to clean this up later by importing these.
setupNodeEvents(on, config) {
return require("./cypress/plugins/index.js")(on, config);
},
baseUrl: "http://localhost:4000",
excludeSpecPattern: ["**/*.md"],
},

component: {
setupNodeEvents(on, config) {},
viewportWidth: 800,
viewportHeight: 800,
excludeSpecPattern: ["**/*.md"],
specPattern: "src/**/*.test.{js,ts,jsx,tsx}",
devServer: {
framework: "create-react-app",
bundler: "webpack",
},
},
});
21 changes: 0 additions & 21 deletions sakura/cypress.json

This file was deleted.

41 changes: 41 additions & 0 deletions sakura/cypress/e2e/AnkiconnectMockApi.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
export class AnkiconnectMockApi {
build(): void {
cy.intercept("GET", "http://127.0.0.1:8765/", {
body: "Ankiconnect is running.",
}).as("ankiconnect_is_running");

cy.intercept("POST", "http://127.0.0.1:8765/", (request) => {
if (request.body.version !== 6) {
throw new Error(`Unsupported version ${request.body.version}`);
}

switch (request.body.action) {
case "deckNames":
request.alias = "deckNames";
request.reply({
body: {
result: ["Default"],
error: null,
},
});
break;
case "modelNames":
request.alias = "modelNames";
request.reply({
result: ["Japanese 2022 new accent note"],
error: null,
});
break;
case "modelFieldNames":
request.alias = "modelFieldNames";
request.reply({
result: ["Expression", "Reading", "Meaning"],
error: null,
});
break;
default:
throw new Error(`Unsupported action ${request.body.action}`);
}
});
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/// <reference types="cypress" />

import { DictionaryPage, SettingsPage } from "../support/pages";
import { AnkiconnectMockApi } from "./AnkiconnectMockApi.tsx";

describe("dictionary view", () => {
// for now these use the actual api so there is no mocking!
Expand Down Expand Up @@ -154,11 +155,11 @@ describe("recursive searches", () => {
cy.contains("Search").click();

// click some word that can be looked up recursively
cy.get("[data-word=山辺]").should("exist").click();
cy.get(`[data-word="人"]`).first().should("exist").click();
cy.get(".modal-content").should("be.visible");
cy.url().should(
"contain",
encodeURI("/dict/広辞苑/prefix/犬/0/recursive/大辞林/prefix/山辺/0")
encodeURI("/dict/広辞苑/prefix/犬/0/recursive/大辞林/prefix//0")
);

// can close the modal
Expand Down Expand Up @@ -210,23 +211,30 @@ describe("recursive searches", () => {
});

it("uses the added yomichan dictionary as the default dict when available", () => {
// use AnkiConnect mock API to avoid needless connection errors in the cypress test log
const ankiconnectMockApi = new AnkiconnectMockApi();
ankiconnectMockApi.build();

// fallbacking to daijirin is tested in other tests already
//
const settings = new SettingsPage();
settings.visit();
settings.importYomichanDictionary("jmdict_english_truncated.zip");

// wait for the dictionary to be imported
cy.get('[id="dictionary-JMdict (English)"]').should("exist");

const dict = new DictionaryPage();
dict.visit();
dict.searchBox().type("あそこ"); // has to exist in the truncated dict
dict.searchButton().click();

// click some word that can be looked up recursively
cy.get("[data-word=彼処]").should("exist").click();
cy.get('[data-word="彼"]').first().should("exist").click();

cy.url().should(
"contain",
encodeURI("/#/dict/広辞苑/prefix/あそこ/0/recursive/jmdict/prefix/彼処/0")
encodeURI("/#/dict/広辞苑/prefix/あそこ/0/recursive/jmdict/prefix//0")
);
cy.contains("over there");

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ describe("export view", () => {
Audio: "audio",
Focus: "word",
Meaning2: "englishTranslation",
Snapshot: "(empty)",
});
});

Expand All @@ -76,7 +77,7 @@ describe("export view", () => {
// select an example sentence from the dictionary definition
cy.contains("高価な―をとりそろえる")
.children(".quote-actions")
.children(`button[aria-label="copy sentence"]`)
.find(`[aria-label="copy sentence"]`)
.click();

cy.intercept("http://localhost:12345", "POST").as("create jap only");
Expand All @@ -96,6 +97,7 @@ describe("export view", () => {
Audio: "",
Focus: "品物",
Meaning2: "",
Snapshot: "",
},
tags: ["hare"],
options: {
Expand All @@ -108,13 +110,16 @@ describe("export view", () => {

// next, select an audio sentence
cy.contains("頼んでいた品物が今日届いた。")
.siblings(`[aria-label="copy sentence"]`)
.parent()
.find(`[aria-label="copy sentence"]`)
.click();
cy.contains("The article which I have ordered arrived today.")
.siblings(`[aria-label="copy sentence"]`)
.parent()
.find(`[aria-label="copy sentence"]`)
.click();
cy.get(`[aria-label="download audio"]`)
.children(`[aria-label="copy sentence"]`)
.parent()
.find(`[aria-label="copy sentence"]`)
.first()
.click();

Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
describe("grammar view", () => {
it("can search for grammar points", () => {
cy.visit("#/grammar", {
onBeforeLoad(win) {
cy.spy(win.console, "log").as("consoleLog");
},
});
cy.visit("#/grammar");

cy.get("[aria-label=Search]").should("be.focused");
cy.get("[aria-label=Search]").type("という");
Expand Down
Loading

0 comments on commit 54c5ab1

Please sign in to comment.