chore: fix lint issues (#857)

looker-open-source · Oct 14, 2021 · 55daf45 · 55daf45
1 parent 9a9d9fe
commit 55daf45
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -184,6 +184,12 @@
       ]
     },
     "overrides": [
+      {
+        "files": ["packages/run-it/**/*.ts{,x}", "packages/api-explorer/**/*.ts{,x}", "packages/hackathon/**/*.ts{,x}"],
+        "rules": {
+          "no-restricted-imports": "off"
+        }
+      },
       {
         "files": [ "packages/sdk-codegen/**/*.ts",  "packages/sdk-codegen-scripts/**/*.ts"],
         "rules": {
@@ -195,7 +201,8 @@
         "rules": {
           "testing-library/render-result-naming-convention": "off",
           "@typescript-eslint/no-empty-function": "off",
-          "@typescript-eslint/ban-ts-comment": "off"
+          "@typescript-eslint/ban-ts-comment": "off",
+          "testing-library/prefer-screen-queries": "off"
         }
       },
       {

diff --git a/...er/src/components/ErrorBoundary/components/SomethingWentWrong/SomethingWentWrong.spec.tsx b/...er/src/components/ErrorBoundary/components/SomethingWentWrong/SomethingWentWrong.spec.tsx
@@ -23,8 +23,9 @@
  SOFTWARE.
 
  */
-import { renderWithTheme } from '@looker/components-test-utils'
 import React from 'react'
+import { renderWithTheme } from '@looker/components-test-utils'
+import { screen } from '@testing-library/react'
 import { SomethingWentWrong } from './SomethingWentWrong'
 
 const getMockedComponent = (propOverrides = {}) => {
@@ -43,16 +44,16 @@ describe('SomethingWentWrong', () => {
     const actionMessage = 'User please do this action. It might help'
     const altText = '500 error graphic'
 
-    const { getByText, getByAltText } = renderWithTheme(
+    renderWithTheme(
       getMockedComponent({
         header,
         actionMessage,
         altText,
       })
     )
 
-    expect(getByText(header)).toBeVisible()
-    expect(getByText(actionMessage)).toBeVisible()
-    expect(getByAltText(altText)).toBeVisible()
+    expect(screen.getByText(header)).toBeVisible()
+    expect(screen.getByText(actionMessage)).toBeVisible()
+    expect(screen.getByAltText(altText)).toBeVisible()
   })
 })
diff --git a/packages/code-editor/src/Markdown/common.tsx b/packages/code-editor/src/Markdown/common.tsx
@@ -31,20 +31,24 @@ import { Paragraph, Table, Heading } from '@looker/components'
  * Common styled components used by DocMarkdown
  */
 
-export const MDHeading = styled(Heading)``
+export const MDHeading = Object.assign(styled(Heading)``, {
+  defaultProps: {
+    mb: 'xsmall',
+    pt: 'xsmall',
+  },
+})
 
-MDHeading.defaultProps = {
-  mb: 'xsmall',
-  pt: 'xsmall',
-}
-
-export const MDParagraph = styled(Paragraph)`
-  color: ${({ theme }) => theme.colors.text5};
-  max-width: 600px;
-`
-MDParagraph.defaultProps = {
-  mb: 'large',
-}
+export const MDParagraph = Object.assign(
+  styled(Paragraph)`
+    color: ${({ theme }) => theme.colors.text5};
+    max-width: 600px;
+  `,
+  {
+    defaultProps: {
+      mb: 'large',
+    },
+  }
+)
 
 const OListInternal = styled.ol`
   max-width: 600px;
@@ -65,5 +69,6 @@ export const MDListItem = styled.li`
   margin-bottom: 4px;
 `
 
-export const MDTable = styled(Table)``
-MDTable.defaultProps = { mb: 'large' }
+export const MDTable = Object.assign(styled(Table)``, {
+  defaultProps: { mb: 'large' },
+})
diff --git a/packages/run-it/src/components/MethodBadge/MethodBadge.tsx b/packages/run-it/src/components/MethodBadge/MethodBadge.tsx
@@ -98,26 +98,29 @@ export const cssForIntent = (intent: ApixIntentNames) =>
     color: ${({ theme }) => generatePressed(theme.colors[intent])};
   `
 
-export const MethodBadge = styled.div<MethodBadgeProps>`
-  ${typography}
-
-  ${({ type }) => cssForIntent(pickBadgeIntent(type))};
-
-  background: ${({ type, titleStatus, theme: { colors } }) =>
-    titleStatus ? colors.ui1 : intentUIBlend(pickBadgeIntent(type), 1)};
-  border: 1px solid transparent;
-  border-radius: ${({ theme: { radii } }) => radii.medium};
-
-  /** NOTE: This is below minimum accessibility threshold font-size */
-  ${({ compact }) => compact && `font-size: 9px;`}
-
-  min-width: ${({ minWidth }) => minWidth};
-  padding: ${({ compact, theme: { space } }) =>
-    `${space.xxsmall} ${compact ? space.none : space.xsmall}`};
-`
-
-MethodBadge.defaultProps = {
-  fontSize: 'xsmall',
-  fontWeight: 'semiBold',
-  minWidth: '2.5rem',
-}
+export const MethodBadge = Object.assign(
+  styled.div<MethodBadgeProps>`
+    ${typography}
+
+    ${({ type }) => cssForIntent(pickBadgeIntent(type))};
+
+    background: ${({ type, titleStatus, theme: { colors } }) =>
+      titleStatus ? colors.ui1 : intentUIBlend(pickBadgeIntent(type), 1)};
+    border: 1px solid transparent;
+    border-radius: ${({ theme: { radii } }) => radii.medium};
+
+    /** NOTE: This is below minimum accessibility threshold font-size */
+    ${({ compact }) => compact && `font-size: 9px;`}
+
+    min-width: ${({ minWidth }) => minWidth};
+    padding: ${({ compact, theme: { space } }) =>
+      `${space.xxsmall} ${compact ? space.none : space.xsmall}`};
+  `,
+  {
+    defaultProps: {
+      fontSize: 'xsmall',
+      fontWeight: 'semiBold',
+      minWidth: '2.5rem',
+    },
+  }
+)
diff --git a/packages/run-it/src/components/common/common.tsx b/packages/run-it/src/components/common/common.tsx
@@ -30,15 +30,13 @@ import { Heading, Span } from '@looker/components'
  * Common styled components to be used across the whole library
  */
 
-export const RunItHeading = styled(Heading)``
-
-RunItHeading.defaultProps = {
-  mb: 'xsmall',
-  pt: 'xsmall',
-}
-
-export const DarkSpan = styled(Span)``
-
-DarkSpan.defaultProps = {
-  color: 'text3', // `${({ theme }) => theme.colors.text3}`,
-}
+export const RunItHeading = Object.assign(styled(Heading)``, {
+  defaultProps: {
+    mb: 'xsmall',
+    pt: 'xsmall',
+  },
+})
+
+export const DarkSpan = Object.assign(styled(Span)``, {
+  color: 'text3',
+})