FIX: Safari iOS page title and url regression when sharing (#11699)

This commit is contained in:
Penar Musaraj 2021-01-13 11:10:43 -05:00 committed by GitHub
parent e52ccaa51f
commit 26337408a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 0 deletions

View File

@ -0,0 +1,20 @@
import { getAbsoluteURL } from "discourse-common/lib/get-url";
export default {
name: "opengraph-tag-updater",
initialize(container) {
// workaround for Safari on iOS 14.3
// seems it has started using opengraph tags when sharing
let appEvents = container.lookup("service:app-events");
const ogTitle = document.querySelector("meta[property='og:title']"),
ogUrl = document.querySelector("meta[property='og:url']");
if (ogTitle && ogUrl) {
appEvents.on("page:changed", (data) => {
ogTitle.setAttribute("content", data.title);
ogUrl.setAttribute("content", getAbsoluteURL(data.url));
});
}
},
};

View File

@ -0,0 +1,32 @@
import { click, visit } from "@ember/test-helpers";
import { acceptance } from "discourse/tests/helpers/qunit-helpers";
import { test } from "qunit";
acceptance("Opengraph Tag Updater", function (needs) {
needs.pretender((server, helper) => {
server.get("/about", () => {
return helper.response({});
});
});
test("updates OG title and URL", async function (assert) {
await visit("/");
await click("#toggle-hamburger-menu");
await click("a.about-link");
assert.equal(
document
.querySelector("meta[property='og:title']")
.getAttribute("content"),
document.title,
"it should update OG title"
);
assert.ok(
document
.querySelector("meta[property='og:url']")
.getAttribute("content")
.endsWith("/about"),
"it should update OG URL"
);
});
});

View File

@ -6,6 +6,8 @@
<%= javascript_include_tag "test_helper" %> <%= javascript_include_tag "test_helper" %>
<%= csrf_meta_tags %> <%= csrf_meta_tags %>
<script src="<%= ExtraLocalesController.url('admin') %>"></script> <script src="<%= ExtraLocalesController.url('admin') %>"></script>
<meta property="og:title" content="">
<meta property="og:url" content="">
</head> </head>
<body> <body>
<div id="qunit"></div> <div id="qunit"></div>