Merge feature branch

.circleci/config.yml

@@ -12,7 +12,7 @@ orbs:
   # Orbs reduce the amount of configuration required for common tasks.
   # See the orb documentation here: https://circleci.com/developer/orbs/orb/circleci/node
   node: circleci/node@5
-  cypress: cypress-io/cypress@2.1.0
+  cypress: cypress-io/cypress@3.1.1
 
 jobs:
   # Below is the definition of your job to test your Node app. You can rename and customize it as you want.
@@ -21,28 +21,48 @@ jobs:
     # You can specify an image from Dockerhub or use one of our Convenience Images from CircleCI's Developer Hub.
     # A list of available CircleCI docker Convenience Images are available here: https://circleci.com/developer/images/image/cimg/node
     docker:
-      - image: cimg/node:16.16
+      - image: cimg/node:19.9.0
     # Then run your tests!
-    # CircleCI will report the results back to your VCS provider.
     steps:
       # Checkout the code as the first step.
       - checkout
-      # Next, the node orb's install-packages step will install the dependencies from a package.json.
       # The orb install-packages step will also automatically cache them for faster future runs.
       - node/install-packages:
           pkg-manager: "yarn"
-      - when:
-          condition: << pipeline.git.base_revision >>
-          steps:
-            - run:
-                name: Run tests
-                command: yarn run test:unit --changedSince << pipeline.git.base_revision >>
-      - unless:
-          condition: << pipeline.git.base_revision >>
-          steps:
-            - run:
-                name: Run tests
-                command: yarn run test:unit
+          override-ci-command: "yarn install"
+      - run:
+          name: Run tests
+          command: |
+            touch ./tests/unit/french.spec.ts
+            echo "import { mount } from \"@vue/test-utils\";import CartItemCard from \"@/components/CartItemCard.vue\";describe(\"CartItemCard.vue\", () => {it(\"renders the menuItem prop data\", () => {const menuItem = {id: 1, name: \"French Fries\", description: \"Fried potato rectangles\", price: \"2.99\", imageId: \"1\",};const wrapper = mount(CartItemCard, {props: { menuItem },} as any);expect(wrapper.text()).toContain(\"French\");});});" > ./tests/unit/french.spec.ts
+            cat ./tests/unit/french.spec.ts
+            git bisect start
+            git bisect bad 065cd263aca7c9573206d21366141fe56a3a1773
+            git bisect good 3106a0587a16f7c62db7edf1501365abe1a774c3
+            git bisect run yarn test:unit french.spec.ts
+
+  run_cypress_tests:
+    parallelism: 3
+    docker:
+        - image: cimg/node:16.19.1-browsers
+    steps:
+      - checkout
+      - run:
+          name: Install deps
+          command: |
+            yarn install
+            mkdir test_results
+      - run:
+          name: Install the reporter
+          command: yarn add cypress-circleci-reporter mocha --dev
+      - run:
+          name: Run cypress tests
+          command: |
+            circleci tests glob "cypress/**/*.cy.js" | circleci tests run --command="xargs npx cypress run --reporter cypress-circleci-reporter --spec" --verbose
+      - store_test_results:
+          path: test_results
+      - store_artifacts:
+          path: test_results
 
 workflows:
   # Below is the definition of your workflow.
@@ -51,10 +71,10 @@ workflows:
   # For more details on extending your workflow, see the configuration docs: https://circleci.com/docs/2.0/configuration-reference/#workflows
   sample:
     jobs:
-      - test
-      - cypress/run:
-          executor: "node-cypress"
-          command: yarn run test:e2e --headless
-          yarn: true
-      # For running simple node tests, you could optionally instead use the node/test job from the orb to replicate and replace the manually defined "test" job above in fewer lines.
-      # - node/test
+     # - test
+       - run_cypress_tests
+       - hold:
+          type: approval
+       - test:
+          requires:
+            - hold

cypress/e2e/test2.cy.js

@@ -0,0 +1,8 @@
+// https://docs.cypress.io/api/table-of-contents
+
+describe("My First Test", () => {
+  it("Visits the app root url", () => {
+    cy.visit("/");
+    cy.contains("ion-title", "Continuous Food Delivery");
+  });
+});

cypress/e2e/test3.cy.js

@@ -0,0 +1,8 @@
+// https://docs.cypress.io/api/table-of-contents
+
+describe("My First Test", () => {
+  it("Visits the app root url", () => {
+    cy.visit("/");
+    cy.contains("ion-title", "Continuous Food Delivery");
+  });
+});

src/components/CartItemCard.vue

@@ -1,7 +1,6 @@
 <template>
     <ion-card class="cartCard" @click="deleteCartItem(menuItem)">
         <img :src="imageUrl" class="cartImage"/>
-        <div class="cartCardNameContainer"> {{ menuItem.name }} </div>
         <div>{{ menuItem.price }}</div>
         <div><ion-button><ion-icon :icon="trashOutline"></ion-icon></ion-button></div>
     </ion-card>
@@ -11,7 +10,7 @@
     .cartCard {
         display: flex;
         flex-direction: row;
-        height: 100px;
+        height: 200px;
     }
 
     .cartCard div {

tests/unit/menuCard.spec.ts

@@ -11,7 +11,7 @@ describe("CartItemCard.vue", () => {
       imageId: "1",
     };
     const wrapper = mount(MenuItemCard, {
-      props: { menuItem },
+      props: { menuItem }
     } as any);
 
     expect(wrapper.find("ion-card-title").text()).toEqual("French Fries");