test(components-providers): Add coverage for ExtendComponentsProvider and ThemeProvider (#1898)

Author: Luke Bowerman

packages/components-providers/package.json

@@ -23,6 +23,7 @@
     "tabbable": "^5.1.4"
   },
   "devDependencies": {
+    "@testing-library/react": "^11.2.5",
     "@types/lodash": "^4.14.167",
     "@types/react": "^16.9.56",
     "@types/styled-components": "^5.1.5",

packages/components-providers/src/ExtendComponentsProvider.test.tsx

@@ -0,0 +1,68 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import React from 'react'
+import { renderWithTheme } from '@looker/components-test-utils'
+import { screen } from '@testing-library/react'
+import styled from 'styled-components'
+import { ComponentsProvider } from './ComponentsProvider'
+import { ExtendComponentsThemeProvider } from './ExtendComponentsProvider'
+
+const FauxParagraph = styled.p`
+  background: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.key};
+`
+
+describe('ExtendComponentsProvider', () => {
+  test('Extends existing theme', () => {
+    const Test = () => {
+      return (
+        <ComponentsProvider
+          themeCustomizations={{
+            colors: { background: 'black', key: 'purple' },
+          }}
+        >
+          <FauxParagraph>Standard</FauxParagraph>
+
+          <ExtendComponentsThemeProvider
+            themeCustomizations={{
+              colors: { key: 'red' },
+            }}
+          >
+            <FauxParagraph>Extended</FauxParagraph>
+          </ExtendComponentsThemeProvider>
+        </ComponentsProvider>
+      )
+    }
+
+    renderWithTheme(<Test />)
+
+    expect(screen.getByText('Standard')).toHaveStyle('color: purple')
+    expect(screen.getByText('Standard')).toHaveStyle('background: black')
+    expect(screen.getByText('Extended')).toHaveStyle('color: red')
+    expect(screen.getByText('Extended')).toHaveStyle('background: black')
+  })
+})

packages/components-providers/src/ThemeProvider.test.tsx

@@ -0,0 +1,50 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import React from 'react'
+import { renderWithTheme } from '@looker/components-test-utils'
+import { screen } from '@testing-library/react'
+import styled from 'styled-components'
+import { ThemeProvider } from './ThemeProvider'
+
+const FauxParagraph = styled.p`
+  color: ${({ theme }) => theme.colors.key};
+`
+
+describe('ThemeProvider', () => {
+  test('builtIn default works', () => {
+    const Test = () => {
+      return (
+        <ThemeProvider>
+          <FauxParagraph>Standard</FauxParagraph>
+        </ThemeProvider>
+      )
+    }
+
+    renderWithTheme(<Test />)
+    expect(screen.getByText('Standard')).toHaveStyle('color: rgb(108, 67, 224)')
+  })
+})

yarn.lock

@@ -3894,6 +3894,14 @@
     "@babel/runtime" "^7.12.5"
     "@testing-library/dom" "^7.28.1"
 
+"@testing-library/react@^11.2.5":
+  version "11.2.5"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.2.5.tgz#ae1c36a66c7790ddb6662c416c27863d87818eb9"
+  integrity sha512-yEx7oIa/UWLe2F2dqK0FtMF9sJWNXD+2PPtp39BvE0Kh9MJ9Kl0HrZAgEuhUJR+Lx8Di6Xz+rKwSdEPY2UV8ZQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@testing-library/dom" "^7.28.1"
+
 "@testing-library/user-event@^12.5.0":
   version "12.5.0"
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-12.5.0.tgz#7c6f69cee4dbd11037ac9c3f62c5d81b9a4ccf30"