@mirai/core 0.3.390 → 0.3.391

package/__tests__/BookingQuery/__mocks__/user-booking-get.json

@@ -0,0 +1,9 @@
+{
+  "status": "OK",
+  "message": "",
+  "data": {
+    "code": "01F7D0EF7ED54F75DC79CAD00B46C116B31C687F",
+    "idHotel": "100379008",
+    "reservationCode": "22112263251"
+  }
+}

package/__tests__/BookingQuery/workflows/index.js

@@ -0,0 +1 @@
+export * from './login.workflow';

package/__tests__/BookingQuery/workflows/login.workflow.js

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+
+export const login = async ({ id, page, pinCode, testId, wait = true } = {}) => {
+  await expect(page.locator('form')).not.toBeVisible();
+  await page.getByTestId(`${testId}-button-open-modal`).click();
+  await expect(page.locator('form')).toBeVisible();
+  await expect(page.getByTestId(`${testId}-button-cta`)).toHaveAttribute('disabled');
+
+  await page.getByTestId(`${testId}-input-id`).click();
+  await page.getByTestId(`${testId}-input-id`).fill(id);
+  await expect(page.getByTestId(`${testId}-button-cta`)).toHaveAttribute('disabled');
+
+  await page.getByTestId(`${testId}-input-pinCode`).click();
+  await page.getByTestId(`${testId}-input-pinCode`).fill(pinCode);
+  await expect(page.getByTestId(`${testId}-button-cta`)).toHaveAttribute('disabled');
+
+  await expect(page.getByTestId(`${testId}-notification-error`)).not.toBeVisible();
+  await page.getByTestId(`${testId}-button-cta`).click();
+  if (wait) {
+    await page.waitForResponse((response) => response.url().includes('login_reservation') && response.status() === 200);
+  }
+};

package/__tests__/bookingQuey.spec.js

@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+
+import { login } from './BookingQuery/workflows';
+
+const CORRECT_ID = '23011372299';
+const CORRECT_PIN_CODE = '7950376';
+const INCORRECT_ID = '123456789';
+const INCORRECT_PIN_CODE = '123456';
+
+const testId = 'bookingQuery';
+
+test.beforeEach(async ({ context, page }) => {
+  await context.addInitScript(() => (window.IS_PLAYWRIGHT = true));
+
+  await page.goto('http://local.mirai.com:8080', { waitUntil: 'networkidle', timeout: 10000 });
+});
+
+test('incorrect id and pinCode booking', async ({ page }) => {
+  await login({ id: INCORRECT_ID, page, pinCode: INCORRECT_PIN_CODE, testId });
+  await expect(page.getByTestId(`${testId}-notification-error`)).toBeVisible();
+});
+
+test('incorrect id and correct pinCode booking', async ({ page }) => {
+  await login({ id: INCORRECT_ID, page, pinCode: CORRECT_PIN_CODE, testId });
+  await expect(page.getByTestId(`${testId}-notification-error`)).toBeVisible();
+});
+
+test('correct id and incorrect pinCode booking', async ({ page }) => {
+  await login({ id: CORRECT_ID, page, pinCode: INCORRECT_PIN_CODE, testId });
+  await expect(page.getByTestId(`${testId}-notification-error`)).toBeVisible();
+});
+
+test('correct id and correct pinCode booking', async ({ page }) => {
+  await page.route(/.*login_reservation.json*/, (route) => {
+    route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(require(`./BookingQuery/__mocks__/user-booking-get.json`)),
+    });
+  });
+  await login({ id: CORRECT_ID, page, pinCode: CORRECT_PIN_CODE, testId, wait: false });
+  await expect(page).toHaveURL(/.*step3-booking*/);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/core",
-  "version": "0.3.390",
+  "version": "0.3.391",
   "source": "src/index.js",
   "repository": "https://gitlab.com/miraicorp/dev/frontend/core",
   "author": "JΛVI <hello@soyjavi.com>",

package/public/App.Container.jsx

@@ -1,12 +1,13 @@
 /* eslint-disable react/prop-types */
 import { useStore } from '@mirai/data-sources';
-import { Action, Input, Text, View } from '@mirai/ui';
+import { Action, Input, Text, useDevice, View } from '@mirai/ui';
 import React from 'react';
 import { useLocation } from 'wouter';
 
 import * as style from './App.module.css';
 
 export const Container = ({ children }) => {
+  const { isMobile } = useDevice();
   const [location, setLocation] = useLocation();
 
   const {
@@ -23,6 +24,12 @@ export const Container = ({ children }) => {
             <Text small className={[style.contact, style.hideMobile]}>
               Contact us directly at +34 (0) 129 039 193
             </Text>
+            {isMobile && (
+              <View
+                data-mirai-component="bookingQuery"
+                data-test-id={window.IS_PLAYWRIGHT ? 'bookingQuery' : undefined}
+              />
+            )}
             <View data-mirai-component="environment" data-locale="true" data-currencies="true" data-state="true" />
           </View>
 
@@ -51,6 +58,12 @@ export const Container = ({ children }) => {
             </View>
 
             <View row>
+              {!isMobile && (
+                <View
+                  data-mirai-component="bookingQuery"
+                  data-test-id={window.IS_PLAYWRIGHT ? 'bookingQuery' : undefined}
+                />
+              )}
               <View data-mirai-component="session" />
 
               {!session && (

package/__tests__/bookingQuey._spec.js

@@ -1,51 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-const BOOKING_QUERY = 'bookingQuery';
-const CORRECT_ID = '23011372299';
-const CORRECT_PIN_CODE = '7950376';
-const INCORRECT_ID = '123456789';
-const INCORRECT_PIN_CODE = '123456';
-
-//TODO: The tests execute in NODE_ENV=production but we don't have a booking in production yet. In preproduction we have a booking
-process.env.SERVICE_USER = 'https://api-pre.mirai.com';
-
-const executeTest = async (id, page, pinCode) => {
-  await page.goto('http://localhost:8080/e2e');
-
-  await expect(page.locator('form')).not.toBeVisible();
-  await page.getByTestId(`${BOOKING_QUERY}-button-open-modal`).click();
-  await expect(page.locator('form')).toBeVisible();
-  await expect(page.getByTestId(`${BOOKING_QUERY}-button-cta`)).toBeDisabled();
-
-  await page.getByTestId(`${BOOKING_QUERY}-input-id`).click();
-  await page.getByTestId(`${BOOKING_QUERY}-input-id`).fill(id);
-  await expect(page.getByTestId(`${BOOKING_QUERY}-button-cta`)).toBeDisabled();
-
-  await page.getByTestId(`${BOOKING_QUERY}-input-pinCode`).click();
-  await page.getByTestId(`${BOOKING_QUERY}-input-pinCode`).fill(pinCode);
-  await expect(page.getByTestId(`${BOOKING_QUERY}-button-cta`)).toBeEnabled();
-
-  await expect(page.getByTestId(`${BOOKING_QUERY}-notification-error`)).not.toBeVisible();
-  await page.getByTestId(`${BOOKING_QUERY}-button-cta`).click();
-  await page.waitForResponse((response) => response.url().includes('login_reservation') && response.status() === 200);
-};
-
-test('incorrect id and pinCode booking', async ({ page }) => {
-  await executeTest(INCORRECT_ID, page, INCORRECT_PIN_CODE);
-  await expect(page.getByTestId(`${BOOKING_QUERY}-notification-error`)).toBeVisible();
-});
-
-test('incorrect id and correct pinCode booking', async ({ page }) => {
-  await executeTest(INCORRECT_ID, page, CORRECT_PIN_CODE);
-  await expect(page.getByTestId(`${BOOKING_QUERY}-notification-error`)).toBeVisible();
-});
-
-test('correct id and incorrect pinCode booking', async ({ page }) => {
-  await executeTest(CORRECT_ID, page, INCORRECT_PIN_CODE);
-  await expect(page.getByTestId(`${BOOKING_QUERY}-notification-error`)).toBeVisible();
-});
-
-test('correct id and correct pinCode booking', async ({ page }) => {
-  await executeTest(CORRECT_ID, page, CORRECT_PIN_CODE);
-  await expect(page).toHaveURL(/.*forwarder_manage_reservation*/);
-});

package/public/e2e.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>@mirai/core - e2e</title>
-    <link rel="stylesheet" href="../src/theme.css" rel="preload" defer />
-    <link rel="stylesheet" href="index.css" />
-  </head>
-
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <!-- Hotel Moderno -->
-    <div data-mirai-id="10030559" data-type="hotel" data-locale="en-GB"></div>
-
-    <header>
-      <h1>@mirai/core</h1>
-      <nav>
-        <div data-mirai-component="bookingQuery"></div>
-      </nav>
-    </header>
-    <footer>
-      <small>Copyright, 2023</small>
-    </footer>
-    <script type="module" defer src="../src/index.js"></script>
-  </body>
-</html>