Sort place page sub-topics alphabetically (#1057)

* Sort place page sub-topics alphabetically * fix tests
datacommonsorg · Jul 16, 2021 · 4f6b96b · 4f6b96b
1 parent b540019
commit 4f6b96b
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git a/server/webdriver_tests/place_explorer_i18n_test.py b/server/webdriver_tests/place_explorer_i18n_test.py
@@ -106,13 +106,13 @@ def test_demographics_link_in_fr(self):
 
         # Assert chart title is correct.
         chart_title = self.driver.find_element_by_xpath(
-            '//*[@id="main-pane"]/section[4]/div/div[2]/div/h4')
+            '//*[@id="main-pane"]/section[5]/div/div[2]/div/h4')
         self.assertEqual(chart_title.text,
                          'Population urbaine et rurale : autres pays(2019)')
 
         # Click through to ranking
         pop_growth_rate_chip = self.driver.find_element_by_xpath(
-            '//*[@id="main-pane"]/section[2]/div/div[1]/div/div/div/div/a')
+            '//*[@id="main-pane"]/section[6]/div/div[1]/div/div/div/div/a')
         self.assertEqual(pop_growth_rate_chip.text,
                          'Taux de croissance de la population')
         pop_growth_rate_chip.click()

diff --git a/server/webdriver_tests/place_explorer_test.py b/server/webdriver_tests/place_explorer_test.py
@@ -134,7 +134,7 @@ def test_demographics_link(self):
         """
         Test the demographics link can work correctly.
         """
-        CHART_TITLE = "Gender distribution: states near California(2019)"
+        CHART_TITLE = "Median age by gender: states near California(2019)"
         # Load California page.
         self.driver.get(self.url_ + CA_URL)
 
@@ -185,5 +185,5 @@ def test_demographics_redirect_link(self):
             '//*[@id="main-pane"]/section[4]/div/div[2]/div/h4').text
 
         # Assert chart title is correct.
-        self.assertEqual("Gender distribution: states near California(2019)",
+        self.assertEqual("Median age by gender: states near California(2019)",
                          chart_title)
diff --git a/static/js/place/main.tsx b/static/js/place/main.tsx
@@ -89,6 +89,8 @@ class MainPane extends React.Component<MainPanePropType> {
     const topicData = this.props.pageChart[this.props.topic];
     const currentPageTopic = this.props.topic;
     const isOverview = currentPageTopic === "Overview";
+    const topics = Object.keys(topicData);
+    topics.sort();
     return (
       <RawIntlProvider value={intl}>
         {this.props.isUsaPlace &&
@@ -97,7 +99,7 @@ class MainPane extends React.Component<MainPanePropType> {
             // Only Show map and ranking for US places.
             <Overview dcid={this.props.dcid} locale={this.props.locale} />
           )}
-        {Object.keys(topicData).map((topic: string) => {
+        {topics.map((topic: string) => {
           let subtopicHeader: JSX.Element;
           if (isOverview) {
             subtopicHeader = (

diff --git a/static/js/place/topic_menu.tsx b/static/js/place/topic_menu.tsx
@@ -100,6 +100,7 @@ class Menu extends React.Component<MenuPropsType> {
         )}
         {categories.map((category: string) => {
           let topics = Object.keys(this.props.pageChart[category]);
+          topics.sort();
           if (category === "Overview") {
             topics = topics.map((t) => this.props.categories[t]);
           }