Skip to content

Commit

Permalink
fix: tag-level deep link escaping inconsistencies (via swagger-api#5117)
Browse files Browse the repository at this point in the history 
* add test cases

* update tag deeplinking implementation

* MOAR test updates

* update operation-tag.jsx
  • Loading branch information
@shockey @deepjia
shockey authored and deepjia committed Feb 25, 2019
1 parent a182212 commit 8936590
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 33 deletions.
11 changes: 7 additions & 4 deletions src/core/components/operation-tag.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react"
import PropTypes from "prop-types"
import ImPropTypes from "react-immutable-proptypes"
import Im from "immutable"
import { createDeepLinkPath, sanitizeUrl } from "core/utils"
import { createDeepLinkPath, escapeDeepLinkPath, sanitizeUrl } from "core/utils"

export default class OperationTag extends React.Component {

Expand Down Expand Up @@ -52,7 +52,7 @@ export default class OperationTag extends React.Component {
let tagExternalDocsDescription = tagObj.getIn(["tagDetails", "externalDocs", "description"])
let tagExternalDocsUrl = tagObj.getIn(["tagDetails", "externalDocs", "url"])

let isShownKey = ["operations-tag", createDeepLinkPath(tag)]
let isShownKey = ["operations-tag", tag]
let showTag = layoutSelectors.isShown(isShownKey, docExpansion === "full" || docExpansion === "list")

return (
Expand All @@ -61,11 +61,14 @@ export default class OperationTag extends React.Component {
<h4
onClick={() => layoutActions.show(isShownKey, !showTag)}
className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }
id={isShownKey.join("-")}>
id={isShownKey.map(v => escapeDeepLinkPath(v)).join("-")}
data-tag={tag}
data-is-open={showTag}
>
<DeepLink
enabled={isDeepLinkingEnabled}
isShown={showTag}
path={tag}
path={createDeepLinkPath(tag)}
text={tag} />
{ !tagDescription ? <small></small> :
<small>
Expand Down
132 changes: 103 additions & 29 deletions test/e2e-cypress/tests/features/deep-linking.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ describe("Deep linking feature", () => {
const swagger2BaseUrl = "/?deepLinking=true&url=/documents/features/deep-linking.swagger.yaml"

describe("regular Operation", () => {
BaseDeeplinkTestFactory({
OperationDeeplinkTestFactory({
baseUrl: swagger2BaseUrl,
elementToGet: ".opblock-get",
correctElementId: "operations-myTag-myOperation",
Expand All @@ -16,7 +16,7 @@ describe("Deep linking feature", () => {
const elementToGet = ".opblock-post"
const correctFragment = "#/my%20Tag/my%20Operation"

BaseDeeplinkTestFactory({
OperationDeeplinkTestFactory({
baseUrl: swagger2BaseUrl,
elementToGet,
correctElementId: "operations-my_Tag-my_Operation",
Expand All @@ -42,7 +42,7 @@ describe("Deep linking feature", () => {
})

describe("Operation with underscores in tag+id", () => {
BaseDeeplinkTestFactory({
OperationDeeplinkTestFactory({
baseUrl: swagger2BaseUrl,
elementToGet: ".opblock-patch",
correctElementId: "operations-underscore_Tag-underscore_Operation",
Expand All @@ -52,7 +52,7 @@ describe("Deep linking feature", () => {
})

describe("Operation with UTF-16 characters", () => {
BaseDeeplinkTestFactory({
OperationDeeplinkTestFactory({
baseUrl: swagger2BaseUrl,
elementToGet: ".opblock-head",
correctElementId: "operations-шеллы-пошел",
Expand All @@ -62,7 +62,7 @@ describe("Deep linking feature", () => {
})

describe("Operation with no operationId", () => {
BaseDeeplinkTestFactory({
OperationDeeplinkTestFactory({
baseUrl: swagger2BaseUrl,
elementToGet: ".opblock-put",
correctElementId: "operations-tagTwo-put_noOperationId",
Expand All @@ -71,24 +71,33 @@ describe("Deep linking feature", () => {
})
})

describe("regular Operation with `docExpansion: none` enabled", function() {
it("should expand a tag", () => {
cy.visit(`${swagger2BaseUrl}&docExpansion=none#/myTag`)
.get(`.opblock-tag-section.is-open`)
.should("have.length", 1)
describe("regular Tag", () => {
TagDeeplinkTestFactory({
isTagCase: true,
baseUrl: swagger2BaseUrl,
elementToGet: `.opblock-tag[data-tag="myTag"][data-is-open="true"]`,
correctElementId: "operations-tag-myTag",
correctFragment: "#/myTag",
correctHref: "#/myTag"
})
it("should expand an operation", () => {
cy.visit(`${swagger2BaseUrl}&docExpansion=none#/myTag/myOperation`)
.get(`.opblock.is-open`)
.should("have.length", 1)
})

describe("Tag with whitespace", () => {
TagDeeplinkTestFactory({
isTagCase: true,
baseUrl: swagger2BaseUrl,
elementToGet: `.opblock-tag[data-tag="my Tag"][data-is-open="true"]`,
correctElementId: "operations-tag-my_Tag",
correctFragment: "#/my%20Tag",
correctHref: "#/my%20Tag"
})
})
})
describe("in OpenAPI 3", () => {
const openAPI3BaseUrl = "/?deepLinking=true&url=/documents/features/deep-linking.openapi.yaml"

describe("regular Operation", () => {
BaseDeeplinkTestFactory({
OperationDeeplinkTestFactory({
baseUrl: openAPI3BaseUrl,
elementToGet: ".opblock-get",
correctElementId: "operations-myTag-myOperation",
Expand All @@ -101,7 +110,7 @@ describe("Deep linking feature", () => {
const elementToGet = ".opblock-post"
const correctFragment = "#/my%20Tag/my%20Operation"

BaseDeeplinkTestFactory({
OperationDeeplinkTestFactory({
baseUrl: openAPI3BaseUrl,
elementToGet: ".opblock-post",
correctElementId: "operations-my_Tag-my_Operation",
Expand All @@ -128,7 +137,7 @@ describe("Deep linking feature", () => {
})

describe("Operation with underscores in tag+id", () => {
BaseDeeplinkTestFactory({
OperationDeeplinkTestFactory({
baseUrl: openAPI3BaseUrl,
elementToGet: ".opblock-patch",
correctElementId: "operations-underscore_Tag-underscore_Operation",
Expand All @@ -138,7 +147,7 @@ describe("Deep linking feature", () => {
})

describe("Operation with UTF-16 characters", () => {
BaseDeeplinkTestFactory({
OperationDeeplinkTestFactory({
baseUrl: openAPI3BaseUrl,
elementToGet: ".opblock-head",
correctElementId: "operations-шеллы-пошел",
Expand All @@ -148,7 +157,7 @@ describe("Deep linking feature", () => {
})

describe("Operation with no operationId", () => {
BaseDeeplinkTestFactory({
OperationDeeplinkTestFactory({
baseUrl: openAPI3BaseUrl,
elementToGet: ".opblock-put",
correctElementId: "operations-tagTwo-put_noOperationId",
Expand All @@ -157,22 +166,31 @@ describe("Deep linking feature", () => {
})
})

describe("regular Operation with `docExpansion: none` enabled", function () {
it("should expand a tag", () => {
cy.visit(`${openAPI3BaseUrl}&docExpansion=none#/myTag`)
.get(`.opblock-tag-section.is-open`)
.should("have.length", 1)
describe("regular Tag", () => {
TagDeeplinkTestFactory({
isTagCase: true,
baseUrl: openAPI3BaseUrl,
elementToGet: `.opblock-tag[data-tag="myTag"][data-is-open="true"]`,
correctElementId: "operations-tag-myTag",
correctFragment: "#/myTag",
correctHref: "#/myTag"
})
it("should expand an operation", () => {
cy.visit(`${openAPI3BaseUrl}&docExpansion=none#/myTag/myOperation`)
.get(`.opblock.is-open`)
.should("have.length", 1)
})

describe("Tag with whitespace", () => {
TagDeeplinkTestFactory({
isTagCase: true,
baseUrl: openAPI3BaseUrl,
elementToGet: `.opblock-tag[data-tag="my Tag"][data-is-open="true"]`,
correctElementId: "operations-tag-my_Tag",
correctFragment: "#/my%20Tag",
correctHref: "#/my%20Tag"
})
})
})
})

function BaseDeeplinkTestFactory({ baseUrl, elementToGet, correctElementId, correctFragment, correctHref }) {
function OperationDeeplinkTestFactory({ baseUrl, elementToGet, correctElementId, correctFragment, correctHref }) {
it("should generate a correct element ID", () => {
cy.visit(baseUrl)
.get(elementToGet)
Expand Down Expand Up @@ -210,4 +228,60 @@ function BaseDeeplinkTestFactory({ baseUrl, elementToGet, correctElementId, corr
.window()
.should("have.deep.property", "location.hash", correctFragment)
})

it("should expand a tag with docExpansion disabled", () => {
cy.visit(`${baseUrl}&docExpansion=none${correctFragment}`)
.get(`.opblock-tag-section.is-open`)
.should("have.length", 1)
})

it("should expand an operation with docExpansion disabled", () => {
cy.visit(`${baseUrl}&docExpansion=none${correctFragment}`)
.get(`.opblock.is-open`)
.should("have.length", 1)
})
}

function TagDeeplinkTestFactory({ baseUrl, elementToGet, correctElementId, correctFragment, correctHref, isTagCase = false }) {
it("should generate a correct element ID", () => {
cy.visit(baseUrl)
.get(elementToGet)
.should("have.id", correctElementId)
})

it("should add the correct element fragment to the URL when expanded", () => {
cy.visit(baseUrl)
.get(elementToGet)
.click()
.click() // tags need two clicks because they're expanded by default
.window()
.should("have.deep.property", "location.hash", correctFragment)
})

it("should provide an anchor link that has the correct fragment as href", () => {
cy.visit(baseUrl)
.get(elementToGet)
.find("a")
.should("have.attr", "href", correctHref)
})

it("should expand the tag when reloaded", () => {
cy.visit(`${baseUrl}${correctFragment}`)
.get(`${elementToGet}[data-is-open="true"]`)
.should("exist")
})

it("should retain the correct fragment when reloaded", () => {
cy.visit(`${baseUrl}${correctFragment}`)
.reload()
.should("exist")
.window()
.should("have.deep.property", "location.hash", correctFragment)
})

it("should expand a tag with docExpansion disabled", () => {
cy.visit(`${baseUrl}&docExpansion=none${correctFragment}`)
.get(`.opblock-tag-section.is-open`)
.should("have.length", 1)
})
}

0 comments on commit 8936590

Please sign in to comment.