CMPUT-401: REACT JS Front end

CMPUT-401-withouthistory/docs/README.md

@@ -0,0 +1 @@
+

CMPUT-401-withouthistory/docs/deploymentManuel.md

@@ -0,0 +1,117 @@
+# Deployment Manuel (Paradigm Layout)
+
+## Prerequisites
+
+1. Install python3 (for your us) (make sure version > 3.8.2)
+2. ```pip install pip install "fastapi[all]" ```
+3.  Install ```nvm``` use [this tutorial](https://github.com/nvm-sh/nvm)
+4.  Install node using nvm. Same Tutorial as 3
+5. `git clone {our repo}`
+
+### Note:
+All version for ```npm``` should be the latest. 
+
+
+## Test Webserver Security Curtin
+
+First we need to set `screen` so cybera doesn't kill the process when we exit the server. 
+
+`screen -S internet_facing`
+
+Second things second we use fast api to run the test development server. This means that we need to install it:
+
+`pip install "uvicorn[standard]"`
+
+Next things next we need to make a run file that will talk to the `localhost` i.e the backend that should **never** be exposed to the internet without filtering. This means to do the following:
+
+`mkdir internet_facing`
+
+`cp -r main.py .../internet_facing` 
+
+Assuming fast api and uvicorn are installed together run the following command. 
+
+`uvicorn main:app --port 8081` 
+
+Assuming everything ran without issues do the following:
+
+`ctrl-a d`
+
+## Frontend Deployment
+
+Follow these steps exactly as failure to this will cause the system to not render properly. 
+
+### Website 
+1. `cd morphodict` From the current repo page.
+2. `rm package-lock.json`
+3. `npm i` 
+4. `npm run build` 
+5. `cd build`
+6. `pwd`
+7. Copy the results from 7
+
+After runnin this the website should build correctly.
+### Server 
+1. `sudo apt-get install nginx`
+2. `cd /etc/nginx/sites-available/`
+3. `sudo nano morph_deploy.nginx`
+4. Paste the following:
+
+{
+
+    server 
+        {
+
+            listen 80;
+
+            root {#8 pasted from above};
+            index index.html;
+
+            location / {
+            try_files $uri /index.html;
+            }
+
+            location /local/ {
+            proxy_set_header Host $http_host;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_redirect off;
+            proxy_buffering off;
+            proxy_pass http://127.0.0.1:8081;
+            }
+        }
+
+    server {
+
+        listen [::]:80;
+
+        root {#8 pasted from above};;
+        index index.html;
+
+        location / {
+            try_files $uri /index.html;
+        }
+
+        location /local/ {
+        proxy_set_header Host $http_host;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_redirect off;
+        proxy_buffering off;
+        proxy_pass http://[::1]:8081;
+        }
+
+        }
+}
+
+5. `sudo ln -s /etc/nginx/sites-available/morph_deploy.nginx /etc/nginx/sites-enabled/morph_deploy.nginx`
+
+6. `sudo nginx -T` Confirm no erros are encountered
+7. `sudo systemctl reload nginx`
+
+From here you should be done, now time to launch the database!
+
+## Backend REST API
+
+Please follow along from here: https://morphodict.readthedocs.io/en/latest/developers-guide.html#installing-for-the-first-time

CMPUT-401-withouthistory/frontend-react/README.md

@@ -0,0 +1,80 @@
+# 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:
+
+### `npm install`
+
+This command should install all dependencies for you.
+If anything goes wrong, check package.json
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+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.
+
+### `npx cypress run`
+
+Launches Cypress integration tests, and tests for frontend rendering\
+Check this section about installing and running [Cypress](https://docs.cypress.io/guides/getting-started/installing-cypress) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+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.
+
+### `npm run 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).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+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)
+
+### Analyzing the Bundle Size
+
+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)
+
+### Making a Progressive Web App
+
+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)
+
+### Advanced Configuration
+
+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)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+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)

CMPUT-401-withouthistory/frontend-react/cypress.json

@@ -0,0 +1 @@
+{}

CMPUT-401-withouthistory/frontend-react/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

CMPUT-401-withouthistory/frontend-react/cypress/integration/SelectionCompTests/selection_results_tests.js

@@ -0,0 +1,24 @@
+// selection_cmp_right_item_count.js created with Cypress
+// The edmonton CW thing is an issue with the test data not with the site itself.
+
+describe("Checks if we return something to the screen", () => {
+  it("shows connected data points", () => {
+    cy.visit("http://10.2.10.152/search/?q=amisk");
+    cy.contains("amisk");
+    cy.contains("amiskwaciy-wâskahikan");
+  });
+});
+
+describe("Checks if we return something to the screen", () => {
+  it("Shows that the first def contains the right words", () => {
+    cy.visit("http://10.2.10.152/search/?q=amisk");
+    cy.contains("beaver");
+  });
+});
+
+describe("Checks if we return something to the screen", () => {
+  it("Shows that the second word def contains the right words", () => {
+    cy.visit("http://10.2.10.152/search/?q=amisk");
+    cy.contains("Edmonton");
+  });
+});

CMPUT-401-withouthistory/frontend-react/cypress/integration/crkeng/about.spec.js

@@ -0,0 +1,60 @@
+/**
+ * General tests about the website's behaviour as a regular website.
+ */
+context("The About page", function () {
+  describe("Visiting any page", () => {
+    it("should have a link to the about page in the footer", () => {
+      cy.visit("http://10.2.10.152");
+      cy.get("footer").contains("a", "About");
+    });
+  });
+
+  beforeEach(function () {
+    cy.visit("http://10.2.10.152/about");
+  });
+
+  describe("Visiting the about page", () => {
+    it("should have a few required sections", () => {
+      cy.get("main").contains("h2", /Source Materials/i);
+      cy.get("main").contains("h2", "Credits");
+      cy.get("main").contains("h2", /Contact Us/i);
+    });
+
+    it("should have a mailto link", () => {
+      cy.contains("altlab@ualberta.ca");
+    });
+
+    it("should have an href in the mailto link", () => {
+      cy.contains("section#contact-us", "altlab@ualberta.ca");
+    });
+    it("should have partner logos", () => {
+      cy.get("main .partner-logos").should("be.visible").as("logos");
+
+      cy.get("@logos").get('img[alt="MESC"]');
+      cy.get("@logos").get('img[alt="University of Alberta"]');
+      cy.get("@logos").get('img[alt="National Research Council Canada"]');
+      cy.get("@logos").get('img[alt="First Nations University"]');
+      cy.get("@logos").get(
+        'img[alt="Social Sciences and Humanities Research Council"]'
+      );
+    });
+  });
+
+  describe("Visiting the contact us page", function () {
+    it("should have a mailto: link to the altlab email address", function () {
+      cy.visit("http://10.2.10.152/contact-us");
+      cy.contains("a", "altlab@ualberta.ca")
+        // email address is an alias with '+', useful for email filtering.
+        .should("have.attr", "href", "mailto:altlab+itwewina@ualberta.ca");
+    });
+
+    //SMALL ISSUE (DOESN'T want to clikc on contact us link)
+    // it("should be linked in the footer", function () {
+    //   cy.visit("http://10.2.10.152");
+
+    //   cy.get('a[href*="Contact-us"').click();
+
+    //   cy.url().should("contain", "/contact-us");
+    // });
+  });
+});

CMPUT-401-withouthistory/frontend-react/cypress/integration/crkeng/click-in-text.spec.js

@@ -0,0 +1,33 @@
+// describe("click-in-text", function () {
+//   beforeEach(function () {
+//     cy.visit("/click-in-text-embedded-test");
+//   });
+
+//   function withPopupDivs(popupDivsHandler) {
+//     cy.get("transover-popup").should((popups) => {
+//       expect(popups.length).to.eql(1);
+//       const popup = popups[0];
+//       const divs = Cypress.$(popup.shadowRoot.querySelectorAll("div"));
+//       popupDivsHandler(divs);
+//     });
+//   }
+
+//   it("works on Cree words", function () {
+//     cy.contains("span", "wâpamêw").click();
+//     withPopupDivs((popupDivs) => {
+//       expect(popupDivs).to.be.visible;
+//       expect(popupDivs).to.contain("s/he sees s.o");
+//       expect(popupDivs).to.contain("s/he witnesses s.o");
+//     });
+//   });
+
+//   it("works on English words", function () {
+//     cy.contains("span", "hello").click();
+//     withPopupDivs((popupDivs) => {
+//       expect(popupDivs).to.be.visible;
+//       expect(popupDivs).to.contain("tânisi");
+//       expect(popupDivs).to.contain("atamiskawêw");
+//     });
+//   });
+// });
+// TEST CANNOT WORK WITH CURRENT IMPLEMENT

CMPUT-401-withouthistory/frontend-react/cypress/integration/crkeng/general.spec.js

@@ -0,0 +1,38 @@
+/**
+ * General tests about the website's behaviour as a regular website.
+ */
+context("General", function () {
+  beforeEach(function () {
+    cy.visit("http://10.2.10.152/");
+  });
+
+  describe("Visiting the home page", () => {
+    it("should say “itwêwina” in the header", () => {
+      cy.get("h1").should("be.visible").should("contain", "itwêwina");
+    });
+
+    it("should greet the users in the content", () => {
+      cy.get("main")
+        .contains("h1, h2", /\bt[âā]n[i']?si\b/)
+        .should("be.visible");
+    });
+  });
+
+  // TODO reenable when welcome page supports syllabics
+  // describe("I want see all written Cree in Western Cree Syllabics", function () {
+  //   it("should be accessible from the language selector", function () {
+  //     cy.get("[data-cy=settings-menu]")
+  //       // this should be `.type('{enter}')` but that mysteriously fails when
+  //       // running cypress against firefox on Ubuntu, even though pressing enter
+  //       // in the browser *does* work. Workaround is to click() instead.
+  //       .click();
+
+  //     cy.get("[data-cy=orthography-choices]")
+  //       .should("be.visible")
+  //       .contains("Syllabics")
+  //       .click();
+
+  //     cy.get("h1").contains("ᐃᑘᐏᓇ");
+  //   });
+  // });
+});

CMPUT-401-withouthistory/frontend-react/cypress/integration/crkeng/legend.spec.js

@@ -0,0 +1,27 @@
+context("The Legend page", function () {
+  describe("Visiting any page", () => {
+    it("should have a link to the about page in the footer", () => {
+      cy.visit("http://10.2.10.152/");
+      cy.contains("Legend of abbreviations").click();
+
+      cy.url().should("contain", "cree-dictionary-legend");
+    });
+  });
+
+  describe("Visiting the legend page", () => {
+    beforeEach(function () {
+      cy.visit("http://10.2.10.152/cree-dictionary-legend");
+    });
+
+    it("should have a title", () => {
+      cy.get("main").contains("h2", /\bLegend/i);
+    });
+
+    const AROKS_ABBREVIATIONS = ["s.t.", "s.o.", "s/he"];
+    for (const abbrv of AROKS_ABBREVIATIONS) {
+      it(`should define ${abbrv}`, () => {
+        cy.get("main").contains("dt", abbrv).next().should("match", "dd");
+      });
+    }
+  });
+});