test: fix elevation tests

packages/system/src/elevation/elevation.test.js

@@ -1,36 +1,34 @@
 import { css } from 'styled-components';
+import { elevate } from '@gympass/yoga-common';
+import { colors } from '@gympass/yoga-tokens';
 import { elevation } from '.';
 import { elevation as androidElevation } from './elevation.android';
 
 describe('Web and iOS', () => {
-  const shadow = umbra =>
-    Number(umbra) && umbra > 0
-      ? `0 ${umbra}px ${umbra * 2}px rgb(0, 0, 0, 0.25)`
-      : 'none';
-
-  const elevations = [0, 4, 8].map(shadow);
-
-  [elevations.zero, elevations.small, elevations.medium] = elevations;
+  const [zero, small] = elevate({ color: colors.medium });
 
   const theme = {
     yoga: {
-      elevations,
+      elevations: {
+        zero,
+        small,
+      },
     },
   };
 
   describe('elevation', () => {
     it('Should return values for elevation prop', () => {
-      const expectedZeroElevation = css({ boxShadow: elevations.zero });
-      const expectedSmallElevation = css({ boxShadow: elevations.small });
+      const expectedZeroElevation = css({ boxShadow: zero });
+      const expectedSmallElevation = css({ boxShadow: small });
 
-      const zero1 = elevation({ theme, boxShadow: 'zero' });
+      const zero1 = elevation({ theme, bs: 'zero' });
       const zero2 = elevation({ theme, boxShadow: 'zero' });
       const zero3 = elevation({ theme, elevation: 'zero' });
 
       expect(zero1).toStrictEqual(zero2);
       expect(zero2).toStrictEqual(zero3);
 
-      const small1 = elevation({ theme, boxShadow: 'small' });
+      const small1 = elevation({ theme, bs: 'small' });
       const small2 = elevation({ theme, boxShadow: 'small' });
       const small3 = elevation({ theme, elevation: 'small' });
 
@@ -57,20 +55,21 @@ describe('Web and iOS', () => {
 });
 
 describe('Android', () => {
-  const elevations = ['0', '4', '8'];
-
-  [elevations.zero, elevations.small, elevations.medium] = elevations;
+  const [zero, small] = elevate({ color: colors.medium });
 
   const theme = {
     yoga: {
-      elevations,
+      elevations: {
+        zero,
+        small,
+      },
     },
   };
 
   describe('elevation', () => {
     it('Should return values for elevation prop', () => {
-      const expectedZeroElevation = css({ elevation: elevations.zero });
-      const expectedSmallElevation = css({ elevation: elevations.small });
+      const expectedZeroElevation = css({ elevation: zero });
+      const expectedSmallElevation = css({ elevation: small });
 
       const zero1 = androidElevation({ theme, bs: 'zero' });
       const zero2 = androidElevation({ theme, boxShadow: 'zero' });