Readme - Add Additional NPM Scripts table (#293)

* readme additional npm scripts table * add link to package.json * add set shell as syntax for code snippet * add project dashboard link * add MIT license * update readme * set default password in error on sigin form * remove stale tests * cleanup plugins file * db updates and tests table Co-authored-by: Amir Rustamzadeh <[email protected]>
cypress-io · May 8, 2020 · 844ec9a · 844ec9a
1 parent 32f1442
commit 844ec9a
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 49 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,22 @@
+
+MIT License
+
+Copyright (c) 2020 Cypress.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -15,27 +15,52 @@ A payment application to demonstrate **real-world** usage of [Cypress](https://c
 🚀 Full-stack Express/React application with real-world features and tests  
 👮‍♂️ Local Authentication  
 🔥 Database Seeding with End-to-end Tests  
-💻 CI/CD + [Cypress Dashboard](https://cypress.io/dashboard)
+💻 CI/CD + [Cypress Dashboard](https://dashboard.cypress.io/projects/7s5okt)
 
 ## Getting Started
 
 ### Installation
 
-```
+```shell
 yarn install
 ```
 
-### Running the App
+### Run the app along with Cypress
 
-```
+```shell
 yarn dev
 ```
 
+### Tests
+
+| Type | Location                                 |
+| ---- | ---------------------------------------- |
+| api  | [cypress/tests/api](./cypress/tests/api) |
+| ui   | [cypress/tests/ui](./cypress/tests/ui)   |
+| unit | [`src/__tests__`](./src/__tests__)       |
+
 ### Database
 
-The database is located in [data/database.json](./data/database.json) and is [reseeded](./data/dev-seed.json) each time the application is started.
+**The default password for all users is `s3cret`.**
+
+The database is located in [data/database.json](./data/database.json) and is [reseeded](./data/dev-seed.json) each time the application is started (via `yarn dev`). [lowdb](https://github.com/typicode/lowdb) is used to interact with the database.
+
+Backend interactions with the database are located in [backend/database.ts](backend/database.ts)
+
+### Additional NPM Scripts
+
+| Script         | Description                                                          |
+| -------------- | -------------------------------------------------------------------- |
+| start          | Starts backend and frontend                                          |
+| types          | Validates types                                                      |
+| db:seed        | Generates fresh database seeds for json files in /data               |
+| dev:mobile     | Starts backend, frontend and Cypress with mobile-cypress.json config |
+| start:empty    | Starts backend, frontend and Cypress with empty database seed        |
+| start:test     | Starts backend, frontend and Cypress with test database seed         |
+| tsnode         | Customized ts-node command to get around react-scripts restrictions  |
+| list:dev:users | Provides id and username for users in the dev database               |
 
-It provides several existing users with the password of `s3cret`.
+For a complete list of scripts see [package.json](./package.json)
 
 <br />
 <br />

diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
@@ -1,16 +1,15 @@
+const _ = require("lodash");
 const Promise = require("bluebird");
 const axios = require("axios").default;
-const _ = require("lodash");
 
 require("dotenv").config();
 
 module.exports = (on, config) => {
   config.env.defaultPassword = process.env.SEED_DEFAULT_USER_PASSWORD;
   config.env.paginationPageSize = process.env.PAGINATION_PAGE_SIZE;
   config.env.mobileViewportWidth = process.env.MOBILE_VIEWPORT_WIDTH;
-  const baseApiUrl = process.env.BASE_API_URL;
-
   config.env.isMobileViewport = config.viewportWidth < config.env.mobileViewportWidth;
+  const baseApiUrl = process.env.BASE_API_URL;
 
   on("task", {
     "db:seed"() {
@@ -56,8 +55,6 @@ module.exports = (on, config) => {
     },
   });
 
-  //require("@cypress/code-coverage/task")(on, config);
-  // IMPORTANT to return the config object
-  // with the any changed environment variables
+  require("@cypress/code-coverage/task")(on, config);
   return config;
 };
diff --git a/cypress/tests/ui/transaction-feeds.spec.ts b/cypress/tests/ui/transaction-feeds.spec.ts
@@ -57,42 +57,6 @@ describe("Transaction Feed", function () {
     });
   });
 
-  // TODO: temporary placement
-  describe("ancillary tests", function () {
-    if (Cypress.env("isMobileViewport")) {
-      it("defaults side navigation to closed (mobile)", function () {
-        cy.getBySel("sidenav-user-balance").should("not.be.visible");
-      });
-
-      it("shows amount range in drawer on mobile", function () {
-        cy.getBySel("nav-personal-tab").click().should("have.class", "Mui-selected");
-        cy.getBySelLike("filter-amount-range-button").click({ force: true });
-        cy.getBySel("amount-range-filter-drawer").should("be.visible");
-        cy.getBySel("amount-range-filter-drawer-close").click();
-      });
-
-      it("shows date range calendar full screen on mobile", function () {
-        cy.getBySel("nav-personal-tab").click().should("have.class", "Mui-selected");
-
-        cy.getBySelLike("filter-date-range-button").scrollIntoView().click({ force: true });
-
-        cy.getBySel("date-range-filter-drawer").should("be.visible");
-
-        // Potential Cypress Bug:
-        // This is a potential bug with two overlapping fixed elements
-        // https://github.com/cypress-io/cypress/issues/1242
-        // https://github.com/cypress-io/cypress/issues/5959
-        // cy.getBySel("app-name-logo").should("not.be.visible");
-
-        cy.getBySel("date-range-filter-drawer-close").click();
-      });
-    } else {
-      it("defaults side navigation to open (desktop)", function () {
-        cy.getBySel("sidenav-user-balance").should("be.visible");
-      });
-    }
-  });
-
   describe("renders and paginates all transaction feeds", function () {
     it("renders transactions item variations in feed", function () {
       cy.route("/transactions/public*", "fixture:public-transactions").as(
@@ -184,6 +148,7 @@ describe("Transaction Feed", function () {
           .its("response.body.results")
           .should("have.length", Cypress.env("paginationPageSize"));
 
+        // Temporary fix
         if (Cypress.env("isMobileViewport")) {
           cy.wait(10);
         }

diff --git a/src/components/SignInForm.tsx b/src/components/SignInForm.tsx
@@ -116,7 +116,11 @@ const SignInForm: React.FC<Props> = ({ authService }) => {
                     id="password"
                     data-test="signin-password"
                     error={touched && value !== initialValue && Boolean(error)}
-                    helperText={touched && value !== initialValue && touched ? error : ""}
+                    helperText={
+                      touched && value !== initialValue && touched
+                        ? `${error} - Default: "s3cret"`
+                        : ""
+                    }
                     {...field}
                   />
                 )}