📸 ✅ Updated test & snapshots

equinor · Aug 3, 2022 · 88216e3 · 88216e3
1 parent 33e3248
commit 88216e3
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 87 deletions.
diff --git a/packages/eds-core-react/src/components/Input/Input.test.tsx b/packages/eds-core-react/src/components/Input/Input.test.tsx
@@ -8,18 +8,6 @@ import { Input } from './Input'
 import * as tokens from './Input.tokens'
 import { trimSpaces } from '@equinor/eds-utils'
 
-const {
-  error: {
-    states: { active: activeError },
-  },
-  success: {
-    states: { active: activeSuccess },
-  },
-  warning: {
-    states: { active: activeWarning },
-  },
-} = tokens
-
 afterEach(cleanup)
 
 describe('Input', () => {
@@ -57,12 +45,13 @@ describe('Input', () => {
         <Input id="test-success" variant="success" />
       </label>,
     )
-    const inputNode = screen.getByLabelText(label)
+    // eslint-disable-next-line testing-library/no-node-access
+    const inputWrapper = screen.getByLabelText(label).parentElement
 
-    expect(inputNode).toHaveStyleRule(
+    expect(inputWrapper).toHaveStyleRule(
       'outline',
-      `${activeSuccess.outline.width} solid ${trimSpaces(
-        activeSuccess.outline.color,
+      `${tokens.input.outline.width} solid ${trimSpaces(
+        tokens.success.outline.color,
       )}`,
     )
   })
@@ -75,12 +64,13 @@ describe('Input', () => {
         <Input id="test-warning" variant="warning" />
       </label>,
     )
-    const inputNode = screen.getByLabelText(label)
+    // eslint-disable-next-line testing-library/no-node-access
+    const inputWrapper = screen.getByLabelText(label).parentElement
 
-    expect(inputNode).toHaveStyleRule(
+    expect(inputWrapper).toHaveStyleRule(
       'outline',
-      `${activeWarning.outline.width} solid ${trimSpaces(
-        activeWarning.outline.color,
+      `${tokens.input.outline.width} solid ${trimSpaces(
+        tokens.warning.outline.color,
       )}`,
     )
   })
@@ -93,32 +83,33 @@ describe('Input', () => {
         <Input id="test-error" variant="error" />
       </label>,
     )
-    const inputNode = screen.getByLabelText(label)
+    // eslint-disable-next-line testing-library/no-node-access
+    const inputWrapper = screen.getByLabelText(label).parentElement
 
-    expect(inputNode).toHaveStyleRule(
+    expect(inputWrapper).toHaveStyleRule(
       'outline',
-      `${activeError.outline.width} solid ${trimSpaces(
-        activeError.outline.color,
+      `${tokens.input.outline.width} solid ${trimSpaces(
+        tokens.error.outline.color,
       )}`,
     )
   })
 
-  const StyledTextField = styled(Input)`
+  const StyledInput = styled(Input)`
     margin-top: 48px;
   `
   it('Can extend the css of the component', () => {
     render(
-      <StyledTextField
+      <StyledInput
         id="test-css-extend"
         variant="error"
         value="textfield"
         readOnly
       />,
     )
 
-    expect(screen.getByDisplayValue('textfield')).toHaveStyleRule(
-      'margin-top',
-      '48px',
-    )
+    // eslint-disable-next-line testing-library/no-node-access
+    const inputWrapper = screen.getByDisplayValue('textfield').parentElement
+
+    expect(inputWrapper).toHaveStyleRule('margin-top', '48px')
   })
 })
diff --git a/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap b/packages/eds-core-react/src/components/Input/__snapshots__/Input.test.tsx.snap
@@ -4,37 +4,23 @@ exports[`Input Matches snapshot 1`] = `
 <DocumentFragment>
   .c0 {
   --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
+  position: relative;
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-column-gap: 8px;
-  column-gap: 8px;
   border: none;
   box-sizing: border-box;
   height: 36px;
   box-shadow: inset 0px -1px 0px 0px var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
   background: var(--eds_ui_background__light,rgba(247,247,247,1));
   outline: 1px solid transparent;
   outline-offset: 0px;
-  padding-left: 8px;
-  padding-top: 6px;
-  padding-right: 8px;
-  padding-bottom: 6px;
-  margin: 0;
-  color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
-  font-family: Equinor;
-  font-size: 1.000rem;
-  font-weight: 400;
-  line-height: 1.500em;
-  -webkit-letter-spacing: 0.025em;
-  -moz-letter-spacing: 0.025em;
-  -ms-letter-spacing: 0.025em;
-  letter-spacing: 0.025em;
-  text-align: left;
   background: transparent;
   box-shadow: none;
 }
@@ -49,6 +35,10 @@ exports[`Input Matches snapshot 1`] = `
   width: 100%;
   border: none;
   background: transparent;
+  padding-left: 8px;
+  padding-top: 6px;
+  padding-right: 8px;
+  padding-bottom: 6px;
   margin: 0;
   color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
   font-family: Equinor;
@@ -80,7 +70,7 @@ exports[`Input Matches snapshot 1`] = `
 }
 
 .c1:disabled {
-  color: var(--eds_interactive__disabled__text,rgba(190,190,190,1));
+  color: var(--eds-input-color);
   cursor: not-allowed;
 }
 

diff --git a/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap b/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap
@@ -103,37 +103,23 @@ exports[`Search Matches snapshot 1`] = `
 
 .c1 {
   --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
+  position: relative;
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-column-gap: 8px;
-  column-gap: 8px;
   border: none;
   box-sizing: border-box;
   height: 36px;
   box-shadow: inset 0px -1px 0px 0px var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
   background: var(--eds_ui_background__light,rgba(247,247,247,1));
   outline: 1px solid transparent;
   outline-offset: 0px;
-  padding-left: 8px;
-  padding-top: 6px;
-  padding-right: 8px;
-  padding-bottom: 6px;
-  margin: 0;
-  color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
-  font-family: Equinor;
-  font-size: 1.000rem;
-  font-weight: 400;
-  line-height: 1.500em;
-  -webkit-letter-spacing: 0.025em;
-  -moz-letter-spacing: 0.025em;
-  -ms-letter-spacing: 0.025em;
-  letter-spacing: 0.025em;
-  text-align: left;
 }
 
 .c1:focus-within {
@@ -146,6 +132,10 @@ exports[`Search Matches snapshot 1`] = `
   width: 100%;
   border: none;
   background: transparent;
+  padding-left: 8px;
+  padding-top: 6px;
+  padding-right: 8px;
+  padding-bottom: 6px;
   margin: 0;
   color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
   font-family: Equinor;
@@ -177,7 +167,7 @@ exports[`Search Matches snapshot 1`] = `
 }
 
 .c3:disabled {
-  color: var(--eds_interactive__disabled__text,rgba(190,190,190,1));
+  color: var(--eds-input-color);
   cursor: not-allowed;
 }
 

diff --git a/...ds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap b/...ds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap
@@ -30,37 +30,23 @@ exports[`SingleSelect Matches snapshot 1`] = `
 
 .c4 {
   --eds-input-adornment-color: var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
+  --eds-input-color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
+  position: relative;
+  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-column-gap: 8px;
-  column-gap: 8px;
   border: none;
   box-sizing: border-box;
   height: 36px;
   box-shadow: inset 0px -1px 0px 0px var(--eds_text__static_icons__tertiary,rgba(111,111,111,1));
   background: var(--eds_ui_background__light,rgba(247,247,247,1));
   outline: 1px solid transparent;
   outline-offset: 0px;
-  padding-left: 8px;
-  padding-top: 6px;
-  padding-right: 8px;
-  padding-bottom: 6px;
-  margin: 0;
-  color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
-  font-family: Equinor;
-  font-size: 1.000rem;
-  font-weight: 400;
-  line-height: 1.500em;
-  -webkit-letter-spacing: 0.025em;
-  -moz-letter-spacing: 0.025em;
-  -ms-letter-spacing: 0.025em;
-  letter-spacing: 0.025em;
-  text-align: left;
 }
 
 .c4:focus-within {
@@ -73,6 +59,10 @@ exports[`SingleSelect Matches snapshot 1`] = `
   width: 100%;
   border: none;
   background: transparent;
+  padding-left: 8px;
+  padding-top: 6px;
+  padding-right: 8px;
+  padding-bottom: 6px;
   margin: 0;
   color: var(--eds_text__static_icons__default,rgba(61,61,61,1));
   font-family: Equinor;
@@ -104,7 +94,7 @@ exports[`SingleSelect Matches snapshot 1`] = `
 }
 
 .c6:disabled {
-  color: var(--eds_interactive__disabled__text,rgba(190,190,190,1));
+  color: var(--eds-input-color);
   cursor: not-allowed;
 }
 

diff --git a/packages/eds-core-react/src/components/TextField/TextField.test.tsx b/packages/eds-core-react/src/components/TextField/TextField.test.tsx
@@ -98,10 +98,12 @@ describe('TextField', () => {
         inputIcon={<Icon data={save} />}
       />,
     )
+    const textFieldContainer =
+      // eslint-disable-next-line testing-library/no-node-access
+      screen.getByLabelText(labelText).parentElement.parentElement
+
     // eslint-disable-next-line testing-library/no-node-access
-    const inputNode = screen.getByLabelText(labelText).parentElement
-    // eslint-disable-next-line testing-library/no-node-access
-    expect(inputNode.querySelectorAll('svg')).toHaveLength(1)
+    expect(textFieldContainer.querySelectorAll('svg')).toHaveLength(1)
   })
   it('Can have an icon by the helper text', () => {
     const helperText = 'Help me'