Merge pull request #43 from solidjs-community/ssr-test

Setup SSR testing

.eslintignore

@@ -9,4 +9,5 @@ __mocks__/
 
 commitlint.config.js
 jest.config.cjs
+jest.config.ssr.cjs
 *.d.ts

jest.config.cjs → configs/jest.config.cjs

@@ -15,14 +15,16 @@ module.exports = {
 
   testEnvironment: "jsdom",
 
-  setupFilesAfterEnv: [`${pkgRootPath}/../../jest.setup.ts`, "regenerator-runtime"],
+  setupFilesAfterEnv: [`${pkgRootPath}/../../configs/jest.setup.ts`, "regenerator-runtime"],
 
   moduleNameMapper: {
     "solid-js/web": `${solidjsPath}/web/dist/web.cjs`,
     "solid-js/store": `${solidjsPath}/store/dist/store.cjs`,
     "solid-js": `${solidjsPath}/dist/solid.cjs`
   },
 
+  testMatch: ["**/test/*.test.(js|ts)?(x)"],
+
   verbose: true,
   testTimeout: 30000
 };

configs/jest.config.ssr.cjs

@@ -0,0 +1,34 @@
+const pkgRootPath = `<rootDir>`;
+const solidjsPath = `${pkgRootPath}/../../node_modules/solid-js`;
+
+/** @type {import('@jest/types').Config.InitialOptions} */
+module.exports = {
+  preset: "ts-jest",
+
+  globals: {
+    "ts-jest": {
+      tsconfig: `${pkgRootPath}/tsconfig.json`,
+      babelConfig: {
+        presets: [
+          "@babel/preset-env",
+          ["babel-preset-solid", { generate: "ssr", hydratable: true }]
+        ]
+      }
+    }
+  },
+
+  testEnvironment: "node",
+
+  moduleNameMapper: {
+    "solid-js/web": `${solidjsPath}/web/dist/server.cjs`,
+    "solid-js/store": `${solidjsPath}/store/dist/server.cjs`,
+    "solid-js": `${solidjsPath}/dist/server.cjs`
+  },
+
+  setupFilesAfterEnv: [`${pkgRootPath}/../../configs/jest.setup.ssr.ts`],
+
+  testMatch: ["**/test/ssr/*.test.(js|ts)?(x)"],
+
+  verbose: true,
+  testTimeout: 30000
+};

configs/jest.setup.ssr.ts

@@ -0,0 +1,6 @@
+jest.mock("solid-js/web", () => ({
+  ...jest.requireActual("solid-js/web"),
+  template: jest.fn()
+}));
+
+export {};

packages/breadcrumbs/dev/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../../vite.config";
+import { viteConfig } from "../../../configs/vite.config";
 
 export default viteConfig;

packages/breadcrumbs/jest.config.cjs

@@ -1,4 +1,4 @@
-const baseJest = require("../../jest.config.cjs");
+const baseJest = require("../../configs/jest.config.cjs");
 
 module.exports = {
   ...baseJest

packages/breadcrumbs/tsup.config.ts

@@ -1,3 +1,3 @@
-import defaultConfig from "../../tsup.config";
+import defaultConfig from "../../configs/tsup.config";
 
 export default defaultConfig;

packages/breadcrumbs/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../vite.config";
+import { viteConfig } from "../../configs/vite.config";
 
 export default viteConfig;

packages/button/dev/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../../vite.config";
+import { viteConfig } from "../../../configs/vite.config";
 
 export default viteConfig;

packages/button/jest.config.cjs

@@ -1,4 +1,4 @@
-const baseJest = require("../../jest.config.cjs");
+const baseJest = require("../../configs/jest.config.cjs");
 
 module.exports = {
   ...baseJest

packages/button/tsup.config.ts

@@ -1,3 +1,3 @@
-import defaultConfig from "../../tsup.config";
+import defaultConfig from "../../configs/tsup.config";
 
 export default defaultConfig;

packages/button/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../vite.config";
+import { viteConfig } from "../../configs/vite.config";
 
 export default viteConfig;

packages/checkbox/dev/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../../vite.config";
+import { viteConfig } from "../../../configs/vite.config";
 
 export default viteConfig;

packages/checkbox/jest.config.cjs

@@ -1,4 +1,4 @@
-const baseJest = require("../../jest.config.cjs");
+const baseJest = require("../../configs/jest.config.cjs");
 
 module.exports = {
   ...baseJest

packages/checkbox/tsup.config.ts

@@ -1,3 +1,3 @@
-import defaultConfig from "../../tsup.config";
+import defaultConfig from "../../configs/tsup.config";
 
 export default defaultConfig;

packages/checkbox/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../vite.config";
+import { viteConfig } from "../../configs/vite.config";
 
 export default viteConfig;

packages/collection/dev/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../../vite.config";
+import { viteConfig } from "../../../configs/vite.config";
 
 export default viteConfig;

packages/collection/jest.config.cjs

@@ -1,4 +1,4 @@
-const baseJest = require("../../jest.config.cjs");
+const baseJest = require("../../configs/jest.config.cjs");
 
 module.exports = {
   ...baseJest

packages/collection/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../vite.config";
+import { viteConfig } from "../../configs/vite.config";
 
 export default viteConfig;

packages/dialog/dev/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../../vite.config";
+import { viteConfig } from "../../../configs/vite.config";
 
 export default viteConfig;

packages/dialog/jest.config.cjs

@@ -1,4 +1,4 @@
-const baseJest = require("../../jest.config.cjs");
+const baseJest = require("../../configs/jest.config.cjs");
 
 module.exports = {
   ...baseJest

packages/dialog/tsup.config.ts

@@ -1,3 +1,3 @@
-import defaultConfig from "../../tsup.config";
+import defaultConfig from "../../configs/tsup.config";
 
 export default defaultConfig;

packages/dialog/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../vite.config";
+import { viteConfig } from "../../configs/vite.config";
 
 export default viteConfig;

packages/focus/dev/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../../vite.config";
+import { viteConfig } from "../../../configs/vite.config";
 
 export default viteConfig;

packages/focus/jest.config.cjs

@@ -1,4 +1,4 @@
-const baseJest = require("../../jest.config.cjs");
+const baseJest = require("../../configs/jest.config.cjs");
 
 module.exports = {
   ...baseJest

packages/focus/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../vite.config";
+import { viteConfig } from "../../configs/vite.config";
 
 export default viteConfig;

packages/i18n/dev/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../../vite.config";
+import { viteConfig } from "../../../configs/vite.config";
 
 export default viteConfig;

packages/i18n/jest.config.cjs

@@ -1,4 +1,4 @@
-const baseJest = require("../../jest.config.cjs");
+const baseJest = require("../../configs/jest.config.cjs");
 
 module.exports = {
   ...baseJest

packages/i18n/tsup.config.ts

@@ -1,3 +1,3 @@
-import defaultConfig from "../../tsup.config";
+import defaultConfig from "../../configs/tsup.config";
 
 export default defaultConfig;

packages/i18n/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../vite.config";
+import { viteConfig } from "../../configs/vite.config";
 
 export default viteConfig;

packages/interactions/dev/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../../vite.config";
+import { viteConfig } from "../../../configs/vite.config";
 
 export default viteConfig;

packages/interactions/jest.config.cjs

@@ -1,4 +1,4 @@
-const baseJest = require("../../jest.config.cjs");
+const baseJest = require("../../configs/jest.config.cjs");
 
 module.exports = {
   ...baseJest

packages/interactions/tsup.config.ts

@@ -1,3 +1,3 @@
-import defaultConfig from "../../tsup.config";
+import defaultConfig from "../../configs/tsup.config";
 
 export default defaultConfig;

packages/interactions/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../vite.config";
+import { viteConfig } from "../../configs/vite.config";
 
 export default viteConfig;

packages/label/dev/vite.config.ts

@@ -1,3 +1,3 @@
-import { viteConfig } from "../../../vite.config";
+import { viteConfig } from "../../../configs/vite.config";
 
 export default viteConfig;

packages/label/jest.config.cjs

@@ -1,4 +1,4 @@
-const baseJest = require("../../jest.config.cjs");
+const baseJest = require("../../configs/jest.config.cjs");
 
 module.exports = {
   ...baseJest

packages/label/jest.config.ssr.cjs

@@ -0,0 +1,5 @@
+const baseJest = require("../../configs/jest.config.ssr.cjs");
+
+module.exports = {
+  ...baseJest
+};

packages/label/package.json

@@ -34,8 +34,9 @@
     "build": "tsup",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
     "dev": "vite serve dev --host",
-    "test": "jest --passWithNoTests",
-    "test:watch": "jest --watch --passWithNoTests",
+    "test": "pnpm run test:client && pnpm run test:ssr",
+    "test:client": "jest --passWithNoTests",
+    "test:ssr": "jest --passWithNoTests --config jest.config.ssr.cjs",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {

packages/label/test/ssr/createField.ssr.test.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2022 Solid Aria Working Group.
+ * MIT License
+ *
+ * Portions of this file are based on code from react-spectrum.
+ * Copyright 2020 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { ValidationState } from "@solid-aria/types";
+import { Show } from "solid-js";
+import { renderToString } from "solid-js/web";
+
+import { createField } from "../../src";
+
+interface TextFieldProps {
+  label: string;
+  value?: string;
+  description?: string;
+  errorMessage?: string;
+  validationState?: ValidationState;
+}
+
+const TextInputField = (props: TextFieldProps) => {
+  let ref: HTMLInputElement | undefined;
+
+  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField(props);
+
+  return (
+    <div>
+      <label {...labelProps}>{props.label}</label>
+      <input {...fieldProps} ref={ref} />
+      <div {...descriptionProps}>{props.description}</div>
+      <Show when={props.validationState === "invalid"}>
+        <div {...errorMessageProps}>{props.errorMessage}</div>
+      </Show>
+    </div>
+  );
+};
+
+describe("createField", () => {
+  it("should return label props", () => {
+    // renderToString is important to set "hydrable context" for createUniqueId
+    renderToString(() => {
+      const { labelProps, fieldProps } = createField({ label: "Test" });
+
+      expect(labelProps.id).toBeDefined();
+      expect(fieldProps.id).toBeDefined();
+
+      return "";
+    });
+  });
+
+  it("should label both the description and error message at the same time", () => {
+    const string = renderToString(() => (
+      <TextInputField
+        label="Test label"
+        value="Test value"
+        description="I describe the field."
+        errorMessage="I'm a helpful error for the field."
+        validationState="invalid"
+      />
+    ));
+
+    expect(string).toBe(
+      `<div data-hk="0-5"><label id="solid-aria-0-1" for="solid-aria-0-0">Test label</label><input id="solid-aria-0-0" aria-labelledby="solid-aria-0-1" aria-describedby="solid-aria-0-3 solid-aria-0-4"><div id="solid-aria-0-3">I describe the field.</div><!--#--><div data-hk="0-6-0" id="solid-aria-0-4">I'm a helpful error for the field.</div><!--/--></div>`
+    );
+  });
+});