fix(core/upload): replace class icons with ix-icon (#1022)

siemens · Jan 8, 2024 · 9198d31 · 9198d31
1 parent 180acb0
commit 9198d31
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 7 deletions.
diff --git a/packages/core/src/components/upload/upload.scss b/packages/core/src/components/upload/upload.scss
@@ -111,14 +111,14 @@
         width: $large-space;
       }
 
-      > i {
+      > ix-icon {
         margin-inline-end: $small-space;
 
-        &.glyph-error {
+        &.icon-error {
           color: var(--theme-color-alarm);
         }
 
-        &.glyph-success {
+        &.icon-success {
           color: var(--theme-color-success);
         }
       }

diff --git a/packages/core/src/components/upload/upload.tsx b/packages/core/src/components/upload/upload.tsx
@@ -182,14 +182,14 @@ export class Upload {
       case UploadFileState.UPLOAD_FAILED:
         return (
           <span class="state">
-            <i class="glyph glyph-error"></i>
+            <ix-icon name="error" class="icon-error"></ix-icon>
             <span class="upload-text">{this.uploadFailedText}</span>
           </span>
         );
       case UploadFileState.UPLOAD_SUCCESSED:
         return (
           <span class="state">
-            <i class="glyph glyph-success"></i>
+            <ix-icon name="success" class="icon-success"></ix-icon>
             <span class="upload-text">{this.uploadSuccessText}</span>
           </span>
         );

diff --git a/packages/core/src/tests/upload/states/index.html b/packages/core/src/tests/upload/states/index.html
@@ -0,0 +1,23 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body style="padding: 2rem">
+    <ix-upload></ix-upload>
+    <ix-upload></ix-upload>
+    <ix-upload></ix-upload>
+    <ix-upload></ix-upload>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/upload/upload.e2e.ts b/packages/core/src/tests/upload/upload.e2e.ts
@@ -8,11 +8,49 @@
  */
 
 import { expect } from '@playwright/test';
+import { UploadFileState } from '@siemens/ix';
 import { regressionTest } from '@utils/test';
 
 regressionTest.describe('upload', () => {
   regressionTest('basic', async ({ page }) => {
     await page.goto('upload/basic');
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    await expect(page).toHaveScreenshot();
+  });
+
+  regressionTest('States', async ({ page }) => {
+    await page.goto('upload/states');
+
+    const uploads = await page.locator('ix-upload').all();
+
+    await Promise.all(
+      uploads.map(async (locator, index) => {
+        let state: UploadFileState;
+        switch (index) {
+          case 0:
+            state = UploadFileState.LOADING;
+            break;
+          case 1:
+            state = UploadFileState.SELECT_FILE;
+            break;
+          case 2:
+            state = UploadFileState.UPLOAD_FAILED;
+            break;
+          case 3:
+            state = UploadFileState.UPLOAD_SUCCESSED;
+            break;
+          default:
+            console.error('Invalid enum value');
+        }
+
+        await locator.evaluate(
+          (elm: HTMLIxUploadElement, state: UploadFileState) => {
+            elm.state = state;
+          },
+          state
+        );
+      })
+    );
+
+    await expect(page).toHaveScreenshot();
   });
 });
diff --git a/...upload.e2e.ts-snapshots/upload-States-1-chromium---theme-classic-dark-linux.png b/...upload.e2e.ts-snapshots/upload-States-1-chromium---theme-classic-dark-linux.png
diff --git a/...pload.e2e.ts-snapshots/upload-States-1-chromium---theme-classic-light-linux.png b/...pload.e2e.ts-snapshots/upload-States-1-chromium---theme-classic-light-linux.png
diff --git a/packages/react-test-app/src/main.tsx b/packages/react-test-app/src/main.tsx
@@ -108,12 +108,14 @@ import Workflow from './preview-examples/workflow';
 import WorkflowVertical from './preview-examples/workflow-vertical';
 import reportWebVitals from './reportWebVitals';
 import { NavigationTest } from './testing/NavigationTest';
+import Upload from './preview-examples/upload';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <IxApplicationContext>
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<App />} />
+        <Route path="/preview/upload" element={<Upload />} />
         <Route path="/preview/checkbox" element={<Checkbox />} />
         <Route
           path="/preview/checkbox-indeterminate"

diff --git a/packages/react-test-app/src/preview-examples/upload.tsx b/packages/react-test-app/src/preview-examples/upload.tsx
@@ -6,7 +6,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 import { IxUpload } from '@siemens/ix-react';
 import React from 'react';