[SafeArea] fix and add Test

packages/core/src/safe-area/__tests__/__snapshots__/safe-area__inbrowser.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SafeArea /> in browser renders bottom in browser 1`] = `
+<div>
+  <taro-view-core
+    class="taroify-safe-area taroify-safe-area--bottom"
+  >
+    底部安全区
+  </taro-view-core>
+</div>
+`;
+
+exports[`<SafeArea /> in browser renders in browser without position 1`] = `
+<div>
+  <taro-view-core
+    class="taroify-safe-area"
+  >
+    内容
+  </taro-view-core>
+</div>
+`;
+
+exports[`<SafeArea /> in browser renders top in browser 1`] = `
+<div>
+  <taro-view-core
+    class="taroify-safe-area taroify-safe-area--top"
+  >
+    顶部安全区
+  </taro-view-core>
+</div>
+`;

packages/core/src/safe-area/__tests__/__snapshots__/safe-area__outbrowser.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SafeArea /> in non-browser environment renders bottom in non-browser environment 1`] = `
+<div>
+  <taro-view-core
+    class="taroify-safe-area"
+    style="padding-bottom: 34px;"
+  >
+    底部安全区
+  </taro-view-core>
+</div>
+`;
+
+exports[`<SafeArea /> in non-browser environment renders in non-browser environment without position 1`] = `
+<div>
+  <taro-view-core
+    class="taroify-safe-area"
+  >
+    内容
+  </taro-view-core>
+</div>
+`;
+
+exports[`<SafeArea /> in non-browser environment renders top in non-browser environment 1`] = `
+<div>
+  <taro-view-core
+    class="taroify-safe-area"
+    style="padding-top: 44px;"
+  >
+    顶部安全区
+  </taro-view-core>
+</div>
+`;

packages/core/src/safe-area/__tests__/safe-area__inbrowser.test.tsx

@@ -0,0 +1,48 @@
+import { render } from "@testing-library/react"
+import * as React from "react"
+import SafeArea from "../safe-area"
+import { prefixClassname } from "../../styles"
+
+jest.mock("../../utils/base", () => ({
+  inBrowser: true,
+}))
+
+describe("<SafeArea /> in browser", () => {
+  it("renders in browser without position", () => {
+    const { container } = render(<SafeArea>内容</SafeArea>)
+
+    expect(container.querySelector(`.${prefixClassname("safe-area")}`)).not.toBeNull()
+    expect(container.querySelector(`.${prefixClassname("safe-area--top")}`)).toBeNull()
+    expect(container.querySelector(`.${prefixClassname("safe-area--bottom")}`)).toBeNull()
+    const styles = getComputedStyle(container.firstChild as Element)
+    expect(Boolean(styles.paddingTop)).toBe(false)
+    expect(Boolean(styles.paddingBottom)).toBe(false)
+    expect(container).toMatchSnapshot()
+  })
+
+  it("renders top in browser", () => {
+    const { container } = render(<SafeArea position="top">顶部安全区</SafeArea>)
+
+    expect(container.querySelector(`.${prefixClassname("safe-area--top")}`)).not.toBeNull()
+    expect(container.firstChild).toHaveStyle({
+      paddingTop: expect.stringMatching(/^(env|constant)\(safe-area-inset-top\)$/),
+    })
+    const styles = getComputedStyle(container.firstChild as Element)
+    expect(Boolean(styles.paddingBottom)).toBe(false)
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it("renders bottom in browser", () => {
+    const { container } = render(<SafeArea position="bottom">底部安全区</SafeArea>)
+
+    expect(container.querySelector(`.${prefixClassname("safe-area--bottom")}`)).not.toBeNull()
+    expect(container.firstChild).toHaveStyle({
+      paddingBottom: expect.stringMatching(/^(env|constant)\(safe-area-inset-bottom\)$/),
+    })
+    const styles = getComputedStyle(container.firstChild as Element)
+    expect(Boolean(styles.paddingTop)).toBe(false)
+
+    expect(container).toMatchSnapshot()
+  })
+})

packages/core/src/safe-area/__tests__/safe-area__outbrowser.test.tsx

@@ -0,0 +1,84 @@
+import { render } from "@testing-library/react"
+import * as React from "react"
+import SafeArea from "../safe-area"
+import { prefixClassname } from "../../styles"
+import * as Taro from "@tarojs/taro"
+
+jest.mock("@tarojs/taro", () => ({
+  getSystemInfoSync: jest.fn(),
+}))
+
+jest.mock("../../utils/base", () => ({
+  inBrowser: false,
+}))
+
+const mockSystemInfo: Taro.getSystemInfoSync.Result = {
+  SDKVersion: "3.6.2",
+  benchmarkLevel: 1,
+  bluetoothEnabled: true,
+  brand: "devtools",
+  cameraAuthorized: true,
+  deviceOrientation: "portrait",
+  enableDebug: false,
+  fontSizeSetting: 16,
+  host: { appId: "WeChat" },
+  language: "zh_CN",
+  locationAuthorized: true,
+  locationEnabled: true,
+  microphoneAuthorized: true,
+  model: "iPhone X",
+  notificationAuthorized: true,
+  pixelRatio: 3,
+  platform: "devtools",
+  safeArea: { top: 44, left: 0, right: 375, bottom: 778, width: 375, height: 734 },
+  screenHeight: 812,
+  screenWidth: 375,
+  statusBarHeight: 44,
+  system: "iOS 10.0.1",
+  version: "8.0.5",
+  wifiEnabled: true,
+  windowHeight: 812,
+  windowWidth: 375,
+}
+
+describe("<SafeArea /> in non-browser environment", () => {
+  it("renders in non-browser environment without position", () => {
+    const { container } = render(<SafeArea>内容</SafeArea>)
+
+    expect(container.querySelector(`.${prefixClassname("safe-area")}`)).not.toBeNull()
+    expect(container.querySelector(`.${prefixClassname("safe-area--top")}`)).toBeNull()
+    expect(container.querySelector(`.${prefixClassname("safe-area--bottom")}`)).toBeNull()
+    const styles = getComputedStyle(container.firstChild as Element)
+    expect(Boolean(styles.paddingTop)).toBe(false)
+    expect(Boolean(styles.paddingBottom)).toBe(false)
+    expect(container).toMatchSnapshot()
+  })
+
+  it("renders top in non-browser environment", () => {
+    jest.spyOn(Taro, "getSystemInfoSync").mockReturnValue(mockSystemInfo)
+
+    const { container } = render(<SafeArea position="top">顶部安全区</SafeArea>)
+    expect(container.querySelector(`.${prefixClassname("safe-area--top")}`)).toBeNull()
+    expect(container.querySelector(`.${prefixClassname("safe-area--bottom")}`)).toBeNull()
+
+    const styles = getComputedStyle(container.firstChild as Element)
+    expect(styles.paddingTop).toBe("44px")
+    expect(Boolean(styles.paddingBottom)).toBe(false)
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it("renders bottom in non-browser environment", () => {
+    jest.spyOn(Taro, "getSystemInfoSync").mockReturnValue(mockSystemInfo)
+
+    const { container } = render(<SafeArea position="bottom">底部安全区</SafeArea>)
+    expect(container.querySelector(`.${prefixClassname("safe-area--top")}`)).toBeNull()
+    expect(container.querySelector(`.${prefixClassname("safe-area--bottom")}`)).toBeNull()
+
+    const styles = getComputedStyle(container.firstChild as Element)
+    expect(styles.paddingBottom).toBe("34px")
+    expect(Boolean(styles.paddingTop)).toBe(false)
+
+    expect(container).toMatchSnapshot()
+  })
+})

packages/core/src/safe-area/safe-area.tsx

@@ -15,7 +15,7 @@ export interface SafeAreaProps extends ViewProps {
 function SafeArea(props: SafeAreaProps) {
   const { className, position, ...restProps } = props
   const customStyle = React.useMemo(() => {
-    if (inBrowser) return {}
+    if (inBrowser || !position) return {}
     const { safeArea, screenHeight } = getSystemInfoSync()
     let style = {}
     if (position === "top") {