-
-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
67 changed files
with
3,218 additions
and
572 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
import { LoginPage } from '@support/pages/login.page' | ||
import { InventoryPage } from '@support/pages/inventory.page' | ||
import { LoginInfo } from '..' | ||
|
||
describe('Cart', () => { | ||
// create a small type on the fly using jsdoc comment | ||
// just to help type check help us | ||
const user: LoginInfo = Cypress.env('users').standard | ||
// we can even check if the user object is valid | ||
if (!user) { | ||
throw new Error('Missing the standard user') | ||
} | ||
|
||
// before each test, quickly login the user | ||
// or restore the previous user session | ||
beforeEach(() => { | ||
LoginPage.login(user.username, user.password) | ||
cy.visit('/inventory.html') | ||
cy.location('pathname').should('equal', '/inventory.html') | ||
}) | ||
|
||
it('adds items to the cart', { viewportHeight: 1200 }, () => { | ||
// confirm the cart badge does not exist at first | ||
InventoryPage.getCartBadge().should('not.exist') | ||
|
||
// add the item "Sauce Labs Bike Light" to the cart | ||
// by clicking the button "Add to cart" | ||
InventoryPage.addItemToCart('Sauce Labs Bike Light') | ||
cy.contains('.inventory_item', 'Sauce Labs Bike Light').within(() => { | ||
// the button should switch to "Remove" | ||
cy.contains('button', 'Add to cart').should('not.exist') | ||
cy.contains('button', 'Remove') | ||
}) | ||
// the shopping cart link should have number 1 | ||
InventoryPage.getCartBadge() | ||
.should('have.text', 1) | ||
.scrollIntoView() | ||
.should('be.visible') | ||
// add the item "Sauce Labs Bolt T-Shirt" to the cart | ||
// by clicking the button "Add to cart" | ||
InventoryPage.addItemToCart('Sauce Labs Bolt T-Shirt') | ||
cy.contains('.inventory_item', 'Sauce Labs Bolt T-Shirt').within(() => { | ||
// the button should switch to "Remove" | ||
cy.contains('button', 'Add to cart').should('not.exist') | ||
cy.contains('button', 'Remove') | ||
}) | ||
// the shopping cart link should have number 2 | ||
// tip: use https://on.cypress.io/scrollintoview command | ||
// to bring the shopping cart element into the viewport | ||
InventoryPage.getCartBadge() | ||
.should('have.text', 2) | ||
.scrollIntoView() | ||
.should('be.visible') | ||
// there should be two buttons with text "Remove" | ||
// on the inventory page | ||
// https://glebbahmutov.com/cypress-examples/#querying | ||
cy.get('.inventory_item:contains("Remove")').should('have.length', 2) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
import { LoginPage } from '@support/pages/login.page' | ||
import { InventoryPage } from '@support/pages/inventory.page' | ||
import { LoginInfo } from '..' | ||
|
||
describe('Cart', () => { | ||
const user: LoginInfo = Cypress.env('users').standard | ||
// we can even check if the user object is valid | ||
if (!user) { | ||
throw new Error('Missing the standard user') | ||
} | ||
|
||
// before each test, quickly login the user | ||
// or restore the previous user session | ||
beforeEach(() => { | ||
LoginPage.login(user.username, user.password) | ||
cy.visit('/inventory.html') | ||
cy.location('pathname').should('equal', '/inventory.html') | ||
}) | ||
|
||
it( | ||
'can be controlled via application methods', | ||
{ viewportHeight: 1200 }, | ||
() => { | ||
cy.log('**cart starts empty**') | ||
// get the shopping cart object reference | ||
// https://on.cypress.io/window | ||
// https://on.cypress.io/its | ||
cy.window() | ||
.its('ShoppingCart') | ||
// and call the production code method | ||
// that returns the cart contents list of ids | ||
.invoke('getCartContents') | ||
// it should be an empty array | ||
.should('deep.equal', []) | ||
cy.log('**adds an item by making a method call**') | ||
// add a product id 2 to the cart using ShoppingCart method | ||
// add a product id 4 to the cart using ShoppingCart method | ||
// confirm the cart badge element on the page | ||
// shows the badge text 2 | ||
// hint: use the InventoryPage page object methods | ||
// to interact with the page user interface | ||
cy.window().its('ShoppingCart').invoke('addItem', 2) | ||
cy.window().its('ShoppingCart').invoke('addItem', 4) | ||
InventoryPage.getCartBadge().should('have.text', 2) | ||
// grab the ShoppingCart reference again | ||
// and call the production method to get the cart contents | ||
// it should now be the list [2, 4] | ||
cy.window() | ||
.its('ShoppingCart') | ||
.invoke('getCartContents') | ||
.should('deep.equal', [ | ||
{ id: 2, n: 1 }, | ||
{ id: 4, n: 1 }, | ||
]) | ||
|
||
cy.log('**visit the cart page**') | ||
// visit the cart page | ||
// https://on.cypress.io/visit | ||
cy.visit('/cart.html') | ||
// there should be two items in the cart list | ||
cy.get('.cart_list .cart_item').should('have.length', 2) | ||
}, | ||
) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import { LoginPage } from '@support/pages/login.page' | ||
import { LoginInfo } from '..' | ||
|
||
const user: LoginInfo = Cypress.env('users').standard | ||
// we can even check if the user object is valid | ||
if (!user) { | ||
throw new Error('Missing the standard user') | ||
} | ||
|
||
// before each test, quickly login the user | ||
// or restore the previous user session | ||
beforeEach(() => { | ||
LoginPage.login(user.username, user.password) | ||
}) | ||
|
||
it('shows the cart items', { viewportHeight: 1200 }, () => { | ||
const ids = [ | ||
{ id: 0, n: 1 }, | ||
{ id: 1, n: 2 }, | ||
{ id: 2, n: 5 }, | ||
] | ||
// set the ids in the local storage item "cart-contents" | ||
window.localStorage.setItem('cart-contents', JSON.stringify(ids)) | ||
cy.visit('/cart.html') | ||
cy.getByTest('CartBadge', '3') | ||
cy.getByTest('CartContents').should('be.visible') | ||
cy.getByTest('CartItem').should('have.length', 3) | ||
// iterate over the data and verify each item shown | ||
ids.forEach((id, k) => { | ||
cy.getByTest('CartItem') | ||
.eq(k) | ||
.getByTest('CartQuantity') | ||
.should('have.value', ids[k].n) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,139 @@ | ||
import { LoginPage } from '@support/pages/login.page' | ||
import { InventoryPage } from '@support/pages/inventory.page' | ||
import { LoginInfo } from '..' | ||
import { InventoryData } from '@fixtures/inventory-data' | ||
import { ShoppingCart } from '../../../src/utils/shopping-cart' | ||
|
||
describe('Cart', { viewportHeight: 1200 }, () => { | ||
const user: LoginInfo = Cypress.env('users').standard | ||
// we can even check if the user object is valid | ||
if (!user) { | ||
throw new Error('Missing the standard user') | ||
} | ||
|
||
// before each test, quickly login the user | ||
// or restore the previous user session | ||
beforeEach(() => { | ||
LoginPage.login(user.username, user.password) | ||
cy.visit('/inventory.html') | ||
cy.location('pathname').should('equal', '/inventory.html') | ||
}) | ||
|
||
it('shows the added items in order they were added', () => { | ||
const items = [ | ||
'Sauce Labs Bike Light', | ||
'Sauce Labs Bolt T-Shirt', | ||
'Sauce Labs Onesie', | ||
] | ||
// find an id for each inventory item by name | ||
// and store the ids in the array "ids" | ||
// const ids = ... | ||
const ids = items | ||
.map((name) => Cypress._.find(InventoryData, { name })!.id) | ||
.map((id) => ({ id, n: 1 })) | ||
// add each item to cart using the InventoryPage object | ||
items.forEach(InventoryPage.addItemToCart) | ||
cy.log('**added all items to cart**') | ||
// confirm the cart badge shows the right number of items | ||
// then click on it | ||
// https://on.cypress.io/click | ||
InventoryPage.getCartBadge() | ||
.should('have.text', items.length) | ||
.scrollIntoView() | ||
.wait(1000) | ||
.click() | ||
// confirm we move to the cart page | ||
// https://on.cypress.io/location | ||
cy.location('pathname').should('equal', '/cart.html') | ||
// confirm the cart items list has the right number of elements | ||
cy.get('.cart_list .cart_item').should('have.length', items.length) | ||
cy.log('**shows each item in order**') | ||
// iterate over the items | ||
items.forEach((itemName, k) => { | ||
// confirm each itm is at the right place | ||
// on the page in the list of items | ||
// https://on.cypress.io/get | ||
// https://on.cypress.io/eq | ||
cy.get('.cart_list .cart_item') | ||
.eq(k) | ||
.within(() => { | ||
// and confirm that within the item the name | ||
// is correct and the quantity is 1 | ||
cy.contains('.inventory_item_name', itemName) | ||
cy.get('.cart_quantity').should('have.value', 1) | ||
}) | ||
}) | ||
// get the application window object | ||
// https://on.cypress.io/window | ||
cy.window() | ||
// get its property "localStorage" | ||
// https://on.cypress.io/its | ||
.its('localStorage') | ||
// and call the method "getItem" to get the cart contents | ||
// https://on.cypress.io/invoke | ||
.invoke('getItem', 'cart-contents') | ||
.should('exist') | ||
// confirm the list has the expected product ids | ||
// https://glebbahmutov.com/cypress-examples/commands/assertions.html | ||
// Tip: local storage usually has stringified JSON | ||
// @ts-ignore | ||
.then(JSON.parse) | ||
.should('deep.equal', ids) | ||
|
||
cy.log('**continue shopping**') | ||
cy.contains('button', 'Continue Shopping').click() | ||
cy.location('pathname').should('equal', '/inventory.html') | ||
}) | ||
|
||
it('navigates to the item from the cart', () => { | ||
const itemId = 3 | ||
const item = InventoryData[itemId] | ||
ShoppingCart.setCartContents([{ id: itemId, n: 1 }]) | ||
// visit the cart page | ||
cy.visit('/cart.html') | ||
// find the anchor link for the item and click it | ||
// https://on.cypress.io/contains | ||
// https://on.cypress.io/click | ||
cy.contains('.cart_item_label a', item.name).click() | ||
// confirm you are on the inventory item page | ||
// and the search parameters include id=itemId | ||
cy.location('pathname').should('equal', '/inventory-item.html') | ||
cy.location('search').should('include', `id=${itemId}`) | ||
}) | ||
|
||
it('has id and quantity data- attributes', () => { | ||
// set the shopping cart contents | ||
// to 3 different items with 3 different quantities | ||
ShoppingCart.setCartContents([ | ||
{ id: 1, n: 1 }, | ||
{ id: 4, n: 2 }, | ||
{ id: 5, n: 3 }, | ||
]) | ||
// visit the cart page | ||
cy.visit('/cart.html') | ||
// there should be 3 cart item elements on the page | ||
cy.get('.cart_list .cart_item') | ||
.should('have.length', 3) | ||
// grab the first cart item element | ||
// https://on.cypress.io/first | ||
.first() | ||
// the next commands come from cypress-map plugin | ||
// the first cart element should have property "dataset" | ||
// that you can print to Command Log | ||
// see cy.prop and cy.print | ||
.prop('dataset') | ||
.print('data %o') | ||
// the dataset is an object with string values | ||
// which you should map to numbers using cy.map | ||
.map({ | ||
itemId: Number, | ||
itemQuantity: Number, | ||
}) | ||
// the object should have item id 1 with quantity 1 | ||
.should('deep.equal', { | ||
itemId: 1, | ||
itemQuantity: 1, | ||
test: 'CartItem', | ||
}) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { LoginPage } from '@support/pages/login.page' | ||
import { InventoryPage } from '@support/pages/inventory.page' | ||
import { LoginInfo } from '..' | ||
|
||
describe('Empty cart', () => { | ||
const user: LoginInfo = Cypress.env('users').standard | ||
// we can even check if the user object is valid | ||
if (!user) { | ||
throw new Error('Missing the standard user') | ||
} | ||
|
||
it('disables the Checkout button', () => { | ||
LoginPage.login(user.username, user.password) | ||
cy.visit('/cart.html') | ||
InventoryPage.getCartBadge().should('not.exist') | ||
// confirm the user can see the disabled button | ||
cy.getByTest('CartCheckout').should('be.visible').and('be.disabled') | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import { LoginPage } from '@support/pages/login.page' | ||
import { LoginInfo } from '..' | ||
import { InventoryData } from '@fixtures/inventory-data' | ||
|
||
describe('Cart', () => { | ||
const user: LoginInfo = Cypress.env('users').standard | ||
// we can even check if the user object is valid | ||
if (!user) { | ||
throw new Error('Missing the standard user') | ||
} | ||
|
||
// before each test, quickly login the user | ||
// or restore the previous user session | ||
beforeEach(() => { | ||
LoginPage.login(user.username, user.password) | ||
}) | ||
|
||
it('shows the cart items', { viewportHeight: 1200 }, () => { | ||
const items = [ | ||
'Sauce Labs Bike Light', | ||
'Sauce Labs Bolt T-Shirt', | ||
'Sauce Labs Onesie', | ||
] | ||
// find an id for each inventory item by name | ||
// and store the ids in the array "ids" | ||
// const ids = ... | ||
const ids = items | ||
.map((name) => Cypress._.find(InventoryData, { name })!.id) | ||
.map((id) => ({ id, n: 1 })) | ||
// set the ids in the local storage item "cart-contents" | ||
// Tip: local storage usually has stringified data | ||
window.localStorage.setItem('cart-contents', JSON.stringify(ids)) | ||
// visit the cart page | ||
// https://on.cypress.io/visit | ||
cy.visit('/cart.html') | ||
// confirm each item name is present | ||
// confirm the cart items list has the right number of elements | ||
cy.get('.cart_list .cart_item').should('have.length', items.length) | ||
cy.log('**shows each item in order**') | ||
// iterate over the items | ||
items.forEach((itemName, k) => { | ||
// confirm each itm is at the right place | ||
// on the page in the list of items | ||
// https://on.cypress.io/get | ||
// https://on.cypress.io/eq | ||
cy.get('.cart_list .cart_item') | ||
.eq(k) | ||
.within(() => { | ||
// and confirm that within the item the name | ||
// is correct and the quantity is 1 | ||
cy.contains('.inventory_item_name', itemName) | ||
cy.get('.cart_quantity').should('have.value', 1) | ||
}) | ||
}) | ||
}) | ||
}) |
Oops, something went wrong.