diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000..bfeae3746 --- /dev/null +++ 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. \ No newline at end of file diff --git a/README.md b/README.md index b0660b714..2318f3afc 100644 --- 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)

diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js index 3c4bb3c44..36f359ec6 100644 --- a/cypress/plugins/index.js +++ b/cypress/plugins/index.js @@ -1,6 +1,6 @@ +const _ = require("lodash"); const Promise = require("bluebird"); const axios = require("axios").default; -const _ = require("lodash"); require("dotenv").config(); @@ -8,9 +8,8 @@ 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 index 6fd82fb4b..f89e01c59 100644 --- 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 index 1cf0f3093..1deb6aeef 100644 --- a/src/components/SignInForm.tsx +++ b/src/components/SignInForm.tsx @@ -116,7 +116,11 @@ const SignInForm: React.FC = ({ 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} /> )}