From 66b423588ebfffb5c45a8e6f08271ac944473433 Mon Sep 17 00:00:00 2001 From: palash-signoz <88981777+palash-signoz@users.noreply.github.com> Date: Fri, 27 Aug 2021 12:21:24 +0530 Subject: [PATCH] Feature(FE): cypress base test case are updated (#275) * chore: video config is updated as it will not generate any video while running cypress * chore: cypress.env.json is added in the env file * chore: tsConfig is updated * feature: Cypress is updated with some of the test cases * chore: default test case is removed * chore: convertToNanoSecondsToSecond function is updated * chore: lock files, node_modules are ignored in git * test: metric are updated Co-authored-by: Ankit Nayan --- .gitignore | 6 + frontend/cypress.json | 4 +- frontend/cypress/CustomFunctions/Login.ts | 45 ++++++ frontend/cypress/fixtures/defaultApp.json | 35 ++++ frontend/cypress/fixtures/example.json | 5 - .../1-getting-started/todo.spec.ts | 152 ------------------ .../integration/appLayout/index.spec.ts | 26 +++ .../cypress/integration/metrics/index.spec.ts | 62 +++++++ frontend/cypress/support/commands.ts | 36 ++--- frontend/cypress/tsconfig.json | 2 + .../src/lib/convertToNanoSecondsToSecond.ts | 5 + frontend/tsconfig.json | 3 +- 12 files changed, 197 insertions(+), 184 deletions(-) create mode 100644 frontend/cypress/CustomFunctions/Login.ts create mode 100644 frontend/cypress/fixtures/defaultApp.json delete mode 100644 frontend/cypress/fixtures/example.json delete mode 100644 frontend/cypress/integration/1-getting-started/todo.spec.ts create mode 100644 frontend/cypress/integration/appLayout/index.spec.ts create mode 100644 frontend/cypress/integration/metrics/index.spec.ts create mode 100644 frontend/src/lib/convertToNanoSecondsToSecond.ts diff --git a/.gitignore b/.gitignore index 46c1cd6d9f..41231836e5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ +node_modules +yarn.lock + deploy/docker/environment_tiny/common_test frontend/node_modules frontend/.pnp @@ -23,6 +26,9 @@ frontend/yarn-error.log* frontend/src/constants/env.ts frontend/cypress/**/*.mp4 +# env file for cypress +frontend/cypress.env.json + .idea **/.vscode diff --git a/frontend/cypress.json b/frontend/cypress.json index 0967ef424b..01cb545a35 100644 --- a/frontend/cypress.json +++ b/frontend/cypress.json @@ -1 +1,3 @@ -{} +{ + "video": false +} diff --git a/frontend/cypress/CustomFunctions/Login.ts b/frontend/cypress/CustomFunctions/Login.ts new file mode 100644 index 0000000000..0f2f4a47e1 --- /dev/null +++ b/frontend/cypress/CustomFunctions/Login.ts @@ -0,0 +1,45 @@ +import ROUTES from "constants/routes"; + +const Login = ({ email, name }: LoginProps): void => { + const emailInput = cy.findByPlaceholderText("mike@netflix.com"); + + emailInput.then((emailInput) => { + const element = emailInput[0]; + // element is present + expect(element).not.undefined; + expect(element.nodeName).to.be.equal("INPUT"); + }); + emailInput.type(email).then((inputElements) => { + const inputElement = inputElements[0]; + const inputValue = inputElement.getAttribute("value"); + expect(inputValue).to.be.equals(email); + }); + + const firstNameInput = cy.findByPlaceholderText("Mike"); + firstNameInput.then((firstNameInput) => { + const element = firstNameInput[0]; + // element is present + expect(element).not.undefined; + expect(element.nodeName).to.be.equal("INPUT"); + }); + + firstNameInput.type(name).then((inputElements) => { + const inputElement = inputElements[0]; + const inputValue = inputElement.getAttribute("value"); + expect(inputValue).to.be.equals(name); + }); + + const gettingStartedButton = cy.get("button"); + gettingStartedButton.click(); + + cy.location("pathname").then((e) => { + expect(e).to.be.equal(ROUTES.APPLICATION); + }); +}; + +export interface LoginProps { + email: string; + name: string; +} + +export default Login; diff --git a/frontend/cypress/fixtures/defaultApp.json b/frontend/cypress/fixtures/defaultApp.json new file mode 100644 index 0000000000..aca47466de --- /dev/null +++ b/frontend/cypress/fixtures/defaultApp.json @@ -0,0 +1,35 @@ +[ + { + "serviceName": "frontend", + "p99": 1134610000, + "avgDuration": 744523000, + "numCalls": 267, + "callRate": 0.89, + "numErrors": 0, + "errorRate": 0, + "num4XX": 0, + "fourXXRate": 0 + }, + { + "serviceName": "customer", + "p99": 734422400, + "avgDuration": 348678530, + "numCalls": 267, + "callRate": 0.89, + "numErrors": 0, + "errorRate": 0, + "num4XX": 0, + "fourXXRate": 0 + }, + { + "serviceName": "driver", + "p99": 239234080, + "avgDuration": 204662290, + "numCalls": 267, + "callRate": 0.89, + "numErrors": 0, + "errorRate": 0, + "num4XX": 0, + "fourXXRate": 0 + } +] diff --git a/frontend/cypress/fixtures/example.json b/frontend/cypress/fixtures/example.json deleted file mode 100644 index 02e4254378..0000000000 --- a/frontend/cypress/fixtures/example.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "Using fixtures to represent data", - "email": "hello@cypress.io", - "body": "Fixtures are a great way to mock data for responses to routes" -} diff --git a/frontend/cypress/integration/1-getting-started/todo.spec.ts b/frontend/cypress/integration/1-getting-started/todo.spec.ts deleted file mode 100644 index d8c9810c02..0000000000 --- a/frontend/cypress/integration/1-getting-started/todo.spec.ts +++ /dev/null @@ -1,152 +0,0 @@ -/// - -// Welcome to Cypress! -// -// This spec file contains a variety of sample tests -// for a todo list app that are designed to demonstrate -// the power of writing tests in Cypress. -// -// To learn more about how Cypress works and -// what makes it such an awesome testing tool, -// please read our getting started guide: -// https://on.cypress.io/introduction-to-cypress - -describe('example to-do app', () => { - beforeEach(() => { - // Cypress starts out with a blank slate for each test - // so we must tell it to visit our website with the `cy.visit()` command. - // Since we want to visit the same URL at the start of all our tests, - // we include it in our beforeEach function so that it runs before each test - cy.visit('https://example.cypress.io/todo'); - }); - - it('displays two todo items by default', () => { - // We use the `cy.get()` command to get all elements that match the selector. - // Then, we use `should` to assert that there are two matched items, - // which are the two default items. - cy.get('.todo-list li').should('have.length', 2); - - // We can go even further and check that the default todos each contain - // the correct text. We use the `first` and `last` functions - // to get just the first and last matched elements individually, - // and then perform an assertion with `should`. - cy.get('.todo-list li').first().should('have.text', 'Pay electric bill'); - cy.get('.todo-list li').last().should('have.text', 'Walk the dog'); - }); - - it('can add new todo items', () => { - // We'll store our item text in a variable so we can reuse it - const newItem = 'Feed the cat'; - - // Let's get the input element and use the `type` command to - // input our new list item. After typing the content of our item, - // we need to type the enter key as well in order to submit the input. - // This input has a data-test attribute so we'll use that to select the - // element in accordance with best practices: - // https://on.cypress.io/selecting-elements - cy.get('[data-test=new-todo]').type(`${newItem}{enter}`); - - // Now that we've typed our new item, let's check that it actually was added to the list. - // Since it's the newest item, it should exist as the last element in the list. - // In addition, with the two default items, we should have a total of 3 elements in the list. - // Since assertions yield the element that was asserted on, - // we can chain both of these assertions together into a single statement. - cy - .get('.todo-list li') - .should('have.length', 3) - .last() - .should('have.text', newItem); - }); - - it('can check off an item as completed', () => { - // In addition to using the `get` command to get an element by selector, - // we can also use the `contains` command to get an element by its contents. - // However, this will yield the