@mirai/core 0.1.12 → 0.1.14

package/.env

@@ -3,6 +3,7 @@ BUNDLE_LOCALHOST=http://local.mirai.com:9090/dist/index.js?version=localhost
 
 METRICS=8499ad730df132d03f1d532e287a9920
 
+SERVICE_BOOKING=https://reservation-pre.mirai.com/XMAS/reservation
 SERVICE_CLUB=https://api.mirai.com
 SERVICE_ENGINE=https://engine.mirai.com
 SERVICE_STATIC=https://static.mirai.com

package/__tests__/bookingQuery/bookingQuey.spec.js

@@ -0,0 +1,52 @@
+// @ts-check
+const { test, expect } = require('@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/build/Core.js

@@ -60,6 +60,7 @@ const Core = _ref => {
       fallback: /*#__PURE__*/_react.default.createElement("small", null, "Loading...")
     }, /*#__PURE__*/_react.default.createElement(_components.default[component], {
       ...props,
+      ['data-testid']: (process && process.env && process.env.NODE_ENV || "production") === 'production' ? component : undefined,
       ghost: ghosts[index],
       el
     })), el);

package/build/Core.js.map

@@ -1 +1 @@
-{"version":3,"file":"Core.js","names":["ghosts","Core","children","components","value","currency","locale","DEFAULT_LOCALE","useStore","isMobile","isDesktop","useDevice","dictionary","setDictionary","useState","useEffect","next","ServiceDictionary","get","filter","desktop","mobile","map","index","el","component","props","getGhost","ReactDOM","createPortal","React","createElement","COMPONENTS","ghost","propTypes","PropTypes","node","arrayOf","shape","oneOf","Object","keys","any"],"sources":["../src/Core.jsx"],"sourcesContent":["import { useStore } from '@mirai/data-sources';\nimport { DEFAULT_LOCALE, LocaleProvider } from '@mirai/locale';\nimport { ServiceDictionary } from '@mirai/services';\nimport { useDevice } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState, Suspense } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport COMPONENTS from './components';\nimport { getGhost } from './helpers';\n\nconst ghosts = {};\n\nconst Core = ({ children, components = [] }) => {\n  const {\n    value: { currency, locale = DEFAULT_LOCALE },\n  } = useStore();\n\n  const { isMobile, isDesktop } = useDevice();\n  const [dictionary, setDictionary] = useState();\n\n  useEffect(() => {\n    (async () => {\n      const next = await ServiceDictionary.get(locale);\n      if (next) setDictionary(next);\n    })();\n  }, [locale]);\n\n  return (\n    <LocaleProvider {...{ currency, dictionary, locale }}>\n      <>\n        {components\n          .filter(({ desktop, mobile }) => !(isMobile && mobile === 'false') && !(isDesktop && desktop === 'false'))\n          .map(({ el, component, ...props }, index) => {\n            if (!ghosts[index]) ghosts[index] = getGhost(el);\n\n            return ReactDOM.createPortal(\n              <Suspense fallback={<small>Loading...</small>}>\n                {React.createElement(COMPONENTS[component], { ...props, ghost: ghosts[index], el })}\n              </Suspense>,\n              el,\n            );\n          })}\n      </>\n      {children}\n    </LocaleProvider>\n  );\n};\n\nCore.propTypes = {\n  children: PropTypes.node,\n  components: PropTypes.arrayOf(\n    PropTypes.shape({\n      component: PropTypes.oneOf(Object.keys(COMPONENTS)),\n      el: PropTypes.any,\n    }),\n  ),\n};\n\nexport { Core };\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAqC;AAAA;AAAA;AAErC,MAAMA,MAAM,GAAG,CAAC,CAAC;AAEjB,MAAMC,IAAI,GAAG,QAAmC;EAAA,IAAlC;IAAEC,QAAQ;IAAEC,UAAU,GAAG;EAAG,CAAC;EACzC,MAAM;IACJC,KAAK,EAAE;MAAEC,QAAQ;MAAEC,MAAM,GAAGC;IAAe;EAC7C,CAAC,GAAG,IAAAC,qBAAQ,GAAE;EAEd,MAAM;IAAEC,QAAQ;IAAEC;EAAU,CAAC,GAAG,IAAAC,aAAS,GAAE;EAC3C,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,GAAE;EAE9C,IAAAC,gBAAS,EAAC,MAAM;IACd,CAAC,YAAY;MACX,MAAMC,IAAI,GAAG,MAAMC,2BAAiB,CAACC,GAAG,CAACZ,MAAM,CAAC;MAChD,IAAIU,IAAI,EAAEH,aAAa,CAACG,IAAI,CAAC;IAC/B,CAAC,GAAG;EACN,CAAC,EAAE,CAACV,MAAM,CAAC,CAAC;EAEZ,oBACE,6BAAC,sBAAc;IAAOD,QAAQ;IAAEO,UAAU;IAAEN;EAAM,gBAChD,4DACGH,UAAU,CACRgB,MAAM,CAAC;IAAA,IAAC;MAAEC,OAAO;MAAEC;IAAO,CAAC;IAAA,OAAK,EAAEZ,QAAQ,IAAIY,MAAM,KAAK,OAAO,CAAC,IAAI,EAAEX,SAAS,IAAIU,OAAO,KAAK,OAAO,CAAC;EAAA,EAAC,CACzGE,GAAG,CAAC,QAA8BC,KAAK,KAAK;IAAA,IAAvC;MAAEC,EAAE;MAAEC,SAAS;MAAE,GAAGC;IAAM,CAAC;IAC/B,IAAI,CAAC1B,MAAM,CAACuB,KAAK,CAAC,EAAEvB,MAAM,CAACuB,KAAK,CAAC,GAAG,IAAAI,iBAAQ,EAACH,EAAE,CAAC;IAEhD,oBAAOI,iBAAQ,CAACC,YAAY,eAC1B,6BAAC,eAAQ;MAAC,QAAQ,eAAE;IAA0B,gBAC3CC,cAAK,CAACC,aAAa,CAACC,mBAAU,CAACP,SAAS,CAAC,EAAE;MAAE,GAAGC,KAAK;MAAEO,KAAK,EAAEjC,MAAM,CAACuB,KAAK,CAAC;MAAEC;IAAG,CAAC,CAAC,CAC1E,EACXA,EAAE,CACH;EACH,CAAC,CAAC,CACH,EACFtB,QAAQ,CACM;AAErB,CAAC;AAAC;AAEFD,IAAI,CAACiC,SAAS,GAAG;EACfhC,QAAQ,EAAEiC,kBAAS,CAACC,IAAI;EACxBjC,UAAU,EAAEgC,kBAAS,CAACE,OAAO,CAC3BF,kBAAS,CAACG,KAAK,CAAC;IACdb,SAAS,EAAEU,kBAAS,CAACI,KAAK,CAACC,MAAM,CAACC,IAAI,CAACT,mBAAU,CAAC,CAAC;IACnDR,EAAE,EAAEW,kBAAS,CAACO;EAChB,CAAC,CAAC;AAEN,CAAC"}
+{"version":3,"file":"Core.js","names":["ghosts","Core","children","components","value","currency","locale","DEFAULT_LOCALE","useStore","isMobile","isDesktop","useDevice","dictionary","setDictionary","useState","useEffect","next","ServiceDictionary","get","filter","desktop","mobile","map","index","el","component","props","getGhost","ReactDOM","createPortal","React","createElement","COMPONENTS","undefined","ghost","propTypes","PropTypes","node","arrayOf","shape","oneOf","Object","keys","any"],"sources":["../src/Core.jsx"],"sourcesContent":["import { useStore } from '@mirai/data-sources';\nimport { DEFAULT_LOCALE, LocaleProvider } from '@mirai/locale';\nimport { ServiceDictionary } from '@mirai/services';\nimport { useDevice } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useState, Suspense } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport COMPONENTS from './components';\nimport { getGhost } from './helpers';\n\nconst ghosts = {};\n\nconst Core = ({ children, components = [] }) => {\n  const {\n    value: { currency, locale = DEFAULT_LOCALE },\n  } = useStore();\n\n  const { isMobile, isDesktop } = useDevice();\n  const [dictionary, setDictionary] = useState();\n\n  useEffect(() => {\n    (async () => {\n      const next = await ServiceDictionary.get(locale);\n      if (next) setDictionary(next);\n    })();\n  }, [locale]);\n\n  return (\n    <LocaleProvider {...{ currency, dictionary, locale }}>\n      <>\n        {components\n          .filter(({ desktop, mobile }) => !(isMobile && mobile === 'false') && !(isDesktop && desktop === 'false'))\n          .map(({ el, component, ...props }, index) => {\n            if (!ghosts[index]) ghosts[index] = getGhost(el);\n\n            return ReactDOM.createPortal(\n              <Suspense fallback={<small>Loading...</small>}>\n                {React.createElement(COMPONENTS[component], {\n                  ...props,\n                  ['data-testid']: process.env.NODE_ENV === 'production' ? component : undefined,\n                  ghost: ghosts[index],\n                  el,\n                })}\n              </Suspense>,\n              el,\n            );\n          })}\n      </>\n      {children}\n    </LocaleProvider>\n  );\n};\n\nCore.propTypes = {\n  children: PropTypes.node,\n  components: PropTypes.arrayOf(\n    PropTypes.shape({\n      component: PropTypes.oneOf(Object.keys(COMPONENTS)),\n      el: PropTypes.any,\n    }),\n  ),\n};\n\nexport { Core };\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAqC;AAAA;AAAA;AAErC,MAAMA,MAAM,GAAG,CAAC,CAAC;AAEjB,MAAMC,IAAI,GAAG,QAAmC;EAAA,IAAlC;IAAEC,QAAQ;IAAEC,UAAU,GAAG;EAAG,CAAC;EACzC,MAAM;IACJC,KAAK,EAAE;MAAEC,QAAQ;MAAEC,MAAM,GAAGC;IAAe;EAC7C,CAAC,GAAG,IAAAC,qBAAQ,GAAE;EAEd,MAAM;IAAEC,QAAQ;IAAEC;EAAU,CAAC,GAAG,IAAAC,aAAS,GAAE;EAC3C,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,GAAE;EAE9C,IAAAC,gBAAS,EAAC,MAAM;IACd,CAAC,YAAY;MACX,MAAMC,IAAI,GAAG,MAAMC,2BAAiB,CAACC,GAAG,CAACZ,MAAM,CAAC;MAChD,IAAIU,IAAI,EAAEH,aAAa,CAACG,IAAI,CAAC;IAC/B,CAAC,GAAG;EACN,CAAC,EAAE,CAACV,MAAM,CAAC,CAAC;EAEZ,oBACE,6BAAC,sBAAc;IAAOD,QAAQ;IAAEO,UAAU;IAAEN;EAAM,gBAChD,4DACGH,UAAU,CACRgB,MAAM,CAAC;IAAA,IAAC;MAAEC,OAAO;MAAEC;IAAO,CAAC;IAAA,OAAK,EAAEZ,QAAQ,IAAIY,MAAM,KAAK,OAAO,CAAC,IAAI,EAAEX,SAAS,IAAIU,OAAO,KAAK,OAAO,CAAC;EAAA,EAAC,CACzGE,GAAG,CAAC,QAA8BC,KAAK,KAAK;IAAA,IAAvC;MAAEC,EAAE;MAAEC,SAAS;MAAE,GAAGC;IAAM,CAAC;IAC/B,IAAI,CAAC1B,MAAM,CAACuB,KAAK,CAAC,EAAEvB,MAAM,CAACuB,KAAK,CAAC,GAAG,IAAAI,iBAAQ,EAACH,EAAE,CAAC;IAEhD,oBAAOI,iBAAQ,CAACC,YAAY,eAC1B,6BAAC,eAAQ;MAAC,QAAQ,eAAE;IAA0B,gBAC3CC,cAAK,CAACC,aAAa,CAACC,mBAAU,CAACP,SAAS,CAAC,EAAE;MAC1C,GAAGC,KAAK;MACR,CAAC,aAAa,GAAG,qEAAyB,YAAY,GAAGD,SAAS,GAAGQ,SAAS;MAC9EC,KAAK,EAAElC,MAAM,CAACuB,KAAK,CAAC;MACpBC;IACF,CAAC,CAAC,CACO,EACXA,EAAE,CACH;EACH,CAAC,CAAC,CACH,EACFtB,QAAQ,CACM;AAErB,CAAC;AAAC;AAEFD,IAAI,CAACkC,SAAS,GAAG;EACfjC,QAAQ,EAAEkC,kBAAS,CAACC,IAAI;EACxBlC,UAAU,EAAEiC,kBAAS,CAACE,OAAO,CAC3BF,kBAAS,CAACG,KAAK,CAAC;IACdd,SAAS,EAAEW,kBAAS,CAACI,KAAK,CAACC,MAAM,CAACC,IAAI,CAACV,mBAAU,CAAC,CAAC;IACnDR,EAAE,EAAEY,kBAAS,CAACO;EAChB,CAAC,CAAC;AAEN,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/core",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "source": "src/index.js",
   "repository": "https://gitlab.com/miraicorp/dev/frontend/core",
   "author": "JΛVI <hello@soyjavi.com>",
@@ -16,6 +16,9 @@
     "test": "node scripts/test.js --watchAll=false --silent",
     "test:coverage": "node scripts/test.js --coverage --coverageReporters=text --detectOpenHandles --forceExit --silent",
     "test:watch": "node scripts/test.js",
+    "test:e2e": "yarn playwright test",
+    "test:e2e:recorder": "yarn playwright codegen",
+    "test:e2e:report": "yarn playwright show-report",
     "pipeline": "yarn lint && yarn test && yarn build",
     "release": "yarn version --patch && yarn publish --access public"
   },
@@ -37,11 +40,12 @@
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
     "@mirai/eslint": "^0.1",
+    "@playwright/test": "^1.29.2",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "7.0.2",
     "babel-plugin-inline-dotenv": "1.7.0",
     "jest-fetch-mock": "^3.0.3",
-    "parcel": "2.7.0",
+    "parcel": "2.8.3",
     "process": "0.11.10",
     "react-scripts": "5.0.1",
     "serve": "14.1.2"

package/playwright.config.js

@@ -0,0 +1,110 @@
+// @ts-check
+const { devices } = require('@playwright/test');
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ * @type {import('@playwright/test').PlaywrightTestConfig}
+ */
+const config = {
+  testDir: './__tests__',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    video: 'on',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: {
+    //     ...devices['Desktop Firefox'],
+    //   },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: {
+    //     ...devices['Desktop Safari'],
+    //   },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command:
+      'rm -rf dist && NODE_ENV=production parcel build public/e2e.html --no-cache --no-source-maps --no-autoinstall --detailed-report && serve dist -p 8080 -u -n',
+    port: 8080,
+  },
+};
+
+module.exports = config;

package/public/e2e.html

@@ -0,0 +1,29 @@
+<!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" hidden></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>