From 4eb8e170ade50c481229174d7a4516fdff706ae3 Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Sun, 14 Jan 2024 10:49:02 +0200 Subject: [PATCH 01/27] fix: added the test file once again --- src/test/app.test.ts | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/test/app.test.ts diff --git a/src/test/app.test.ts b/src/test/app.test.ts new file mode 100644 index 0000000..d12a47a --- /dev/null +++ b/src/test/app.test.ts @@ -0,0 +1,3 @@ +describe("My test", () => { + it("says hello", () => console.log("Hello!")) +}) \ No newline at end of file From 93905129cb47e21ae4d1ea9449c4d87c13da7211 Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Sun, 14 Jan 2024 13:07:58 +0200 Subject: [PATCH 02/27] fix: test script fixed, and moved the var of the useEffect outside to support react refresh --- package-lock.json | 17 +++++++++++++++++ package.json | 3 ++- src/components/bagModal/bagModal.tsx | 11 +++++++---- 3 files changed, 26 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 54542a9..18d16ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,7 @@ "eslint-plugin-react-refresh": "^0.4.3", "mocha": "^10.2.0", "playwright": "^1.40.1", + "playwright-chromium": "^1.40.1", "prettier": "3.1.0", "stylelint-config-standard": "^34.0.0", "typescript": "^5.0.2", @@ -3439,6 +3440,22 @@ "fsevents": "2.3.2" } }, + "node_modules/playwright-chromium": { + "version": "1.40.1", + "resolved": "https://registry.npmjs.org/playwright-chromium/-/playwright-chromium-1.40.1.tgz", + "integrity": "sha512-3atylP47OCTBW0siGI7LOEG/XKL/vnrFH8xdr4uaTnqMsc0Xq4gOLk2gGwniPJ76LSc++9ASc0w/nfqtLAmm3A==", + "dev": true, + "hasInstallScript": true, + "dependencies": { + "playwright-core": "1.40.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, "node_modules/playwright-core": { "version": "1.40.1", "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.1.tgz", diff --git a/package.json b/package.json index caacdb1..3f66d0d 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "preview": "vite preview", "format": "prettier --write .", "pretest": "tsc --noEmit && npm run lint", - "test": "mocha ֿ\"src/test/*.test.ts\"" + "test": "mocha 'src/test/*test.ts'" }, "dependencies": { "@fortawesome/fontawesome-free": "^6.5.1", @@ -38,6 +38,7 @@ "eslint-plugin-react-refresh": "^0.4.3", "mocha": "^10.2.0", "playwright": "^1.40.1", + "playwright-chromium": "^1.40.1", "prettier": "3.1.0", "stylelint-config-standard": "^34.0.0", "typescript": "^5.0.2", diff --git a/src/components/bagModal/bagModal.tsx b/src/components/bagModal/bagModal.tsx index 386b90f..362f47a 100644 --- a/src/components/bagModal/bagModal.tsx +++ b/src/components/bagModal/bagModal.tsx @@ -10,6 +10,7 @@ export const BagModal = () => { const { cartItems, showModal, toggleCartModal, totalPrice } = useCart(); const modalRef = useRef(null); const [isMouseOver, setIsMouseOver] = useState(false); + const currentModalRef = modalRef.current; useEffect(() => { const handleMouseEnter = () => { setIsMouseOver(true); @@ -42,12 +43,14 @@ export const BagModal = () => { } return () => { + document.removeEventListener('mousedown', handleClickOutside); - modalRef.current?.removeEventListener('mouseenter', handleMouseEnter); - modalRef.current?.removeEventListener('mouseleave', handleMouseLeave); + currentModalRef?.removeEventListener('mouseenter', handleMouseEnter); + currentModalRef?.removeEventListener('mouseleave', handleMouseLeave); document.removeEventListener('mousemove', handleGlobalMouseMove); - }; - }, [showModal, toggleCartModal]); + }; + + }, [showModal, toggleCartModal, currentModalRef]); useEffect(() => { document.body.style.cursor = showModal From a0e4fb50fdf3c9e43b269e560e545540c138603e Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Mon, 15 Jan 2024 12:05:34 +0200 Subject: [PATCH 03/27] feat: created the tests setup - before, after etc.., added prettier --- src/App.tsx | 1 - src/components/bagModal/bagModal.tsx | 6 +- .../card-size-selector.module.css | 5 +- src/components/card.module.css | 86 +++++++++---------- src/components/sidebar.module.css | 7 +- src/test-kit/navigation-driver.ts | 9 ++ src/test-kit/server-setup.ts | 25 ++++++ src/test/app.test.ts | 39 ++++++++- 8 files changed, 120 insertions(+), 58 deletions(-) create mode 100644 src/test-kit/navigation-driver.ts create mode 100644 src/test-kit/server-setup.ts diff --git a/src/App.tsx b/src/App.tsx index a6bff96..d5a4aca 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,7 +9,6 @@ import { Pants } from './pages/pants'; import { Shirts } from './pages/shirts'; import { Blur } from './components/blur/blur'; - export const App = () => { return ( diff --git a/src/components/bagModal/bagModal.tsx b/src/components/bagModal/bagModal.tsx index 362f47a..facd312 100644 --- a/src/components/bagModal/bagModal.tsx +++ b/src/components/bagModal/bagModal.tsx @@ -43,14 +43,12 @@ export const BagModal = () => { } return () => { - document.removeEventListener('mousedown', handleClickOutside); currentModalRef?.removeEventListener('mouseenter', handleMouseEnter); currentModalRef?.removeEventListener('mouseleave', handleMouseLeave); document.removeEventListener('mousemove', handleGlobalMouseMove); - }; - - }, [showModal, toggleCartModal, currentModalRef]); + }; + }, [showModal, toggleCartModal, currentModalRef]); useEffect(() => { document.body.style.cursor = showModal diff --git a/src/components/card-size-selector/card-size-selector.module.css b/src/components/card-size-selector/card-size-selector.module.css index 4aebba3..55f75ac 100644 --- a/src/components/card-size-selector/card-size-selector.module.css +++ b/src/components/card-size-selector/card-size-selector.module.css @@ -23,11 +23,10 @@ font-family: 'Inconsolata', monospace; font-weight: 500; font-size: 20px; - } .sizeButton:hover { - color:white; + color: white; background-color: black; } @@ -35,5 +34,5 @@ color: #162944; border: 2px solid #162944; background-color: black; - color:white; + color: white; } diff --git a/src/components/card.module.css b/src/components/card.module.css index 7c53610..ccd79d8 100644 --- a/src/components/card.module.css +++ b/src/components/card.module.css @@ -1,77 +1,77 @@ .cardContainer { - display: flex; - align-items: center; - height: 450px; - width: 320px; - flex-direction: column; - border-radius: 18px; - background-color: white; - border: 1px solid rgb(0, 0, 0); - box-shadow: 5px 5px; - transition: box-shadow 0.5s ease; - flex-wrap: nowrap; + display: flex; + align-items: center; + height: 450px; + width: 320px; + flex-direction: column; + border-radius: 18px; + background-color: white; + border: 1px solid rgb(0, 0, 0); + box-shadow: 5px 5px; + transition: box-shadow 0.5s ease; + flex-wrap: nowrap; } .cardContainer:hover { - box-shadow: 10px 10px rgb(253, 0, 207); + box-shadow: 10px 10px rgb(253, 0, 207); } .img { - align-self: center; - width: 55%; - height: 45%; - border-radius: 18px; - margin-bottom: 15px; + align-self: center; + width: 55%; + height: 45%; + border-radius: 18px; + margin-bottom: 15px; } .listingContainer { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; } .mainTitle { - font-size: 16px; + font-size: 16px; } .mainTitle, .secondaryTitle, .price { - margin: 2px 0; + margin: 2px 0; } .mainTitle { - font-family: 'Climate Crisis', sans-serif; - letter-spacing: 0.5px; + font-family: 'Climate Crisis', sans-serif; + letter-spacing: 0.5px; } .price { - font-size: 1.6rem; - color: #3498db; - font-weight: bold; + font-size: 1.6rem; + color: #3498db; + font-weight: bold; } .errorAndSizeContainer { - display: flex; - flex-direction: column; - align-items: flex-start; + display: flex; + flex-direction: column; + align-items: flex-start; } .errorMessage { - color: red; - margin-left: 20px; - font-weight: 600; - font-size: 16px; - animation: showErrorMessage 0.8s ease-in-out; + color: red; + margin-left: 20px; + font-weight: 600; + font-size: 16px; + animation: showErrorMessage 0.8s ease-in-out; } @keyframes showErrorMessage { - from { - opacity: 0%; - } + from { + opacity: 0%; + } - to { - opacity: 100%; - } -} \ No newline at end of file + to { + opacity: 100%; + } +} diff --git a/src/components/sidebar.module.css b/src/components/sidebar.module.css index 1dd6cbe..e8b4674 100644 --- a/src/components/sidebar.module.css +++ b/src/components/sidebar.module.css @@ -13,17 +13,16 @@ border: 1px solid black; } - .sidebarContent:hover, .listItem:hover { background-color: rgba(0, 0, 0); - color:white; + color: white; } .sidebarContent { font-family: 'Climate Crisis', sans-serif; - height:100%; - width:100%; + height: 100%; + width: 100%; color: #000000; border-radius: 50px; background-color: white; diff --git a/src/test-kit/navigation-driver.ts b/src/test-kit/navigation-driver.ts new file mode 100644 index 0000000..3568802 --- /dev/null +++ b/src/test-kit/navigation-driver.ts @@ -0,0 +1,9 @@ +import { Page } from 'playwright-chromium'; + +export class NavigationDriver { + constructor(private page: Page) {} + + setPage(page: Page) { + this.page = page; + } +} diff --git a/src/test-kit/server-setup.ts b/src/test-kit/server-setup.ts new file mode 100644 index 0000000..759e9cf --- /dev/null +++ b/src/test-kit/server-setup.ts @@ -0,0 +1,25 @@ +import { Browser, BrowserContext, chromium } from 'playwright-chromium'; +import { createServer, ViteDevServer } from 'vite'; + +export async function serverSetup() { + const server = await startPreview(); + const browser = await chromium.launch(); + const context = await browser.newContext(); + return { browser, context, server }; +} + +export async function serverTeardown( + context: BrowserContext, + browser: Browser, + server: ViteDevServer +) { + await context.close(); + await browser.close(); + await server.close(); +} + +async function startPreview() { + const server = await createServer({ server: { port: 8000 } }); + await server.listen(); + return server; +} diff --git a/src/test/app.test.ts b/src/test/app.test.ts index d12a47a..054efe8 100644 --- a/src/test/app.test.ts +++ b/src/test/app.test.ts @@ -1,3 +1,36 @@ -describe("My test", () => { - it("says hello", () => console.log("Hello!")) -}) \ No newline at end of file +import { expect } from 'chai'; +import { Page, Browser, BrowserContext } from 'playwright-chromium'; +import { ViteDevServer } from 'vite'; +import { serverSetup, serverTeardown } from '../test-kit/server-setup'; + +describe('My test', function () { + let page: Page; + let browser: Browser; + let context: BrowserContext; + let server: ViteDevServer; + + before(async () => { + const { + browser: newBrowser, + context: newContext, + server: newServer, + } = await serverSetup(); + browser = newBrowser; + context = newContext; + server = newServer; + }); + beforeEach(async () => { + page = await context.newPage(); + await page.goto(`http://localhost:${8000}`); + await page.waitForLoadState(); + //SELF IMPLEMENTED DRIVER + }); + + afterEach(async () => { + await page.close(); + }); + + after(async () => { + await serverTeardown(context, browser, server); + }); +}); From 1379a758ff90dccaccbb620cbd0c486508d5b1f9 Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Mon, 15 Jan 2024 15:50:17 +0200 Subject: [PATCH 04/27] fix: fixed the package.json so it will run tests --- .mocharc.cjs | 5 - .mocharc.json | 8 ++ package-lock.json | 158 ++++++++++++++++++++++++++++++ package.json | 3 +- src/components/sidebar.tsx | 1 + src/test-kit/navigation-driver.ts | 10 +- src/test/app.test.ts | 72 ++++++++------ tsconfig.json | 1 - tsconfig.node.json | 10 -- 9 files changed, 219 insertions(+), 49 deletions(-) delete mode 100644 .mocharc.cjs create mode 100644 .mocharc.json delete mode 100644 tsconfig.node.json diff --git a/.mocharc.cjs b/.mocharc.cjs deleted file mode 100644 index ae6622f..0000000 --- a/.mocharc.cjs +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - require: ['@ts-tools/node/r'], - 'enable-source-maps': true, - color: true, -}; diff --git a/.mocharc.json b/.mocharc.json new file mode 100644 index 0000000..22e8eec --- /dev/null +++ b/.mocharc.json @@ -0,0 +1,8 @@ +{ + "extensions": ["ts"], + "it": ["**/*.test.*"], + "node-option": [ + "experimental-specifier-resolution=node", + "loader=ts-node/esm" + ] + } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 18d16ec..7d77baa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,7 @@ "playwright-chromium": "^1.40.1", "prettier": "3.1.0", "stylelint-config-standard": "^34.0.0", + "ts-node": "^10.9.2", "typescript": "^5.0.2", "vite": "^4.4.5" } @@ -407,6 +408,28 @@ "node": ">=6.9.0" } }, + "node_modules/@cspotcode/source-map-support": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", + "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", + "dev": true, + "dependencies": { + "@jridgewell/trace-mapping": "0.3.9" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": { + "version": "0.3.9", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", + "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", + "dev": true, + "dependencies": { + "@jridgewell/resolve-uri": "^3.0.3", + "@jridgewell/sourcemap-codec": "^1.4.10" + } + }, "node_modules/@csstools/css-parser-algorithms": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.2.tgz", @@ -790,6 +813,30 @@ "typescript": ">=2.8.0" } }, + "node_modules/@tsconfig/node10": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz", + "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==", + "dev": true + }, + "node_modules/@tsconfig/node12": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", + "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", + "dev": true + }, + "node_modules/@tsconfig/node14": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", + "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", + "dev": true + }, + "node_modules/@tsconfig/node16": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", + "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", + "dev": true + }, "node_modules/@types/babel__core": { "version": "7.20.4", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.4.tgz", @@ -856,6 +903,16 @@ "integrity": "sha512-dJvrYWxP/UcXm36Qn36fxhUKu8A/xMRXVT2cliFF1Z7UA9liG5Psj3ezNSZw+5puH2czDXRLcXQxf8JbJt0ejg==", "dev": true }, + "node_modules/@types/node": { + "version": "20.11.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.2.tgz", + "integrity": "sha512-cZShBaVa+UO1LjWWBPmWRR4+/eY/JR/UIEcDlVsw3okjWEu+rB7/mH6X3B/L+qJVHDLjk9QW/y2upp9wp1yDXA==", + "dev": true, + "peer": true, + "dependencies": { + "undici-types": "~5.26.4" + } + }, "node_modules/@types/normalize-package-data": { "version": "2.4.4", "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz", @@ -1155,6 +1212,15 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, + "node_modules/acorn-walk": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz", + "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==", + "dev": true, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/ajv": { "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", @@ -1214,6 +1280,12 @@ "node": ">= 8" } }, + "node_modules/arg": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", + "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", + "dev": true + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -1562,6 +1634,12 @@ } } }, + "node_modules/create-require": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", + "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", + "dev": true + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -2917,6 +2995,12 @@ "yallist": "^3.0.2" } }, + "node_modules/make-error": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", + "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", + "dev": true + }, "node_modules/map-obj": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz", @@ -4456,6 +4540,58 @@ "typescript": ">=4.2.0" } }, + "node_modules/ts-node": { + "version": "10.9.2", + "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", + "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", + "dev": true, + "dependencies": { + "@cspotcode/source-map-support": "^0.8.0", + "@tsconfig/node10": "^1.0.7", + "@tsconfig/node12": "^1.0.7", + "@tsconfig/node14": "^1.0.0", + "@tsconfig/node16": "^1.0.2", + "acorn": "^8.4.1", + "acorn-walk": "^8.1.1", + "arg": "^4.1.0", + "create-require": "^1.1.0", + "diff": "^4.0.1", + "make-error": "^1.1.1", + "v8-compile-cache-lib": "^3.0.1", + "yn": "3.1.1" + }, + "bin": { + "ts-node": "dist/bin.js", + "ts-node-cwd": "dist/bin-cwd.js", + "ts-node-esm": "dist/bin-esm.js", + "ts-node-script": "dist/bin-script.js", + "ts-node-transpile-only": "dist/bin-transpile.js", + "ts-script": "dist/bin-script-deprecated.js" + }, + "peerDependencies": { + "@swc/core": ">=1.2.50", + "@swc/wasm": ">=1.2.50", + "@types/node": "*", + "typescript": ">=2.7" + }, + "peerDependenciesMeta": { + "@swc/core": { + "optional": true + }, + "@swc/wasm": { + "optional": true + } + } + }, + "node_modules/ts-node/node_modules/diff": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", + "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", + "dev": true, + "engines": { + "node": ">=0.3.1" + } + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -4493,6 +4629,13 @@ "node": ">=14.17" } }, + "node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true, + "peer": true + }, "node_modules/update-browserslist-db": { "version": "1.0.13", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", @@ -4539,6 +4682,12 @@ "dev": true, "peer": true }, + "node_modules/v8-compile-cache-lib": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", + "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", + "dev": true + }, "node_modules/validate-npm-package-license": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", @@ -4774,6 +4923,15 @@ "node": ">=8" } }, + "node_modules/yn": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", + "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/package.json b/package.json index 3f66d0d..9c5afcb 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "preview": "vite preview", "format": "prettier --write .", "pretest": "tsc --noEmit && npm run lint", - "test": "mocha 'src/test/*test.ts'" + "test": "mocha src/test/*.test.ts" }, "dependencies": { "@fortawesome/fontawesome-free": "^6.5.1", @@ -41,6 +41,7 @@ "playwright-chromium": "^1.40.1", "prettier": "3.1.0", "stylelint-config-standard": "^34.0.0", + "ts-node": "^10.9.2", "typescript": "^5.0.2", "vite": "^4.4.5" } diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx index f5dd8e5..9c6c32c 100644 --- a/src/components/sidebar.tsx +++ b/src/components/sidebar.tsx @@ -9,6 +9,7 @@ export const Sidebar = () => { {SidebarData.map((item: SidebarItem, index: number) => (
  • diff --git a/src/test-kit/navigation-driver.ts b/src/test-kit/navigation-driver.ts index 3568802..1efc8ed 100644 --- a/src/test-kit/navigation-driver.ts +++ b/src/test-kit/navigation-driver.ts @@ -1,9 +1,11 @@ import { Page } from 'playwright-chromium'; export class NavigationDriver { - constructor(private page: Page) {} + constructor(private page: Page) {} + + async clickOnLinkByName(linkName: string) { + const link = await this.page.getByRole('link', { name: linkName }); + return link.click(); + } - setPage(page: Page) { - this.page = page; - } } diff --git a/src/test/app.test.ts b/src/test/app.test.ts index 054efe8..483336b 100644 --- a/src/test/app.test.ts +++ b/src/test/app.test.ts @@ -1,36 +1,52 @@ -import { expect } from 'chai'; +import { expect } from 'chai' import { Page, Browser, BrowserContext } from 'playwright-chromium'; import { ViteDevServer } from 'vite'; import { serverSetup, serverTeardown } from '../test-kit/server-setup'; +import { NavigationDriver } from '../test-kit/navigation-driver'; -describe('My test', function () { - let page: Page; - let browser: Browser; - let context: BrowserContext; - let server: ViteDevServer; +describe('My tests', function () { + let page: Page; + let browser: Browser; + let context: BrowserContext; + let server: ViteDevServer; + let navigationDriver: NavigationDriver - before(async () => { - const { - browser: newBrowser, - context: newContext, - server: newServer, - } = await serverSetup(); - browser = newBrowser; - context = newContext; - server = newServer; - }); - beforeEach(async () => { - page = await context.newPage(); - await page.goto(`http://localhost:${8000}`); - await page.waitForLoadState(); - //SELF IMPLEMENTED DRIVER - }); + before(async () => { + const { + browser: newBrowser, + context: newContext, + server: newServer, + } = await serverSetup(); + browser = newBrowser; + context = newContext; + server = newServer; + navigationDriver = new NavigationDriver(page); + }); - afterEach(async () => { - await page.close(); - }); + beforeEach(async () => { + page = await context.newPage(); + await page.goto(`http://localhost:${8000}`); + await page.waitForLoadState(); + }); - after(async () => { - await serverTeardown(context, browser, server); - }); + afterEach(async () => { + await page.close(); + }); + + after(async () => { + await serverTeardown(context, browser, server); + }); + describe('Sidebar Navigation', async () => { + it("should navigate to shirts url", async () => { + const linkName = 'SHIRTS' + await navigationDriver.clickOnLinkByName(linkName); + await page.waitForLoadState(); + // Verify the current URL is /Shirts (replace with your expected URL) + const currentUrl = page.url(); + expect(currentUrl).to.equal(`http://localhost:${8000}/Shirts`); + + } + ) + }) }); + diff --git a/tsconfig.json b/tsconfig.json index 553a9ca..8c0694b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,5 +23,4 @@ "noFallthroughCasesInSwitch": true }, "include": ["src"], - "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/tsconfig.node.json b/tsconfig.node.json deleted file mode 100644 index 795aba1..0000000 --- a/tsconfig.node.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "compilerOptions": { - "composite": true, - "skipLibCheck": true, - "module": "ESNext", - "moduleResolution": "bundler", - "allowSyntheticDefaultImports": true - }, - "include": ["vite.config.ts"] -} From 74108bd415cfb540989e3e57cbd2758d9e7f7a49 Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Tue, 16 Jan 2024 12:19:26 +0200 Subject: [PATCH 05/27] fix: prettier, andremoved ts-node from package.json --- .mocharc.json | 6 +-- package-lock.json | 54 --------------------- package.json | 1 - src/components/sidebar.tsx | 2 +- src/test-kit/navigation-driver.ts | 15 +++--- src/test/app.test.ts | 78 +++++++++++++++---------------- tsconfig.json | 2 +- 7 files changed, 51 insertions(+), 107 deletions(-) diff --git a/.mocharc.json b/.mocharc.json index 22e8eec..11b01dc 100644 --- a/.mocharc.json +++ b/.mocharc.json @@ -2,7 +2,7 @@ "extensions": ["ts"], "it": ["**/*.test.*"], "node-option": [ - "experimental-specifier-resolution=node", - "loader=ts-node/esm" + "experimental-specifier-resolution=node", + "loader=ts-node/esm" ] - } \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index 7d77baa..00d0869 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,6 @@ "react-router-dom": "^6.18.0" }, "devDependencies": { - "@ts-tools/node": "^5.0.2", "@types/chai": "^4.3.11", "@types/mocha": "^10.0.6", "@types/react": "^18.2.15", @@ -785,34 +784,6 @@ "node": ">=14.0.0" } }, - "node_modules/@ts-tools/node": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/@ts-tools/node/-/node-5.0.2.tgz", - "integrity": "sha512-sYRQr7H9kwJDdHs+llp6csi3CgiBJSJrffRuPdsfL0fUD9hZWQWFn6tOyS6a5W6X/WwuLf1/t4nZDsxEik7UMA==", - "dev": true, - "dependencies": { - "@ts-tools/transpile": "^5.0.2", - "source-map-support": "^0.5.21" - }, - "engines": { - "node": ">=16" - }, - "peerDependencies": { - "typescript": ">=2.8.0" - } - }, - "node_modules/@ts-tools/transpile": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/@ts-tools/transpile/-/transpile-5.0.2.tgz", - "integrity": "sha512-Uc05dB9324pTud/PeGZU2rs8o0/qMGC6PegWhwRoNAysdJe+x0da2Iot/AmcJq5SP8xTRhfhcjhaqzu6LETyPw==", - "dev": true, - "engines": { - "node": ">=16" - }, - "peerDependencies": { - "typescript": ">=2.8.0" - } - }, "node_modules/@tsconfig/node10": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz", @@ -1405,12 +1376,6 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, - "node_modules/buffer-from": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", - "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", - "dev": true - }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -4150,15 +4115,6 @@ "dev": true, "peer": true }, - "node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", @@ -4168,16 +4124,6 @@ "node": ">=0.10.0" } }, - "node_modules/source-map-support": { - "version": "0.5.21", - "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", - "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", - "dev": true, - "dependencies": { - "buffer-from": "^1.0.0", - "source-map": "^0.6.0" - } - }, "node_modules/spdx-correct": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz", diff --git a/package.json b/package.json index 9c5afcb..3d79e55 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,6 @@ "react-router-dom": "^6.18.0" }, "devDependencies": { - "@ts-tools/node": "^5.0.2", "@types/chai": "^4.3.11", "@types/mocha": "^10.0.6", "@types/react": "^18.2.15", diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx index 9c6c32c..d9e234a 100644 --- a/src/components/sidebar.tsx +++ b/src/components/sidebar.tsx @@ -9,7 +9,7 @@ export const Sidebar = () => { {SidebarData.map((item: SidebarItem, index: number) => (
  • diff --git a/src/test-kit/navigation-driver.ts b/src/test-kit/navigation-driver.ts index 1efc8ed..5c23513 100644 --- a/src/test-kit/navigation-driver.ts +++ b/src/test-kit/navigation-driver.ts @@ -1,11 +1,14 @@ import { Page } from 'playwright-chromium'; export class NavigationDriver { - constructor(private page: Page) {} - - async clickOnLinkByName(linkName: string) { - const link = await this.page.getByRole('link', { name: linkName }); - return link.click(); - } + constructor(private page: Page) {} + // In NavigationDriver + clickOnLinkById(Id: string) { + const link = this.page.locator(`[data-testid="${Id}"]`); + return link.click(); + } + getPageUrl() { + return this.page.url(); + } } diff --git a/src/test/app.test.ts b/src/test/app.test.ts index 483336b..b6b3089 100644 --- a/src/test/app.test.ts +++ b/src/test/app.test.ts @@ -1,52 +1,48 @@ -import { expect } from 'chai' +import { expect } from 'chai'; import { Page, Browser, BrowserContext } from 'playwright-chromium'; import { ViteDevServer } from 'vite'; import { serverSetup, serverTeardown } from '../test-kit/server-setup'; import { NavigationDriver } from '../test-kit/navigation-driver'; describe('My tests', function () { - let page: Page; - let browser: Browser; - let context: BrowserContext; - let server: ViteDevServer; - let navigationDriver: NavigationDriver + let page: Page; + let browser: Browser; + let context: BrowserContext; + let server: ViteDevServer; + let navigationDriver: NavigationDriver; - before(async () => { - const { - browser: newBrowser, - context: newContext, - server: newServer, - } = await serverSetup(); - browser = newBrowser; - context = newContext; - server = newServer; - navigationDriver = new NavigationDriver(page); - }); + before(async () => { + const { + browser: newBrowser, + context: newContext, + server: newServer, + } = await serverSetup(); + browser = newBrowser; + context = newContext; + server = newServer; + page = await context.newPage(); + navigationDriver = new NavigationDriver(page); + }); - beforeEach(async () => { - page = await context.newPage(); - await page.goto(`http://localhost:${8000}`); - await page.waitForLoadState(); - }); + beforeEach(async () => { + page = await context.newPage(); + await page.goto(`http://localhost:${8000}`); + await page.waitForLoadState(); + }); - afterEach(async () => { - await page.close(); - }); + afterEach(async () => { + await page.close(); + }); - after(async () => { - await serverTeardown(context, browser, server); - }); - describe('Sidebar Navigation', async () => { - it("should navigate to shirts url", async () => { - const linkName = 'SHIRTS' - await navigationDriver.clickOnLinkByName(linkName); - await page.waitForLoadState(); - // Verify the current URL is /Shirts (replace with your expected URL) - const currentUrl = page.url(); - expect(currentUrl).to.equal(`http://localhost:${8000}/Shirts`); - - } - ) - }) + after(async () => { + await serverTeardown(context, browser, server); + }); + describe('Sidebar Navigation', async () => { + it('should navigate to shirts url', async () => { + const id = 'SHIRTS'; + await navigationDriver.clickOnLinkById(id); + const currentUrl = navigationDriver.getPageUrl(); + expect(currentUrl).to.equal(`http://localhost:${8000}/Shirts`); + }); + }); }); - diff --git a/tsconfig.json b/tsconfig.json index 8c0694b..e03b317 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,5 +22,5 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, - "include": ["src"], + "include": ["src"] } From 03360a7103aef8b5c33b3d023aff63e3d6ab792e Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Tue, 16 Jan 2024 15:05:30 +0200 Subject: [PATCH 06/27] feat: added a cart driver --- src/App.tsx | 6 +++--- src/test-kit/cart-driver.ts | 11 +++++++++++ src/test-kit/navigation-driver.ts | 22 +++++++++++++--------- src/test/app.test.ts | 14 +++++++++++++- 4 files changed, 40 insertions(+), 13 deletions(-) create mode 100644 src/test-kit/cart-driver.ts diff --git a/src/App.tsx b/src/App.tsx index d5a4aca..f9db30a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import { MemoryRouter, Route, Routes } from 'react-router-dom'; +import { BrowserRouter, Route, Routes } from 'react-router-dom'; import styles from './app.module.css'; import { BagModal } from './components/bagModal/bagModal'; import { Header } from './components/header'; @@ -11,7 +11,7 @@ import { Blur } from './components/blur/blur'; export const App = () => { return ( - +
    @@ -26,6 +26,6 @@ export const App = () => {
    -     + ); }; diff --git a/src/test-kit/cart-driver.ts b/src/test-kit/cart-driver.ts new file mode 100644 index 0000000..cb35e58 --- /dev/null +++ b/src/test-kit/cart-driver.ts @@ -0,0 +1,11 @@ +import { Page } from "playwright-chromium"; + +export class CartDriver { + constructor(private page: Page) { } + + setPage(page: Page) { + this.page = page; + } + + +} \ No newline at end of file diff --git a/src/test-kit/navigation-driver.ts b/src/test-kit/navigation-driver.ts index 5c23513..a54f61e 100644 --- a/src/test-kit/navigation-driver.ts +++ b/src/test-kit/navigation-driver.ts @@ -1,14 +1,18 @@ import { Page } from 'playwright-chromium'; export class NavigationDriver { - constructor(private page: Page) {} + constructor(private page: Page) { } - // In NavigationDriver - clickOnLinkById(Id: string) { - const link = this.page.locator(`[data-testid="${Id}"]`); - return link.click(); - } - getPageUrl() { - return this.page.url(); - } + setPage(page: Page) { + this.page = page; + } + + // In NavigationDriver + clickOnLinkById(Id: string) { + const link = this.page.locator(`[data-testid="${Id}"]`); + return link.click(); + } + getPageUrl() { + return this.page.url(); + } } diff --git a/src/test/app.test.ts b/src/test/app.test.ts index b6b3089..925ea77 100644 --- a/src/test/app.test.ts +++ b/src/test/app.test.ts @@ -20,7 +20,6 @@ describe('My tests', function () { browser = newBrowser; context = newContext; server = newServer; - page = await context.newPage(); navigationDriver = new NavigationDriver(page); }); @@ -28,6 +27,7 @@ describe('My tests', function () { page = await context.newPage(); await page.goto(`http://localhost:${8000}`); await page.waitForLoadState(); + navigationDriver.setPage(page); }); afterEach(async () => { @@ -37,6 +37,7 @@ describe('My tests', function () { after(async () => { await serverTeardown(context, browser, server); }); + describe('Sidebar Navigation', async () => { it('should navigate to shirts url', async () => { const id = 'SHIRTS'; @@ -44,5 +45,16 @@ describe('My tests', function () { const currentUrl = navigationDriver.getPageUrl(); expect(currentUrl).to.equal(`http://localhost:${8000}/Shirts`); }); + + it('should navigate to home page', async () => { + const id = 'HOME'; + await navigationDriver.clickOnLinkById(id); + const currentUrl = navigationDriver.getPageUrl(); + expect(currentUrl).to.equal(`http://localhost:${8000}/`) + }) }); + describe('Adding items to cart', async () => { + + }) + }); From 7247172d54bd71b175e26f945c52e3ebe68fe92f Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Wed, 17 Jan 2024 11:33:44 +0200 Subject: [PATCH 07/27] feat: added data-testid to different elements and completed the modal test --- src/App.tsx | 2 +- src/components/bagModal/bagModal.tsx | 4 +--- src/components/bagModal/bagmodal.module.css | 6 ++++++ .../card-size-selector/card-size-selector.tsx | 10 +++++----- src/components/card.tsx | 5 +++-- src/components/header.tsx | 1 + src/test-kit/cart-driver.ts | 12 +++++++++++- src/test/app.test.ts | 18 +++++++++++++++++- 8 files changed, 45 insertions(+), 13 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f9db30a..4ca92a7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,7 +12,7 @@ import { Blur } from './components/blur/blur'; export const App = () => { return ( -
    +
    diff --git a/src/components/bagModal/bagModal.tsx b/src/components/bagModal/bagModal.tsx index facd312..4cba81f 100644 --- a/src/components/bagModal/bagModal.tsx +++ b/src/components/bagModal/bagModal.tsx @@ -73,8 +73,7 @@ export const BagModal = () => { } return ( - showModal && ( -
    +
    {Array.from(cartItems.entries()).map(([key]) => { const [id, size] = key.split('#'); @@ -99,5 +98,4 @@ export const BagModal = () => {
    ) - ); }; diff --git a/src/components/bagModal/bagmodal.module.css b/src/components/bagModal/bagmodal.module.css index 9e852a5..e944ed7 100644 --- a/src/components/bagModal/bagmodal.module.css +++ b/src/components/bagModal/bagmodal.module.css @@ -16,6 +16,12 @@ justify-content: center; } +.notVisible { + visibility: hidden; + height: 0px; + width: 0px; +} + .itemList { margin: 0px; overflow: auto; diff --git a/src/components/card-size-selector/card-size-selector.tsx b/src/components/card-size-selector/card-size-selector.tsx index 288fd82..06f755c 100644 --- a/src/components/card-size-selector/card-size-selector.tsx +++ b/src/components/card-size-selector/card-size-selector.tsx @@ -13,14 +13,14 @@ const SizeSelector: React.FC = ({ size, setSize }) => {
    {sizes.map((currentSize) => ( diff --git a/src/components/card.tsx b/src/components/card.tsx index d2dddbe..177267a 100644 --- a/src/components/card.tsx +++ b/src/components/card.tsx @@ -15,7 +15,7 @@ export const Card: React.FC = ({ const [addToCartClicked, setAddToCartClicked] = useState(false); return ( -
    +
    = ({ {addToCartClicked && !size && (

    Please choose a size

    )} - +
    { ); diff --git a/src/components/bag-item/bag-item.module.css b/src/components/bag-item/bag-item.module.css index bc2dbd4..9b6a6f1 100644 --- a/src/components/bag-item/bag-item.module.css +++ b/src/components/bag-item/bag-item.module.css @@ -29,8 +29,7 @@ } .deleteButton { - background: transparent url('../../../src/assets/delete-button.svg') - no-repeat center; + background: transparent url('../../../src/assets/delete-button.svg') no-repeat center; width: 30px; height: 32px; border: none; diff --git a/src/components/bag-item/bag-item.tsx b/src/components/bag-item/bag-item.tsx index 1fcf330..db62cb5 100644 --- a/src/components/bag-item/bag-item.tsx +++ b/src/components/bag-item/bag-item.tsx @@ -43,9 +43,7 @@ export const BagItem: React.FC = ({ price={price} />
    - +

    {`$ ${price}`}

    diff --git a/src/components/bagModal/bagModal.tsx b/src/components/bagModal/bagModal.tsx index 4cba81f..ad3d733 100644 --- a/src/components/bagModal/bagModal.tsx +++ b/src/components/bagModal/bagModal.tsx @@ -21,18 +21,13 @@ export const BagModal = () => { }; const handleClickOutside = (event: MouseEvent) => { - if ( - modalRef.current && - !modalRef.current.contains(event.target as Node) - ) { + if (modalRef.current && !modalRef.current.contains(event.target as Node)) { toggleCartModal(); } }; const handleGlobalMouseMove = (event: MouseEvent) => { - setIsMouseOver( - modalRef.current?.contains(event.target as Node) ?? false - ); + setIsMouseOver(modalRef.current?.contains(event.target as Node) ?? false); }; if (showModal) { @@ -51,11 +46,7 @@ export const BagModal = () => { }, [showModal, toggleCartModal, currentModalRef]); useEffect(() => { - document.body.style.cursor = showModal - ? isMouseOver - ? 'default' - : 'pointer' - : 'default'; + document.body.style.cursor = showModal ? (isMouseOver ? 'default' : 'pointer') : 'default'; return () => { document.body.style.cursor = 'default'; }; @@ -66,36 +57,32 @@ export const BagModal = () => { const prefix = id.replace(/[0-9]+$/, ''); // Capitalize the first letter and concatenate "Data" - const arrayDataName = - prefix.charAt(0).toUpperCase() + prefix.slice(1) + 'Data'; + const arrayDataName = prefix.charAt(0).toUpperCase() + prefix.slice(1) + 'Data'; const arrayData: Item[] | undefined = dataArrayByName[arrayDataName]; return arrayData.find((item) => item.id == id)!; } return ( -
    -
    - {Array.from(cartItems.entries()).map(([key]) => { - const [id, size] = key.split('#'); - const cartItem: CartItem = { - ...getItemFromId(id), - size: size as Sizes, - }; - return ; - })} -
    -
    -
    -

    - {' '} - Order Summary -

    -

    {`$ ${totalPrice.toFixed(2)}`}

    -
    +
    +
    + {Array.from(cartItems.entries()).map(([key]) => { + const [id, size] = key.split('#'); + const cartItem: CartItem = { + ...getItemFromId(id), + size: size as Sizes, + }; + return ; + })} +
    +
    +
    +

    Order Summary

    +

    {`$ ${totalPrice.toFixed(2)}`}

    - ) +
    + ); }; diff --git a/src/components/card-size-selector/card-size-selector.tsx b/src/components/card-size-selector/card-size-selector.tsx index 06f755c..0cb626a 100644 --- a/src/components/card-size-selector/card-size-selector.tsx +++ b/src/components/card-size-selector/card-size-selector.tsx @@ -17,10 +17,7 @@ const SizeSelector: React.FC = ({ size, setSize }) => { key={currentSize} type="button" className={`${styles.sizeButton} ${styles[currentSize!]} - ${size === currentSize - ? styles.selectedSize - : '' - }`} + ${size === currentSize ? styles.selectedSize : ''}`} onClick={() => handleSelectSize(currentSize)}> {currentSize} diff --git a/src/components/card.tsx b/src/components/card.tsx index 98f4b95..31122fd 100644 --- a/src/components/card.tsx +++ b/src/components/card.tsx @@ -4,24 +4,13 @@ import { Item, Sizes } from './datatypes'; import CardSizeSelector from './card-size-selector/card-size-selector'; import { useState } from 'react'; -export const Card: React.FC = ({ - id, - mainTitle, - secondaryTitle, - image, - price, -}) => { +export const Card: React.FC = ({ id, mainTitle, secondaryTitle, image, price }) => { const [size, setSize] = useState(null); const [addToCartClicked, setAddToCartClicked] = useState(false); return ( -
    - {mainTitle} +
    + {mainTitle}

    {mainTitle}

    {secondaryTitle}

    @@ -35,7 +24,6 @@ export const Card: React.FC = ({
    { return (
    - Logo + Logo
    - +
    diff --git a/src/components/quantity-select/quantity-select.tsx b/src/components/quantity-select/quantity-select.tsx index 58dbd38..f45e086 100644 --- a/src/components/quantity-select/quantity-select.tsx +++ b/src/components/quantity-select/quantity-select.tsx @@ -22,13 +22,9 @@ export const QuantitySelect: React.FC = ({ return (
    - {options.map((option: number) => ( - ))} diff --git a/src/test-kit/cart-driver.ts b/src/test-kit/cart-driver.ts index e109d34..1060af6 100644 --- a/src/test-kit/cart-driver.ts +++ b/src/test-kit/cart-driver.ts @@ -1,21 +1,65 @@ -import { Page } from "playwright-chromium"; +import { Locator, Page } from 'playwright-chromium'; +import { PantsData, HatsData, ShirtsData } from '../components/data'; export class CartDriver { - constructor(private page: Page) { } - - setPage(page: Page) { - this.page = page; - } - - ClickOnCart() { - return this.page.getByTestId('shoppingBagButton').click(); - } - - async ClickOutsideCart() { - const boundingBox = await this.page.getByTestId('shoppingBagButton').boundingBox(); - if (boundingBox) { - const coordinate = { x: boundingBox.x, y: boundingBox.y } - await this.page.mouse.click(coordinate.x - 10, coordinate.y - 10) - } - } + private page: Page; + private dataItems: string[]; + + constructor(page: Page) { + this.page = page; + this.dataItems = ['HATS', 'PANTS', 'SHIRTS']; + } + + SetPage(page: Page) { + this.page = page; + } + + GetRandomArbitrary(min: number, max: number): string { + return Math.floor(Math.random() * (max - min) + min).toString(); + } + + GetRandomTypeOfItem(): string { + const randomIndex = Math.floor(Math.random() * this.dataItems.length); + return this.dataItems[randomIndex]; + } + + async GetAddToCartButton(itemId: string): Promise { + const addToCartButtonId = itemId + ' add to cart button'; + return this.page.getByTestId(addToCartButtonId); + } + + async GetCard(itemId: string): Promise { + const cardId = itemId + ' card'; + return this.page.getByTestId(cardId); + } + + ClickOnCart() { + return this.page.getByTestId('shoppingBagButton').click(); + } + + async ClickOutsideCart() { + const boundingBox = await this.page.getByTestId('shoppingBagButton').boundingBox(); + if (boundingBox) { + const coordinate = { x: boundingBox.x, y: boundingBox.y }; + await this.page.mouse.click(coordinate.x - 10, coordinate.y - 10); + } + } + + GetArbitraryItemFromData(itemName: string): string { + switch (itemName) { + case 'HATS': + return 'hats' + this.GetRandomArbitrary(1, HatsData.length); + break; + case 'PANTS': + return 'pants' + this.GetRandomArbitrary(1, PantsData.length); + break; + case 'SHIRTS': + return 'pants' + this.GetRandomArbitrary(1, ShirtsData.length); + break; + default: + throw new Error( + 'Invalid input type. Make sure you pass a valid item with capital letters.' + ); + } + } } diff --git a/src/test-kit/navigation-driver.ts b/src/test-kit/navigation-driver.ts index a54f61e..243d67f 100644 --- a/src/test-kit/navigation-driver.ts +++ b/src/test-kit/navigation-driver.ts @@ -1,18 +1,18 @@ import { Page } from 'playwright-chromium'; export class NavigationDriver { - constructor(private page: Page) { } + constructor(private page: Page) {} - setPage(page: Page) { - this.page = page; - } + SetPage(page: Page) { + this.page = page; + } - // In NavigationDriver - clickOnLinkById(Id: string) { - const link = this.page.locator(`[data-testid="${Id}"]`); - return link.click(); - } - getPageUrl() { - return this.page.url(); - } + // In NavigationDriver + ClickOnLinkById(Id: string) { + const link = this.page.locator(`[data-testid="${Id}"]`); + return link.click(); + } + GetPageUrl() { + return this.page.url(); + } } diff --git a/src/test/app.test.ts b/src/test/app.test.ts index 8bcdc54..9763648 100644 --- a/src/test/app.test.ts +++ b/src/test/app.test.ts @@ -1,5 +1,5 @@ import { expect } from 'chai'; -import { Page, Browser, BrowserContext } from 'playwright-chromium'; +import { Page, Browser, BrowserContext, Locator } from 'playwright-chromium'; import { ViteDevServer } from 'vite'; import { serverSetup, serverTeardown } from '../test-kit/server-setup'; import { NavigationDriver } from '../test-kit/navigation-driver'; @@ -11,14 +11,10 @@ describe('My tests', function () { let context: BrowserContext; let server: ViteDevServer; let navigationDriver: NavigationDriver; - let cartDriver : CartDriver; + let cartDriver: CartDriver; before(async () => { - const { - browser: newBrowser, - context: newContext, - server: newServer, - } = await serverSetup(); + const { browser: newBrowser, context: newContext, server: newServer } = await serverSetup(); browser = newBrowser; context = newContext; server = newServer; @@ -31,8 +27,8 @@ describe('My tests', function () { page = await context.newPage(); await page.goto(`http://localhost:${8000}`); await page.waitForLoadState(); - navigationDriver.setPage(page); - cartDriver.setPage(page); + navigationDriver.SetPage(page); + cartDriver.SetPage(page); }); afterEach(async () => { @@ -46,17 +42,17 @@ describe('My tests', function () { describe('Sidebar Navigation', async () => { it('should navigate to shirts url', async () => { const id = 'SHIRTS'; - await navigationDriver.clickOnLinkById(id); - const currentUrl = navigationDriver.getPageUrl(); + await navigationDriver.ClickOnLinkById(id); + const currentUrl = navigationDriver.GetPageUrl(); expect(currentUrl).to.equal(`http://localhost:${8000}/Shirts`); }); it('should navigate to home page', async () => { const id = 'HOME'; - await navigationDriver.clickOnLinkById(id); - const currentUrl = navigationDriver.getPageUrl(); - expect(currentUrl).to.equal(`http://localhost:${8000}/`) - }) + await navigationDriver.ClickOnLinkById(id); + const currentUrl = navigationDriver.GetPageUrl(); + expect(currentUrl).to.equal(`http://localhost:${8000}/`); + }); }); describe('Cart tests', async () => { it('Verify that clicking the cart icon opens the modal and clicking outside the modal closes it.', async () => { @@ -66,15 +62,12 @@ describe('My tests', function () { expect(await page.getByTestId('bagModal').isVisible()).to.be.false; }); - it('Ensure adding an item to the cart fails when size is not selected', async()=>{ - const id = 'PANTS' - await navigationDriver.clickOnLinkById(id); - await cartDriver - - }) - - - - }) - + it('Ensure adding an item to the cart fails when size is not selected', async () => { + const typeOfItemId = cartDriver.GetRandomTypeOfItem(); + await navigationDriver.ClickOnLinkById(typeOfItemId); + const itemId: string = cartDriver.GetArbitraryItemFromData(typeOfItemId); + const cardElement: Locator = await cartDriver.GetCard(itemId); + const addToCartElement: Locator = await cartDriver.GetAddToCartButton(itemId); + }); + }); }); From 82354a56b1dac25682e93f36634642d2a633adde Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Wed, 17 Jan 2024 15:24:49 +0200 Subject: [PATCH 10/27] fix: fixed the error message inside the card to not be visible --- src/components/card.module.css | 5 +++++ src/components/card.tsx | 4 +--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/card.module.css b/src/components/card.module.css index ccd79d8..a5b9e64 100644 --- a/src/components/card.module.css +++ b/src/components/card.module.css @@ -15,6 +15,11 @@ .cardContainer:hover { box-shadow: 10px 10px rgb(253, 0, 207); } +.notVisible { + visibility: hidden; + height: 0px; + width: 0px; +} .img { align-self: center; diff --git a/src/components/card.tsx b/src/components/card.tsx index 31122fd..5155757 100644 --- a/src/components/card.tsx +++ b/src/components/card.tsx @@ -18,9 +18,7 @@ export const Card: React.FC = ({ id, mainTitle, secondaryTitle, image, pri
    {/* The following div is just so that the error message will be aligned left just as the sizeselector */}
    - {addToCartClicked && !size && ( -

    Please choose a size

    - )} +

    Please choose a size

    Date: Thu, 18 Jan 2024 15:08:01 +0200 Subject: [PATCH 11/27] feat:added a unique data-testid to each size button for every item --- .../card-size-selector.board.tsx | 1 + src/components/AddToCart.tsx | 2 +- .../card-size-selector/card-size-selector.tsx | 4 +- src/components/card.module.css | 1 + src/components/card.tsx | 13 +++++- src/components/datatypes.ts | 1 + src/test-kit/cart-driver.ts | 34 +++++++++++----- src/test-kit/navigation-driver.ts | 9 ++--- src/test-kit/server-setup.ts | 2 +- src/test/app.test.ts | 40 +++++++++++-------- 10 files changed, 69 insertions(+), 38 deletions(-) diff --git a/src/_codux/boards/card-size-selector/card-size-selector.board.tsx b/src/_codux/boards/card-size-selector/card-size-selector.board.tsx index 19de387..94a5910 100644 --- a/src/_codux/boards/card-size-selector/card-size-selector.board.tsx +++ b/src/_codux/boards/card-size-selector/card-size-selector.board.tsx @@ -7,6 +7,7 @@ export default createBoard({ Board: () => (
    = ({ ); diff --git a/src/components/card-size-selector/card-size-selector.tsx b/src/components/card-size-selector/card-size-selector.tsx index 0cb626a..406e4b3 100644 --- a/src/components/card-size-selector/card-size-selector.tsx +++ b/src/components/card-size-selector/card-size-selector.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styles from './card-size-selector.module.css'; import { CardSizeSelector, Sizes } from '../datatypes'; -const SizeSelector: React.FC = ({ size, setSize }) => { +const SizeSelector: React.FC = ({ id, size, setSize }) => { const sizes: Sizes[] = ['S', 'M', 'L', 'XL']; const handleSelectSize = (currentSize: Sizes) => { @@ -13,7 +13,7 @@ const SizeSelector: React.FC = ({ size, setSize }) => {
    {sizes.map((currentSize) => (
    {/* The following div is just so that the error message will be aligned left just as the sizeselector */}
    -

    Please choose a size

    - +

    + Please choose a size +

    +
    void; } diff --git a/src/test-kit/cart-driver.ts b/src/test-kit/cart-driver.ts index 1060af6..18ae370 100644 --- a/src/test-kit/cart-driver.ts +++ b/src/test-kit/cart-driver.ts @@ -4,40 +4,52 @@ import { PantsData, HatsData, ShirtsData } from '../components/data'; export class CartDriver { private page: Page; private dataItems: string[]; + private sizes: string[]; constructor(page: Page) { this.page = page; this.dataItems = ['HATS', 'PANTS', 'SHIRTS']; + this.sizes = ['S', 'M', 'L', 'XL']; } - SetPage(page: Page) { + setPage(page: Page): void { this.page = page; } - GetRandomArbitrary(min: number, max: number): string { + getRandomNumber(min: number, max: number): string { return Math.floor(Math.random() * (max - min) + min).toString(); } - GetRandomTypeOfItem(): string { + getRandomTypeOfItem(): string { const randomIndex = Math.floor(Math.random() * this.dataItems.length); return this.dataItems[randomIndex]; } - async GetAddToCartButton(itemId: string): Promise { + getRandomSize(): string { + const randomIndex = Math.floor(Math.random() * this.sizes.length); + return this.sizes[randomIndex]; + } + + async getCardSizeButton(itemId: string, size: string): Promise { + const sizeSelectorId = itemId + ' ' + size; + return this.page.getByTestId(sizeSelectorId); + } + + async getAddToCartButton(itemId: string): Promise { const addToCartButtonId = itemId + ' add to cart button'; return this.page.getByTestId(addToCartButtonId); } - async GetCard(itemId: string): Promise { + async getCard(itemId: string): Promise { const cardId = itemId + ' card'; return this.page.getByTestId(cardId); } - ClickOnCart() { + clickOnCart(): Promise { return this.page.getByTestId('shoppingBagButton').click(); } - async ClickOutsideCart() { + async clickOutsideCart() { const boundingBox = await this.page.getByTestId('shoppingBagButton').boundingBox(); if (boundingBox) { const coordinate = { x: boundingBox.x, y: boundingBox.y }; @@ -45,16 +57,16 @@ export class CartDriver { } } - GetArbitraryItemFromData(itemName: string): string { + getArbitraryItemFromData(itemName: string): string { switch (itemName) { case 'HATS': - return 'hats' + this.GetRandomArbitrary(1, HatsData.length); + return 'hats' + this.getRandomNumber(1, HatsData.length); break; case 'PANTS': - return 'pants' + this.GetRandomArbitrary(1, PantsData.length); + return 'pants' + this.getRandomNumber(1, PantsData.length); break; case 'SHIRTS': - return 'pants' + this.GetRandomArbitrary(1, ShirtsData.length); + return 'shirts' + this.getRandomNumber(1, ShirtsData.length); break; default: throw new Error( diff --git a/src/test-kit/navigation-driver.ts b/src/test-kit/navigation-driver.ts index 243d67f..3350bff 100644 --- a/src/test-kit/navigation-driver.ts +++ b/src/test-kit/navigation-driver.ts @@ -3,16 +3,15 @@ import { Page } from 'playwright-chromium'; export class NavigationDriver { constructor(private page: Page) {} - SetPage(page: Page) { + setPage(page: Page) { this.page = page; } - // In NavigationDriver - ClickOnLinkById(Id: string) { - const link = this.page.locator(`[data-testid="${Id}"]`); + clickOnLinkById(Id: string) { + const link = this.page.getByTestId(Id); return link.click(); } - GetPageUrl() { + getPageUrl(): string { return this.page.url(); } } diff --git a/src/test-kit/server-setup.ts b/src/test-kit/server-setup.ts index 759e9cf..94d43f8 100644 --- a/src/test-kit/server-setup.ts +++ b/src/test-kit/server-setup.ts @@ -3,7 +3,7 @@ import { createServer, ViteDevServer } from 'vite'; export async function serverSetup() { const server = await startPreview(); - const browser = await chromium.launch(); + const browser = await chromium.launch({ headless: false }); const context = await browser.newContext(); return { browser, context, server }; } diff --git a/src/test/app.test.ts b/src/test/app.test.ts index 9763648..0fb3634 100644 --- a/src/test/app.test.ts +++ b/src/test/app.test.ts @@ -12,13 +12,13 @@ describe('My tests', function () { let server: ViteDevServer; let navigationDriver: NavigationDriver; let cartDriver: CartDriver; + this.timeout(180_000); before(async () => { const { browser: newBrowser, context: newContext, server: newServer } = await serverSetup(); browser = newBrowser; context = newContext; server = newServer; - page = await browser.newPage(); navigationDriver = new NavigationDriver(page); cartDriver = new CartDriver(page); }); @@ -27,8 +27,8 @@ describe('My tests', function () { page = await context.newPage(); await page.goto(`http://localhost:${8000}`); await page.waitForLoadState(); - navigationDriver.SetPage(page); - cartDriver.SetPage(page); + navigationDriver.setPage(page); + cartDriver.setPage(page); }); afterEach(async () => { @@ -42,32 +42,40 @@ describe('My tests', function () { describe('Sidebar Navigation', async () => { it('should navigate to shirts url', async () => { const id = 'SHIRTS'; - await navigationDriver.ClickOnLinkById(id); - const currentUrl = navigationDriver.GetPageUrl(); + await navigationDriver.clickOnLinkById(id); + const currentUrl = navigationDriver.getPageUrl(); expect(currentUrl).to.equal(`http://localhost:${8000}/Shirts`); }); it('should navigate to home page', async () => { - const id = 'HOME'; - await navigationDriver.ClickOnLinkById(id); - const currentUrl = navigationDriver.GetPageUrl(); + const id: string = 'HOME'; + await navigationDriver.clickOnLinkById(id); + const currentUrl: string = navigationDriver.getPageUrl(); expect(currentUrl).to.equal(`http://localhost:${8000}/`); }); }); describe('Cart tests', async () => { it('Verify that clicking the cart icon opens the modal and clicking outside the modal closes it.', async () => { - await cartDriver.ClickOnCart(); + await cartDriver.clickOnCart(); expect(await page.getByTestId('bagModal').isVisible()).to.be.true; - await cartDriver.ClickOutsideCart(); + await cartDriver.clickOutsideCart(); expect(await page.getByTestId('bagModal').isVisible()).to.be.false; }); - it('Ensure adding an item to the cart fails when size is not selected', async () => { - const typeOfItemId = cartDriver.GetRandomTypeOfItem(); - await navigationDriver.ClickOnLinkById(typeOfItemId); - const itemId: string = cartDriver.GetArbitraryItemFromData(typeOfItemId); - const cardElement: Locator = await cartDriver.GetCard(itemId); - const addToCartElement: Locator = await cartDriver.GetAddToCartButton(itemId); + it('Verify proper error message when adding to cart without selecting size, and no message appears when size is selected.', async () => { + const typeOfItemId: string = cartDriver.getRandomTypeOfItem(); + const itemId: string = cartDriver.getArbitraryItemFromData(typeOfItemId); + await navigationDriver.clickOnLinkById(typeOfItemId); + const cardLoacator: Locator = await cartDriver.getCard(itemId); + const addToCartLocator: Locator = await cartDriver.getAddToCartButton(itemId); + await addToCartLocator.click(); + expect(await cardLoacator.getByTestId('choose size').isVisible()).to.be.true; + + const size: string = cartDriver.getRandomSize(); + const sizeLocator: Locator = await cartDriver.getCardSizeButton(itemId, size); + // await sizeLargeLocator.highlight(); + await sizeLocator.click(); + expect(await cardLoacator.locator('[data-testid="choose size"]').isVisible()).to.be.false; }); }); }); From 05452eb238c17d2b160c78099fab6761f018c36e Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Sun, 21 Jan 2024 10:41:09 +0200 Subject: [PATCH 12/27] feat: created the addSomeItemsToCart method to th driver --- src/test-kit/cart-driver.ts | 26 ++++++++++++++++++++++++++ src/test-kit/server-setup.ts | 2 +- src/test/app.test.ts | 9 +++++++-- 3 files changed, 34 insertions(+), 3 deletions(-) diff --git a/src/test-kit/cart-driver.ts b/src/test-kit/cart-driver.ts index 18ae370..17ab303 100644 --- a/src/test-kit/cart-driver.ts +++ b/src/test-kit/cart-driver.ts @@ -1,15 +1,18 @@ import { Locator, Page } from 'playwright-chromium'; import { PantsData, HatsData, ShirtsData } from '../components/data'; +import { NavigationDriver } from './navigation-driver'; export class CartDriver { private page: Page; private dataItems: string[]; private sizes: string[]; + private navigationDriver: NavigationDriver; constructor(page: Page) { this.page = page; this.dataItems = ['HATS', 'PANTS', 'SHIRTS']; this.sizes = ['S', 'M', 'L', 'XL']; + this.navigationDriver = new NavigationDriver(this.page); } setPage(page: Page): void { @@ -74,4 +77,27 @@ export class CartDriver { ); } } + + async addSomeItemsToCart(numOfItems: number): Promise { + let totalPrice : number = 0; + for (let i = 0; i < numOfItems; i++) { + const typeOfItemId: string = this.getRandomTypeOfItem(); + const itemId: string = this.getArbitraryItemFromData(typeOfItemId); + this.navigationDriver.clickOnLinkById(typeOfItemId); + const cardLoacator: Locator = await this.getCard(itemId); + const addToCartLocator: Locator = await this.getAddToCartButton(itemId); + const sizeLocator: Locator = await this.getCardSizeButton(itemId, this.getRandomSize()); + sizeLocator.click(); + addToCartLocator.click(); + const priceElement = cardLoacator.getByTestId('price'); + const priceText = priceElement ? await priceElement.textContent() : null; + + if (priceText !== null) { + totalPrice += parseInt(priceText, 10); + } else { + // Handle the case where priceText is null + console.error("Price text is null. Unable to parse as an integer."); + } } + return totalPrice; + } } diff --git a/src/test-kit/server-setup.ts b/src/test-kit/server-setup.ts index 94d43f8..759e9cf 100644 --- a/src/test-kit/server-setup.ts +++ b/src/test-kit/server-setup.ts @@ -3,7 +3,7 @@ import { createServer, ViteDevServer } from 'vite'; export async function serverSetup() { const server = await startPreview(); - const browser = await chromium.launch({ headless: false }); + const browser = await chromium.launch(); const context = await browser.newContext(); return { browser, context, server }; } diff --git a/src/test/app.test.ts b/src/test/app.test.ts index 0fb3634..506eeae 100644 --- a/src/test/app.test.ts +++ b/src/test/app.test.ts @@ -12,7 +12,7 @@ describe('My tests', function () { let server: ViteDevServer; let navigationDriver: NavigationDriver; let cartDriver: CartDriver; - this.timeout(180_000); + before(async () => { const { browser: newBrowser, context: newContext, server: newServer } = await serverSetup(); @@ -70,12 +70,17 @@ describe('My tests', function () { const addToCartLocator: Locator = await cartDriver.getAddToCartButton(itemId); await addToCartLocator.click(); expect(await cardLoacator.getByTestId('choose size').isVisible()).to.be.true; - const size: string = cartDriver.getRandomSize(); const sizeLocator: Locator = await cartDriver.getCardSizeButton(itemId, size); // await sizeLargeLocator.highlight(); await sizeLocator.click(); expect(await cardLoacator.locator('[data-testid="choose size"]').isVisible()).to.be.false; }); + + it('Confirm that the total price shown in the modal matches the accurate price', async () => { + const totalPrice = await cartDriver.addSomeItemsToCart(4); + + expect() + }) }); }); From deaf951b48a5f63b2706691af789819aba2c181e Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Sun, 21 Jan 2024 15:26:05 +0200 Subject: [PATCH 13/27] feat: completet the total price match test --- src/components/bagModal/bagModal.tsx | 4 +++- src/components/card.tsx | 4 +++- src/test-kit/cart-driver.ts | 22 ++++++++-------------- src/test/app.test.ts | 15 ++++++++------- src/utility.ts | 10 ++++++++++ 5 files changed, 32 insertions(+), 23 deletions(-) diff --git a/src/components/bagModal/bagModal.tsx b/src/components/bagModal/bagModal.tsx index ad3d733..4a41778 100644 --- a/src/components/bagModal/bagModal.tsx +++ b/src/components/bagModal/bagModal.tsx @@ -80,7 +80,9 @@ export const BagModal = () => {

    Order Summary

    -

    {`$ ${totalPrice.toFixed(2)}`}

    +

    + {totalPrice.toFixed(2)} +

    diff --git a/src/components/card.tsx b/src/components/card.tsx index 5b73ca8..76077a8 100644 --- a/src/components/card.tsx +++ b/src/components/card.tsx @@ -14,7 +14,9 @@ export const Card: React.FC = ({ id, mainTitle, secondaryTitle, image, pri

    {mainTitle}

    {secondaryTitle}

    -

    {`$ ${price}`}

    +

    + {price} +

    {/* The following div is just so that the error message will be aligned left just as the sizeselector */}
    diff --git a/src/test-kit/cart-driver.ts b/src/test-kit/cart-driver.ts index 17ab303..ec0298e 100644 --- a/src/test-kit/cart-driver.ts +++ b/src/test-kit/cart-driver.ts @@ -8,11 +8,11 @@ export class CartDriver { private sizes: string[]; private navigationDriver: NavigationDriver; - constructor(page: Page) { + constructor(page: Page, navigationDriver: NavigationDriver) { this.page = page; this.dataItems = ['HATS', 'PANTS', 'SHIRTS']; this.sizes = ['S', 'M', 'L', 'XL']; - this.navigationDriver = new NavigationDriver(this.page); + this.navigationDriver = navigationDriver; } setPage(page: Page): void { @@ -79,7 +79,7 @@ export class CartDriver { } async addSomeItemsToCart(numOfItems: number): Promise { - let totalPrice : number = 0; + let totalPrice: number = 0; for (let i = 0; i < numOfItems; i++) { const typeOfItemId: string = this.getRandomTypeOfItem(); const itemId: string = this.getArbitraryItemFromData(typeOfItemId); @@ -87,17 +87,11 @@ export class CartDriver { const cardLoacator: Locator = await this.getCard(itemId); const addToCartLocator: Locator = await this.getAddToCartButton(itemId); const sizeLocator: Locator = await this.getCardSizeButton(itemId, this.getRandomSize()); - sizeLocator.click(); - addToCartLocator.click(); - const priceElement = cardLoacator.getByTestId('price'); - const priceText = priceElement ? await priceElement.textContent() : null; - - if (priceText !== null) { - totalPrice += parseInt(priceText, 10); - } else { - // Handle the case where priceText is null - console.error("Price text is null. Unable to parse as an integer."); - } } + await sizeLocator.click(); + await addToCartLocator.click(); + const priceText: string = await cardLoacator.getByTestId('price').innerText(); + totalPrice += parseFloat(parseFloat(priceText).toFixed(2)); + } return totalPrice; } } diff --git a/src/test/app.test.ts b/src/test/app.test.ts index 506eeae..0cd135d 100644 --- a/src/test/app.test.ts +++ b/src/test/app.test.ts @@ -4,6 +4,7 @@ import { ViteDevServer } from 'vite'; import { serverSetup, serverTeardown } from '../test-kit/server-setup'; import { NavigationDriver } from '../test-kit/navigation-driver'; import { CartDriver } from '../test-kit/cart-driver'; +import { areNumbersClose } from '../utility'; describe('My tests', function () { let page: Page; @@ -13,14 +14,13 @@ describe('My tests', function () { let navigationDriver: NavigationDriver; let cartDriver: CartDriver; - before(async () => { const { browser: newBrowser, context: newContext, server: newServer } = await serverSetup(); browser = newBrowser; context = newContext; server = newServer; navigationDriver = new NavigationDriver(page); - cartDriver = new CartDriver(page); + cartDriver = new CartDriver(page, navigationDriver); }); beforeEach(async () => { @@ -72,15 +72,16 @@ describe('My tests', function () { expect(await cardLoacator.getByTestId('choose size').isVisible()).to.be.true; const size: string = cartDriver.getRandomSize(); const sizeLocator: Locator = await cartDriver.getCardSizeButton(itemId, size); - // await sizeLargeLocator.highlight(); await sizeLocator.click(); expect(await cardLoacator.locator('[data-testid="choose size"]').isVisible()).to.be.false; }); it('Confirm that the total price shown in the modal matches the accurate price', async () => { - const totalPrice = await cartDriver.addSomeItemsToCart(4); - - expect() - }) + const totalPrice: number = await cartDriver.addSomeItemsToCart(Math.random() * 30 + 1); + await cartDriver.clickOnCart(); + const numberShownText: string | null = await page.getByTestId('total-price').textContent(); + const numberShown: number = numberShownText ? parseInt(numberShownText) : 0; + expect(areNumbersClose(totalPrice, numberShown, 1)).to.be.true; + }); }); }); diff --git a/src/utility.ts b/src/utility.ts index 0c130ff..b1353ab 100644 --- a/src/utility.ts +++ b/src/utility.ts @@ -13,3 +13,13 @@ export const useCart = (): CartContextProps => { } return context; }; + +export const areNumbersClose = (num1: number, num2: number, tolerance: number): boolean => { + console.log( + `Number 1 is ${num1} and the second number is ${num2}, the difference between them is ${Math.abs( + num1 - num2 + )}` + ); + const dif: boolean = Math.abs(num1 - num2) <= tolerance; + return dif; +}; From 9823d094d1bd9ab48d4f12e3fb866f6812ed8eb0 Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Mon, 22 Jan 2024 11:52:13 +0200 Subject: [PATCH 14/27] feat:Added a test to confirm that changing the quantity of a product in the shopping cart correctly updates the total price displayed in the modal. --- .../quantity-select/quantity-select.tsx | 7 +++++-- src/test/app.test.ts | 17 +++++++++++++++++ src/utility.ts | 8 +------- 3 files changed, 23 insertions(+), 9 deletions(-) diff --git a/src/components/quantity-select/quantity-select.tsx b/src/components/quantity-select/quantity-select.tsx index f45e086..0d6e434 100644 --- a/src/components/quantity-select/quantity-select.tsx +++ b/src/components/quantity-select/quantity-select.tsx @@ -22,9 +22,12 @@ export const QuantitySelect: React.FC = ({ return (
    - {options.map((option: number) => ( - ))} diff --git a/src/test/app.test.ts b/src/test/app.test.ts index 0cd135d..a0f332b 100644 --- a/src/test/app.test.ts +++ b/src/test/app.test.ts @@ -13,6 +13,7 @@ describe('My tests', function () { let server: ViteDevServer; let navigationDriver: NavigationDriver; let cartDriver: CartDriver; + // this.timeout(10000); before(async () => { const { browser: newBrowser, context: newContext, server: newServer } = await serverSetup(); @@ -83,5 +84,21 @@ describe('My tests', function () { const numberShown: number = numberShownText ? parseInt(numberShownText) : 0; expect(areNumbersClose(totalPrice, numberShown, 1)).to.be.true; }); + + it('Ensures the total price in the modal updates with changes in product quantity.', async () => { + await navigationDriver.clickOnLinkById('PANTS'); + const itemId: string = 'pants10'; + const firstPantsCardLocator: Locator = await cartDriver.getCard(itemId); + await (await cartDriver.getCardSizeButton(itemId, 'L')).click(); + await (await cartDriver.getAddToCartButton(itemId)).click(); + const pantsPriceText: string | null = await firstPantsCardLocator.getByTestId('price').textContent(); + const pantsPrice: number = pantsPriceText ? parseFloat(pantsPriceText) : 0; + await cartDriver.clickOnCart(); + await page.getByTestId(`${itemId} select`).selectOption('2'); + const totalPriceText: string | null = await page.getByTestId('total-price').textContent(); + const totalPrice: number = totalPriceText ? parseFloat(totalPriceText) : 0; + console.log(`the total price is ${totalPrice} and the pants price is ${pantsPrice}`); + expect(pantsPrice * 2).to.equal(totalPrice); + }); }); }); diff --git a/src/utility.ts b/src/utility.ts index b1353ab..54a37c2 100644 --- a/src/utility.ts +++ b/src/utility.ts @@ -15,11 +15,5 @@ export const useCart = (): CartContextProps => { }; export const areNumbersClose = (num1: number, num2: number, tolerance: number): boolean => { - console.log( - `Number 1 is ${num1} and the second number is ${num2}, the difference between them is ${Math.abs( - num1 - num2 - )}` - ); - const dif: boolean = Math.abs(num1 - num2) <= tolerance; - return dif; + return Math.abs(num1 - num2) <= tolerance; }; From 671989d4ef7129ad24601e4eb8522e19ae5049f5 Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Mon, 22 Jan 2024 12:09:49 +0200 Subject: [PATCH 15/27] feat: changed the second test to navigate to the pants page instead of the home page --- src/components/bagModal/bagModal.tsx | 2 +- src/test/app.test.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/bagModal/bagModal.tsx b/src/components/bagModal/bagModal.tsx index 4a41778..8fef831 100644 --- a/src/components/bagModal/bagModal.tsx +++ b/src/components/bagModal/bagModal.tsx @@ -74,7 +74,7 @@ export const BagModal = () => { ...getItemFromId(id), size: size as Sizes, }; - return ; + return ; })}
    diff --git a/src/test/app.test.ts b/src/test/app.test.ts index a0f332b..d62e0e1 100644 --- a/src/test/app.test.ts +++ b/src/test/app.test.ts @@ -49,10 +49,10 @@ describe('My tests', function () { }); it('should navigate to home page', async () => { - const id: string = 'HOME'; + const id: string = 'PANTS'; await navigationDriver.clickOnLinkById(id); const currentUrl: string = navigationDriver.getPageUrl(); - expect(currentUrl).to.equal(`http://localhost:${8000}/`); + expect(currentUrl).to.equal(`http://localhost:${8000}/Pants`); }); }); describe('Cart tests', async () => { From 0802ad881681623e7aecccfcfee496bd0b02c271 Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Mon, 22 Jan 2024 12:58:00 +0200 Subject: [PATCH 16/27] fix:fixed the changeNumOfItem in the cart context so it will reevaluate the total products --- src/CartContext.tsx | 1 + src/components/bag-item/bag-item.tsx | 4 ++-- src/test-kit/cart-driver.ts | 10 +--------- src/test-kit/navigation-driver.ts | 4 ---- src/test/app.test.ts | 22 ++++++++++++++++------ 5 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/CartContext.tsx b/src/CartContext.tsx index f95cfba..628001c 100644 --- a/src/CartContext.tsx +++ b/src/CartContext.tsx @@ -44,6 +44,7 @@ export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children // Update the quantity for the specific item and size newCartItems.set(generatedId, quantity); setCartItems(newCartItems); + setNumOfItems((prevNumOfItems:number) => prevNumOfItems - oldNumOfItems + quantity) setTotalPrice((prevPrice) => prevPrice - oldItemPrice + newItemPrice); }; diff --git a/src/components/bag-item/bag-item.tsx b/src/components/bag-item/bag-item.tsx index db62cb5..95eb3f3 100644 --- a/src/components/bag-item/bag-item.tsx +++ b/src/components/bag-item/bag-item.tsx @@ -27,7 +27,7 @@ export const BagItem: React.FC = ({ return (
    - +

    {mainTitle}

    {secondaryTitle}

    @@ -43,7 +43,7 @@ export const BagItem: React.FC = ({ price={price} />
    - +

    {`$ ${price}`}

    diff --git a/src/test-kit/cart-driver.ts b/src/test-kit/cart-driver.ts index ec0298e..5efd1f0 100644 --- a/src/test-kit/cart-driver.ts +++ b/src/test-kit/cart-driver.ts @@ -3,20 +3,12 @@ import { PantsData, HatsData, ShirtsData } from '../components/data'; import { NavigationDriver } from './navigation-driver'; export class CartDriver { - private page: Page; private dataItems: string[]; private sizes: string[]; - private navigationDriver: NavigationDriver; - constructor(page: Page, navigationDriver: NavigationDriver) { - this.page = page; + constructor(private page: Page, private navigationDriver: NavigationDriver) { this.dataItems = ['HATS', 'PANTS', 'SHIRTS']; this.sizes = ['S', 'M', 'L', 'XL']; - this.navigationDriver = navigationDriver; - } - - setPage(page: Page): void { - this.page = page; } getRandomNumber(min: number, max: number): string { diff --git a/src/test-kit/navigation-driver.ts b/src/test-kit/navigation-driver.ts index 3350bff..b419b61 100644 --- a/src/test-kit/navigation-driver.ts +++ b/src/test-kit/navigation-driver.ts @@ -3,10 +3,6 @@ import { Page } from 'playwright-chromium'; export class NavigationDriver { constructor(private page: Page) {} - setPage(page: Page) { - this.page = page; - } - clickOnLinkById(Id: string) { const link = this.page.getByTestId(Id); return link.click(); diff --git a/src/test/app.test.ts b/src/test/app.test.ts index d62e0e1..8ee1993 100644 --- a/src/test/app.test.ts +++ b/src/test/app.test.ts @@ -13,23 +13,21 @@ describe('My tests', function () { let server: ViteDevServer; let navigationDriver: NavigationDriver; let cartDriver: CartDriver; - // this.timeout(10000); before(async () => { const { browser: newBrowser, context: newContext, server: newServer } = await serverSetup(); browser = newBrowser; context = newContext; server = newServer; - navigationDriver = new NavigationDriver(page); - cartDriver = new CartDriver(page, navigationDriver); + }); beforeEach(async () => { page = await context.newPage(); await page.goto(`http://localhost:${8000}`); await page.waitForLoadState(); - navigationDriver.setPage(page); - cartDriver.setPage(page); + navigationDriver = new NavigationDriver(page); + cartDriver = new CartDriver(page, navigationDriver); }); afterEach(async () => { @@ -97,8 +95,20 @@ describe('My tests', function () { await page.getByTestId(`${itemId} select`).selectOption('2'); const totalPriceText: string | null = await page.getByTestId('total-price').textContent(); const totalPrice: number = totalPriceText ? parseFloat(totalPriceText) : 0; - console.log(`the total price is ${totalPrice} and the pants price is ${pantsPrice}`); expect(pantsPrice * 2).to.equal(totalPrice); }); + + it('Ensures the delete button in the modal actually delete the product from the list',async ()=>{ + await navigationDriver.clickOnLinkById('HATS'); + const itemId: string = 'hats8'; + await (await cartDriver.getCardSizeButton(itemId, 'M')).click(); + await (await cartDriver.getAddToCartButton(itemId)).click(); + await cartDriver.clickOnCart(); + await(page.getByTestId(`${itemId} delete-button`)).click() + const totalPriceText: string | null = await page.getByTestId('total-price').textContent(); + const totalPrice: number = totalPriceText ? parseFloat(totalPriceText) : -1; + expect(totalPrice).to.equal(0); + + }) }); }); From 8dabd7cb559cc3a99ad83f397347137ba1545857 Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Mon, 22 Jan 2024 14:45:43 +0200 Subject: [PATCH 17/27] feat:Enhanced test case for item quantity adjustment, ensuring accurate updates in the cart --- src/CartContext.tsx | 4 ++-- src/components/bag-item/bag-item.tsx | 5 ++++- src/components/bagModal/bagModal.tsx | 2 +- src/components/header.tsx | 4 +++- src/test-kit/cart-driver.ts | 5 ++++- src/test/app.test.ts | 31 +++++++++++++++++++++------- 6 files changed, 38 insertions(+), 13 deletions(-) diff --git a/src/CartContext.tsx b/src/CartContext.tsx index 628001c..d034e5c 100644 --- a/src/CartContext.tsx +++ b/src/CartContext.tsx @@ -41,10 +41,10 @@ export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children const oldItemPrice: number = oldNumOfItems * parseFloat(item.price); const newItemPrice: number = parseFloat(item.price) * quantity; - // Update the quantity for the specific item and size + // Update the quantity for the specific item and sizeß newCartItems.set(generatedId, quantity); setCartItems(newCartItems); - setNumOfItems((prevNumOfItems:number) => prevNumOfItems - oldNumOfItems + quantity) + setNumOfItems((prevNumOfItems: number) => prevNumOfItems - oldNumOfItems + quantity); setTotalPrice((prevPrice) => prevPrice - oldItemPrice + newItemPrice); }; diff --git a/src/components/bag-item/bag-item.tsx b/src/components/bag-item/bag-item.tsx index 95eb3f3..23c2068 100644 --- a/src/components/bag-item/bag-item.tsx +++ b/src/components/bag-item/bag-item.tsx @@ -43,7 +43,10 @@ export const BagItem: React.FC = ({ price={price} />
    - +

    {`$ ${price}`}

    diff --git a/src/components/bagModal/bagModal.tsx b/src/components/bagModal/bagModal.tsx index 8fef831..958d3ae 100644 --- a/src/components/bagModal/bagModal.tsx +++ b/src/components/bagModal/bagModal.tsx @@ -74,7 +74,7 @@ export const BagModal = () => { ...getItemFromId(id), size: size as Sizes, }; - return ; + return ; })}
    diff --git a/src/components/header.tsx b/src/components/header.tsx index 7c47dd4..ddc7fd4 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -25,7 +25,9 @@ export const Header = () => { className={styles.shoppingBagButton} onClick={handleShoppingBagClick}> {numOfItems > 0 && ( -

    {numOfItems < 10 ? numOfItems : '9+'}

    +

    + {numOfItems < 10 ? numOfItems : '9+'} +

    )}
    diff --git a/src/test-kit/cart-driver.ts b/src/test-kit/cart-driver.ts index 5efd1f0..03f17c5 100644 --- a/src/test-kit/cart-driver.ts +++ b/src/test-kit/cart-driver.ts @@ -6,7 +6,10 @@ export class CartDriver { private dataItems: string[]; private sizes: string[]; - constructor(private page: Page, private navigationDriver: NavigationDriver) { + constructor( + private page: Page, + private navigationDriver: NavigationDriver + ) { this.dataItems = ['HATS', 'PANTS', 'SHIRTS']; this.sizes = ['S', 'M', 'L', 'XL']; } diff --git a/src/test/app.test.ts b/src/test/app.test.ts index 8ee1993..ce9ce1d 100644 --- a/src/test/app.test.ts +++ b/src/test/app.test.ts @@ -19,7 +19,6 @@ describe('My tests', function () { browser = newBrowser; context = newContext; server = newServer; - }); beforeEach(async () => { @@ -89,7 +88,9 @@ describe('My tests', function () { const firstPantsCardLocator: Locator = await cartDriver.getCard(itemId); await (await cartDriver.getCardSizeButton(itemId, 'L')).click(); await (await cartDriver.getAddToCartButton(itemId)).click(); - const pantsPriceText: string | null = await firstPantsCardLocator.getByTestId('price').textContent(); + const pantsPriceText: string | null = await firstPantsCardLocator + .getByTestId('price') + .textContent(); const pantsPrice: number = pantsPriceText ? parseFloat(pantsPriceText) : 0; await cartDriver.clickOnCart(); await page.getByTestId(`${itemId} select`).selectOption('2'); @@ -97,18 +98,34 @@ describe('My tests', function () { const totalPrice: number = totalPriceText ? parseFloat(totalPriceText) : 0; expect(pantsPrice * 2).to.equal(totalPrice); }); - - it('Ensures the delete button in the modal actually delete the product from the list',async ()=>{ + + it('Verifies that adjusting the quantity of items through the modal updates the item count in the cart accordingly', async () => { + await navigationDriver.clickOnLinkById('SHIRTS'); + const itemId: string = 'shirts4'; + await (await cartDriver.getCardSizeButton(itemId, 'XL')).click(); + await (await cartDriver.getAddToCartButton(itemId)).click(); + await cartDriver.clickOnCart(); + await page.getByTestId(`${itemId} select`).selectOption('9'); + await cartDriver.clickOutsideCart(); + const numOfItemsInCartText: string | null = await page + .getByTestId('number-of-items') + .textContent(); + const numOfItemsInCart: number = numOfItemsInCartText + ? parseFloat(numOfItemsInCartText) + : 0; + expect(numOfItemsInCart).to.equal(9); + }); + + it('Ensures the delete button in the modal actually delete the product from the list', async () => { await navigationDriver.clickOnLinkById('HATS'); const itemId: string = 'hats8'; await (await cartDriver.getCardSizeButton(itemId, 'M')).click(); await (await cartDriver.getAddToCartButton(itemId)).click(); await cartDriver.clickOnCart(); - await(page.getByTestId(`${itemId} delete-button`)).click() + await page.getByTestId(`${itemId} delete-button`).click(); const totalPriceText: string | null = await page.getByTestId('total-price').textContent(); const totalPrice: number = totalPriceText ? parseFloat(totalPriceText) : -1; expect(totalPrice).to.equal(0); - - }) + }); }); }); From 8a13a3810e40d084f2c8f29591f25cfb78d26194 Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Mon, 22 Jan 2024 14:52:59 +0200 Subject: [PATCH 18/27] fix: changed the description of the tests to be more informative --- src/test/app.test.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/test/app.test.ts b/src/test/app.test.ts index ce9ce1d..56b04b7 100644 --- a/src/test/app.test.ts +++ b/src/test/app.test.ts @@ -6,7 +6,7 @@ import { NavigationDriver } from '../test-kit/navigation-driver'; import { CartDriver } from '../test-kit/cart-driver'; import { areNumbersClose } from '../utility'; -describe('My tests', function () { +describe('E-Commerce Tests', function () { let page: Page; let browser: Browser; let context: BrowserContext; @@ -38,14 +38,14 @@ describe('My tests', function () { }); describe('Sidebar Navigation', async () => { - it('should navigate to shirts url', async () => { + it('should navigate to the "Shirts" category page', async () => { const id = 'SHIRTS'; await navigationDriver.clickOnLinkById(id); const currentUrl = navigationDriver.getPageUrl(); expect(currentUrl).to.equal(`http://localhost:${8000}/Shirts`); }); - it('should navigate to home page', async () => { + it('should navigate to the "Pants" category page', async () => { const id: string = 'PANTS'; await navigationDriver.clickOnLinkById(id); const currentUrl: string = navigationDriver.getPageUrl(); @@ -53,14 +53,14 @@ describe('My tests', function () { }); }); describe('Cart tests', async () => { - it('Verify that clicking the cart icon opens the modal and clicking outside the modal closes it.', async () => { + it('should open and close the cart modal correctly.', async () => { await cartDriver.clickOnCart(); expect(await page.getByTestId('bagModal').isVisible()).to.be.true; await cartDriver.clickOutsideCart(); expect(await page.getByTestId('bagModal').isVisible()).to.be.false; }); - it('Verify proper error message when adding to cart without selecting size, and no message appears when size is selected.', async () => { + it('should display an error message when adding to cart without selecting size, and undisplay when choosing size', async () => { const typeOfItemId: string = cartDriver.getRandomTypeOfItem(); const itemId: string = cartDriver.getArbitraryItemFromData(typeOfItemId); await navigationDriver.clickOnLinkById(typeOfItemId); @@ -74,7 +74,7 @@ describe('My tests', function () { expect(await cardLoacator.locator('[data-testid="choose size"]').isVisible()).to.be.false; }); - it('Confirm that the total price shown in the modal matches the accurate price', async () => { + it('should confirm that the total price in the modal matches the accurate price', async () => { const totalPrice: number = await cartDriver.addSomeItemsToCart(Math.random() * 30 + 1); await cartDriver.clickOnCart(); const numberShownText: string | null = await page.getByTestId('total-price').textContent(); @@ -82,7 +82,7 @@ describe('My tests', function () { expect(areNumbersClose(totalPrice, numberShown, 1)).to.be.true; }); - it('Ensures the total price in the modal updates with changes in product quantity.', async () => { + it('should update the total price in the modal with changes in product quantity', async () => { await navigationDriver.clickOnLinkById('PANTS'); const itemId: string = 'pants10'; const firstPantsCardLocator: Locator = await cartDriver.getCard(itemId); From 5206e78e377d3225fb08b83b4eb41a04d92101df Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Mon, 22 Jan 2024 15:13:06 +0200 Subject: [PATCH 19/27] fix: removed unneccesary dependencies to package.json --- package.json | 4 ---- 1 file changed, 4 deletions(-) diff --git a/package.json b/package.json index 3d79e55..91ac058 100644 --- a/package.json +++ b/package.json @@ -13,10 +13,6 @@ "test": "mocha src/test/*.test.ts" }, "dependencies": { - "@fortawesome/fontawesome-free": "^6.5.1", - "@fortawesome/fontawesome-svg-core": "^6.5.1", - "@fortawesome/free-solid-svg-icons": "^6.5.1", - "@fortawesome/react-fontawesome": "^0.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.12.0", From 3b36025e7f607dd5588b78e4a02c4d3f07f9e656 Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Thu, 1 Feb 2024 15:05:43 +0200 Subject: [PATCH 20/27] Just for fun --- src/components/sidebar.module.css | 41 +++++++++++++++---------------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/src/components/sidebar.module.css b/src/components/sidebar.module.css index e8b4674..577d8b7 100644 --- a/src/components/sidebar.module.css +++ b/src/components/sidebar.module.css @@ -1,32 +1,31 @@ .navbar { - width: 10vh; - flex: 0 0 10%; - padding-top: 35px; + flex: 0 0 10%; + padding-top: 35px; } .listItem { - display: flex; - justify-content: center; - align-items: center; - margin: 0.7rem; - border-radius: 50px; - border: 1px solid black; + display: flex; + justify-content: center; + align-items: center; + margin: 0.7rem; + border-radius: 50px; + border: 1px solid black; } .sidebarContent:hover, .listItem:hover { - background-color: rgba(0, 0, 0); - color: white; + background-color: rgba(0, 0, 0); + color: white; } .sidebarContent { - font-family: 'Climate Crisis', sans-serif; - height: 100%; - width: 100%; - color: #000000; - border-radius: 50px; - background-color: white; - font-size: 18px; - letter-spacing: 0.6px; - text-align: center; -} + font-family: 'Climate Crisis', sans-serif; + height: 100%; + width: 100%; + color: #000000; + border-radius: 50px; + background-color: white; + font-size: 18px; + letter-spacing: 0.6px; + text-align: center; +} \ No newline at end of file From 746b9d9e35e386e6bf56ef640335d6e0c61a9192 Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Mon, 5 Feb 2024 12:45:16 +0200 Subject: [PATCH 21/27] Share button sanity --- src/_codux/boards/1.board.tsx | 7 +++ src/components/bag-item/bag-item.module.css | 56 ++++++++++----------- 2 files changed, 35 insertions(+), 28 deletions(-) create mode 100644 src/_codux/boards/1.board.tsx diff --git a/src/_codux/boards/1.board.tsx b/src/_codux/boards/1.board.tsx new file mode 100644 index 0000000..a8a0dad --- /dev/null +++ b/src/_codux/boards/1.board.tsx @@ -0,0 +1,7 @@ +import { createBoard } from '@wixc3/react-board'; + +export default createBoard({ + name: '1', + Board: () =>
    , + isSnippet: true, +}); \ No newline at end of file diff --git a/src/components/bag-item/bag-item.module.css b/src/components/bag-item/bag-item.module.css index 9b6a6f1..100a872 100644 --- a/src/components/bag-item/bag-item.module.css +++ b/src/components/bag-item/bag-item.module.css @@ -1,44 +1,44 @@ .container { - display: flex; - flex-direction: row; - margin: 5px; + display: flex; + flex-direction: row; + margin: 5px; } .test { - flex-direction: column; - display: flex; + flex-direction: column; + display: flex; } .productSelectionContainer { - display: flex; - flex-direction: row; - gap: 0px 12px; - align-items: baseline; - align-content: end; - margin: 12px 0px 0px 2px; - justify-items: end; + display: flex; + flex-direction: row; + gap: 0px 12px; + align-items: baseline; + align-content: end; + margin: 12px 0px 0px 2px; + justify-items: end; } .price { - color: #111111; - font-family: Helvetica Now; - font-weight: 500; - text-align: start; - margin: 6px 0px 0px 16px; - font-size: 20px; + color: #111111; + font-family: Helvetica Now; + font-weight: 500; + text-align: start; + margin: 6px 0px 0px 16px; + font-size: 20px; } .deleteButton { - background: transparent url('../../../src/assets/delete-button.svg') no-repeat center; - width: 30px; - height: 32px; - border: none; - margin-left: 10px; - margin-top: 3px; - padding: 0px; - align-self: stretch; + background: transparent url('../../../src/assets/delete-button.svg') no-repeat center; + height: 32px; + border: none; + margin-left: 10px; + margin-top: 3px; + padding: 0px; + align-self: stretch; + width: 29px; } .deleteButton:hover { - cursor: pointer; -} + cursor: pointer; +} \ No newline at end of file From 40b40cb4aca055b9b646fb8d9058c2517ce1fbbe Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Tue, 6 Feb 2024 18:10:43 +0200 Subject: [PATCH 22/27] my new commit --- package-lock.json | 81 ------------------- src/_codux/boards/bag-item/bag-item.board.tsx | 2 +- 2 files changed, 1 insertion(+), 82 deletions(-) diff --git a/package-lock.json b/package-lock.json index 00d0869..5e05c9f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,10 +8,6 @@ "name": "ecommerce", "version": "0.0.0", "dependencies": { - "@fortawesome/fontawesome-free": "^6.5.1", - "@fortawesome/fontawesome-svg-core": "^6.5.1", - "@fortawesome/free-solid-svg-icons": "^6.5.1", - "@fortawesome/react-fontawesome": "^0.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.12.0", @@ -606,60 +602,6 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, - "node_modules/@fortawesome/fontawesome-common-types": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz", - "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==", - "hasInstallScript": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/@fortawesome/fontawesome-free": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.1.tgz", - "integrity": "sha512-CNy5vSwN3fsUStPRLX7fUYojyuzoEMSXPl7zSLJ8TgtRfjv24LOnOWKT2zYwaHZCJGkdyRnTmstR0P+Ah503Gw==", - "hasInstallScript": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/@fortawesome/fontawesome-svg-core": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz", - "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==", - "hasInstallScript": true, - "dependencies": { - "@fortawesome/fontawesome-common-types": "6.5.1" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/@fortawesome/free-solid-svg-icons": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz", - "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==", - "hasInstallScript": true, - "dependencies": { - "@fortawesome/fontawesome-common-types": "6.5.1" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/@fortawesome/react-fontawesome": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", - "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", - "dependencies": { - "prop-types": "^15.8.1" - }, - "peerDependencies": { - "@fortawesome/fontawesome-svg-core": "~1 || ~6", - "react": ">=16.3" - } - }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.13", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", @@ -3313,14 +3255,6 @@ "node": ">=0.10.0" } }, - "node_modules/object-assign": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -3628,16 +3562,6 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, - "node_modules/prop-types": { - "version": "15.8.1", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", - "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dependencies": { - "loose-envify": "^1.4.0", - "object-assign": "^4.1.1", - "react-is": "^16.13.1" - } - }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -3720,11 +3644,6 @@ "react": "*" } }, - "node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", diff --git a/src/_codux/boards/bag-item/bag-item.board.tsx b/src/_codux/boards/bag-item/bag-item.board.tsx index 3a77920..8d2ffa6 100644 --- a/src/_codux/boards/bag-item/bag-item.board.tsx +++ b/src/_codux/boards/bag-item/bag-item.board.tsx @@ -12,7 +12,7 @@ export default createBoard({ mainTitle={PantsData[0].mainTitle} secondaryTitle={PantsData[0].secondaryTitle} image={PantsData[0].image} - price={'400'} + price={'19.999'} size={'S'} /> From 8ce8ccd157d99f09d173e69372ccaa40aab139c8 Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Wed, 7 Feb 2024 10:30:44 +0200 Subject: [PATCH 23/27] name changed --- src/_codux/boards/1.board.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/_codux/boards/1.board.tsx b/src/_codux/boards/1.board.tsx index a8a0dad..f1d14d9 100644 --- a/src/_codux/boards/1.board.tsx +++ b/src/_codux/boards/1.board.tsx @@ -1,7 +1,7 @@ import { createBoard } from '@wixc3/react-board'; export default createBoard({ - name: '1', - Board: () =>
    , - isSnippet: true, -}); \ No newline at end of file + name: '124124124', + Board: () =>
    , + isSnippet: true, +}); From f11719a3dbee6e7b8b924a29c4d36db4eb2cadd4 Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Wed, 7 Feb 2024 10:31:00 +0200 Subject: [PATCH 24/27] delete --- src/_codux/boards/1.board.tsx | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 src/_codux/boards/1.board.tsx diff --git a/src/_codux/boards/1.board.tsx b/src/_codux/boards/1.board.tsx deleted file mode 100644 index f1d14d9..0000000 --- a/src/_codux/boards/1.board.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { createBoard } from '@wixc3/react-board'; - -export default createBoard({ - name: '124124124', - Board: () =>
    , - isSnippet: true, -}); From 497ae5af1f9a7c003525b7f30ae12ed0a8bc5ceb Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Wed, 7 Feb 2024 10:32:40 +0200 Subject: [PATCH 25/27] check --- .../bag-size-selector.module.css | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/components/bag-size-selector/bag-size-selector.module.css b/src/components/bag-size-selector/bag-size-selector.module.css index e35b97c..06344d8 100644 --- a/src/components/bag-size-selector/bag-size-selector.module.css +++ b/src/components/bag-size-selector/bag-size-selector.module.css @@ -1,33 +1,33 @@ .container { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .text { - font-family: 'Helvetica Now Text', Helvetica, Arial, sans-serif; - line-height: 28px; - color: #707072; - margin: 0px; - align-self: center; - font-weight: 400; - font-size: 16px; + font-family: 'Helvetica Now Text', Helvetica, Arial, sans-serif; + line-height: 28px; + color: #707072; + margin: 0px; + align-self: center; + font-weight: 400; + font-size: 16px; } .selectBar { - font-weight: 100; - border: 0px solid black; - text-align: center; - align-self: center; - margin: 0px 0px 2px 2px; - padding: 0px; - font-family: Tahoma, sans-serif; - width: 38px; - color: #707072; - height: 25px; - line-height: 28px; - font-size: 14px; + font-weight: 100; + border: 0px solid black; + text-align: center; + align-self: center; + margin: 0px 0px 2px 2px; + padding: 0px; + font-family: Tahoma, sans-serif; + width: 37px; + color: #707072; + height: 25px; + line-height: 28px; + font-size: 14px; } .selectBar:hover { - cursor: pointer; -} + cursor: pointer; +} \ No newline at end of file From 1f21cc45d5c041035c22c99ed3861b92b6d1e205 Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Wed, 21 Feb 2024 14:32:51 +0200 Subject: [PATCH 26/27] validation-commit --- src/components/bag-item/bag-item.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/bag-item/bag-item.tsx b/src/components/bag-item/bag-item.tsx index 23c2068..36f22fa 100644 --- a/src/components/bag-item/bag-item.tsx +++ b/src/components/bag-item/bag-item.tsx @@ -31,6 +31,10 @@ export const BagItem: React.FC = ({

    {mainTitle}

    {secondaryTitle}

    +
    = ({ price={price} />
    -

    {`$ ${price}`}

    From 135cc2b20b402362ef7d179b976bf2003b9ad915 Mon Sep 17 00:00:00 2001 From: Daniel Cohen Date: Wed, 21 Feb 2024 14:38:15 +0200 Subject: [PATCH 27/27] revert --- src/components/bag-item/bag-item.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/bag-item/bag-item.tsx b/src/components/bag-item/bag-item.tsx index 36f22fa..23c2068 100644 --- a/src/components/bag-item/bag-item.tsx +++ b/src/components/bag-item/bag-item.tsx @@ -31,10 +31,6 @@ export const BagItem: React.FC = ({

    {mainTitle}

    {secondaryTitle}

    -
    = ({ price={price} />
    +

    {`$ ${price}`}