From 2822e114e3153a5f30dffe1a1c4712c429d06274 Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Tue, 15 Nov 2022 16:12:46 +0100 Subject: [PATCH] Stories for components with Relay fragments --- frontend/package-lock.json | 48 +++++ frontend/package.json | 2 + frontend/src/components/BrowserSession.tsx | 2 +- frontend/src/components/CompatSsoLogin.tsx | 2 +- frontend/src/components/LoadingScreen.tsx | 2 +- .../src/components/OAuth2Session.stories.tsx | 95 +++++++++ frontend/src/components/OAuth2Session.tsx | 2 +- .../OAuth2SessionStoriesQuery.graphql.ts | 197 ++++++++++++++++++ .../__snapshots__/LoadingScreen.test.tsx.snap | 2 +- frontend/src/index.css | 4 + 10 files changed, 351 insertions(+), 5 deletions(-) create mode 100644 frontend/src/components/OAuth2Session.stories.tsx create mode 100644 frontend/src/components/__generated__/OAuth2SessionStoriesQuery.graphql.ts diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 799e6105..1811e558 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -31,6 +31,7 @@ "@types/react-relay": "^14.1.2", "@types/react-test-renderer": "^18.0.0", "@types/relay-runtime": "^14.1.4", + "@types/relay-test-utils": "^14.1.0", "@vitejs/plugin-react": "^2.2.0", "autoprefixer": "^10.4.13", "babel-plugin-relay": "^14.1.0", @@ -44,6 +45,7 @@ "prettier": "^2.7.1", "react-test-renderer": "^18.2.0", "relay-compiler": "^14.1.0", + "relay-test-utils": "^14.1.0", "storybook": "^7.0.0-alpha.49", "tailwindcss": "^3.2.2", "typescript": "^4.6.4", @@ -7514,6 +7516,17 @@ "integrity": "sha512-463BgnIkwthKkRsBNNwU9xJ2z5qJkX9l6qCtiMO01KOm+f4V8n8Z4kLHzn7d2qXYBdRgReisi6DlG7wrwACEFQ==", "dev": true }, + "node_modules/@types/relay-test-utils": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@types/relay-test-utils/-/relay-test-utils-14.1.0.tgz", + "integrity": "sha512-qwt9JDaNFa3VNTYC5FKvDE38a3Blz8Pav95xvqhY2g2ECoz47G6oocVR6qySTNQ/1kp2rFvhGG4TtyThlQBh5A==", + "dev": true, + "dependencies": { + "@types/react": "*", + "@types/react-relay": "*", + "@types/relay-runtime": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", @@ -20140,6 +20153,18 @@ "invariant": "^2.2.4" } }, + "node_modules/relay-test-utils": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/relay-test-utils/-/relay-test-utils-14.1.0.tgz", + "integrity": "sha512-4Ftqc+LnHyhqU2LNOtD/UEqqutFF9qJn+xqn+xfxgUGjU4X42vVhAN8KdG3q4KqE142EX0S8oPX5kA0FyFFiWg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.0.0", + "fbjs": "^3.0.2", + "invariant": "^2.2.4", + "relay-runtime": "14.1.0" + } + }, "node_modules/remark-external-links": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/remark-external-links/-/remark-external-links-8.0.0.tgz", @@ -28884,6 +28909,17 @@ "integrity": "sha512-463BgnIkwthKkRsBNNwU9xJ2z5qJkX9l6qCtiMO01KOm+f4V8n8Z4kLHzn7d2qXYBdRgReisi6DlG7wrwACEFQ==", "dev": true }, + "@types/relay-test-utils": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/@types/relay-test-utils/-/relay-test-utils-14.1.0.tgz", + "integrity": "sha512-qwt9JDaNFa3VNTYC5FKvDE38a3Blz8Pav95xvqhY2g2ECoz47G6oocVR6qySTNQ/1kp2rFvhGG4TtyThlQBh5A==", + "dev": true, + "requires": { + "@types/react": "*", + "@types/react-relay": "*", + "@types/relay-runtime": "*" + } + }, "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", @@ -38084,6 +38120,18 @@ "invariant": "^2.2.4" } }, + "relay-test-utils": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/relay-test-utils/-/relay-test-utils-14.1.0.tgz", + "integrity": "sha512-4Ftqc+LnHyhqU2LNOtD/UEqqutFF9qJn+xqn+xfxgUGjU4X42vVhAN8KdG3q4KqE142EX0S8oPX5kA0FyFFiWg==", + "dev": true, + "requires": { + "@babel/runtime": "^7.0.0", + "fbjs": "^3.0.2", + "invariant": "^2.2.4", + "relay-runtime": "14.1.0" + } + }, "remark-external-links": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/remark-external-links/-/remark-external-links-8.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 3da0c907..a8ea0396 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -38,6 +38,7 @@ "@types/react-relay": "^14.1.2", "@types/react-test-renderer": "^18.0.0", "@types/relay-runtime": "^14.1.4", + "@types/relay-test-utils": "^14.1.0", "@vitejs/plugin-react": "^2.2.0", "autoprefixer": "^10.4.13", "babel-plugin-relay": "^14.1.0", @@ -51,6 +52,7 @@ "prettier": "^2.7.1", "react-test-renderer": "^18.2.0", "relay-compiler": "^14.1.0", + "relay-test-utils": "^14.1.0", "storybook": "^7.0.0-alpha.49", "tailwindcss": "^3.2.2", "typescript": "^4.6.4", diff --git a/frontend/src/components/BrowserSession.tsx b/frontend/src/components/BrowserSession.tsx index 5ce6caff..ff437e9f 100644 --- a/frontend/src/components/BrowserSession.tsx +++ b/frontend/src/components/BrowserSession.tsx @@ -36,7 +36,7 @@ const BrowserSession: React.FC = ({ session, isCurrent }) => { ); return ( -
+
{isCurrent &&
Current session
}
Started: {data.createdAt} diff --git a/frontend/src/components/CompatSsoLogin.tsx b/frontend/src/components/CompatSsoLogin.tsx index ae516600..eba90067 100644 --- a/frontend/src/components/CompatSsoLogin.tsx +++ b/frontend/src/components/CompatSsoLogin.tsx @@ -62,7 +62,7 @@ const CompatSsoLogin: React.FC = ({ login }) => { } return ( -
+
Requested: {data.createdAt}
diff --git a/frontend/src/components/LoadingScreen.tsx b/frontend/src/components/LoadingScreen.tsx index 6071f39a..5503d89a 100644 --- a/frontend/src/components/LoadingScreen.tsx +++ b/frontend/src/components/LoadingScreen.tsx @@ -15,7 +15,7 @@ import LoadingSpinner from "./LoadingSpinner"; const LoadingScreen: React.FC = () => ( -
+
); diff --git a/frontend/src/components/OAuth2Session.stories.tsx b/frontend/src/components/OAuth2Session.stories.tsx new file mode 100644 index 00000000..db0c1a16 --- /dev/null +++ b/frontend/src/components/OAuth2Session.stories.tsx @@ -0,0 +1,95 @@ +// Copyright 2022 The Matrix.org Foundation C.I.C. +// +// Licensed 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 CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import type { Meta, StoryObj } from "@storybook/react"; +import { + graphql, + RelayEnvironmentProvider, + useLazyLoadQuery, +} from "react-relay"; +import { createMockEnvironment, MockPayloadGenerator } from "relay-test-utils"; + +import OAuth2Session from "./OAuth2Session"; +import { OAuth2SessionStoriesQuery } from "./__generated__/OAuth2SessionStoriesQuery.graphql"; + +type TemplateProps = { + scope: string; + clientId: string; + clientName: string; + clientUri: string; +}; + +const Template: React.FC = ({ + scope, + clientId, + clientName, + clientUri, +}) => { + const environment = createMockEnvironment(); + environment.mock.queueOperationResolver((operation) => + MockPayloadGenerator.generate(operation, { + Oauth2Session() { + return { + scope, + }; + }, + + Oauth2Client() { + return { + clientId, + clientName, + clientUri, + }; + }, + }) + ); + + const Render = () => { + const data = useLazyLoadQuery( + graphql` + query OAuth2SessionStoriesQuery @relay_test_operation { + session: node(id: "test-id") { + ...OAuth2Session_session + } + } + `, + {} + ); + + return ; + }; + + return ( + + + + ); +}; + +const meta: Meta = { + title: "Components/OAuth 2.0 Session", + component: Template, + tags: ["docsPage"], + args: { + scope: "openid", + clientId: "aaabbbcccdddeee", + clientName: "My client", + clientUri: "https://example.com/", + }, +}; + +export default meta; +type Story = StoryObj; + +export const Basic: Story = {}; diff --git a/frontend/src/components/OAuth2Session.tsx b/frontend/src/components/OAuth2Session.tsx index 1ee29ba1..82c8270d 100644 --- a/frontend/src/components/OAuth2Session.tsx +++ b/frontend/src/components/OAuth2Session.tsx @@ -37,7 +37,7 @@ const OAuth2Session: React.FC = ({ session }) => { ); return ( -
+
Client ID:{" "} {data.client.clientId} diff --git a/frontend/src/components/__generated__/OAuth2SessionStoriesQuery.graphql.ts b/frontend/src/components/__generated__/OAuth2SessionStoriesQuery.graphql.ts new file mode 100644 index 00000000..537ef58f --- /dev/null +++ b/frontend/src/components/__generated__/OAuth2SessionStoriesQuery.graphql.ts @@ -0,0 +1,197 @@ +/** + * @generated SignedSource<<82179715f61e6a03437d696941ceaf16>> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ +/* eslint-disable */ +// @ts-nocheck + +import { ConcreteRequest, Query } from 'relay-runtime'; +import { FragmentRefs } from "relay-runtime"; +export type OAuth2SessionStoriesQuery$variables = {}; +export type OAuth2SessionStoriesQuery$data = { + readonly session: { + readonly " $fragmentSpreads": FragmentRefs<"OAuth2Session_session">; + } | null; +}; +export type OAuth2SessionStoriesQuery = { + response: OAuth2SessionStoriesQuery$data; + variables: OAuth2SessionStoriesQuery$variables; +}; + +const node: ConcreteRequest = (function(){ +var v0 = [ + { + "kind": "Literal", + "name": "id", + "value": "test-id" + } +], +v1 = { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "id", + "storageKey": null +}, +v2 = { + "enumValues": null, + "nullable": false, + "plural": false, + "type": "String" +}, +v3 = { + "enumValues": null, + "nullable": false, + "plural": false, + "type": "ID" +}; +return { + "fragment": { + "argumentDefinitions": [], + "kind": "Fragment", + "metadata": null, + "name": "OAuth2SessionStoriesQuery", + "selections": [ + { + "alias": "session", + "args": (v0/*: any*/), + "concreteType": null, + "kind": "LinkedField", + "name": "node", + "plural": false, + "selections": [ + { + "args": null, + "kind": "FragmentSpread", + "name": "OAuth2Session_session" + } + ], + "storageKey": "node(id:\"test-id\")" + } + ], + "type": "RootQuery", + "abstractKey": null + }, + "kind": "Request", + "operation": { + "argumentDefinitions": [], + "kind": "Operation", + "name": "OAuth2SessionStoriesQuery", + "selections": [ + { + "alias": "session", + "args": (v0/*: any*/), + "concreteType": null, + "kind": "LinkedField", + "name": "node", + "plural": false, + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "__typename", + "storageKey": null + }, + (v1/*: any*/), + { + "kind": "InlineFragment", + "selections": [ + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "scope", + "storageKey": null + }, + { + "alias": null, + "args": null, + "concreteType": "Oauth2Client", + "kind": "LinkedField", + "name": "client", + "plural": false, + "selections": [ + (v1/*: any*/), + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "clientId", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "clientName", + "storageKey": null + }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "clientUri", + "storageKey": null + } + ], + "storageKey": null + } + ], + "type": "Oauth2Session", + "abstractKey": null + } + ], + "storageKey": "node(id:\"test-id\")" + } + ] + }, + "params": { + "cacheID": "2b2911cfb421c557245313732f0813e0", + "id": null, + "metadata": { + "relayTestingSelectionTypeInfo": { + "session": { + "enumValues": null, + "nullable": true, + "plural": false, + "type": "Node" + }, + "session.__typename": (v2/*: any*/), + "session.client": { + "enumValues": null, + "nullable": false, + "plural": false, + "type": "Oauth2Client" + }, + "session.client.clientId": (v2/*: any*/), + "session.client.clientName": { + "enumValues": null, + "nullable": true, + "plural": false, + "type": "String" + }, + "session.client.clientUri": { + "enumValues": null, + "nullable": true, + "plural": false, + "type": "Url" + }, + "session.client.id": (v3/*: any*/), + "session.id": (v3/*: any*/), + "session.scope": (v2/*: any*/) + } + }, + "name": "OAuth2SessionStoriesQuery", + "operationKind": "query", + "text": "query OAuth2SessionStoriesQuery {\n session: node(id: \"test-id\") {\n __typename\n ...OAuth2Session_session\n id\n }\n}\n\nfragment OAuth2Session_session on Oauth2Session {\n id\n scope\n client {\n id\n clientId\n clientName\n clientUri\n }\n}\n" + } +}; +})(); + +(node as any).hash = "d60f8f0abfc0b70236d89328bc5c0e85"; + +export default node; diff --git a/frontend/src/components/__snapshots__/LoadingScreen.test.tsx.snap b/frontend/src/components/__snapshots__/LoadingScreen.test.tsx.snap index 7d0beed3..f9a2f9a5 100644 --- a/frontend/src/components/__snapshots__/LoadingScreen.test.tsx.snap +++ b/frontend/src/components/__snapshots__/LoadingScreen.test.tsx.snap @@ -2,7 +2,7 @@ exports[`render 1`] = `