fix(NOJIRA-123): Set size in pixels by default (#624)

When value with no units (string with numbers only) is provided, set
size in pixels by default.

Author: Matej Lednicky

.github/workflows/visual.yml

@@ -9,8 +9,8 @@ on:
 jobs:
   visual:
     runs-on: ubuntu-latest
-    # skip for external PRs
-    if: github.event.pull_request.head.repo.full_name == github.repository
+    # skip for external PRs, run for push on main branch
+    if: ${{ !github.event.pull_request || github.event.pull_request.head.repo.full_name == github.repository }}
     steps:
       - name: Check out Git repository
         uses: actions/checkout@v2

packages/embed/src/utils/set-element-size.spec.ts

@@ -1,4 +1,4 @@
-import { setElementSize } from './set-element-size'
+import { getValueWithUnits, setElementSize } from './set-element-size'
 
 describe('set-element-size', () => {
   describe('#setElementSize', () => {
@@ -18,7 +18,7 @@ describe('set-element-size', () => {
 
     it('should return an element with width and height', () => {
       const element = document.createElement('div')
-      expect(setElementSize(element, { width: 100, height: 100 })).toHaveStyle({
+      expect(setElementSize(element, { width: 100, height: '100' })).toHaveStyle({
         width: '100px',
         height: '100px',
       })
@@ -37,4 +37,18 @@ describe('set-element-size', () => {
       expect(sizedElement).toHaveStyle('height: 50vh')
     })
   })
+
+  describe('#getValueWithUnits', () => {
+    it('should return size in pixels for number value', () => {
+      expect(getValueWithUnits(100)).toBe('100px')
+    })
+
+    it('should return size in pixels for string value containing only numbers', () => {
+      expect(getValueWithUnits('100')).toBe('100px')
+    })
+
+    it('should keep original units when provided in the value', () => {
+      expect(getValueWithUnits('100vh')).toBe('100vh')
+    })
+  })
 })

packages/embed/src/utils/set-element-size.ts

@@ -4,7 +4,7 @@ interface ElementSize {
 }
 
 export const getValueWithUnits = (value: number | string): string => {
-  if (typeof value === 'string') {
+  if (typeof value === 'string' && !value.match(/^[0-9]+$/)) {
     return value
   } else {
     return `${value}px`