microservices-patterns/ftgo-consumer-web-ui

ftgo-consumer-web-ui's Issues

Build 55, 56, and 57 failed

Stage:

e2e tests

Summary:

Test Suites: 1 failed, 1 total
Tests:       3 failed, 3 passed, 6 total
Snapshots:   0 total
Time:        102.683 s
Ran all test suites.

Logs:

FAIL  tests-ui/comprehensive.spec.js (101.913 s)
  Interaction with the entire FTGO UI application:
    00. Ground-zero tests. Browser capabilities
      ✓ Settings (6 ms)
      ✓ Navigation to Landing and a screenshot (2238 ms)
    10. Landing Page -> Restaurants List -> Menu Page
      ✓ Navigation to Landing (2059 ms)
      ✕ [landing page] Correct entry, submission, landing on Restaurants List (31570 ms)
      ✕ [restaurants list page] Navigation, picking correct restaurant, landing of Menu page (30177 ms)
      ✕ [restaurant menu page] Structure check, menu picking, going to checkout (30188 ms)

Log details:

  ● Interaction with the entire FTGO UI application: › 10. Landing Page -> Restaurants List -> Menu Page › [landing page] Correct entry, submission, landing on Restaurants List

    TimeoutError: waiting for selector `[data-testid^="button|submit|landing page form|"][disabled]` failed: timeout 30000ms exceeded

      54 | export function waitForSelector(page, sel, ...args) {
      55 |   console.log(`waitForSelector(page, '${ sel }')`);
    > 56 |   return page.waitForSelector(String(sel), ...args);
         |               ^
      57 | }
      58 |
      59 | export function waitForTimeout(page, msec) {

      at new WaitTask (../node_modules/puppeteer/src/common/DOMWorld.ts:780:28)
      at DOMWorld.waitForSelectorInPage (../node_modules/puppeteer/src/common/DOMWorld.ts:632:22)
      at Object.internalHandler.waitFor (../node_modules/puppeteer/src/common/QueryHandler.ts:78:19)
      at DOMWorld.waitForSelector (../node_modules/puppeteer/src/common/DOMWorld.ts:490:25)
      at Frame.waitForSelector (../node_modules/puppeteer/src/common/FrameManager.ts:1163:47)
      at Page.waitForSelector (../node_modules/puppeteer/src/common/Page.ts:2100:29)
      at waitForSelector (puppeteerExtensions.js:56:15)
      at Object.expectDisabled (helpers/index.js:28:14)
      at submitTheAddressAndTimeFormSuccessfully (pages/landing.js:27:48)

  ● Interaction with the entire FTGO UI application: › 10. Landing Page -> Restaurants List -> Menu Page › [restaurants list page] Navigation, picking correct restaurant, landing of Menu page

    TimeoutError: waiting for selector `[data-testid^="page|restaurants list|"]` failed: timeout 30000ms exceeded

      54 | export function waitForSelector(page, sel, ...args) {
      55 |   console.log(`waitForSelector(page, '${ sel }')`);
    > 56 |   return page.waitForSelector(String(sel), ...args);
         |               ^
      57 | }
      58 |
      59 | export function waitForTimeout(page, msec) {

      at new WaitTask (../node_modules/puppeteer/src/common/DOMWorld.ts:780:28)
      at DOMWorld.waitForSelectorInPage (../node_modules/puppeteer/src/common/DOMWorld.ts:632:22)
      at Object.internalHandler.waitFor (../node_modules/puppeteer/src/common/QueryHandler.ts:78:19)
      at DOMWorld.waitForSelector (../node_modules/puppeteer/src/common/DOMWorld.ts:490:25)
      at Frame.waitForSelector (../node_modules/puppeteer/src/common/FrameManager.ts:1163:47)
      at Page.waitForSelector (../node_modules/puppeteer/src/common/Page.ts:2100:29)
      at waitForSelector (puppeteerExtensions.js:56:15)
      at Object.ensurePresent (helpers/index.js:22:14)
      at fn (pages/restaurantsList.js:15:38)
      at cb (pages/utilities.js:79:22)
      at Object.browseForRestaurantWithMenuItems (pages/utilities.js:46:45)
      at afn (comprehensive.spec.js:111:39)
      at Promise.catch.testNumber.testNumber (testWrapper.js:64:17)
      at Object.<anonymous> (testWrapper.js:56:14)

  ● Interaction with the entire FTGO UI application: › 10. Landing Page -> Restaurants List -> Menu Page › [restaurant menu page] Structure check, menu picking, going to checkout

    TimeoutError: waiting for selector `[data-testid^="table|restaurant menu|"]` failed: timeout 30000ms exceeded

      54 | export function waitForSelector(page, sel, ...args) {
      55 |   console.log(`waitForSelector(page, '${ sel }')`);
    > 56 |   return page.waitForSelector(String(sel), ...args);
         |               ^
      57 | }
      58 |
      59 | export function waitForTimeout(page, msec) {

      at new WaitTask (../node_modules/puppeteer/src/common/DOMWorld.ts:780:28)
      at DOMWorld.waitForSelectorInPage (../node_modules/puppeteer/src/common/DOMWorld.ts:632:22)
      at Object.internalHandler.waitFor (../node_modules/puppeteer/src/common/QueryHandler.ts:78:19)
      at DOMWorld.waitForSelector (../node_modules/puppeteer/src/common/DOMWorld.ts:490:25)
      at Frame.waitForSelector (../node_modules/puppeteer/src/common/FrameManager.ts:1163:47)
      at Page.waitForSelector (../node_modules/puppeteer/src/common/Page.ts:2100:29)
      at waitForSelector (puppeteerExtensions.js:56:15)
      at Object.ensurePresent (helpers/index.js:22:14)
      at fn (pages/restaurantMenu.js:22:37)
      at cb (pages/utilities.js:79:22)
      at Object.checkStructure (pages/utilities.js:46:45)
      at afn (comprehensive.spec.js:117:38)
      at Promise.catch.testNumber.testNumber (testWrapper.js:64:17)
      at Object.<anonymous> (testWrapper.js:56:14)

Implement the third page, Select Menu Items

Use this sketch as a guideline:

Implement UI tests

introduce intention revealing UI element specific helper functions

The page object functions are written in terms of low level functions.

It would be better to introduce some helper functions.

This is a repeated pattern:

    await waitClickAndType(page, SEL.FORM_FIELD_ADDRESS, testData.address);
    await waitForTimeout(page, 10);

could be replaced by

    textField(page, SEL.FORM_FIELD_ADDRESS).enter(testData.address)

• Removes duplication
• Makes it clear what is happening

http://localhost:8080/api/address => 400

POST http://localhost:8080/api/address with request body

 {"address":"180 Rishell Drive","time":"22:10","origin":1622143097043}

=> 400 Bad Request

Implement a Checkout page

A reference UI sketch is this:

Set up and maintain tests for the web app

Artefacts is mispelt in a few places -> Artifacts

ftgo-consumer-web-ui/.circleci/config.yml

Line 17 in bf614ad

path: ~/ftgo-consumer-web-ui/ci-artefacts

How Checkout flow is implemented now (mimicking the Stripe flow)

Below is the documentation of how the Stripe flow works for simple purchases and how/what we need to do in order to mimic it.

I discovered a diagram that perfectly describes how the communication with Stripe is going on. Please take a look at the Section 4 (Create PaymentIntent) with a nice flow diagram in it.

1. The Client. Checkout Page, once loaded, needs to communicate to the server API in order to obtain an object created from a server-side, secure, call to Stripe, called Payment Intent. This needs to be done before anything is rendered. The purpose of generating a payment intent - is to receive a property called ’client_secret’. This property is sort of a first part of the payment negotiation. This client secret is kept until the user fills out the payment detail form and submits the data.

1.1. The client requests the server API (e.g. POST /create-payment-intent) with the items (ids and counts) to be purchased.
1.2. The server is responsible to calculate the resulting total amount (or delegate it to Stripe) and to request a one-time payment intent for this amount. The request is signed by a Stripe Secret Key.
1.3. The server receives the Payment Intent object from Stripe and sends it down to the Client.
1.4. The Client stores the clientSecret property.

2. User. Fills out the payment form and submits the payment. (Presses ‘Pay’).

3. The Client via Client Stripe API, creates a payment using the stored previously client secret and also using the Stripe Public Key.

4. Based on the result of the previous step, the Client either shows the error or registers success and switches to ’Success Page’.

—

As the initial step, I took the Stripe Integration builder (from https://stripe.com/docs/payments/integration-builder) and set things to React + Node - and was able to take all the Stripe functionality to our app.

Secondly, I replaced all client code related to Stripe with the fakes/simple UI form - they follow the Stripe examples closely though.

Also, on the client-side, I replaced a call to a client Stripe API (stripe.confirmCardPayment(clientSecret, …card) ) with a dummy method which reacts on the card numbers and generates responses.

On the server-side,
I set up a server endpoint (POST /payment/intent, body: { items }). (Optionally: receive the items double-check them with the user’s cart stored on the server.) Then, the server calculates the total amount.
1.1. Create endpoint - done
1.2. The server calculates the total amount - presently, works with a sample amount ($14.00). - WIP
1.3. Generate a payment intent object and respond with it.

Search button does nothing

I ran ./start-http-server.sh

Entering address and clicking searching button does nothing.

API endpoints

Document API endpoints for ease of implementation

WARNING: The FTGO_BACKEND_API_URL variable is not set. Defaulting to a blank string.

This happens when running start-server.sh

What's the purpose of await waitForTimeout(page, 10);?

Why wait for a specific time period?
Shouldn't waiting for a selector be sufficient?

Create CI configuration and a build script

write a script build-and-test-all.sh that does everything.

Create .circleci/config.yml - a very simplified single job version https://github.com/microservices-platform/microservices-assessment-platform/blob/master/.circleci/config.yml like this https://github.com/eventuate-foundation/eventuate-plugins-gradle/blob/master/.circleci/config.yml

you can simply test the build script by running docker run -it circleci/node:12.18.4-buster-browsers build-and-test-all.sh

Implement a second page, Restaurants List

pickOneItem is opaque

  pickOneItem: async () => {

    await waitForSelector(page, cssSel(SEL.BTN_TO_CHECKOUT).mod(MOD.ATTR_DISABLED));
    await waitForSelector(page, cssSel(SEL.INFO_TRAY_IS_EMPTY));
    await waitForSelector(page, cssSel(SEL.INFO_CART_VALUE_OF('0.00')));

What item is picking?

The above lines could be improved:

  pickOneItem: async () => {

    await checkoutButton(page).expectDisabled()
    await whatEverThisIS(page).expectVisible();
    await orderTotal(page).expectEqualTo('0.00');

• Is this a tray or a cart?

Backend server does not run: - sh: babel: not found

docker logs ftgo-consumer-web-ui_server_1

> [email protected] prestart /www
> npm run -s build

sh: babel: not found
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prestart: `npm run -s build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] prestart script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-05-27T16_38_50_769Z-debug.log

> [email protected] prestart /www
> npm run -s build

sh: babel: not found
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prestart: `npm run -s build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] prestart script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-05-27T16_44_54_760Z-debug.log

> [email protected] prestart /www
> npm run -s build

sh: babel: not found
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prestart: `npm run -s build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] prestart script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-05-27T16_48_45_238Z-debug.log
Chriss-iMac-Pro:ftgo-consumer-web-ui cer$

Implement consumer driven contract testing

1. Write contracts for the API that the React UI needs
2. Test the React UI using https://spring.io/blog/2018/02/13/spring-cloud-contract-in-a-polyglot-world#using-spring-cloud-contract-stubs-on-the-consumer-side

Implement a Landing page for the UI

Implement a Landing page for the UI:

What is browseTheRestaurantsTableForSpecificEntryAndClickOnIt doing?

This code is opaque.

  browseTheRestaurantsTableForSpecificEntryAndClickOnIt: async () => {

    await waitForSelector(page, SEL.TBL_RESTAURANTS_LIST);

    const paginationControlSel = cssSel(SEL.TBL_RESTAURANTS_LIST).desc(SEL.CTL_PAGINATION_FOR_TABLE);
    await waitForSelector(page, paginationControlSel);
    await waitForSelectorAndClick(page,
      paginationControlSel.desc('.page-item').attr('title', 'next page').child('a.page-link'));

    const el = await waitForSelectorWithText(page, 'td', 'All items');
    await el.click();

  },

• This should be called selectRestaurant()
• But what specific entry is clicking on
• Perhaps its clicking on the next page. But who knows.

replace boilerplate in ftgo-consumer-web-ui/server/README.md with meaningful instructions

Run the UI using `docker-compose up -d --build`.

Make it possible to run the UI using docker-compose up -d --build.

ie. create a Docker container that runs serve -s build

The Dockerfile will

RUN npm install
RUN npm run build
...
CMD serve -s build