NEXT-25533 - add limit to textarea component

.github/workflows/deployment.yml

@@ -1,7 +1,6 @@
 name: Deployment
 
-on:  
-  push:
+on:
   pull_request:
     branches:
       - main
@@ -11,20 +10,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: 'lts/gallium'
+          node-version: '18'
 
       - name: Retrieve the cached main "node_modules" directory (if present)
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: node-cache-main
         with:
           path: node_modules
           key: node-modules-main-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
-      
+
       - name: Install main dependencies (if the cached directory was not found)
         if: steps.node-cache-main.outputs.cache-hit != 'true'
         run: npm ci

.github/workflows/npm-publish.yml

@@ -1,7 +1,6 @@
 name: Publish to NPM
 
-on:  
-  push:
+on:
   pull_request:
     branches:
       - main
@@ -12,13 +11,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: 'lts/gallium'
+          node-version: '18'
       - name: Retrieve the cached "node_modules" directory (if present)
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: node-cache
         with:
           path: node_modules

.github/workflows/preview.yml

@@ -1,7 +1,6 @@
 name: Deploy PR previews
 
-on:  
-  push:
+on:
   pull_request:
     types:
       - opened
@@ -16,20 +15,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: 'lts/gallium'
-        
+          node-version: '18'
+
       - name: Retrieve the cached main "node_modules" directory (if present)
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: node-cache-main
         with:
           path: node_modules
           key: node-modules-main-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
-      
+
       - name: Install main dependencies (if the cached directory was not found)
         if: steps.node-cache-main.outputs.cache-hit != 'true'
         run: npm ci

.github/workflows/tests.yml

@@ -1,7 +1,6 @@
 name: Tests
 
-on:  
-  push:
+on:
   pull_request:
     branches:
       - main
@@ -12,13 +11,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: 'lts/gallium'
+          node-version: '18'
       - name: Retrieve the cached "node_modules" directory (if present)
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: node-cache
         with:
           path: node_modules
@@ -28,32 +27,58 @@ jobs:
         run: npm ci
       - name: lint
         run: npm run lint
+  unit-tests:
+    name: Unit tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - name: Retrieve the cached "node_modules" directory (if present)
+        uses: actions/cache@v3
+        id: node-cache
+        with:
+          path: node_modules
+          key: node-modules-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
+      - name: Install dependencies (if the cached directory was not found)
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: npm ci
+      - name: unit
+        run: npm run test:unit
   storybook-tests:
     name: Storybook Tests
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout
-      uses: actions/checkout@v2
-    - name: Setup Node.js
-      uses: actions/setup-node@v2
-    - name: Retrieve the cached "node_modules" directory (if present)
-      uses: actions/cache@v2
-      id: node-cache
-      with:
-        path: node_modules
-        key: node-modules-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
-    - name: Install dependencies (if the cached directory was not found)
-      if: steps.node-cache.outputs.cache-hit != 'true'
-      run: npm ci
-    - name: Install Playwright
-      run: npx playwright install
-    - name: Run Tests
-      id: storybookTests
-      run: npm run test-storybook:ci
-    - name: Archive visual test diffs
-      uses: actions/upload-artifact@v3
-      if: always() && (steps.storybookTests.outcome == 'failure')
-      with:
-        name: visual-test-diffs
-        path: __snapshots__
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+      - name: Retrieve the cached "node_modules" directory (if present)
+        uses: actions/cache@v3
+        id: node-cache
+        with:
+          path: node_modules
+          key: node-modules-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
+      - name: Install dependencies (if the cached directory was not found)
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: npm ci
+      - name: Install Playwright
+        run: npx playwright install
+      - name: Create the static pages directory locally in CI
+        run: npm run build-storybook
+      - name: Run Tests
+        id: storybookTests
+        run: |
+          npx concurrently --kill-others --success first --names "SB,TEST" --prefix-colors "magenta,blue" \
+          "http-server storybook-static -a 127.0.0.1 --port 6006" \
+          "wait-on http://127.0.0.1:6006 && npm run test-storybook"
+      - name: Archive visual test diffs
+        uses: actions/upload-artifact@v3
+        if: always() && (steps.storybookTests.outcome == 'failure')
+        with:
+          name: visual-test-diffs
+          path: __snapshots__

package.json

@@ -7,8 +7,8 @@
     "storybook": "SHOW_INTERACTIONS=true start-storybook -p 6006",
     "build-vue": "rollup -c",
     "build-storybook": "build-storybook",
-    "test-storybook": "test-storybook",
-    "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npm run build-storybook -- --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && npm run test-storybook\"",
+    "test-storybook": "test-storybook --url http://127.0.0.1:6006",
+    "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"http-server storybook-static -a 127.0.0.1 --port 6006 --silent\" \"wait-on tcp:6006 && npm run test-storybook\"",
     "docker": "docker run -v $PWD:/tests:delegated -w /tests -it --rm --ipc=host mcr.microsoft.com/playwright:v1.20.0-focal /bin/bash"
   },
   "main": "dist/common/index.js",
@@ -91,6 +91,7 @@
     "vue-template-compiler": "^2.7.10",
     "vue-tsc": "^0.39.5",
     "wait-on": "^6.0.1",
-    "webpack": "^5.74.0"
+    "webpack": "^5.74.0",
+    "@vue/vue2-jest": "^27.0.0"
   }
 }

src/components/form/sw-textarea/sw-textarea.interactive.stories.js

@@ -79,3 +79,15 @@ VisualTestError.play = async ({ args }) => {
 
   await expect(canvas.getByText(args.error.detail)).toBeDefined();
 };
+
+export const VisualTestLimit = Template.bind();
+VisualTestLimit.storyName = 'Should display limit';
+VisualTestLimit.args = {
+  limit: 45,
+  value: 'Enter some more text to reach the limit... '
+};
+VisualTestLimit.play = async () => {
+  const canvas = within(document.getElementById('root'));
+
+  await expect(canvas.getByText('43 / 45')).toBeDefined();
+};