Add error screens on Storybook

_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(() => {});

storybook/stories/layouts/Error500.stories.js → _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 = {};

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(

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"],

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"
     },

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();
+  },
+};

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 [email protected] so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA and Contributors <[email protected]>
+ * @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" });
+  },
+};