diff --git a/_dev/jest.setup.ts b/_dev/jest.setup.ts index b0e760f84..d44c262c4 100644 --- a/_dev/jest.setup.ts +++ b/_dev/jest.setup.ts @@ -16,19 +16,11 @@ * @copyright Since 2007 PrestaShop SA and Contributors * @license https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0 */ +import 'tests/fakeWindow'; + import { TextEncoder, TextDecoder } from 'util'; // Needed to avoid error "ReferenceError: TextEncoder is not defined" when using JSDOM in tests Object.assign(global, { TextDecoder, TextEncoder }); -// We don't wait for the call to beforeAll to define window properties. -window.AutoUpgradeVariables = { - token: 'test-token', - admin_url: 'http://localhost', - admin_dir: '/admin_directory', - stepper_parent_id: 'stepper_content', - module_version: '7.1.0', - anonymous_id: 'b168a116d1a14fda8c21a22c7560fa27ade7dae22641ce9d773be680640dac0f', - php_version: '7.4.33' -}; beforeAll(() => {}); diff --git a/storybook/stories/layouts/Error500.stories.js b/_dev/tests/fakeWindow.ts similarity index 69% rename from storybook/stories/layouts/Error500.stories.js rename to _dev/tests/fakeWindow.ts index 2a7e32fbf..f458cb644 100644 --- a/storybook/stories/layouts/Error500.stories.js +++ b/_dev/tests/fakeWindow.ts @@ -16,17 +16,13 @@ * @copyright Since 2007 PrestaShop SA and Contributors * @license https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0 */ - -import ErrorCode500 from "../../../views/templates/pages/errors/500.html.twig"; - -export default { - component: ErrorCode500, - title: "Layouts/Errors", - args: { - psBaseUri: "/", - error_code: "500", - assets_base_path: "", - } +// We don't wait for the call to beforeAll to define window properties. +window.AutoUpgradeVariables = { + token: 'test-token', + admin_url: 'http://localhost', + admin_dir: '/admin_directory', + stepper_parent_id: 'stepper_content', + module_version: '7.1.0', + anonymous_id: 'b168a116d1a14fda8c21a22c7560fa27ade7dae22641ce9d773be680640dac0f', + php_version: '7.4.33' }; - -export const Error500 = {}; diff --git a/storybook/.storybook/main.ts b/storybook/.storybook/main.ts index 4e6434e4e..1f2ebe26b 100644 --- a/storybook/.storybook/main.ts +++ b/storybook/.storybook/main.ts @@ -25,8 +25,9 @@ import type { StorybookConfig } from "@sensiolabs/storybook-symfony-webpack5"; import webpack from "webpack"; -import fs from 'fs'; -import path from 'path'; +import fs from "fs"; +import path from "path"; +import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin"; const config: StorybookConfig = { stories: ["../stories/**/*.stories.[tj]s", "../stories/**/*.mdx"], @@ -35,7 +36,7 @@ const config: StorybookConfig = { "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-styling-webpack", - "@storybook/addon-a11y" + "@storybook/addon-a11y", ], framework: { name: "@sensiolabs/storybook-symfony-webpack5", @@ -51,12 +52,21 @@ const config: StorybookConfig = { webpackFinal: async (config) => { config?.module?.rules?.push({ test: /\.scss$/, - use: [ - "style-loader", - "css-loader", - "sass-loader" - ], + use: ["style-loader", "css-loader", "sass-loader"], }); + // Ensure shared component stories are transpiled. + config?.module?.rules?.push({ + test: /\.ts$/, + }); + if (config.resolve) { + config.resolve.plugins = [ + ...(config.resolve.plugins || []), + new TsconfigPathsPlugin({ + extensions: config.resolve.extensions, + configFile: "../_dev/tsconfig.json", + }), + ]; + } // List translations files on compilation to fill language selection list const newPlugin = new webpack.DefinePlugin({ TRANSLATION_LOCALES: JSON.stringify( diff --git a/storybook/.storybook/preview.ts b/storybook/.storybook/preview.ts index 594f20e38..1a6cbf7b8 100644 --- a/storybook/.storybook/preview.ts +++ b/storybook/.storybook/preview.ts @@ -24,7 +24,9 @@ */ import { Preview, twig } from "@sensiolabs/storybook-symfony-webpack5"; -import '../../_dev/src/scss/main.scss'; +import "../../_dev/src/scss/main.scss"; +import "../../_dev/tests/fakeWindow"; +import "../../_dev/src/ts/main"; const cssEntrypoints = { "9.0.0": ["/9.0.0/default/theme.css"], diff --git a/storybook/package-lock.json b/storybook/package-lock.json index 8f019e3f1..f40702c7d 100644 --- a/storybook/package-lock.json +++ b/storybook/package-lock.json @@ -19,6 +19,7 @@ "sass": "^1.78.0", "sass-loader": "^16.0.1", "style-loader": "^4.0.0", + "tsconfig-paths-webpack-plugin": "^4.2.0", "typescript": "^5.4.2", "webpack": "^5.90.3" } @@ -13203,6 +13204,7 @@ } }, "vendor/sensiolabs/storybook-bundle/storybook": { + "name": "@sensiolabs/storybook-symfony-webpack5", "version": "0.0.0", "dev": true, "license": "MIT", diff --git a/storybook/package.json b/storybook/package.json index 2458e4771..4e9468250 100644 --- a/storybook/package.json +++ b/storybook/package.json @@ -19,6 +19,7 @@ "sass": "^1.78.0", "sass-loader": "^16.0.1", "style-loader": "^4.0.0", + "tsconfig-paths-webpack-plugin": "^4.2.0", "typescript": "^5.4.2", "webpack": "^5.90.3" }, diff --git a/storybook/stories/layouts/Error404.stories.js b/storybook/stories/layouts/Error404.stories.js index 8db3ba969..9b8682ff9 100644 --- a/storybook/stories/layouts/Error404.stories.js +++ b/storybook/stories/layouts/Error404.stories.js @@ -17,6 +17,8 @@ * @license https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0 */ +import { routeHandler } from "../../../_dev/src/ts/autoUpgrade"; +import ErrorPage from "../../../_dev/src/ts/pages/ErrorPage"; import ErrorCode404 from "../../../views/templates/pages/errors/404.html.twig"; export default { @@ -27,9 +29,20 @@ export default { error_code: "404", assets_base_path: "", - exit_to_shop_admin: '#', - exit_to_app_home: '#', - } + exit_to_shop_admin: "#", + exit_to_app_home: "#", + }, }; -export const Error404 = {}; +export const Error404OnHomePage = { + play: async ({ canvasElement }) => { + routeHandler.setNewRoute("home-page"); + new ErrorPage().mount(); + }, +}; +export const Error404 = { + play: async ({ canvasElement }) => { + routeHandler.setNewRoute("any-other-page"); + new ErrorPage().mount(); + }, +}; diff --git a/storybook/stories/layouts/TemplatedErrors.stories.js b/storybook/stories/layouts/TemplatedErrors.stories.js new file mode 100644 index 000000000..227468c36 --- /dev/null +++ b/storybook/stories/layouts/TemplatedErrors.stories.js @@ -0,0 +1,96 @@ +/** + * Copyright since 2007 PrestaShop SA and Contributors + * PrestaShop is an International Registered Trademark & Property of PrestaShop SA + * + * NOTICE OF LICENSE + * + * This source file is subject to the Academic Free License version 3.0 + * that is bundled with this package in the file LICENSE.md. + * It is also available through the world-wide-web at this URL: + * https://opensource.org/licenses/AFL-3.0 + * If you did not receive a copy of the license and are unable to + * obtain it through the world-wide-web, please send an email + * to license@prestashop.com so we can send you a copy immediately. + * + * @author PrestaShop SA and Contributors + * @copyright Since 2007 PrestaShop SA and Contributors + * @license https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0 + */ + +import { routeHandler } from "../../../_dev/src/ts/autoUpgrade"; +import DialogContainer from "../../../_dev/src/ts/components/DialogContainer"; +import Hydration from "../../../_dev/src/ts/utils/Hydration"; +import Layout from "../../../views/templates/layouts/layout.html.twig"; + +export default { + component: Layout, + title: "Layouts/Errors", + args: { + psBaseUri: "/", + assets_base_path: "", + ps_version: "9️⃣.0️⃣.0️⃣", + app_parent_id: "update-assistant", + page_parent_id: "ua_page", + step_parent_id: "ua_container", + stepper_parent_id: "stepper_content", + step: { + state: "normal", + title: "Post-update", + code: "post-update", + }, + steps: [ + { + state: "normal", + title: "Post-update", + code: "post-update", + }, + ], + page: "update", + dialog_parent_id: DialogContainer.containerId, + + exit_link: "#", + dev_doc_link: "#", + data_transparency_link: "#", + + error_template_target: "ua_page", + exit_to_shop_admin: "#", + exit_to_app_home: "#", + submit_error_report_route: "#", + }, +}; + +export const Error500 = { + play: async ({ canvasElement }) => { + new Hydration().hydrateError({ code: 500 }); + }, +}; + +export const Error502 = { + play: async ({ canvasElement }) => { + new Hydration().hydrateError({ code: 502 }); + }, +}; + +export const Timeout = { + play: async ({ canvasElement }) => { + new Hydration().hydrateError({ type: "ETIMEDOUT" }); + }, +}; + +export const EmptyResponse = { + play: async ({ canvasElement }) => { + new Hydration().hydrateError({ type: "APP_ERR_RESPONSE_EMPTY" }); + }, +}; + +export const InvalidResponse = { + play: async ({ canvasElement }) => { + new Hydration().hydrateError({ type: "APP_ERR_RESPONSE_BAD_TYPE" }); + }, +}; + +export const OtherError = { + play: async ({ canvasElement }) => { + new Hydration().hydrateError({ type: "SOME_CODE_WE_DONT_KNOW" }); + }, +};